/* SmartSchools TV – Netflix-style School TV page. Everything is scoped under .sstv. */

.sstv {
	--sstv-accent: #0bb4ef;
	--sstv-bg: #10141f;
	--sstv-bg-2: #171c2a;
	--sstv-text: #ffffff;
	--sstv-muted: #aab2c5;
	--sstv-radius: 6px;
	--sstv-gutter: clamp(16px, 4vw, 56px);

	position: relative;
	background: var(--sstv-bg);
	color: var(--sstv-text);
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	overflow: hidden;
	padding-bottom: 48px;
	-webkit-font-smoothing: antialiased;
}

/* Full-bleed: break out of the theme's content column (doubled class + !important beats
   block-theme "constrained layout" rules and Elementor/MyListing container widths). */
.sstv.sstv {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	margin-top: 0;
	margin-bottom: 0;
}
/* Scrollbar-aware width when the browser supports it (avoids a sideways scroll on desktop). */
@supports (width: 100dvw) {
	html:has(.sstv) { overflow-x: clip; }
}

.sstv *,
.sstv *::before,
.sstv *::after { box-sizing: border-box; }

.sstv h1, .sstv h2, .sstv h3, .sstv p { margin: 0; color: inherit; font-family: inherit; letter-spacing: 0; text-transform: none; }
.sstv a { color: inherit; text-decoration: none; }
.sstv img { max-width: none; }
.sstv button { font-family: inherit; }
.sstv [hidden],
.sstv-modal[hidden],
.sstv-modal [hidden],
.sstv-toast[hidden] { display: none !important; }
.sstv-icon { display: inline-block; vertical-align: middle; flex: 0 0 auto; }

