/**
 * SciFi2Go - template layer.
 *
 * Backs the root templates (06.7 / 06.18). cinema.css owns the reusable
 * components; this file owns the layout that only exists once you are inside a
 * template: the reading surface, the listing bar, the hub hero, search and 404.
 *
 * Direction: D-0020 Cinema & Paper. Display: Archivo (headings only).
 * Contrast: already audited in docs/BRAND.md §7.3 - do not re-derive here.
 */

/* -------------------------------------------------------------------------
   Neutralise the GeneratePress container
   The parent's grid is `max-width: 1200px; padding-inline: 10px` and
   `.one-container .site-content` adds another 40px. Cinema & Paper needs its
   own rhythm, and full-bleed cinema bands, so the grid is dropped and
   .s2g-wrap becomes the single source of horizontal containment.
   ------------------------------------------------------------------------- */
.grid-container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* THE fix for content sitting flush left instead of centred.
 *
 * GeneratePress wraps every template in header.php as:
 *     <div id="page"><div id="content" class="site-content"> ...our <main>...
 * and main.css sets `.site-content { display: flex }` OUTSIDE any media query,
 * with `flex-direction: column` applied only inside `@media (max-width: 768px)`.
 *
 * So on desktop the wrapper is a flex ROW and our <main> is its only item. A
 * row flex item is sized to its content, not stretched, and sits at
 * flex-start - the main column shrink-wrapped to ~1200px and hugged the left
 * edge, leaving dead white space beside it, while the header (rendered outside
 * .site-content) looked correct. Below 768px it became a column, stretched, and
 * looked fine, which is why this only showed on wide screens.
 *
 * Making the wrapper a plain block restores normal flow: <main> fills the
 * width, and .s2g-wrap centres the content inside it as intended.
 *
 * Scoped to `body` deliberately. GeneratePress's rule is a bare `.site-content`
 * so it has the same specificity as ours, which would leave the winner down to
 * stylesheet order - and GP inlines its CSS from wp_head, so that order is not
 * ours to guarantee. The extra element raises specificity to (0,1,1) and wins
 * outright.
 */
body .site-content {
	display: block;
}

.one-container .site-content,
.separate-containers .inside-article {
	padding: 0;
}
.entry-header,
.entry-content,
.entry-summary {
	margin-top: 0;
}

/* GP floats .content / .sidebar - we never render a sidebar, so undo the float
   or the content column collapses to 0 width in some viewports. */
.content {
	float: none;
	width: 100%;
}

/* -------------------------------------------------------------------------
   Screen-reader + skip link
   ------------------------------------------------------------------------- */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background: #fff;
	clip: auto !important;
	-webkit-clip-path: none;
	clip-path: none;
	color: var(--s2g-navy-600);
	display: block;
	font-size: var(--s2g-fs-sm);
	height: auto;
	left: 16px;
	line-height: normal;
	padding: 16px 24px;
	text-decoration: none;
	top: 16px;
	width: auto;
	z-index: 100000;
}

/* -------------------------------------------------------------------------
   Masthead internals
   ------------------------------------------------------------------------- */
.s2g-main { display: block; }

/* The masthead wrapper doubles as the container: cinema.css's .s2g-wrap gives it
   `max-width: 1200px; margin-inline: auto`, and this rule narrows it further.
   It was 56ch (~448px), copied from the design - but the design demonstrated a
   SHORT headline, and 56ch is a body-text measure, not one that suits a 60px
   display title. Real titles wrapped to seven lines in a thin ribbon with dead
   space beside them. 900px holds a normal title to two or three lines while
   still keeping the masthead from running the full 1200px. */
.s2g-masthead__in { max-width: 900px; }
.s2g-crumbs-nav { display: block; }
.s2g-entry-title { margin: 0 0 24px; color: #fff; }
.s2g-standfirst {
	color: var(--s2g-c-muted);
	font-size: var(--s2g-fs-lede);
	line-height: var(--s2g-lh-body);
	margin: 0 0 24px;
	/* The title now uses the 900px column, but the lede must not: at 19px a full
	   900px line runs to roughly 90 characters. Capped separately so the headline
	    gets the width and the prose keeps a readable measure. */
	max-width: 56ch;
}

/* A masthead with no artwork still needs its contrast floor. */
.s2g-masthead:not(.s2g-band--filled)::before {
	background: linear-gradient(180deg,
		rgba(5, 12, 56, .60) 0%, rgba(5, 12, 56, .68) 48%, rgba(5, 12, 56, .93) 100%);
}

/* -------------------------------------------------------------------------
   Verdict + quick facts internals
   ------------------------------------------------------------------------- */
.s2g-verdict__line {
	margin: 0;
	font-size: var(--s2g-fs-lede);
	line-height: var(--s2g-lh-ui);
	font-weight: 500;
	color: var(--s2g-text);
}
.s2g-quickfacts__title {
	font-family: 'Roboto', Arial, sans-serif;
	font-size: var(--s2g-fs-body);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--s2g-navy-400);
	margin: 0 0 16px;
}

