/* Canonical flagship CTA family — shared across every preview that renders it.
   Design language now checked against the three owner-supplied reference images (Visual-
   Conformance assignment) — see reports/flagship-cta-family/template-visual-conformance.md for
   the field-by-field comparison. Deep near-black panel, warm gold accents (reusing the existing
   #d7b16b gold already established in assets/css/styles.css's .promo-eyebrow rule), cream serif
   headings, generous rounded corners, restrained cinematic spacing. Never copied into dist/ as
   dist output — this is preview CSS. */

.flagship-sidebar, .flagship-inline, .flagship-trailer, .flagship-feature-cta {
  background: linear-gradient(180deg, #111214, #191b20);
  color: #f6f2e8;
  border-radius: var(--radius-lg, 18px);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 1.75rem;
}
/* Promotional-family padding, responsive (Site-Wide Spacing Audit, 2026-07-28) — previously a
   single flat 1.6rem at every viewport; mobile now steps down like every other card family
   rather than carrying the desktop inset unchanged. */
@media (max-width: 1080px) {
  .flagship-sidebar, .flagship-inline, .flagship-trailer, .flagship-feature-cta { padding: 1.5rem; }
}
@media (max-width: 720px) {
  .flagship-sidebar, .flagship-inline, .flagship-trailer, .flagship-feature-cta { padding: 1.25rem; }
}

/* Modern Design Refresh (2026-07-28): the serif face is now reserved for headings that ARE
   literally the flagship book's own title (sidebar's <h3>, feature-CTA's <h2>) — never for a
   sentence-style headline. .flagship-inline's and .flagship-trailer's <h2> are headline SENTENCES
   ("Enter the world of...", "Go deeper into...") and now use the default sans-serif like every
   other heading on the site. */
.flagship-sidebar h3, .flagship-feature-cta h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  color: #f6f2e8;
}
.flagship-inline h2, .flagship-trailer h2 {
  color: #f6f2e8;
}

/* Gold section label ("FEATURED BOOK FROM THE EDITOR" / "WATCH THE TRAILER") — matches the
   reference templates' gold-eyebrow treatment (assets/css/styles.css's existing
   .promo-eyebrow/.eyebrow gold-on-dark rule, #d7b16b, reused here rather than a new color). */
.flagship-section-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  font-weight: 700;
  color: #d7b16b;
  margin: 0 0 0.6rem;
}

/* The explicit ownership disclosure — readable light cream text, distinct from BOTH the gold
   label above it and the deliberately-subordinate review note below the CTA. Not present in the
   reference templates (which have no separate disclosure line) but required by the written
   architecture — styled to sit quietly between the label and the headline without competing
   with either. */
.flagship-disclosure {
  color: rgba(246, 242, 232, 0.82);
  font-size: 0.92rem;
  font-style: italic;
  margin: 0 0 0.9rem;
}

.flagship-sidebar { max-width: 320px; }
.flagship-sidebar .flagship-cover.small { width: 100%; max-width: 220px; aspect-ratio: 2 / 3; height: auto; object-fit: cover; margin: 0 auto 1rem; }

.flagship-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
  gap: 1.5rem;
  align-items: center;
}

/* Trailer-CTA Scale Normalization (2026-07-29): the prior ~57%/43% media/copy split (giving the
   video the LARGER share of the row, with a 360px minimum floor) rendered a 16:9 video wide enough
   to stand noticeably taller than every neighboring dark CTA — e.g. at the site's 1240px max
   container width, the video column resolved to ~682px wide (~383px tall at 16:9), well beyond the
   newsletter CTA's fixed 220px-tall form embed and the copy-only xCited CTA, which was the actual
   cause of the reported oversizing (confirmed via the shared container/padding token math, not
   guessed). The ratio now mirrors .directory-newsletter-cta's own proportions exactly (copy gets
   the larger ~57% share, media/action the smaller ~43%) so the trailer sits at the same visual
   scale as its sibling CTAs — at that same 1240px width the video column now resolves to ~503px
   wide (~283px tall), a meaningfully smaller, better-balanced footprint, while remaining clearly
   the dominant visual element within its own card. This is one shared rule, so the homepage and
   every book page (the only two consumers of render_flagship_trailer()) both inherit it — no
   page-specific variant was needed. */
.flagship-trailer {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr);
  gap: 1.75rem;
  align-items: center;
}

