/* ==========================================================================
   Homepage Sections (Pass-3 Phase 3 Wave 2 / LYC-550 / REQ-6)
   ==========================================================================
   Source-of-truth references (in order of precedence):
     1. wp-content/themes/lyceum/front-page.php       (live DOM)
     2. wp-content/themes/lyceum/template-parts/
        homepage/section-card-row.php                  (unified primitive)
     3. designs/upgrades/pass-3/html/homepage.html     (canonical mockup)
     4. wp-content/themes/lyceum/inc/homepage-sections.php (Registry B input)
     5. wp-content/themes/lyceum/assets/css/_tokens.css    (token declarations)

   Pass-3 Wave 2 composes the homepage as:
     1. Hero Banner                 (.home-hero-banner)
     2. Five-Card Hero Grid         (.home-hero-grid + .five-card-grid)
     3. Unified card rows           (.section-card-row)  one per visible Registry B
                                     card-row-eligible section (Latest, Think More,
                                     Long-Form, Pulse, Reel, Video Op-Eds, Guest).
     4. Writers in the House        (.home-writers)
     5. Subscribe Band              (.subscribe-band) shared

   Pass-2 selectors RETIRED in Wave 2 (replaced by .section-card-row):
     .home-latest, .home-feature-split, .home-split-section,
     .home-categories-row. Their CSS blocks were removed from this file.

   All color, spacing, font and layout values reference tokens declared in
   _tokens.css. Voice rule: zero em dashes.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Page root
   -------------------------------------------------------------------------- */
.page-home {
  background: var(--color-quarter-white);
  /* Defensive: any future absolutely-positioned ornament that overshoots
     the viewport (e.g. a bleed image, a decorative rule) must not
     introduce a horizontal scrollbar at >=320px. The body still scrolls
     vertically because overflow-x is independent of overflow-y. */
  overflow-x: hidden;
}


/* --------------------------------------------------------------------------
   Reduced-motion global guard (REQ-21 / FR-13, WCAG 2.2 SC 2.3.3)
   Hoisted to the top of the homepage stylesheet so the universal
   selector cascade reaches every rule declared below. Targets all
   elements (and their generated content) so future animations added
   to homepage sections inherit the guarantee for free.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* --------------------------------------------------------------------------
   SECTION 1: Hero Banner (REQ-11 / DESIGN-SYSTEM 4.1)
   Centered text-only identity statement. Approximately 25vh.
   -------------------------------------------------------------------------- */
.home-hero-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  padding-block: var(--space-12) var(--space-8);
  padding-inline: var(--gutter);
  gap: var(--space-3);
  min-height: clamp(180px, 25vh, 280px);
}

.home-hero-banner__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(48px, 6vw, 96px);
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
  color: var(--color-black);
  margin: 0;
}

.home-hero-banner__subhead {
  font-family: var(--font-ui);
  font-weight: 400;
  font-style: italic;
  font-size: var(--text-xl);
  line-height: var(--leading-normal);
  color: var(--color-shuttle-gray);
  margin: 0;
  max-width: 56ch;
}

.home-hero-banner__cta {
  margin-top: var(--space-4);
}

@media (max-width: 1024px) {
  .home-hero-banner {
    padding-block: var(--space-10) var(--space-6);
  }
}

@media (max-width: 768px) {
  .home-hero-banner {
    padding-block: var(--space-8) var(--space-5);
  }
  .home-hero-banner__cta .btn,
  .home-hero-banner__cta .btn-pill {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .home-hero-banner {
    padding-block: var(--space-6) var(--space-4);
    gap: var(--space-2);
  }
  .home-hero-banner__subhead {
    font-size: var(--text-lg);
  }
}


/* --------------------------------------------------------------------------
   Pill CTA variant (Pass-2 hero only). Claret background, fully rounded,
   uppercase Archivo Narrow. Mirrors the canonical mockup's `.btn-pill`.
   -------------------------------------------------------------------------- */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--text-base);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 14px 36px;
  border: var(--rule-width) solid var(--color-claret);
  border-radius: 28px;
  background: var(--color-claret);
  color: var(--color-white);
  text-decoration: none;
  cursor: pointer;
  min-height: 44px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-pill:hover {
  background: var(--color-claret-hover);
  border-color: var(--color-claret-hover);
  color: var(--color-white);
  text-decoration: none;
}

