@use '../../../../../../../../../../src/assets/styles/design-tokens';

.recording-layout-step {
	@include design-tokens.ov-page-content;
	@include design-tokens.ov-container;

    justify-content: center;

	.step-header {
		display: flex;
		align-items: flex-start;
		gap: var(--ov-meet-spacing-sm);

		.step-icon {
			@include design-tokens.ov-icon(xl);
			color: var(--ov-meet-icon-recordings);
			margin-top: var(--ov-meet-spacing-xs);
		}

		.step-title-group {
			flex: 1;

			.step-title {
				margin: 0 0 var(--ov-meet-spacing-sm) 0;
				font-size: var(--ov-meet-font-size-xl);
				font-weight: var(--ov-meet-font-weight-medium);
				color: var(--ov-meet-text-primary);
				line-height: var(--ov-meet-line-height-tight);
			}

			.step-description {
				margin: 0;
				font-size: var(--ov-meet-font-size-md);
				color: var(--ov-meet-text-secondary);
				line-height: var(--ov-meet-line-height-normal);
			}
		}
	}

	.step-content {
		margin-bottom: var(--ov-meet-spacing-md);

		.layout-form {
			.options-grid {
				@include design-tokens.ov-grid-responsive(280px);
				gap: var(--ov-meet-spacing-md);

				// Custom layout for recording layout selector
				@include design-tokens.ov-tablet-up {
					grid-template-columns: repeat(3, 1fr);
					max-width: 900px;
					margin: 0 auto;
				}

				// Ensure cards have consistent height with images
				::ng-deep ov-selectable-card {
					.option-card {
						min-height: 200px;

						.card-content {
							.card-image {
								height: 120px;
								margin-bottom: var(--ov-meet-spacing-sm);
							}

							.card-header {
								margin-bottom: var(--ov-meet-spacing-xs);

								.option-title {
									font-size: var(--ov-meet-font-size-md);
									font-weight: var(--ov-meet-font-weight-semibold);
								}
							}

							.option-description {
								font-size: var(--ov-meet-font-size-sm);
								line-height: var(--ov-meet-line-height-normal);
							}
						}
					}
				}
			}
		}
	}

	// Responsive Design
	@include design-tokens.ov-mobile-down {
		.step-header {
			flex-direction: column;
			text-align: center;
			gap: var(--ov-meet-spacing-sm);
			margin-bottom: var(--ov-meet-spacing-lg);

			.step-icon {
				align-self: center;
				margin-top: 0;
			}
		}

		.step-content .layout-form .options-grid {
			grid-template-columns: 1fr;
			gap: var(--ov-meet-spacing-sm);

			::ng-deep ov-selectable-card {
				.option-card {
					min-height: 180px;

					.card-content {
						.card-image {
							height: 100px;
						}

						.card-header .option-title {
							font-size: var(--ov-meet-font-size-sm);
						}

						.option-description {
							font-size: var(--ov-meet-font-size-xs);
						}
					}
				}
			}
		}
	}

	@include design-tokens.ov-tablet-down {
		padding: var(--ov-meet-spacing-xs);

		.step-content .layout-form .options-grid {
			gap: var(--ov-meet-spacing-sm);
			max-width: 600px;
			grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		}
	}
}

// Enhanced animations for step transitions
.fade-in {
	animation: fadeInUp 0.6s ease-out forwards;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}