/* Multi-page posts */
.s2g-page-links { margin: 32px 0 0; font-size: var(--s2g-fs-ui); }
.s2g-page-links__label { font-weight: 500; }
.s2g-page-links a { display: inline-block; margin-left: 4px; }

/* -------------------------------------------------------------------------
   Newsletter band internals
   ------------------------------------------------------------------------- */
.s2g-newsletter__in { max-width: 640px; }
.s2g-field-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}
.s2g-field {
	flex: 1 1 240px;
	min-width: 0;
	padding: 14px 16px;
	font: inherit;
	color: var(--s2g-navy-600);
	background: #fff;
	border: 1px solid transparent;
	border-radius: var(--s2g-radius-pill);
}
.s2g-field:focus { border-color: var(--s2g-c-link); }
.s2g-newsletter__note {
	margin: 16px 0 0;
	color: var(--s2g-c-subtle);
	font-size: var(--s2g-fs-sm);
	line-height: var(--s2g-lh-ui);
}

/* -------------------------------------------------------------------------
   Reading surface (paper)
   ------------------------------------------------------------------------- */
.s2g-article {
	padding: 48px 0 64px;
}
.s2g-article__grid {
	display: grid;
	gap: 48px;
	align-items: start;
}
@media (min-width: 1024px) {
	/* Size the text column to the measure it actually renders at, not to 1fr.
	 *
	 * The prose is capped at 68ch (readability), so giving it a 1fr column left
	 * it hugging the left of a wider cell with a dead gap before the rail - the
	 * same "content sits left" complaint, one level in. Sizing the column to
	 * 68ch and centring the pair makes the text and the rail read as one
	 * centred block. */
	.s2g-article__grid {
		grid-template-columns: minmax(0, var(--s2g-measure)) 300px;
		gap: 64px;
		justify-content: center;
	}
	/* The "Keep reading" rail is optional - it only renders when the query
	   behind it returns posts. Without this rule the grid would still reserve
	   its 300px column and leave a dead gap beside the text, which is exactly
	   what a first article looks like: one guide, no siblings to suggest.
	   Collapsing the column lets the prose use the width it is owed. */
	.s2g-article__grid:not(:has(.s2g-aside)) {
		grid-template-columns: minmax(0, var(--s2g-measure));
	}
	/* With the rail collapsed the prose is the only column, so centre it
	   instead of letting it hug the left edge of a 1200px wrap. The 68ch
	   measure is unchanged - this is about balance, not line length. */
	.s2g-article__grid:not(:has(.s2g-aside)) .s2g-prose {
		margin-inline: auto;
	}
}

/* The lead paragraph: one step larger, one step lighter. */
.s2g-prose {
	max-width: var(--s2g-measure);
}
.s2g-prose > * {
	max-width: var(--s2g-measure);
}
.s2g-prose > p:first-of-type {
	font-size: var(--s2g-fs-lede);
	line-height: var(--s2g-lh-body);
	color: var(--s2g-text-secondary);
}
.s2g-prose h2 { margin: 48px 0 16px; }
.s2g-prose h3 { margin: 32px 0 12px; }
.s2g-prose h4 { margin: 24px 0 8px; }
.s2g-prose ul,
.s2g-prose ol { margin: 0 0 24px; padding-left: 22px; }
.s2g-prose li { margin-bottom: 8px; }
.s2g-prose blockquote { margin: 32px 0; }
.s2g-prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 24px;
}
.s2g-prose th,
.s2g-prose td {
	border: 1px solid var(--s2g-border);
	padding: 8px 12px;
	text-align: left;
}
.s2g-prose th { background: var(--s2g-surface-sunken); }
.s2g-prose img { border-radius: var(--s2g-radius-lg); }
.s2g-prose hr { border: 0; border-top: 1px solid var(--s2g-border); margin: 48px 0; }

/* WordPress alignment classes */
.s2g-prose .alignwide { max-width: min(100%, 820px); }
.s2g-prose .alignfull { max-width: 100vw; margin-left: calc(50% - 50vw); }
.s2g-prose .alignleft { float: left; margin: 0 24px 16px 0; }
.s2g-prose .alignright { float: right; margin: 0 0 16px 24px; }
.s2g-prose .aligncenter { display: block; margin-inline: auto; }