.btn-pill:focus-visible {
  outline: 2px solid var(--color-claret);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   SECTION 2: Five-Card Hero Grid (REQ-12 / DESIGN-SYSTEM 4.2)
   Asymmetric 1fr 2fr 1fr grid. 2 stacked side cards each side, 1 lead center.
   Replaces the Phase 1 single-article hero rendering.
   -------------------------------------------------------------------------- */
.home-hero-grid {
  padding-block: var(--space-4) var(--space-12);
}

.home-hero-grid .section-head {
  border-bottom: 0;
  padding: 0 0 var(--space-4);
  margin-bottom: var(--space-6);
  justify-content: flex-end;
}

.five-card-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  column-gap: var(--space-8);
  row-gap: var(--space-6);
  align-items: start;
}

.five-card-grid__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* LYC-551 / Pass-3 Phase 3 Wave 1: the featured-five partial wraps every
   card image in `.card-image` (and `.card-image--hero` on the lead card).
   Aspect ratio is owned by _cards.css; the rules below only guarantee the
   wrapper spans the full card width when nested in either column variant.
   LYC-596: the image now sits inside .five-card-grid__card-link (a child of
   .card) because the outer .card is an <article>, not an <a>. Descendant
   selector covers both the legacy direct-child path and the new nested one. */
.five-card-grid__column .card .card-image,
.five-card-grid__lead   .card .card-image {
  width: 100%;
  margin: 0;
}

/* LYC-596: inner link absorbs the hover / focus-visible styles that formerly
   lived on `.card` when .card was the <a>. The outer .card (now <article>)
   keeps its flex-column layout (declared in _components.css). The link
   stretches to fill the article so the click target is unchanged. */
.five-card-grid__card-link {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.five-card-grid__card-link:hover h3,
.five-card-grid__card-link:focus-visible h3 {
  color: var(--color-claret);
}

.five-card-grid__card-link:focus-visible {
  outline: 2px solid var(--color-claret);
  outline-offset: 4px;
}

.five-card-grid__lead .card h3 {
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.five-card-grid .card-sm h3 {
  font-size: 18px;
  line-height: 1.2;
}

@media (max-width: 1280px) {
  .five-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .five-card-grid__lead {
    grid-column: 1 / -1;
    order: -1;
  }
}

@media (max-width: 768px) {
  .five-card-grid {
    grid-template-columns: 1fr;
  }
  .five-card-grid__lead {
    grid-column: auto;
  }
  .five-card-grid__lead .card h3 {
    font-size: 32px;
  }
  /* Hide the right-hand column (cards 4 and 5) on phones; the Latest
     section immediately below carries the same recency signal so we
     trade density for tap-target comfort and scroll length. */
  .five-card-grid > .five-card-grid__column:nth-of-type(3) {
    display: none;
  }
}

@media (max-width: 640px) {
  .five-card-grid__lead .card h3 {
    font-size: 28px;
  }
  /* Lead/center card always renders first at the smallest viewport even
     though it is the second DOM child of .five-card-grid. order: -1
     wins over the natural source order of the surviving left column. */
  .five-card-grid__lead {
    order: -1;
  }
}


/* --------------------------------------------------------------------------
   Section head (shared utility, matches design-tokens.css)
   -------------------------------------------------------------------------- */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-8) 0 var(--space-4);
  border-bottom: var(--rule-thick) solid var(--color-black);
  margin-bottom: var(--space-8);
}

.section-head h2 {
  margin: 0;
}

.section-head a {
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-claret);
  text-decoration: none;
}

.section-head a:hover {
  text-decoration: underline;
}


/* --------------------------------------------------------------------------
   Grid utilities used by the homepage (matches design-tokens.css)
   -------------------------------------------------------------------------- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-10);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-10);
}

@media (max-width: 1024px) {
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .grid-3,
  .grid-4,
  .grid-2 {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}


/* --------------------------------------------------------------------------
   Unified Card Row primitive (Pass-3 Phase 3 Wave 2 / LYC-550 / REQ-6)
   --------------------------------------------------------------------------
   Single BEM primitive used by every Registry B card-row-eligible section:
   Latest, Think More, Long-Form, Pulse, Reel, Video Op-Eds, and Guest
   Editorials. Consumed by template-parts/homepage/section-card-row.php
   driven from lyceum_visible_homepage_sections().

   The `--cols-N` modifier drives the desktop column count (1..4); the
   responsive collapse at <=1023px and <=767px is uniform across all values
   so a 3-col Pulse row and a 4-col Long-Form row collapse identically on
   phones. `data-count` mirrors the effective card count for consumers
   that need to reason about it (future JS, analytics, etc.).

   The `--centered` modifier is opt-in via Registry B `align: center` and
   centers the eyebrow / title / dek / icon stack (used by Think More).
   -------------------------------------------------------------------------- */
