/* ============================================================
   SavoiaTV — homepage (front-page.php)
   ------------------------------------------------------------
   Hero + section headers + section spacing. Card grids and cards
   come from content.css / archive.css. Uses the tokens from
   style.css. Blue is the primary action color; gold is used only
   for small eyebrows and a decorative rule.
   ============================================================ */

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   Featured hero (single curated promotion — cinematic banner)
   ------------------------------------------------------------ */
.stv-hero--featured {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(360px, 42vw, 520px); /* cinematic, not excessively tall */
	overflow: hidden;
	background-color: var(--stv-color-bg-elevated);
	border-bottom: 1px solid var(--stv-color-border);
}

/* Artwork layer */
.stv-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.stv-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;      /* fill without destructive stretching */
	object-position: center top; /* safe default; refined by the modifiers below */
	display: block;
}

/* Manually supplied Hero Image Override → purpose-built wide art, centered. */
.stv-hero__img--custom {
	object-position: center center;
}

/* Automatically derived / fallback art (posters etc.) → favor the top so
   titles, faces, and heads at the top of the source aren't cropped away. */
.stv-hero__img--auto {
	object-position: center top;
}

/* Readability scrim — stronger toward the bottom where the text sits */
.stv-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(0deg, rgba(8, 9, 11, 0.92) 0%, rgba(8, 9, 11, 0.6) 38%, rgba(8, 9, 11, 0.15) 72%, rgba(8, 9, 11, 0.05) 100%),
		linear-gradient(90deg, rgba(8, 9, 11, 0.55) 0%, rgba(8, 9, 11, 0) 55%);
}

/* No-image treatment — restrained dark gradient, still on-brand */
.stv-hero--no-image {
	background: radial-gradient(120% 140% at 15% 100%, var(--stv-color-surface-2) 0%, var(--stv-color-bg-elevated) 55%, var(--stv-color-bg) 100%);
}

/* Content layer */
.stv-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: clamp(1.5rem, 4vw, 3rem) var(--stv-space-md);
}

.stv-hero__inner > * {
	max-width: 640px;
}

/* LIVE indicator */
.stv-hero__live {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0 0 var(--stv-space-sm);
	padding: 0.2rem 0.6rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	background-color: #d92b2b; /* status red for the LIVE indicator */
	border-radius: 999px;
}

.stv-hero__live-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background-color: #fff;
}

/* Date / time (restrained gold accent) */
.stv-hero__meta {
	margin: 0 0 var(--stv-space-sm);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--stv-color-gold);
}

.stv-hero__title {
	margin: 0;
	font-size: clamp(1.9rem, 5vw, 3.25rem);
	line-height: 1.05;
	letter-spacing: 0.01em;
	color: var(--stv-color-heading);
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.stv-hero__promo {
	margin: var(--stv-space-sm) 0 0;
	font-size: clamp(1rem, 1.6vw, 1.15rem);
	line-height: 1.6;
	color: var(--stv-color-silver);
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}

.stv-hero__actions {
	margin: var(--stv-space-lg) 0 0;
}

/* Reuse the site button component; define it here too so it works on the
   homepage where single.css (which also defines .stv-btn) isn't loaded. */
.stv-hero .stv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 1.75rem;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--stv-radius-sm);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.stv-hero .stv-btn--primary {
	background-color: var(--stv-color-blue);
	color: var(--stv-color-blue-ink);
}

.stv-hero .stv-btn--primary:hover,
.stv-hero .stv-btn--primary:focus {
	background-color: var(--stv-color-blue-hover);
	color: var(--stv-color-blue-ink);
}

/* Small screens: keep the composition readable and not too tall. */
/* ------------------------------------------------------------
   Mobile hero (<=600px): stack the composition so the wide
   artwork isn't cropped by the tall overlay container.
   Artwork on top at ~16:9 (shows the full horizontal frame),
   promo content in a dark panel directly below. Desktop and
   larger tablet (>=601px) keep the approved 0.5.4 overlay.
   ------------------------------------------------------------ */
