/* ============================================================
   SavoiaTV — archive grids (Movies, TV Series, Shows)
   ------------------------------------------------------------
   Server-rendered, responsive card grid. Mobile-first: the grid
   auto-fills from two narrow columns on phones up to more on
   wider screens. Colours/spacing come from the tokens in
   style.css.
   ============================================================ */

.stv-archive__header {
	margin-bottom: var(--stv-space-lg);
}

.stv-archive__title {
	margin: 0;
	color: var(--stv-color-heading);
}

.stv-archive__description {
	margin-top: var(--stv-space-sm);
	color: var(--stv-color-silver);
	line-height: 1.6;
}

.stv-archive__empty {
	color: var(--stv-color-muted);
}

/* ---------- Grid ---------- */
.stv-archive__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: var(--stv-space-md);
}

@media (min-width: 700px) {
	.stv-archive__grid {
		grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
		gap: var(--stv-space-lg);
	}
}

/* ------------------------------------------------------------
   Phone widths: one substantial full-width card per row, with
   comfortable horizontal page padding so cards never sit flush
   against the viewport edge. Desktop/tablet layout above is
   unchanged. border-box keeps this within the viewport (no
   horizontal scrolling).
   ------------------------------------------------------------ */
@media (max-width: 600px) {
	.stv-archive {
		padding-left: 18px;
		padding-right: 18px;
	}

	.stv-archive__grid {
		grid-template-columns: 1fr;
		gap: var(--stv-space-md);
	}
}

/* ---------- Card ---------- */
.stv-card {
	display: flex;
	flex-direction: column;
	background-color: var(--stv-color-surface);
	border: 1px solid var(--stv-color-border);
	border-radius: var(--stv-radius);
	overflow: hidden;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.stv-card:hover,
.stv-card:focus-within {
	border-color: var(--stv-color-blue);
}

.stv-card__thumb {
	display: block;
	position: relative;
	aspect-ratio: 2 / 3;
	background: radial-gradient(circle at 50% 35%, var(--stv-color-surface-2), var(--stv-color-surface));
}

.stv-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.stv-card__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--stv-space-sm);
	text-align: center;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--stv-color-muted);
	border-bottom: 1px dashed var(--stv-color-border-strong);
}

.stv-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: var(--stv-space-sm) var(--stv-space-md) var(--stv-space-md);
}

.stv-card__title {
	margin: 0;
	font-size: 1rem;
	line-height: 1.25;
	color: var(--stv-color-heading);
}

.stv-card__title a {
	color: inherit;
	text-decoration: none;
}

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

.stv-card__meta {
	margin: 0;
	font-size: 0.85rem;
	color: var(--stv-color-silver);
}

/* ============================================================
   Landscape artwork cards + responsive grid (v0.5.8)
   ------------------------------------------------------------
   Movies / TV Series / Shows cards present artwork in a ~4:3
   landscape frame using object-fit: contain (never cropped),
   centered in a dark neutral frame. Cards with no artwork omit
   the frame entirely and render as compact text-only cards in
   the same visual family. Blog post cards (.stv-card--post) share
   this same landscape media treatment so the blog matches the rest
   of SavoiaTV.
   ============================================================ */
.stv-card--movie .stv-card__thumb,
.stv-card--series .stv-card__thumb,
.stv-card--show .stv-card__thumb,
.stv-card--post .stv-card__thumb {
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--stv-color-bg-elevated);
	border-bottom: 1px solid var(--stv-color-border);
	overflow: hidden;
}

/* Preserve the whole image: contain (letterbox/pillarbox as needed). */
.stv-card--movie .stv-card__img,
.stv-card--series .stv-card__img,
.stv-card--show .stv-card__img,
.stv-card--post .stv-card__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* Text-only (no artwork) cards: compact, no reserved image area. */
.stv-card--noart .stv-card__body {
	padding-top: var(--stv-space-md);
}

/* Grid: one landscape card per row on phones, scaling up with width.
   These explicit column counts override the auto-fill base above so image
   and no-image cards line up without large vertical gaps. */
.stv-archive__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
}

@media (max-width: 600px) {
	.stv-archive__grid {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 901px) {
	.stv-archive__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

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

/* ============================================================
   A–Z / alphanumeric archive navigation (v0.6.0)
   ------------------------------------------------------------
   Reusable index bar above the archive grid. Plain links, dark
   SavoiaTV styling, ~40px+ touch targets, wraps on mobile.
   Active letter is highlighted; empty letters are muted and
   non-interactive.
   ============================================================ */
.stv-azbar {
	display: grid;
	/* Mobile default: exactly 7 columns → 28 items form a clean 7 × 4 grid. */
	grid-template-columns: repeat(7, 1fr);
	gap: 0.3rem;
	margin: 0 0 var(--stv-space-lg);
	padding-bottom: var(--stv-space-md);
	border-bottom: 1px solid var(--stv-color-border);
}

/* Every item (All, #, A–Z, and empty letters) fills its grid cell, so all
   cells share one consistent footprint and height. */
.stv-azbar__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-width: 0;
	min-height: 40px;
	padding: 0 0.25rem;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1;
	color: var(--stv-color-silver);
	text-decoration: none;
	background-color: var(--stv-color-surface);
	border: 1px solid var(--stv-color-border);
	border-radius: var(--stv-radius-sm);
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

/* "All" shares the same cell; just size its label to fit. */
.stv-azbar__all {
	font-size: 0.82rem;
	letter-spacing: 0.01em;
}

a.stv-azbar__link:hover,
a.stv-azbar__link:focus-visible {
	color: var(--stv-color-blue-ink);
	background-color: var(--stv-color-blue);
	border-color: var(--stv-color-blue);
}

.stv-azbar__link.is-active {
	color: var(--stv-color-blue-ink);
	background-color: var(--stv-color-blue);
	border-color: var(--stv-color-blue);
}

/* Disabled letters keep the same cell (dimensions + subtle outline) but read as
   muted and non-interactive — no plain floating letters between buttons. */
.stv-azbar__link.is-empty {
	color: var(--stv-color-muted);
	background-color: transparent;
	border-color: var(--stv-color-border);
	opacity: 0.55;
	cursor: default;
}

/* Extremely narrow viewports: fall back to a balanced 4 × 7 grid. */
@media (max-width: 340px) {
	.stv-azbar {
		grid-template-columns: repeat(4, 1fr);
		gap: 0.25rem;
	}
}

/* Small tablet: two balanced rows of 14 (28 = 14 × 2). */
@media (min-width: 640px) {
	.stv-azbar {
		grid-template-columns: repeat(14, 1fr);
		gap: 0.28rem;
	}
}

/* Desktop: a single row of 28 — All · # · A–Z on one line, no orphan Y/Z. */
@media (min-width: 960px) {
	.stv-azbar {
		grid-template-columns: repeat(28, 1fr);
		gap: 0.25rem;
	}

	.stv-azbar__link {
		min-height: 38px;
		padding: 0 0.15rem;
		font-size: 0.82rem;
	}

	.stv-azbar__all {
		font-size: 0.72rem;
	}
}