/**
 * Film & TV — layout only.
 *
 * Every colour here is an Astra palette variable and never a literal hex, and
 * nothing declares a font-family. That is the condition under which design spec
 * 3's "no custom CSS" rule permits this file at all: lehane-172 re-skins this
 * section by changing Customizer option values, exactly as it re-skins the rest
 * of the site. A literal hex would sever that link silently -- it would look
 * right today and break the moment a palette slot changes. See the magenta probe
 * in the Plan 1 foundation record, section 3.
 *
 * Slots: 0 accent, 3 text, 4 ground, 5 tint, 7 rule, 8 muted.
 */

.filmtv-filter {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 0 0 2.5rem;
	padding: 0 0 0.75rem;
	border-bottom: 1px solid var(--ast-global-color-7);
}

.filmtv-filter a {
	text-decoration: none;
	font-size: 0.9375rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.filmtv-filter [aria-current="page"] {
	text-decoration: underline;
	text-underline-offset: 0.35em;
}

.filmtv-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 2.5rem 2rem;
}

.filmtv-card {
	margin: 0;
}

/*
 * A fixed 2:3 frame with object-fit: cover. The eleven posters range from
 * 243x330 to 2764x4096 and one (Bloodline, 800x800) is SQUARE, so it is
 * cropped top and bottom here. That is the frame doing its job, not a bug.
 * No border, no shadow, no card -- design spec 3.
 */
.filmtv-card__poster {
	display: block;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	margin-bottom: 0.9rem;
	background-color: var(--ast-global-color-7);
}

.filmtv-card__poster img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.filmtv-card__title {
	margin: 0 0 0.25rem;
	font-size: 1.05rem;
	line-height: 1.3;
}

.filmtv-card__title a {
	text-decoration: none;
}

.filmtv-card__type {
	margin: 0 0 0.4rem;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ast-global-color-8);
}

.filmtv-card__synopsis {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--ast-global-color-8);
}

/*
 * The title lead MOVED TO THE DESIGN LAYER in Plan 3 Task 2 (§0.8, §0.9).
 *
 * The lead's grid, the article's padding reset, the posterless guard, the
 * eyebrow spacing and the H1's top margin are now the generic
 * `.lehane-page-lead` component in
 * lehane-customizations/assets/css/design.css, so this page and the book
 * single consume one set of rules instead of two copies. The reasoning that
 * used to live in this comment -- why the reset needs an ID selector, why the
 * panel is not built from negative margins, why the insets are Astra's own
 * computed values at each band -- moved with the rules and is in that file.
 *
 * parts/content-filmtv.php CARRIES BOTH VOCABULARIES: the generic classes the
 * component matches and the BEM ones the three rules below still key on.
 * Remove a generic class there and this page loses its entire lead layout
 * silently: no error, no failing markup count, the body back in a 280px track.
 *
 * WHAT STAYED HERE, and why. The trailer's and the watch link's card insets
 * are Film & TV only. They have to track the host's padding at each band, so
 * they keep the three breakpoint blocks that mirror the component's -- change
 * one and the other has to move with it. The poster's shadow stays for the
 * same reason: it is poster-specific, and a book jacket is not a poster.
 */
.filmtv-single__trailer,
.filmtv-single__watch {
	margin-inline: 2.5em;
}

@media (min-width: 768px) {
	.filmtv-single__trailer,
	.filmtv-single__watch {
		margin-inline: 1rem;
	}
}

@media (max-width: 544px) {
	.filmtv-single__trailer,
	.filmtv-single__watch {
		margin-inline: 1em;
	}
}

.filmtv-single__poster img {
	display: block;
	width: 100%;
	height: auto;
	filter: var(--lehane-shadow-cover);
}

/* margin-block, not the `margin: 2.5rem 0 0` shorthand this used to be. The
   shorthand sits after the three inset rules above and reset their
   margin-inline back to 0, which pulled the trailer flush with the stone panel
   instead of sitting at the card inset. Owning only the block axis here leaves
   the inline axis to the breakpoint rules that set the inset. */
.filmtv-single__trailer {
	margin-block: 2.5rem 0;
}