/* aside rail */
.s2g-aside {
	border: 1px solid var(--s2g-border);
	border-radius: var(--s2g-radius-lg);
	padding: 24px;
	background: var(--s2g-surface-sunken);
}
.s2g-aside h3 { margin: 0 0 12px; }
.s2g-aside h3 + h3 { margin-top: 24px; }
.s2g-aside ul { margin: 0; padding-left: 20px; }
.s2g-aside li { margin-bottom: 8px; font-size: var(--s2g-fs-ui); line-height: var(--s2g-lh-ui); }
.s2g-aside p { margin: 0; font-size: var(--s2g-fs-sm); line-height: var(--s2g-lh-body); color: var(--s2g-text-secondary); }

/* "Keep reading" - the most recent other guides */
.s2g-aside__list { list-style: none; padding: 0; margin: 0; }
.s2g-aside__list li { padding: 12px 0; border-bottom: 1px solid var(--s2g-border); margin: 0; }
.s2g-aside__list li:first-child { padding-top: 0; }
.s2g-aside__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.s2g-aside__list a { display: block; font-weight: 500; }
.s2g-aside__list span {
	display: block; margin-top: 4px;
	font-size: var(--s2g-fs-sm); line-height: var(--s2g-lh-ui); color: var(--s2g-navy-400);
}

/* -------------------------------------------------------------------------
   Hub hero (cinema) + subcategory strip
   ------------------------------------------------------------------------- */
.s2g-hub-hero {
	position: relative;
	color: var(--s2g-c-text);
	isolation: isolate;
	background: var(--s2g-c-base);
	padding: 48px 0;
}
.s2g-hub-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(720px 340px at 92% 8%, rgba(42, 116, 255, .34), transparent 64%),
		radial-gradient(620px 320px at 2% 96%, rgba(167, 68, 255, .28), transparent 66%);
}

/* Header background art on the hub hero (task 06.21).
 *
 * Mirrors .s2g-band--art: the image is a background, and a scrim sits between it
 * and the text, because artwork has not been audited for contrast and the
 * headline must stay AA-legible over whatever is behind it. Without this the
 * hub hero had only a radial glow, which is not enough over a photograph.
 */
.s2g-hub-hero--art {
	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat;
}
.s2g-hub-hero--art::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(90deg,
		rgba(5, 12, 56, .95) 0%,
		rgba(5, 12, 56, .88) 38%,
		rgba(5, 12, 56, .62) 62%,
		rgba(5, 12, 56, .30) 100%);
}
/* Lift the hero content above both the glow and the scrim. */
.s2g-hub-hero .s2g-wrap {
	position: relative;
	z-index: 1;
}

.s2g-hub-hero > * { position: relative; z-index: 1; }
.s2g-hub-hero h1 { margin: 0 0 16px; color: #fff; }
.s2g-hub-hero__desc {
	color: var(--s2g-c-muted);
	font-size: var(--s2g-fs-lede);
	line-height: var(--s2g-lh-ui);
	max-width: 60ch;
	margin: 0;
}
.s2g-hub-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--s2g-c-border-soft);
	color: var(--s2g-c-subtle);
	font-size: var(--s2g-fs-sm);
}
.s2g-hub-hero__meta strong {
	display: block;
	color: #fff;
	font-family: var(--s2g-font-display);
	font-weight: 600;
	font-stretch: 118%;
	font-size: var(--s2g-fs-h3);
	line-height: 30px;
}
.s2g-hub-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* -------------------------------------------------------------------------
   Listing (paper)
   ------------------------------------------------------------------------- */
.s2g-listing {
	padding: 48px 0 64px;
}
.s2g-listing__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 32px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--s2g-border);
}
.s2g-listing__count { margin: 0; font-size: var(--s2g-fs-ui); color: var(--s2g-text-secondary); }
.s2g-listing__count b { color: var(--s2g-text); }
.s2g-sort {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: 'Roboto', Arial, sans-serif;
	font-size: var(--s2g-fs-sm);
	color: var(--s2g-navy-400);
}
.s2g-sort select {
	font: inherit;
	color: var(--s2g-navy-600);
	background: #fff;
	border: 1px solid var(--s2g-border-strong);
	border-radius: var(--s2g-radius);
	padding: 8px 12px;
}
.s2g-sort select:hover { border-color: var(--s2g-blue-200); }

/* -------------------------------------------------------------------------
   Empty states / 404
   ------------------------------------------------------------------------- */