.section-card-row {
  padding-block: var(--space-12) var(--space-12);
}

.section-card-row + .section-card-row {
  border-top: 1px solid var(--color-rule);
}

.section-card-row__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-3);
  border-bottom: var(--rule-thick) solid var(--color-black);
}

.section-card-row__head--centered {
  align-items: center;
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-6);
  border-bottom: 0;
}

.section-card-row__eyebrow {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--text-xs);
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-shuttle-gray);
  margin: 0;
}

.section-card-row__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-black);
  margin: 0;
}

.section-card-row__head--centered .section-card-row__title {
  font-size: clamp(28px, 3.2vw, 40px);
}

.section-card-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-shuttle-gray);
  opacity: 0.75;
  margin-top: var(--space-3);
}

.section-card-row__icon img {
  width: 100%;
  height: 100%;
  display: block;
}

.section-card-row__dek {
  font-family: var(--font-body-serif);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--color-shuttle-gray);
  margin: 0;
  max-width: 62ch;
}

.section-card-row__head--centered .section-card-row__dek {
  margin-inline: auto;
}

.section-card-row__grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}

.section-card-row__grid--cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.section-card-row__grid--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.section-card-row__grid--cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* LYC-596: the outer .section-card-row__card is an <article>, NOT an <a>.
   Interaction lives on the inner .section-card-row__card-link anchor, so
   the byline (which contains its own <a class="byline__name">) can sit as
   a valid sibling of the link inside the article. The article keeps the
   flex-column layout; the link absorbs the hover/focus-visible + color
   reset that previously lived on the anchor card. */
.section-card-row__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: inherit;
}

.section-card-row__card-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
}

.section-card-row__card-link:hover h3,
.section-card-row__card-link:focus-visible h3,
.section-card-row__card-link:hover .card__title,
.section-card-row__card-link:focus-visible .card__title {
  color: var(--color-claret);
}

.section-card-row__card-link:focus-visible {
  outline: 2px solid var(--color-claret);
  outline-offset: 4px;
}

.section-card-row__card .card-image,
.section-card-row__card-link .card-image {
  margin-bottom: var(--space-2);
}

.section-card-row__cta-wrap {
  margin-top: var(--space-8);
}

.section-card-row--centered .section-card-row__cta-wrap,
.section-card-row__head--centered ~ .section-card-row__cta-wrap {
  text-align: center;
}

.section-card-row__cta {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-claret);
  text-decoration: none;
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-claret);
}

.section-card-row__cta:hover,
.section-card-row__cta:focus-visible {
  color: var(--color-claret-hover);
  border-color: var(--color-claret-hover);
}

/* Responsive collapse. Unified for every --cols-N variant so Wave 2 reads
   as a single primitive, not seven bespoke rows. */
@media (max-width: 1023px) {
  .section-card-row__grid--cols-3,
  .section-card-row__grid--cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .section-card-row {
    padding-block: var(--space-8);
  }
  .section-card-row__grid--cols-2,
  .section-card-row__grid--cols-3,
  .section-card-row__grid--cols-4 {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}


/* --------------------------------------------------------------------------
   SECTION: Writers in the House (empty-state when 0 authors)
   Heading kept (above the rule) plus soft-cta below.
   -------------------------------------------------------------------------- */
.home-writers {
  padding-block: var(--space-12);
}

.home-writers__head {
  border-top: var(--rule-thick) solid var(--color-black);
  padding-top: var(--space-8);
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}

.home-writers__head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-3xl);
  line-height: 1.10;
  color: var(--color-black);
  margin: 0 0 var(--space-4);
}

.home-writers__head + .empty-section-cta {
  text-align: center;
  max-width: 560px;
  margin-inline: auto;
}


/* --------------------------------------------------------------------------
   Empty-Section Soft-CTA variant (DESIGN-SYSTEM 4.6)
   Used by template-parts/empty-section.php when variant=soft-cta.
   -------------------------------------------------------------------------- */
.empty-section-cta {
  text-align: center;
  padding: var(--space-8) 0;
}

.empty-section-cta p {
  font-family: var(--font-body-serif);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-shuttle-gray);
  margin: 0 0 var(--space-4);
  max-width: 48ch;
  margin-inline: auto;
}

.empty-section-cta .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-claret);
  color: var(--color-white);
  text-decoration: none;
  padding: 14px 36px;
  border: var(--rule-width) solid var(--color-claret);
  border-radius: 28px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--text-base);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  min-height: 44px;
}