@media (max-width: 600px) {
	.stv-hero--featured {
		display: block;      /* stack instead of overlay */
		min-height: 0;       /* height follows artwork + panel; not excessively tall */
	}

	/* Artwork becomes a normal-flow block at ~16:9 so far less of the
	   left/right composition is cropped. object-fit: cover is retained; a
	   16:9 source shows in full, and the WordPress responsive image output
	   (srcset) is unchanged. */
	.stv-hero__media {
		position: relative;
		inset: auto;
		width: 100%;
		aspect-ratio: 16 / 9;
	}

	/* Text no longer sits over the image, so the readability scrim isn't
	   needed on mobile. */
	.stv-hero__scrim {
		display: none;
	}

	/* Promo content sits in its own dark SavoiaTV panel below the artwork. */
	.stv-hero__inner {
		position: static;
		max-width: none;
		background-color: var(--stv-color-bg-elevated);
	}

	.stv-hero__title,
	.stv-hero__promo {
		text-shadow: none; /* solid panel — no overlay shadow required */
	}

	/* No artwork available: skip the empty media box; the panel is the hero. */
	.stv-hero--no-image .stv-hero__media {
		display: none;
	}
}

/* ------------------------------------------------------------
   Sections
   ------------------------------------------------------------ */
.stv-home {
	padding: var(--stv-space-lg) var(--stv-space-md) var(--stv-space-xl);
	max-width: 1200px;
	margin: 0 auto;
	box-sizing: border-box;
}

.stv-home__section {
	margin-bottom: var(--stv-space-xl);
}

.stv-home__section:last-child {
	margin-bottom: 0;
}

/* Section header: eyebrow (gold) + heading (white) + View All (blue) */
.stv-home__section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--stv-space-sm);
	margin-bottom: var(--stv-space-md);
	padding-bottom: var(--stv-space-sm);
	border-bottom: 1px solid var(--stv-color-gold-soft); /* subtle gold rule */
}

.stv-home__eyebrow {
	margin: 0 0 0.15rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--stv-color-gold);
}

.stv-home__heading {
	margin: 0;
	font-size: clamp(1.35rem, 3vw, 1.8rem);
	color: var(--stv-color-heading);
}

.stv-home__viewall {
	flex: 0 0 auto;
	color: var(--stv-color-blue);
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	white-space: nowrap;
}

.stv-home__viewall:hover,
.stv-home__viewall:focus {
	color: var(--stv-color-blue-hover);
	text-decoration: underline;
}

/* Homepage poster grids are a touch more compact than the archives. */
.stv-home__grid--posters {
	grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
}

@media (min-width: 700px) {
	.stv-home__grid--posters {
		grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	}
}

/* ============================================================
   Homepage landscape card grids (v0.5.8)
   ------------------------------------------------------------
   The homepage Movies / TV Series / Shows rails reuse the shared
   .stv-card landscape system (see archive.css). Column counts are
   set here so the rails scale cleanly from phone to desktop.
   ============================================================ */
.stv-home__grid--posters {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: var(--stv-space-md);
}

@media (min-width: 700px) {
	.stv-home__grid--posters {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--stv-space-lg);
	}
}

