/**
 * SOCIAL-008: YouTube Embed Styles
 *
 * Facade pattern: thumbnail + play button overlay.
 * Responsive 16:9 aspect ratio for both facade and iframe.
 */

@layer components {
	/* ── Grid Layout ──────────────────────────────────────────────── */
	.youtube-grid {
		display: grid;
		gap: var(--space-5);
	}

	.youtube-grid--single {
		max-width: 800px;
	}

	.youtube-grid--multi {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	}

	/* ── Facade (thumbnail + play button) ─────────────────────────── */
	.youtube-facade {
		position: relative;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		border-radius: 8px;
		cursor: pointer;
		background: var(--color-text);
	}

	.youtube-facade__thumb {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: opacity 0.2s ease;
	}

	.youtube-facade:hover .youtube-facade__thumb,
	.youtube-facade:focus-within .youtube-facade__thumb {
		opacity: 0.8;
	}

	.youtube-facade__play {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		background: none;
		padding: 0;
		cursor: pointer;
		transition: transform 0.2s ease;
	}

	.youtube-facade__play svg {
		filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
		transition: transform 0.2s ease;
	}

	.youtube-facade:hover .youtube-facade__play svg {
		transform: scale(1.1);
	}

	.youtube-facade__play:focus-visible {
		outline: 2px solid var(--color-primary);
		outline-offset: -2px;
		border-radius: 8px;
	}

	/* ── Iframe (replaces facade on click) ────────────────────────── */
	.youtube-iframe {
		aspect-ratio: 16 / 9;
		width: 100%;
		border: none;
		border-radius: 8px;
	}

	/* ── Card wrapper (facade + title) ────────────────────────────── */
	.youtube-card {
		display: flex;
		flex-direction: column;
	}

	.youtube-card__title {
		margin: var(--space-2) 0 0;
		font-size: 0.8125rem;
		line-height: 1.4;
		color: var(--color-text-secondary);
	}

	/* ── Section spacing ──────────────────────────────────────────── */
	.youtube-videos-section {
		margin-block: var(--space-7);
	}

	.youtube-videos-section .page-section__title {
		color: var(--color-text);
	}
}