.flagship-inline-actions, .flagship-trailer-media {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Trailer-CTA Scale Normalization (2026-07-29), part 2 — the grid-ratio fix above only helps at
   widths ≥901px, where .flagship-trailer is still 2-column. Below that (the shared collapse
   breakpoint at 900px, defined further down and shared with .flagship-inline — deliberately left
   untouched here to avoid an unrelated behavior change to that component) the trailer stacks to a
   single column and the video would otherwise stretch to the FULL container width. At a common
   768px tablet width that alone produced a ~672px-wide, ~378px-tall video — taller than at the
   site's own 1240px desktop max-width. A plain max-width cap, independent of which layout mode is
   active, keeps the video's rendered size consistent (and never oversized) at every viewport,
   without needing to retune the shared breakpoint.

   Regression fixed (2026-07-29, same day): `max-width: 480px; margin-inline: auto;` alone
   collapsed this element to ~3.5px wide in real-browser testing (confirmed via Playwright
   getBoundingClientRect — not guessed). Root cause: an `auto` inline margin on a CSS Grid item
   overrides the default `justify-self: stretch`, switching the item to size-to-content instead of
   stretching to its grid track — and this flex column's only content (a plain div wrapping an
   aspect-ratio-sized facade, no text, no intrinsic width) has an effectively zero content size, so
   "size to content" collapsed it entirely. The play button, absolutely positioned within that
   collapsed 3.5px-wide facade (which has overflow:hidden), was clipped down to a barely-visible
   sliver — this was the "tiny stray mark" the owner saw where the video should have been. Adding
   an explicit `width: 100%` restores a definite width (100% of the grid track, THEN capped by
   max-width) so the item has a real size to stretch/center from, instead of falling back to
   content-based sizing. */
.flagship-trailer-media { width: 100%; max-width: 480px; margin-inline: auto; }

/* Featured flagship CTA — the homepage's single principal promotion: cover | copy | actions
   three columns (assignment §20 — cover ~20-25%, copy ~45-55%, actions ~25-30%). */