@media (min-width: 1100px) {
	.stv-home__grid--posters {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Next-broadcast-night block sits flush with the section header. */
.stv-home__night {
	margin-top: var(--stv-space-sm);
}

/* ============================================================
   Homepage hero carousel (v0.5.9)
   ------------------------------------------------------------
   Reuses the .stv-hero__* presentation. Slides are stacked and
   cross-fade; the container reserves its height (same cinematic
   band as the single hero) so there is no layout shift while the
   carousel initializes. Controls appear only once JS marks the
   carousel ready, so there are never dead controls.
   ============================================================ */
.stv-hero-carousel {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;   /* media viewport matches the 16:9 artwork */
	min-height: 0;          /* override the single-hero cinematic min-height */
	overflow: hidden;
	background-color: var(--stv-color-bg-elevated); /* neutral bg for any non-16:9 image */
}

.stv-hero-carousel__track {
	position: absolute;
	inset: 0;
}

/* Show the COMPLETE artwork — never crop. A 16:9 source fills the 16:9
   viewport edge-to-edge; any other ratio is preserved whole and letterboxed
   on the neutral background above. This overrides the single-hero
   object-fit: cover for carousel slides only, so the fallback/1-slide hero is
   unchanged. object-position (the Image Position field) only nudges a non-16:9
   image within its letterbox; it never hides cropping. */
.stv-hero-carousel .stv-hero__img {
	object-fit: contain;
}

.stv-hero-carousel__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease;
}

.stv-hero-carousel__slide.is-active {
	opacity: 1;
	visibility: visible;
}

/* Keep hero content clear of the dots row. */
.stv-hero-carousel .stv-hero__inner {
	padding-bottom: clamp(2.75rem, 4vw, 3.5rem);
}

/* Prev/Next controls — revealed only after JS initializes. */
.stv-hero-carousel__btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	font-size: 1.9rem;
	line-height: 1;
	color: #fff;
	background-color: rgba(8, 9, 11, 0.5);
	border: 1px solid var(--stv-color-border-strong);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.stv-hero-carousel.is-ready .stv-hero-carousel__btn {
	display: inline-flex;
}

.stv-hero-carousel__btn:hover,
.stv-hero-carousel__btn:focus-visible {
	background-color: var(--stv-color-blue);
	border-color: var(--stv-color-blue);
}

.stv-hero-carousel__prev {
	left: 0.75rem;
}

.stv-hero-carousel__next {
	right: 0.75rem;
}

/* Position dots/indicators. */
.stv-hero-carousel__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.85rem;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 0.5rem;
}

.stv-hero-carousel__dot {
	width: 11px;
	height: 11px;
	padding: 0;
	border: 1px solid #fff;
	border-radius: 50%;
	background-color: transparent;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.stv-hero-carousel__dot.is-active {
	background-color: #fff;
}

.stv-hero-carousel__dot:focus-visible {
	outline: 2px solid var(--stv-color-blue-hover);
	outline-offset: 2px;
}

/* Respect reduced-motion: cross-fade becomes instant (autoplay is also
   disabled in JS for these users). */
@media (prefers-reduced-motion: reduce) {
	.stv-hero-carousel__slide {
		transition: none;
	}
}

/* Mobile: the 16:9 viewport already derives its height from width, so no taller
   frame (and no side-cropping). Keep the overlay text legible with responsive
   typography; the artwork stays complete. */
@media (max-width: 600px) {
	.stv-hero-carousel .stv-hero__inner {
		padding: var(--stv-space-md);
		padding-bottom: 2.25rem; /* clear the dots */
	}

	.stv-hero-carousel .stv-hero__title {
		font-size: clamp(1.05rem, 4.6vw, 1.6rem);
	}

	.stv-hero-carousel .stv-hero__promo {
		margin-top: 0.35rem;
		font-size: 0.9rem;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.stv-hero-carousel .stv-hero__actions {
		margin-top: var(--stv-space-sm);
	}
}

/* ============================================================
   Hero image crop anchor (v0.5.9 patch)
   ------------------------------------------------------------
   Managed carousel slides reuse the SAME object-fit: cover image
   rendering as the fallback hero; only the crop anchor changes.
   "Top" matches the fallback hero's derived-art behavior
   (.stv-hero__img--auto) so classic SavoiaTV artwork keeps its
   upper title/curtain area. Chosen per slide via the ACF
   "Image Position" control; defaults to Top.
   ============================================================ */
.stv-hero__img--pos-top {
	object-position: center top;
}

.stv-hero__img--pos-center {
	object-position: center center;
}

.stv-hero__img--pos-bottom {
	object-position: center bottom;
}

/* Carousel on mobile: keep each slide's artwork filling the frame with the
   readability scrim (an overlay), rather than adopting the single-hero stacked
   media treatment — stacked variable-height slides in a cross-fade would cause
   layout shift. The single static hero (.stv-hero--featured, not
   .stv-hero-carousel) is untouched and keeps the fallback's stacked mobile
   layout. object-position (Top by default) still preserves the composition. */
@media (max-width: 600px) {
	.stv-hero-carousel .stv-hero__media {
		position: absolute;
		inset: 0;
		width: auto;
		aspect-ratio: auto;
	}

	.stv-hero-carousel .stv-hero__scrim {
		display: block;
	}

	.stv-hero-carousel .stv-hero__inner {
		position: relative;
		background: transparent;
	}
}