.s2g-empty {
	max-width: 60ch;
	padding: 48px 0 64px;
}
.s2g-empty h2 { margin: 0 0 12px; }
.s2g-empty p { color: var(--s2g-text-secondary); margin: 0 0 24px; }
.s2g-404 { padding: 96px 0; }
.s2g-404 h1 { margin: 0 0 16px; }
.s2g-404__code {
	font-family: var(--s2g-font-display);
	font-weight: 800;
	font-stretch: 125%;
	font-size: clamp(64px, 14vw, 140px);
	line-height: .9;
	letter-spacing: -.02em;
	margin: 0 0 8px;
	color: var(--s2g-blue-100);
}
.s2g-404__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* -------------------------------------------------------------------------
   Search
   ------------------------------------------------------------------------- */
.s2g-search-form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 560px;
	margin: 0;
}
.s2g-search-form input[type="search"],
.s2g-search-form input[type="text"] {
	flex: 1 1 240px;
	min-width: 0;
	font: inherit;
	color: var(--s2g-navy-600);
	background: #fff;
	border: 1px solid var(--s2g-border-strong);
	border-radius: var(--s2g-radius-pill);
	padding: 12px 18px;
}
.s2g-search-form input:focus { border-color: var(--s2g-blue-400); }
.s2g-search-results__query {
	margin: 0 0 24px;
	font-size: var(--s2g-fs-ui);
	color: var(--s2g-text-secondary);
}
.s2g-search-results__query b { color: var(--s2g-text); }

/* -------------------------------------------------------------------------
   Page template
   ------------------------------------------------------------------------- */
.s2g-page {
	padding: 48px 0 64px;
}
.s2g-page__head { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--s2g-border); }
.s2g-page__head h1 { margin: 0; }
.s2g-page__lede {
	margin: 12px 0 0;
	font-size: var(--s2g-fs-lede);
	line-height: var(--s2g-lh-body);
	color: var(--s2g-text-secondary);
}
.s2g-page .s2g-prose { max-width: var(--s2g-measure); }

/* A page is one reading column.
   The masthead caps itself at 900px and centres inside the wrap, but the body
   used the full 1200px wrap. The result was an H1 starting ~90px to the right
   of the first paragraph, and a reading measure floating against the left edge
   of a much wider box. Giving the page's own wrap the masthead's 900px makes
   both share one left edge and one column width. */
.s2g-page > .s2g-wrap { max-width: 900px; }

/* Block buttons in prose must not depend on stylesheet order.
   GeneratePress and WordPress core both style .wp-block-button__link from
   wp_head, which we cannot order against; a themed outline button was rendering
   as a grey box with white text. Scoping to .s2g-prose raises specificity so the
   brand pair always wins, whatever is printed first. */
.s2g-prose .wp-block-button__link {
	background-color: var(--s2g-btn-bg);
	border-color: transparent;
	color: var(--s2g-btn-text);
}

.s2g-prose .wp-block-button__link:hover,
.s2g-prose .wp-block-button__link:focus {
	background-color: var(--s2g-btn-bg-hover);
	color: var(--s2g-btn-text);
}

.s2g-prose .is-style-outline .wp-block-button__link {
	background-color: var(--s2g-btn-secondary-bg);
	border-color: var(--s2g-btn-secondary-border);
	color: var(--s2g-btn-secondary-text);
}

.s2g-prose .is-style-outline .wp-block-button__link:hover,
.s2g-prose .is-style-outline .wp-block-button__link:focus {
	background-color: var(--s2g-blue-50);
	color: var(--s2g-link-hover);
}

/* 404 body copy */
.s2g-404__body { max-width: 60ch; color: var(--s2g-text-secondary); }

/* -------------------------------------------------------------------------
   Comments - styled to match, and closed by default until moderation is set up
   ------------------------------------------------------------------------- */
.s2g-comments { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--s2g-border); }
.s2g-comments ol { list-style: none; padding: 0; margin: 0; }
.s2g-comments .children { list-style: none; padding-left: 24px; }
.s2g-comments .comment-body {
	border: 1px solid var(--s2g-border);
	border-radius: var(--s2g-radius-lg);
	padding: 16px 24px;
	margin-bottom: 16px;
}
.s2g-comments .comment-meta { font-size: var(--s2g-fs-sm); color: var(--s2g-navy-400); margin-bottom: 8px; }
.s2g-comments .comment-metadata { font-size: var(--s2g-fs-sm); color: var(--s2g-navy-400); }
.s2g-comments .reply { font-size: var(--s2g-fs-sm); }
.s2g-comments textarea,
.s2g-comments input[type="text"],
.s2g-comments input[type="email"],
.s2g-comments input[type="url"] {
	width: 100%;
	font: inherit;
	padding: 12px 16px;
	border: 1px solid var(--s2g-border-strong);
	border-radius: var(--s2g-radius);
	margin-bottom: 12px;
}
.s2g-comments .submit {
	font-family: 'Roboto', Arial, sans-serif;
	font-size: var(--s2g-fs-ui);
	font-weight: 700;
	padding: 14px 24px;
	border: 0;
	border-radius: var(--s2g-radius-pill);
	background: var(--s2g-blue-600);
	color: #fff;
	cursor: pointer;
}
.s2g-comments .submit:hover { background: var(--s2g-blue-700); }