.flagship-feature-cta {
  display: grid;
  grid-template-columns: minmax(150px, 0.85fr) minmax(0, 2fr) minmax(200px, 1fr);
  gap: 1.75rem;
  align-items: center;
}
.flagship-feature-cover-col .flagship-cover.large {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 2 / 3;
  height: auto;
  object-fit: cover;
  margin: 0 auto;
}
.flagship-feature-actions-col {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.flagship-feature-actions-col .flagship-format-buttons-stacked .btn { width: 100%; }
@media (max-width: 900px) {
  .flagship-feature-cta { grid-template-columns: 1fr; text-align: left; }
  .flagship-feature-cover-col .flagship-cover.large { margin: 0; }
}

/* Sidebar/inline: narrow vertical button column (reference templates 2 and 3). */
.flagship-format-buttons-stacked { display: flex; flex-direction: column; gap: 0.6rem; }
.flagship-format-buttons-stacked .btn { width: 100%; }

/* Trailer: horizontal button row beneath the copy (reference template 1). */
.flagship-format-buttons-row { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.75rem; }

/* Disabled purchase-format control (Focused Asset Integration assignment, §5/§6) — visually
   distinct from an active button (dashed border, reduced opacity, no pointer cursor), never a
   link, not keyboard-focusable as an active control (a bare <span>, no tabindex added). */
.btn-disabled {
  background: transparent;
  color: rgba(246,242,232,0.68);   /* WCAG AA verified: >=4.5:1 against both dark-panel gradient stops (see scripts/validation/contrast.py) — muted relative to the opaque active buttons, but comfortably readable, never near-invisible */
  border: 1px dashed rgba(255,255,255,0.35);
  cursor: not-allowed;
}
.btn-disabled:hover { transform: none; }

.flagship-trailer-placeholder {
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  background: repeating-linear-gradient(135deg, #1c1e24, #1c1e24 12px, #202329 12px, #202329 24px);
  border: 1px dashed rgba(255,255,255,0.25);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1rem;
}
.flagship-trailer-poster-label {
  color: #e0dbcd;
  font-weight: 600;
  font-size: 0.95rem;
}

/* Real Vimeo click-to-load facade — replaces the placeholder once a verified trailer exists.
   Shows the official oEmbed thumbnail as a poster; JS (see FLAGSHIP_CTA_FAMILY_JS) swaps in the
   real iframe only on user interaction (lazy, no autoplay on load or on click-through). */
.flagship-trailer-facade {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background-color: #0c0d10;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,255,255,0.12);
}
.flagship-trailer-facade iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.flagship-trailer-play-button {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(17,18,20,0.72);
  border: 2px solid #e0dbcd;
  color: #e0dbcd;
  font-size: 1.6rem;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.flagship-trailer-play-button:hover { background: rgba(17,18,20,0.9); }

@media (max-width: 900px) {
  .flagship-inline, .flagship-trailer {
    grid-template-columns: 1fr;
  }
  .flagship-sidebar { max-width: none; }
}


/* Homepage section-width fix (Homepage Design and SEO Revision assignment, §13): every major
   homepage section now shares the same .container (max 1240px) governed width — nothing is
   additionally squeezed into a disconnected narrow beige panel. .hero-copy-width caps only the
   PROSE inside a section to a readable measure, left-aligned, without shrinking the section's
   own background/edges. */
.hero-copy-width { max-width: 760px; }
.info-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
@media (max-width: 900px) { .info-grid-2col { grid-template-columns: 1fr; gap: 1.5rem; } }

/* Homepage hero — right-side visual placeholder (Hero Layout Revision assignment, 2026-07-28).
   Two-column on desktop AND tablet (deliberately a narrower collapse breakpoint, 720px, than the
   sitewide .hero-grid's 1080px — chosen because this hero's ~1.15fr/1fr split with a 280px floor
   still reads cleanly at tablet widths; documented as a deliberate choice, not an oversight).
   DOM order is text column first, placeholder second, so the mobile stack (below 720px) naturally
   reads eyebrow -> H1 -> copy -> buttons -> placeholder without needing any CSS order property. */
.hero-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 1fr);
  gap: 2.5rem;
  align-items: center;
}
@media (max-width: 720px) {
  .hero-two-col { grid-template-columns: 1fr; }
}
/* Real editorial hero image (2026-07-29) — replaces the "Hero Image Coming Soon" placeholder now
   that an owner-supplied 1:1 illustration exists. Kept at its native 1:1 ratio (not forced into the
   placeholder's old 4:3/16:9 shape) so the image is never cropped or distorted; object-fit:cover is
   only a safety net for any future replacement whose ratio drifts slightly from square. Border/
   radius reuse the same neutral treatment as every other real image on the site (e.g.
   .book-cover-img) rather than inventing a new frame style. */
.hero-visual-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  display: block;
}
@media (max-width: 720px) {
  .hero-visual-img { max-width: 420px; margin: 0 auto; }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.visually-hidden:focus { position: static; width: auto; height: auto; margin: 0; padding: 0.5rem 1rem; background: #fff; }
a:focus-visible, button:focus-visible, select:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; }
:root { --flagship-review-note-color: #e0dbcd; }
.flagship-review-note { color: var(--flagship-review-note-color); opacity: 1; font-style: normal; font-size: 0.92rem; font-weight: 400; }

/* Will Blesch Newsletter CTA (Newsletter Lead-Capture assignment, 2026-07-28; restyled per the
   Newsletter CTA Color-Match Correction, 2026-07-28). Reuses the SAME dark-editorial-panel
   tokens as the flagship trailer/feature-CTA/sidebar/inline components (background gradient,
   #f6f2e8 primary text, #d7b16b gold, rgba(255,255,255,0.08) border) rather than a separate
   newsletter-only palette — this is a deliberate join to that existing family, not a new one.
   Layout/copy/proportions/padding scale are all UNCHANGED from the approved implementation;
   only color values changed in this pass. */
.directory-newsletter-cta {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr);
  gap: 2rem;
  align-items: start;
  background: linear-gradient(180deg, #111214, #191b20);
  color: #f6f2e8;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg, 18px);
  padding: 2.5rem;
  text-align: left;
}
@media (max-width: 1080px) {
  .directory-newsletter-cta { padding: 2rem; }
}
@media (max-width: 720px) {
  .directory-newsletter-cta { grid-template-columns: 1fr; padding: 1.5rem; gap: 1.5rem; }
}
/* Modern Design Refresh (2026-07-28): this headline is a sentence ("Get The Alternative History
   Reading List"), not a standalone book/publication title — it now uses the default sans-serif
   heading treatment like every other CTA sentence headline, matching the flagship trailer/inline
   headlines' own correction. Only color is set here; font-family inherits from the sitewide h2 rule. */
.directory-newsletter-cta h2 {
  color: #f6f2e8;
}
.directory-newsletter-copy-col { max-width: var(--prose-max-width); }
.directory-newsletter-copy-col h2 { margin-bottom: 0.5rem; }
/* Subtitle: the LIGHT gold token used for gold-on-dark contexts (#d7b16b, matching
   .flagship-section-label) — the pale-background gold (--accent-strong, #8f6827) reads as a
   muddy low-contrast brown once the panel goes dark, exactly the mismatch this pass corrects. */
.directory-newsletter-subheading {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-style: italic;
  color: #d7b16b;
  margin: 0 0 var(--heading-body-gap);
}
/* Secondary text (About Will + form-support line) — the same rgba(246,242,232,0.82) treatment
   already established and WCAG-verified for .flagship-disclosure against this exact gradient
   (see scripts/validation/contrast.py) — never a plain .meta (--muted, a DARK gray meant for
   light backgrounds) on this dark panel. */
.directory-newsletter-cta .meta {
  color: rgba(246,242,232,0.82);
}
.directory-newsletter-about { margin-top: 0.9rem; }
.directory-newsletter-form-col {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
/* Form card: a warm off-white inset panel (the same --bg-soft cream already used elsewhere in
   the directory, not pure white) — floats as a deliberately lighter, clearly-usable island within
   the dark section, per the assignment's own preferred treatment, rather than the previous plain
   white card that read as an unrelated embed. */
.directory-newsletter-form {
  min-height: 220px;
  background: var(--bg-soft);
  border: 1px solid rgba(215,177,107,0.4);
  border-radius: 16px;
  padding: 1rem;
  display: flex;
  align-items: stretch;
}
.directory-newsletter-form__embed { width: 100%; }
.directory-newsletter-support { margin: 0; }

/* Systeme.io embed internals — BEST EFFORT ONLY, not verified against the live rendered form (no
   browser/JS execution is available in this environment to inspect the embed's actual injected
   markup/class names). Targets standard HTML form semantics scoped to our own wrapper, never the
   embed's undocumented internal classes. !important is used on exactly the 3 submit-button
   declarations below, because third-party embedded widgets commonly ship their own inline/
   high-specificity styles that a plain rule would not override — each occurrence is this
   comment's responsibility, not scattered ad hoc. If Systeme.io's real markup does not expose a
   plain <button>/<input type="submit"> at this scope, none of this takes visual effect and the
   form falls back to its own default appearance — a disclosed, not silently assumed, limitation. */
.directory-newsletter-form__embed input[type="email"],
.directory-newsletter-form__embed input[type="text"] {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--line);
}
.directory-newsletter-form__embed input::placeholder { color: var(--muted); }
.directory-newsletter-form__embed button,
.directory-newsletter-form__embed input[type="submit"],
.directory-newsletter-form__embed button[type="submit"] {
  background: var(--accent) !important;
  color: #1c160f !important;
  border: 1px solid var(--accent) !important;
}
.directory-newsletter-form__embed button:hover,
.directory-newsletter-form__embed input[type="submit"]:hover { background: #c89944 !important; }
.directory-newsletter-form__embed button:focus-visible,
.directory-newsletter-form__embed input:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; }

/* xCited Author-Publicity CTA (Global xCited CTA assignment, 2026-07-29). Reuses the same dark-
   editorial-panel tokens as the flagship/newsletter/trailer family (background gradient, #f6f2e8
   primary text, #d7b16b gold, rgba(255,255,255,0.08) border) — no new color introduced. Explicitly
   MORE COMPACT than that family (assignment §19): smaller headline, less padding, narrower action
   column, no image — so it reads as a secondary, professional-service offer, never the largest
   dark block near the footer. The surrounding <div class="container section-tight"> (see
   render_xcited_cta()) gives the same ~80px/64px/48px light-background gap above and below that
   already separates every other consecutive dark CTA pair in this file (desktop/tablet/mobile
   section-tight padding tokens, doubled at the boundary between two such wrappers) — satisfying
   the required 64-96/48-72/40-56px separation from an adjacent dark component without a bespoke
   spacing rule. */
.xcited-author-publicity-cta {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(220px, 1fr);
  gap: 1.75rem;
  align-items: center;
  background: linear-gradient(180deg, #111214, #191b20);
  color: #f6f2e8;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg, 18px);
  padding: 1.75rem;
  text-align: left;
}
@media (max-width: 1080px) {
  .xcited-author-publicity-cta { padding: 1.5rem; }
}
@media (max-width: 720px) {
  .xcited-author-publicity-cta { grid-template-columns: 1fr; padding: 1.25rem; gap: 1.25rem; }
}
.xcited-service-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(246,242,232,0.82);
  margin: 0 0 0.5rem;
}
/* Deliberately smaller than the sitewide h2 scale (clamp(1.65rem,2.2vw,2.15rem)) — assignment §19
   requires a smaller headline than the newsletter CTA specifically, to keep this block visually
   subordinate to the reader-facing CTAs. */
.xcited-author-publicity-cta h2 {
  font-size: clamp(1.5rem, 1.9vw, 1.8rem);
  color: #f6f2e8;
  margin: 0 0 0.6rem;
}
.xcited-pitch {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 0.75rem;
}
.xcited-author-publicity-cta .meta {
  color: rgba(246,242,232,0.82);
}
.xcited-independence-note { margin: 0; font-size: 0.85rem; }
.xcited-action-col {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: flex-start;
}
.xcited-primary-btn { white-space: nowrap; }
.xcited-supporting-contact { margin: 0; }
.xcited-supporting-contact a { color: #d7b16b; text-decoration: underline; }
@media (max-width: 720px) {
  .xcited-action-col { align-items: stretch; }
  .xcited-primary-btn { width: 100%; white-space: normal; }
}