/*
 * The trailer's 16:9 frame.
 *
 * Core ships these exact rules in wp-includes/blocks/embed/style.min.css, and
 * Task 4's brief assumed they would already be on the page. They are not.
 * wp_should_load_separate_core_block_assets() is TRUE on this install (WP
 * 7.0.4), so wp-block-embed's stylesheet loads only when a real core/embed
 * block renders, and the trailer is hand-written core markup, not a block.
 *
 * Measured without these rules, at all six gate viewports: no stylesheet on the
 * page carried any wp-embed-aspect-16-9 rule, the wrapper's ::before computed
 * to content "none" and padding-top 0px, and the player sat at 334.6 x 675 at a
 * 390px viewport -- a ratio of 0.50 where 1.78 is correct. The iframe's width
 * was capped by Astra's max-width: 100%; nothing capped its height.
 *
 * Keyed on core's own class names so the markup's classes stay load-bearing
 * rather than decorative. Layout only: no colour, no font-family.
 *
 * THE ELEMENTS THESE RULES TARGET COME FROM parts/content-filmtv.php, and from
 * nowhere else on the site. The figure, its wp-embed-aspect-16-9 class and the
 * inner .wp-block-embed__wrapper div are all written by hand there. Change or
 * remove any of the three and these rules stop matching silently: no error, no
 * failing markup count, just a 675px-tall player again.
 */
.filmtv-single__trailer .wp-block-embed {
	margin: 0;
}

.filmtv-single__trailer .wp-embed-aspect-16-9 .wp-block-embed__wrapper {
	position: relative;
	aspect-ratio: 16 / 9;
}

.filmtv-single__trailer .wp-embed-aspect-16-9 .wp-block-embed__wrapper iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* margin-block for the same reason as the trailer above: the inline axis
   belongs to the card-inset rules. */
.filmtv-single__watch {
	margin-block: 1.5rem 0;
}

/*
 * auto-fit rather than auto-fill: the featured strip holds at most three
 * cards, and auto-fill would leave empty tracks beside them.
 *
 * The margin and padding are re-declared, not repeated for tidiness. The block
 * renders inside .entry-content, where Astra's dynamic inline CSS carries
 * `.entry-content ul, .entry-content ol { padding-left: 20px; margin: revert }`.
 * That is a two-part selector, so it beats the single .filmtv-grid class that
 * already sets both to 0 -- the same shape as the .ast-article-post override
 * on the card, in a different container. Measured on a probe page at a 1400px
 * viewport before this rule existed: padding-left 20px and margin-block 18px
 * (the UA `ul` 1em at an 18px root), which pushed the three cards 20px right of
 * the surrounding content and cut each one from 376px to 369.3px. The archive
 * never sees it, because its grid is not inside .entry-content.
 *
 * Both card widths come from measure-layout.mjs at a 1400px viewport, where the
 * grid box is 1200px and the column gap computes to 36px. To re-derive: 376 is
 * (1200 - 2 x 36) / 3, the three tracks sharing the whole box; 369.3 is
 * (1200 - 20 - 2 x 36) / 3, the same three tracks after Astra's 20px indent.
 * An earlier draft of this comment said 378.7, which is what that arithmetic
 * gives at a 32px gap. The gap is 2rem and this site's root is 18px, not 16px,
 * so the gap is 36px and 378.7 was never measured on this site.
 */
.filmtv-featured .filmtv-grid {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	margin: 0;
	padding: 0;
}

/*
 * The strip's own vertical spacing.
 *
 * Zeroing the grid above also took away the 18px of top and bottom margin that
 * Astra's `margin: revert` had been supplying by accident, which left the strip
 * flush against whatever precedes and follows it. This replaces an accident
 * with an intention.
 *
 * It has to live here rather than in the editor. block.json declares no spacing
 * support, because a declared one emits nothing: ACF injects no wrapper for a
 * renderTemplate block, and a probe with style.spacing.margin.top set to 111px
 * put that string in the served HTML zero times. The renderer's docblock has
 * the measurement, and what adopting get_block_wrapper_attributes() would cost.
 *
 * 2.5rem is this file's existing section rhythm rather than a new number: it is
 * the filter's bottom margin, the single lede's bottom margin, the trailer's
 * top margin and the grid's row gap. At an 18px root it computes to 45px, which
 * is the measured row gap between two rows of cards.
 */
.filmtv-featured {
	margin: 2.5rem 0;
}