/* =====================================================================
 * video-landing.css — the /video/ landing sheet (category-video.php)
 *
 * Conditionally loaded by goldendome_enqueue_video_landing_css() on the Video
 * category archive only, on top of the always-loaded goldendome-bundle. It is
 * NET-NEW rules ONLY — the composition-only surface reuses the bundle's shipped
 * chrome verbatim and never redeclares it:
 *
 *   REUSED FROM THE BUNDLE (not restated here): all tokens; .video-band(+::before,
 *   .page); .hero-video(+__poster, .thumb-label); .play-overlay(+triangle+hover);
 *   .hero-meta / .hero-kicker(+.video-chip) / .hero-headline / .hero-deck /
 *   .hero-meta-row / .hero-byline / .avatar / .youtube-link; .video-card(+.vc-thumb,
 *   .vc-title, .vc-date, hover); and every `.video-band …` dark-UI override.
 *
 *   NET-NEW HERE (this landing composes these for the first time): the 60/40
 *   `.hero` grid (scoped under .video-landing so it can't collide with the
 *   video-post 65/35 hero), the `.videos-band-head` zone masthead, the `.watch-btn`
 *   CTA, the `.shelf`/`.shelf-strip` sub-genre rows, the `.incontent-ad`
 *   leaderboard, the `.all-videos` grid + `.load-more`, and the video-card
 *   `.is-fallback` ND-monogram placeholder.
 *
 * Values are copied verbatim from sandbox/video-landing.html (the approved
 * source of truth). Chrome/schedule/footer responsive rules from the sandbox are
 * intentionally omitted — that chrome is get_header()/get_footer(), not this page.
 * ===================================================================== */

/* ── HERO — 60/40 split (scoped so it can't touch the video-post .hero) ── */
.video-landing .hero {
	display: grid;
	grid-template-columns: 60fr 40fr;
	gap: 36px;
	align-items: center;
	padding: 22px 0 30px;
}
/* The headline is a link on the landing (the whole hero navigates); keep it the
 * band ink, not the default navy anchor color (invisible on navy). */
.video-landing .hero-headline a { color: inherit; text-decoration: none; }
.video-landing .hero-headline a:hover { color: #fff; text-decoration: none; }

/* ── BAND TITLE — zone masthead ─────────────────────────────────────── */
.videos-band-head {
	padding: 34px 0 6px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.videos-band-head .vbh-lede { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.videos-band-head .vbh-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--nd-gold);
	font-weight: 700;
}
.videos-band-head .vbh-eyebrow svg { color: var(--nd-gold); }
.videos-band-head h1 {
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: clamp(2rem, 3.2vw, 2.9rem);
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: var(--video-band-ink);
	margin: 0;
}
.videos-band-head .vbh-deck {
	font-family: var(--font-serif);
	font-size: 16px;
	line-height: 1.5;
	color: var(--video-band-ink-2);
	margin: 0;
	max-width: 52ch;
	text-wrap: pretty;
}
.videos-band-head .vbh-count {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--video-band-ink-3);
	font-weight: 600;
	flex-shrink: 0;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.videos-band-head .vbh-count b { color: var(--video-band-ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── WATCH — primary CTA into the single-video page ─────────────────── */
.watch-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nd-navy);
	background: var(--video-band-ink);
	padding: 12px 22px;
	border-radius: var(--r-input);
	text-decoration: none;
	transition: background 0.15s ease, transform 0.15s ease;
}
.watch-btn:hover { background: #fff; transform: translateY(-1px); text-decoration: none; }
.watch-btn .tri { width: 0; height: 0; border-left: 9px solid var(--nd-navy); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }

/* ── SHELF — sub-genre row: head + horizontally-scrollable card strip ── */
.shelf { padding: 30px 0 8px; }
.shelf-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 16px;
}
.shelf-title { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.shelf-title h2 {
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.11em;
	color: var(--nd-navy);
	margin: 0;
}
.shelf-title .count {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--ink-3);
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}
.shelf-seeall {
	font-family: var(--font-sans);
	font-size: 11.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--nd-navy);
	text-decoration: none;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}