/* -------------------------------------------------------------------------
   Reduced motion + print
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.s2g-sort select,
	.s2g-search-form input { transition: none !important; }
}

/* -------------------------------------------------------------------------
   Blocks whose CSS was never written

   The hub hero title, the FAQ pattern, the affiliate buy row and the Kindle
   preview CTA all shipped markup with no rule behind it. cinema.css supplies
   the display face, weight and tracking for h1, but it sets no SIZE, and
   theme.json's fluid type scale only reaches blocks - it never touches plain
   front-end HTML in a classic theme. Without an explicit size these headings
   fell back to the browser default (32px) instead of the design's ramp.
   ------------------------------------------------------------------------- */

/* Hub hero - the design ramps 38px -> 60px. */
.s2g-hub-hero__title {
	font-size: var(--s2g-fs-h1);
	line-height: 1.02;
	color: #fff;
}

/* FAQ pattern. Matches the design: rules between items, display-face summaries. */
.s2g-faq {
	margin-top: var(--s2g-space-8);
}
.s2g-faq details {
	border-bottom: 1px solid var(--s2g-border);
	padding: var(--s2g-space-4) 0;
}
.s2g-faq details:first-of-type {
	border-top: 1px solid var(--s2g-border);
}
.s2g-faq summary {
	font-family: var(--s2g-font-display);
	font-weight: 600;
	font-stretch: 112%;
	font-size: var(--s2g-fs-lede);
	line-height: 1.3;
	color: var(--s2g-text);
	cursor: pointer;
}
.s2g-faq summary:hover {
	color: var(--s2g-link);
}
.s2g-faq summary:focus-visible {
	outline: 2px solid var(--s2g-focus-ring);
	outline-offset: var(--s2g-focus-offset);
	border-radius: 2px;
}
.s2g-faq details[open] summary {
	margin-bottom: var(--s2g-space-3);
}
.s2g-faq p {
	margin: 0;
	color: var(--s2g-text-secondary);
}

/* Affiliate buy row. The block already declares a flex layout; this is the
   gap and the sunken panel the design wraps the buttons in. */
.s2g-buy {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2g-space-3);
	margin-top: var(--s2g-space-8);
	padding: var(--s2g-space-6);
	background: var(--s2g-surface-sunken);
	border: 1px solid var(--s2g-border);
	border-radius: var(--s2g-radius-lg);
}

/* Kindle preview CTA, sitting between the iframe and the disclosure note. */
.s2g-preview__cta {
	margin: var(--s2g-space-4) 0 0;
	text-align: center;
}

/* Creator link, under the buy buttons. Tagged rel="about" in the markup. */
.s2g-preview__author {
	margin: var(--s2g-space-3) 0 0;
	text-align: center;
	font-size: var(--s2g-fs-sm);
	line-height: var(--s2g-lh-ui);
}

/* --------------------------------------------------------------------------
 * Credits block, films and TV only
 *
 * Books show their creator link inside the Amazon panel. Films and TV have no
 * such panel, so without this block a film or TV guide showed no creator credit
 * and no way to reach the streaming link. Sits directly under the quick facts.
 * -------------------------------------------------------------------------- */
.s2g-credits {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin: 0 0 var(--s2g-space-8);
}

.s2g-credits__creator {
	margin: 0;
	font-size: var(--s2g-fs-sm);
	line-height: var(--s2g-lh-ui);
}

.s2g-credits__watch {
	margin: 0;
}

/* Credits line: role + linked names, under the quick facts, every format. */
.s2g-credits {
	margin: 0 0 var(--s2g-space-8);
}

.s2g-credits__line {
	margin: 0;
	font-size: var(--s2g-fs-sm);
	line-height: var(--s2g-lh-ui);
	color: var(--s2g-c-muted);
}

.s2g-credits__role {
	color: var(--s2g-c-subtle);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: var(--s2g-fs-micro);
	margin-right: 6px;
}

/* The watch button, directly under the trailer. */
.s2g-video__watch {
	margin: var(--s2g-space-4) 0 0;
	text-align: center;
}