/**
 * Social Video Embed — shared wrapper.
 *
 * YouTube is the only platform where we own the iframe, so it is the only one
 * given a hard 9:16 box. TikTok and Instagram return a blockquote that their own
 * embed.js replaces with a sized iframe at runtime; we constrain width and let
 * their script own the height rather than fight it.
 */

.svp-embed {
	--svp-max-width: 340px;
	max-width: var(--svp-max-width);
	margin: 1.5em auto;
	width: 100%;
}

.svp-embed .svp-inner {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: 12px;
	background: #000;
}

/* ---- YouTube: forced 9:16 ---- */

.svp-embed--youtube .svp-inner {
	aspect-ratio: 9 / 16;
}

.svp-embed--youtube .svp-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Fallback for browsers without aspect-ratio. */
@supports not (aspect-ratio: 9 / 16) {
	.svp-embed--youtube .svp-inner {
		height: 0;
		padding-bottom: 177.7778%;
	}
}

/* Mask over YouTube's title / channel-avatar strip. */
.svp-embed .svp-mask {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: #000;
	pointer-events: none;
	z-index: 2;
}

/* Custom fullscreen button, shown only when native controls are hidden. */
.svp-embed .svp-fs,
.svp-tile .svp-fs {
	position: absolute;
	right: 8px;
	bottom: 8px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.svp-embed:hover .svp-fs,
.svp-embed .svp-fs:focus-visible,
.svp-tile:hover .svp-fs,
.svp-tile .svp-fs:focus-visible {
	opacity: 1;
}

/* ---- TikTok / Instagram: provider script controls the height ---- */

.svp-embed--tiktok .svp-inner,
.svp-embed--instagram .svp-inner {
	background: transparent;
	border-radius: 0;
}

.svp-embed--tiktok .svp-inner iframe,
.svp-embed--instagram .svp-inner iframe,
.svp-embed--tiktok blockquote,
.svp-embed--instagram blockquote {
	max-width: 100% !important;
	min-width: 0 !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ---- Fallbacks and editor notices ---- */

.svp-embed .svp-fallback {
	margin: 0.75em 0 0;
	text-align: center;
	font-size: 0.9em;
}

.svp-embed .svp-fallback--hidden {
	display: none;
}

.svp-embed.svp-embed--failed .svp-inner {
	display: none;
}

.svp-embed.svp-embed--failed .svp-fallback--hidden {
	display: block;
}

.svp-embed .svp-caption {
	margin: 0.6em 0 0;
	text-align: center;
	font-size: 0.9em;
	opacity: 0.8;
}

.svp-embed .svp-reason {
	display: block;
	margin-top: 0.25em;
	font-size: 0.85em;
	opacity: 0.7;
}

.svp-notice {
	padding: 0.75em 1em;
	border-left: 4px solid #d63638;
	background: #fcf0f1;
	color: #1d2327;
	font-size: 0.9em;
}

/* ---- Channel Shorts grid ---- */

.svp-grid {
	--svp-grid-max: 1400px;
	--svp-cols: 5;
	--svp-cols-tablet: 3;
	--svp-cols-mobile: 1;
	display: grid;
	/* Fractional tracks, not percentages: 1fr splits what is left after the gaps
	   are subtracted, so the row always fits. Percentage widths plus a gap would
	   overflow the container. */
	grid-template-columns: repeat(var(--svp-cols), minmax(0, 1fr));
	gap: 1.25rem;
	max-width: var(--svp-grid-max);
	margin: 1.5em auto;
}

/* Tablet */
@media (max-width: 900px) {
	.svp-grid {
		grid-template-columns: repeat(var(--svp-cols-tablet), minmax(0, 1fr));
		gap: 1rem;
	}
}

/* Mobile */
@media (max-width: 600px) {
	.svp-grid {
		grid-template-columns: repeat(var(--svp-cols-mobile), minmax(0, 1fr));
		gap: 0.75rem;
	}
}

/* A single-column grid on a phone would otherwise render a full-width 9:16 tile
   taller than the viewport. Cap it and centre it. */
@media (max-width: 600px) {
	.svp-grid[style*="--svp-cols-mobile:1"] .svp-tile {
		max-width: 22rem;
		margin-left: auto;
		margin-right: auto;
		width: 100%;
	}
}

.svp-tile-frame {
	position: relative;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	border-radius: 12px;
	background: #000;
}

@supports not (aspect-ratio: 9 / 16) {
	.svp-tile-frame { height: 0; padding-bottom: 177.7778%; }
}

.svp-tile-play {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	display: block;
}

.svp-tile-play img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease, opacity 0.2s ease;
}

.svp-tile-play:hover img,
.svp-tile-play:focus-visible img {
	transform: scale(1.04);
	opacity: 0.85;
}

.svp-tile-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.svp-tile-icon .svp-yt-bg { fill: #f00; }

.svp-tile-play:hover .svp-tile-icon .svp-yt-bg { fill: #f00; opacity: 0.9; }

/* Once activated the tile holds a live iframe. */
.svp-tile-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.svp-tile-title {
	margin: 0.5em 0 0;
	font-size: 0.85em;
	line-height: 1.35;
	opacity: 0.85;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}