.shelf-seeall:hover { color: var(--accent-hover); text-decoration: none; }
.shelf-seeall svg { transition: transform 0.15s ease; }
.shelf-seeall:hover svg { transform: translateX(2px); }

.shelf-strip {
	display: flex;
	gap: 22px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* bleed the strip to the page padding so the last card rests at the edge */
	margin: 0 calc(var(--page-pad) * -1);
	padding: 2px var(--page-pad) 10px;
}
.shelf-strip::-webkit-scrollbar { display: none; }
.shelf-strip .video-card { flex: 0 0 clamp(240px, 22vw, 286px); scroll-snap-align: start; }

/* Latest strip lives inside the navy band — extra breathing room + flip ink */
.shelf.latest-shelf { padding-top: 26px; padding-bottom: 34px; }
.video-band .shelf-title h2 { color: var(--video-band-ink); }
.video-band .shelf-title .count { color: var(--video-band-ink-3); }
.video-band .shelf-seeall { color: var(--video-band-ink-2); }
.video-band .shelf-seeall:hover { color: #fff; }

/* ── IN-CONTENT AD — leaderboard between shelves (recovers rail inventory) ── */
.incontent-ad {
	background: var(--bg-sunk);
	border-top: 1px solid var(--line-soft);
	border-bottom: 1px solid var(--line-soft);
	padding: 20px 0;
	margin: 22px 0;
}
.incontent-ad .ad-label {
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ad-label-ink);
	text-align: center;
	margin: 0 0 8px;
	font-weight: 500;
}
/* Hosts the real Snack unit (#snack-incontent-slim-2 / -3); the loader sizes
 * the served creative. Matches the shared .schedule-ad frame — a centered 728
 * container with no border/reserved-height/placeholder fill, so an unfilled
 * slot collapses to just the sunk band + label (site-wide ad behavior). */
.incontent-ad .ad-frame {
	width: 728px;
	max-width: 100%;
	margin: 0 auto;
	display: grid;
	place-items: center;
}

/* ── ALL VIDEOS — browsable primary grid + Load more ────────────────── */
.all-videos { padding: 38px 0 8px; border-top: 1px solid var(--line-strong); margin-top: 14px; }
.all-videos-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.all-videos-head h2 {
	font-family: var(--font-serif);
	font-size: 24px;
	font-weight: 600;
	color: var(--nd-navy);
	margin: 0;
}
.all-videos-head .count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase; }
.all-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 22px; }
.load-more-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 38px 0 8px; }
.load-more {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--font-sans);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nd-navy);
	background: transparent;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-input);
	padding: 13px 28px;
	text-decoration: none;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.load-more:hover { border-color: var(--nd-navy); background: var(--accent-tint); text-decoration: none; }
.load-more svg { transition: transform 0.15s ease; }
.load-more:hover svg { transform: translateY(1px); }
.load-more-count { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); font-variant-numeric: tabular-nums; }

.landing-foot-pad { height: 56px; }

/* ── VIDEO-CARD PLACEHOLDER FALLBACK — the ~11% with no 16:9 image ───── */
.video-card .vc-thumb.is-fallback {
	background: linear-gradient(135deg, #0a1a30 0%, #12233c 60%, #1a2c48 100%);
}
.video-card .vc-thumb.is-fallback::before { opacity: 0.3; }
.video-card .vc-thumb .vc-fallback-mark {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: 44px;
	color: rgba(255, 255, 255, 0.16);
	letter-spacing: 0.04em;
	pointer-events: none;
}

/* =====================================================================
 * RESPONSIVE — net-new selectors only (global --page-pad + chrome
 * breakpoints are handled by the bundle).
 * ===================================================================== */
@media (max-width: 1024px) {
	.all-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	.videos-band-head { padding: 24px 0 4px; flex-direction: column; align-items: flex-start; gap: 14px; }
	.video-landing .hero { grid-template-columns: 1fr; gap: 16px; padding: 16px 0 24px; }
	.shelf-strip .video-card { flex: 0 0 76%; }
	.incontent-ad .ad-frame { width: 100%; }
	.all-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
	.all-videos-head h2 { font-size: 20px; }
}

@media (max-width: 420px) {
	.all-grid { grid-template-columns: 1fr; }
}