/* ---------- Buttons ---------- */
.sstv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	padding: 0 28px;
	border-radius: 3px;
	border: 1px solid transparent;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	transition: background .2s, border-color .2s, transform .2s, color .2s;
	color: #fff;
	background: transparent;
}
.sstv-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.sstv-btn--primary { background: var(--sstv-accent); color: #fff; }
.sstv-btn--primary:hover { filter: brightness(1.1); transform: translateY(-1px); color: #fff; }
.sstv-btn--ghost { border-color: rgba(255,255,255,.75); }
.sstv-btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.sstv-btn--wa { background: #25d366; color: #fff; }
.sstv-btn--wa:hover { filter: brightness(1.08); color: #fff; }

/* ---------- Hero ---------- */
.sstv-hero {
	position: relative;
	min-height: clamp(520px, 72vh, 760px);
	display: flex;
	align-items: center;
	isolation: isolate;
}
.sstv-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}
.sstv-hero__shade {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(16,20,31,.92) 0%, rgba(16,20,31,.55) 45%, rgba(16,20,31,.25) 100%),
		linear-gradient(0deg, var(--sstv-bg) 0%, rgba(16,20,31,0) 35%);
}
.sstv-hero__inner {
	width: 100%;
	padding: 72px var(--sstv-gutter) 56px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 40px;
	align-items: center;
}
.sstv-channel {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--sstv-accent);
	margin-bottom: 14px;
}
.sstv-hero__title {
	font-size: clamp(34px, 5.2vw, 76px) !important;
	font-weight: 700 !important;
	line-height: 1.05 !important;
	margin-bottom: 18px !important;
	text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.sstv-hero__meta { display: flex; flex-wrap: wrap; color: #e3e7f0; font-size: 14px; margin-bottom: 14px; }
.sstv-hero__meta span + span::before { content: "|"; margin: 0 12px; opacity: .7; }
.sstv-hero__desc { max-width: 520px; color: var(--sstv-muted); margin-bottom: 26px; }
.sstv-hero__actions { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; }

/* Today's recommendation */
.sstv-recs__title { font-size: 22px !important; font-weight: 400 !important; margin-bottom: 14px !important; }
.sstv-recs__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

/* ---------- Cards ---------- */
.sstv-card {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--sstv-radius);
	background: var(--sstv-bg-2);
	aspect-ratio: 16 / 9;
	transition: transform .25s ease, box-shadow .25s ease;
	outline: none;
}
.sstv-card--poster { aspect-ratio: 2 / 3; }
.sstv-card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.sstv-card__blank {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	text-align: center;
	font-weight: 600;
	background: linear-gradient(135deg, var(--sstv-bg-2), #222a3d);
}
.sstv-card__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 60%);
	opacity: 0;
	transition: opacity .25s;
}
.sstv-card__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 52px;
	height: 52px;
	margin: -26px 0 0 -26px;
	border-radius: 50%;
	background: var(--sstv-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: scale(.8);
	transition: opacity .25s, transform .25s;
	box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.sstv-card__play .sstv-icon { width: 26px; height: 26px; margin-left: 3px; }
.sstv-card__info {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .25s, transform .25s;
}
.sstv-card__info strong { font-size: 14px; font-weight: 600; line-height: 1.25; }
.sstv-card__info em { font-style: normal; font-size: 12px; color: #d4d9e6; line-height: 1.3; }

.sstv-card:hover,
.sstv-card:focus-visible { transform: scale(1.04); box-shadow: 0 12px 30px rgba(0,0,0,.5); z-index: 2; }
.sstv-card:focus-visible { box-shadow: 0 0 0 2px var(--sstv-accent), 0 12px 30px rgba(0,0,0,.5); }
.sstv-card:hover img { transform: scale(1.05); }
.sstv-card:hover .sstv-card__shade,
.sstv-card:focus-visible .sstv-card__shade,
.sstv-card:hover .sstv-card__info,
.sstv-card:focus-visible .sstv-card__info,
.sstv-card:hover .sstv-card__play,
.sstv-card:focus-visible .sstv-card__play { opacity: 1; transform: none; }

/* Image failed to load (e.g. a deleted YouTube video): show the title on a plain card. */
.sstv-card.is-noimg { background: linear-gradient(135deg, var(--sstv-bg-2), #222a3d); }
.sstv-card.is-noimg .sstv-card__info { opacity: 1; transform: none; }

/* Touch screens: no hover, so always show the title strip. */
@media (hover: none) {
	.sstv-card__shade, .sstv-card__info { opacity: 1; transform: none; }
	.sstv-card__info em { display: none; }
	.sstv-card:hover { transform: none; box-shadow: none; }
}

/* ---------- Rows ---------- */
.sstv-row { margin-top: 34px; }
.sstv-row__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 0 var(--sstv-gutter);
	margin-bottom: 12px;
}
.sstv-row__title { font-size: clamp(19px, 2vw, 26px) !important; font-weight: 600 !important; }
.sstv-row__title::before {
	content: "";
	display: block;
	width: 46px;
	height: 2px;
	background: rgba(255,255,255,.25);
	margin-bottom: 10px;
}
.sstv-row__more { color: var(--sstv-muted); font-size: 14px; white-space: nowrap; }
.sstv-row__more:hover { color: #fff; }
.sstv-row__wrap { position: relative; }
.sstv-row__track {
	display: grid;
	grid-auto-flow: column;
	gap: 14px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding: 0 var(--sstv-gutter);
	padding: 12px var(--sstv-gutter) 18px;
	scrollbar-width: none;
}
.sstv-row__track::-webkit-scrollbar { display: none; }
.sstv-row__track > .sstv-card { scroll-snap-align: start; }
.sstv-row--tile .sstv-row__track { grid-auto-columns: clamp(220px, 23vw, 340px); }
.sstv-row--poster .sstv-row__track { grid-auto-columns: clamp(140px, 14vw, 200px); }

.sstv-row__arrow {
	position: absolute;
	top: 12px;
	bottom: 18px;
	width: var(--sstv-gutter);
	min-width: 40px;
	border: 0;
	padding: 0;
	color: #fff;
	background: linear-gradient(90deg, rgba(16,20,31,.9), rgba(16,20,31,0));
	cursor: pointer;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: .85;
	transition: opacity .2s;
}
.sstv-row__arrow:hover { opacity: 1; }
.sstv-row__arrow .sstv-icon { width: 34px; height: 34px; }
.sstv-row__arrow--prev { left: 0; }
.sstv-row__arrow--next { right: 0; background: linear-gradient(270deg, rgba(16,20,31,.9), rgba(16,20,31,0)); }
@media (hover: none) { .sstv-row__arrow { display: none !important; } }

/* ---------- Empty ---------- */
.sstv-empty { padding: 90px var(--sstv-gutter); text-align: center; color: var(--sstv-muted); }

/* ---------- Player modal ---------- */
.sstv-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	font-family: "Poppins", system-ui, sans-serif;
	color: #fff;
}
.sstv-modal a,
.sstv-modal a:hover,
.sstv-modal button { text-decoration: none !important; color: #fff; font-family: inherit; }
.sstv-modal p, .sstv-modal h3 { margin: 0; font-family: inherit; letter-spacing: 0; line-height: 1.45; }
.sstv-modal__desc { font-size: 15px !important; }
.sstv-modal__backdrop { position: absolute; inset: 0; background: rgba(5,7,12,.86); }
.sstv-modal__box {
	position: relative;
	width: min(1100px, 100%);
	max-height: calc(100vh - 40px);
	overflow: auto;
	background: var(--sstv-bg-2, #171c2a);
	border-radius: 8px;
	box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.sstv-modal__close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 0;
	background: rgba(0,0,0,.6);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sstv-modal__close:hover { background: rgba(0,0,0,.85); }
.sstv-modal__player { position: relative; aspect-ratio: 16 / 9; background: #000; }
.sstv-modal__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sstv-modal__body { padding: 20px 24px 24px; }
.sstv-modal__title { font-size: 22px !important; font-weight: 600 !important; margin-bottom: 4px !important; }
.sstv-modal__meta { color: var(--sstv-muted, #aab2c5); font-size: 13px; }
.sstv-modal__meta span + span::before { content: "·"; margin: 0 8px; }
.sstv-modal__desc { color: #d4d9e6; margin-top: 10px; }
.sstv-modal__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.sstv-modal__actions .sstv-btn { min-height: 42px; padding: 0 18px; font-size: 13px; }
html.sstv-lock, html.sstv-lock body { overflow: hidden; }

/* ---------- Toast ---------- */
.sstv-toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%);
	z-index: 100001;
	background: #fff;
	color: #10141f;
	font-weight: 600;
	font-size: 14px;
	padding: 10px 18px;
	border-radius: 30px;
	box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.sstv-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 56px; }
	.sstv-recs { min-width: 0; }
	.sstv-hero { min-height: 0; }
	.sstv-recs__grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: clamp(200px, 40vw, 300px);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 var(--sstv-gutter);
		scrollbar-width: none;
		margin: 0 calc(var(--sstv-gutter) * -1);
		padding: 4px var(--sstv-gutter) 8px;
	}
	.sstv-recs__grid::-webkit-scrollbar { display: none; }
	.sstv-recs__grid > .sstv-card { scroll-snap-align: start; }
}
@media (max-width: 600px) {
	.sstv { font-size: 14px; }
	.sstv-hero__inner { padding-top: 40px; padding-bottom: 28px; }
	.sstv-hero__shade { background: linear-gradient(0deg, var(--sstv-bg) 8%, rgba(16,20,31,.55) 60%, rgba(16,20,31,.35) 100%); }
	.sstv-btn { min-height: 46px; padding: 0 20px; }
	.sstv-hero__actions { gap: 12px; }
	.sstv-row--tile .sstv-row__track { grid-auto-columns: 72vw; }
	.sstv-row--poster .sstv-row__track { grid-auto-columns: 40vw; }
	.sstv-recs__grid { grid-auto-columns: 62vw; }
	.sstv-modal { padding: 0; align-items: stretch; }
	.sstv-modal__box { max-height: 100vh; border-radius: 0; display: flex; flex-direction: column; justify-content: center; background: #000; }
}

@media (prefers-reduced-motion: reduce) {
	.sstv *, .sstv *::before, .sstv *::after { transition: none !important; }
	.sstv-row__track { scroll-behavior: auto; }
}

/* =====================================================================
   [smartschools_tv_home] – compact band for the front page
   ===================================================================== */
.sstv.sstv--home {
	--sstv-gutter: clamp(16px, 3vw, 28px);
	width: auto !important;
	max-width: 100% !important;
	margin: 0 !important;
	border-radius: 14px;
	padding: 26px 0 8px;
}
.sstv-home__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 0 var(--sstv-gutter);
	margin-bottom: 18px;
}
.sstv-home__head .sstv-channel { margin-bottom: 6px; }
.sstv-home__title { font-size: clamp(22px, 2.4vw, 30px) !important; font-weight: 600 !important; line-height: 1.2 !important; }
.sstv-home__all { min-height: 42px; padding: 0 18px; font-size: 12px; }

/* Mosaic: one big block + up to seven small ones. */
.sstv-mosaic {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: auto;
	gap: 12px;
	padding: 0 var(--sstv-gutter);
}
.sstv-mosaic .sstv-card { aspect-ratio: 16 / 9; }
.sstv-mosaic .sstv-mosaic__big { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; min-height: 100%; }
.sstv-mosaic--1 { grid-template-columns: minmax(0, 1fr); }
.sstv-mosaic--1 .sstv-mosaic__big { aspect-ratio: 16 / 9; grid-column: auto; grid-row: auto; }
.sstv-mosaic--2 .sstv-mosaic__big, .sstv-mosaic--3 .sstv-mosaic__big { grid-row: span 1; aspect-ratio: 16 / 9; }
.sstv-mosaic__big .sstv-card__shade,
.sstv-mosaic__big .sstv-card__info,
.sstv-mosaic__big .sstv-card__play { opacity: 1; transform: none; }
.sstv-mosaic__big .sstv-card__info { padding: 18px 20px; }
.sstv-mosaic__big .sstv-card__info strong { font-size: clamp(17px, 1.8vw, 24px); }
.sstv-mosaic__big .sstv-card__info em { font-size: 13px; }
.sstv-mosaic__big .sstv-card__play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
.sstv--home .sstv-row { margin-top: 26px; }
.sstv--home .sstv-row__title { font-size: 19px !important; }
.sstv--home .sstv-row--tile .sstv-row__track { grid-auto-columns: clamp(200px, 22%, 300px); }
.sstv--home .sstv-row--poster .sstv-row__track { grid-auto-columns: clamp(130px, 14%, 180px); }

@media (max-width: 782px) {
	.sstv-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sstv-mosaic .sstv-mosaic__big { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; }
	.sstv--home .sstv-row--tile .sstv-row__track { grid-auto-columns: 70%; }
	.sstv--home .sstv-row--poster .sstv-row__track { grid-auto-columns: 40%; }
}

/* Light theme for white home pages. */
.sstv.sstv--light {
	--sstv-bg: #f4f6fb;
	--sstv-bg-2: #e3e7f0;
	--sstv-text: #141a2a;
	--sstv-muted: #5b6478;
	color: var(--sstv-text);
}
.sstv--light .sstv-btn--ghost { border-color: rgba(20,26,42,.35); color: var(--sstv-text); }
.sstv--light .sstv-btn--ghost:hover { background: rgba(20,26,42,.06); color: var(--sstv-text); }
.sstv--light .sstv-row__title::before { background: rgba(20,26,42,.2); }
.sstv--light .sstv-row__more:hover { color: var(--sstv-text); }
.sstv--light .sstv-row__arrow { color: var(--sstv-text); background: linear-gradient(90deg, rgba(244,246,251,.95), rgba(244,246,251,0)); }
.sstv--light .sstv-row__arrow--next { background: linear-gradient(270deg, rgba(244,246,251,.95), rgba(244,246,251,0)); }
.sstv--light .sstv-card { color: #fff; }
.sstv--light .sstv-card__blank, .sstv--light .sstv-card.is-noimg { color: var(--sstv-text); }
.sstv--light .sstv-card.is-noimg .sstv-card__shade,
.sstv--light .sstv-card:has(.sstv-card__blank) .sstv-card__shade { opacity: 0 !important; }
.sstv--light .sstv-card.is-noimg .sstv-card__info,
.sstv--light .sstv-card:has(.sstv-card__blank) .sstv-card__info { color: var(--sstv-text); }
.sstv--light .sstv-card.is-noimg .sstv-card__info em { color: var(--sstv-muted); }
.sstv--light .sstv-card:has(.sstv-card__blank) .sstv-card__info { display: none; }

/* ---------- Front-page block backdrop (like the TV page hero) ---------- */
.sstv.sstv--home { isolation: isolate; }
.sstv-home__bg {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	z-index: -2;
	margin: 0 !important;
}
.sstv-home__shade {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(16,20,31,.94) 0%, rgba(16,20,31,.70) 45%, rgba(16,20,31,.45) 100%),
		linear-gradient(0deg, var(--sstv-bg) 0%, var(--sstv-bg) 22%, rgba(16,20,31,0) 70%);
}
.sstv--light .sstv-home__shade {
	background:
		linear-gradient(90deg, rgba(244,246,251,.96) 0%, rgba(244,246,251,.82) 45%, rgba(244,246,251,.62) 100%),
		linear-gradient(0deg, var(--sstv-bg) 0%, var(--sstv-bg) 22%, rgba(244,246,251,0) 70%);
}
.sstv--has-bg .sstv-home__title { text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.sstv--light.sstv--has-bg .sstv-home__title { text-shadow: none; }

/* ---------- Images: keep them filling their frames even when the theme (MyListing/Elementor)
   sets img { height:auto }. This also crops the black bars YouTube puts on its thumbnails. ---------- */
.sstv .sstv-card img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: center !important;
	margin: 0 !important;
	border-radius: 0 !important;
}
.sstv .sstv-hero__bg {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	margin: 0 !important;
}

/* Backdrops must stay absolutely positioned even when the theme sets img { position:static }. */
.sstv .sstv-hero__bg,
.sstv .sstv-home__bg { position: absolute !important; inset: 0 !important; top: 0 !important; left: 0 !important; }

/* =====================================================================
   [smartschools_tv_home] – default "hero" layout: the School TV page design, inside a section.
   Responds to the width of its own box (container queries), so it also stacks correctly
   inside a narrow Elementor column, not only on small screens.
   ===================================================================== */
.sstv.sstv--home-hero {
	container-type: inline-size;
	container-name: sstvhome;
	padding: 0 0 22px;
	--sstv-gutter: clamp(16px, 4cqi, 48px);
}
.sstv--home-hero .sstv-hero { min-height: clamp(420px, 46cqi, 640px); }
.sstv--home-hero .sstv-hero__inner { padding: clamp(28px, 5cqi, 64px) var(--sstv-gutter) clamp(24px, 4cqi, 48px); }
.sstv--home-hero .sstv-hero__title { font-size: clamp(30px, 5.4cqi, 72px) !important; }
.sstv--home-hero .sstv-recs__title { font-size: clamp(18px, 1.9cqi, 24px) !important; }
.sstv--home-hero .sstv-hero__actions { margin-top: 18px; gap: 12px; }
.sstv--home-hero .sstv-home__all { min-height: 52px; padding: 0 28px; font-size: 14px; }
.sstv-home__all .sstv-icon { width: 22px; height: 22px; margin-right: -6px; }
.sstv--home-hero .sstv-row { margin-top: 8px; }

/* Undo the viewport-based stacking for the block; the container queries below decide instead. */
@media (max-width: 1024px) {
	.sstv--home-hero .sstv-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); padding-top: clamp(28px, 5cqi, 64px); }
	.sstv--home-hero .sstv-recs__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto;
		overflow: visible; margin: 0; padding: 0; scroll-snap-type: none;
	}
}

/* Medium box: hero on top, recommendation tiles as a swipe row underneath. */
@container sstvhome (max-width: 900px) {
	.sstv--home-hero .sstv-hero { min-height: 0; }
	.sstv--home-hero .sstv-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.sstv--home-hero .sstv-recs { min-width: 0; }
	.sstv--home-hero .sstv-recs__grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: clamp(200px, 42cqi, 300px);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 var(--sstv-gutter);
		scrollbar-width: none;
		margin: 0 calc(var(--sstv-gutter) * -1);
		padding: 4px var(--sstv-gutter) 8px;
	}
	.sstv--home-hero .sstv-recs__grid::-webkit-scrollbar { display: none; }
	.sstv--home-hero .sstv-recs__grid > .sstv-card { scroll-snap-align: start; }
	.sstv--home-hero .sstv-row--tile .sstv-row__track { grid-auto-columns: clamp(200px, 42cqi, 300px); }
}

/* Small box (phones, narrow columns). */
@container sstvhome (max-width: 560px) {
	.sstv--home-hero .sstv-hero__shade { background: linear-gradient(0deg, var(--sstv-bg) 6%, rgba(16,20,31,.6) 55%, rgba(16,20,31,.4) 100%); }
	.sstv--home-hero .sstv-hero__desc { display: none; }
	.sstv--home-hero .sstv-btn { min-height: 44px; padding: 0 16px; font-size: 13px; }
	.sstv--home-hero .sstv-home__all { min-height: 44px; flex-basis: 100%; }
	.sstv--home-hero .sstv-recs__grid,
	.sstv--home-hero .sstv-row--tile .sstv-row__track { grid-auto-columns: 74cqi; }
	.sstv--home-hero .sstv-row--poster .sstv-row__track { grid-auto-columns: 42cqi; }
}

/* Light theme for the hero layout. */
.sstv--light .sstv-hero__shade {
	background:
		linear-gradient(90deg, rgba(244,246,251,.96) 0%, rgba(244,246,251,.78) 45%, rgba(244,246,251,.5) 100%),
		linear-gradient(0deg, var(--sstv-bg) 0%, rgba(244,246,251,0) 35%);
}
.sstv--light .sstv-hero__title { text-shadow: none; }
.sstv--light .sstv-hero__meta { color: var(--sstv-muted); }
@container sstvhome (max-width: 560px) {
	.sstv--home-hero.sstv--light .sstv-hero__shade { background: linear-gradient(0deg, var(--sstv-bg) 6%, rgba(244,246,251,.75) 55%, rgba(244,246,251,.6) 100%); }
}

/* Hero without recommendation tiles: the featured video gets the full width. */
.sstv .sstv-hero__inner--solo { grid-template-columns: minmax(0, 1fr) !important; }
.sstv .sstv-hero__inner--solo .sstv-hero__main { max-width: 820px; }

/* Manager-only note under the hero */
.sstv-mgr-note {
	margin: 18px var(--sstv-gutter) 0;
	padding: 12px 16px;
	border: 1px dashed rgba(255,255,255,.35);
	border-radius: 10px;
	background: rgba(255,255,255,.05);
	color: #e3e7f0;
	font-size: 14px;
}
.sstv-mgr-note ul { margin: 6px 0 6px 18px; padding: 0; }
.sstv-mgr-note a { color: var(--sstv-accent); text-decoration: underline; }
.sstv--light .sstv-mgr-note { color: var(--sstv-text); border-color: rgba(20,26,42,.3); background: rgba(20,26,42,.04); }

/* [smartschools_tv_button] – the "Open School TV" button on its own (any banner). */
.sstv-cta-wrap { margin: 8px 0; }
.sstv-cta {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 28px;
	border-radius: 3px;
	border: 2px solid transparent;
	font: 600 14px/1 "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: filter .2s, background .2s, transform .2s;
	cursor: pointer;
}
.sstv-cta .sstv-icon { width: 20px; height: 20px; }
.sstv-cta--large { min-height: 62px; padding: 0 36px; font-size: 16px; }
.sstv-cta--primary, .sstv-cta--primary:visited { background: var(--sstv-accent, #0bb4ef); color: #fff !important; }
.sstv-cta--primary:hover { filter: brightness(1.1); transform: translateY(-1px); color: #fff !important; }
.sstv-cta--outline, .sstv-cta--outline:visited { background: transparent; border-color: rgba(255,255,255,.85); color: #fff !important; }
.sstv-cta--outline:hover { background: rgba(255,255,255,.12); color: #fff !important; }
.sstv-cta--light, .sstv-cta--light:visited { background: #fff; color: #10141f !important; }
.sstv-cta--light:hover { filter: brightness(.95); color: #10141f !important; }
.sstv-cta-note { font-size: 13px; padding: 8px 12px; border: 1px dashed #c3c4c7; border-radius: 6px; background: #fffbe6; color: #6b4e00; }