.empty-section-cta .btn:hover {
  background: var(--color-claret-hover);
  border-color: var(--color-claret-hover);
}


/* --------------------------------------------------------------------------
   Placeholder image utility (used when posts have no featured image).
   Centers a small icon over the warm Satin-Linen surface so empty thumbs
   never read as broken or missing.
   -------------------------------------------------------------------------- */
.placeholder-img {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: var(--color-satin-linen);
  color: var(--color-shuttle-gray);
}

.placeholder-img img,
.placeholder-img svg {
  opacity: 0.4;
}


/* --------------------------------------------------------------------------
   Subscribe band (section 5). Full-width, Satin-Linen background
   Rendered OUTSIDE a .container wrapper, so we set padding-inline here.
   -------------------------------------------------------------------------- */
.subscribe-band {
  background: var(--color-satin-linen);
  padding: var(--space-16) var(--gutter);
  text-align: center;
}

.subscribe-inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

/*  CRITICAL: without the explicit sizing constraint below, the inline SVG
    pillar balloons to the computed flex width (~1188px) inside the
    Satin-Linen band on desktop viewports. Every other rule in this file has
    an inherited mitigation via `img, svg { max-width: 100% }` in base CSS,
    but the subscribe-band symbol is an inline <svg> that expands to its
    container on browsers that do not preserve intrinsic SVG sizing.
    Do NOT remove these three declarations. */
.subscribe-band__symbol {
  width: 46px;
  height: 38px;
  max-width: 120px;
  margin: 0 auto;
  color: currentColor;
}

.subscribe-band h2 {
  margin: 0 0 var(--space-3);
}

.subscribe-band p {
  color: var(--color-shuttle-gray);
  margin: 0 0 var(--space-8);
  font-size: 18px;
}

.subscribe-micro {
  margin-top: var(--space-4);
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--color-shuttle-gray);
  letter-spacing: 0.04em;
}

/* Mobile compaction: tighten the band's vertical rhythm and let the
   anchor-CTA stretch to the column edge so the 44px tap target reads
   like a deliberate full-width affordance, not a stranded inline pill. */
@media (max-width: 768px) {
  .subscribe-band {
    padding: var(--space-12) var(--gutter);
  }
  .subscribe-band p {
    font-size: var(--text-base);
    margin-bottom: var(--space-6);
  }
  .subscribe-band .btn,
  .subscribe-band .btn-primary {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .subscribe-band {
    padding: var(--space-10) var(--gutter);
  }
}


/* --------------------------------------------------------------------------
   Authors marquee (section 8)
   Desktop: 6-up grid. Tablet: 3-up. Mobile: 2-up.
   -------------------------------------------------------------------------- */
.home-authors-marquee {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-6);
}

.home-authors-marquee__item {
  /* Grid cell. No additional styling required. */
}

.home-authors-marquee__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-black);
}

.home-authors-marquee__link:hover {
  text-decoration: none;
}

.home-authors-marquee__link:hover .home-authors-marquee__name {
  color: var(--color-claret);
}

.home-authors-marquee__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-satin-linen);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--color-shuttle-gray);
}

.home-authors-marquee__avatar--initials {
  /* Initials variant inherits from .home-authors-marquee__avatar;
     the grid/place-items combination centers the text glyphs. */
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.home-authors-marquee__name {
  color: var(--color-black);
  text-align: center;
}

.home-authors-marquee__role {
  color: var(--color-shuttle-gray);
  text-align: center;
}

@media (max-width: 1024px) {
  .home-authors-marquee {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .home-authors-marquee {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* --------------------------------------------------------------------------
   Latest archive page (REQ-17 / page-latest.php)
   --------------------------------------------------------------------------
   The /latest/ route renders a chronological cross-category archive linked
   from the homepage Latest section. Layout reuses .container, .grid-3,
   and the canonical .crumbs / .rule chrome already shared with the
   category and categories-hub templates, so styling here is intentionally
   minimal: just the centered page header and bottom padding for the list.
   -------------------------------------------------------------------------- */
.page-latest__header {
  padding-block: var(--space-12);
  text-align: center;
}

.page-latest__header .lede {
  max-width: 58ch;
  margin: var(--space-3) auto 0;
  color: var(--color-text-muted);
}

.page-latest__list {
  padding-bottom: var(--space-16);
}

.page-latest__list .pagination {
  margin-top: var(--space-12);
  display: flex;
  justify-content: center;
}

.page-latest__list .pagination ul,
.page-latest__list .pagination .page-numbers {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  margin: 0;
}