/* ==========================================================================
   Category / Archive Pages (LYC-136 / LYC-215)

   Source of truth:
     - designs/html/category-opinion.html
     - designs/html/design-tokens.css

   Translation of mockup tokens onto the theme's installed token vocabulary
   (_tokens.css). The mockup uses --container-max / --gutter / --space-*;
   the theme uses --content-width / --content-margin / --card-gap. Values
   below preserve the mockup's visual intent to the pixel.
   ========================================================================== */

/* ---- Page wrapper ---- */
.page-category {
  background: var(--color-quarter-white);
}

/* ==========================================================================
   Layout primitives used by category / archive templates
   (these mirror the primitives defined in designs/html/design-tokens.css
   so archive pages can consume the canonical class names.)
   ========================================================================== */

.page-category .container {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--content-margin);
}

/* Breadcrumb row that sits just below the category hero. */
.page-category .crumbs {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--color-shuttle-gray);
  padding: 16px 0 8px;
}
.page-category .crumbs a {
  color: var(--color-shuttle-gray);
  text-decoration: none;
  transition: color 0.2s ease;
}
.page-category .crumbs a:hover,
.page-category .crumbs a:focus-visible {
  color: var(--color-claret);
  text-decoration: underline;
}
.page-category .crumbs .sep {
  margin: 0 8px;
  opacity: 0.6;
}
.page-category .crumbs .here {
  color: var(--color-black);
}

/* Canonical 3-up article grid. Matches designs/html/design-tokens.css .grid-3.
   Collapses to 2-up at tablet and 1-up at mobile. */
.page-category .grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px var(--card-gap);
}
@media (max-width: 1024px) {
  .page-category .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .page-category .grid-3 {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Lead card inside the archive grid spans both columns on tablet and the
   full row on desktop so the oversized headline has room to breathe. */
.page-category .grid-3 .card-lead {
  grid-column: 1 / -1;
}
@media (max-width: 640px) {
  .page-category .grid-3 .card-lead {
    grid-column: auto;
  }
}

/* LYC-596: the non-Opinion category cards (lyceum_category_render_card) are
   now an <article class="card ..."> wrapping an inner <a class="category-card-link">
   + a sibling byline. The outer .card keeps its flex-column layout from
   _components.css; the inner link absorbs the hover / focus-visible /
   text-decoration styles that formerly lived on the anchor card. The byline
   stays a sibling of the link so its nested <a class="byline__name"> is
   valid HTML (anchors cannot be nested inside other anchors). */
.page-category .category-card-link {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

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

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

/* ==========================================================================
   Category Hero (LYC-215 fix)

   Structure (both category.php and taxonomy-subcategory.php):

     <section class="category-hero [has-hero-image | is-fallback]">
       [ <picture|img class="category-hero__media"> ]   // optional backdrop
       <div class="category-hero-inner">
         <img class="icon">
         <div>
           <div class="type-eyebrow-lg eyebrow">...</div>
           <h1 class="type-display-3xl">...</h1>
           <div class="lede">...</div>
         </div>
       </div>
     </section>

   Two display modes:
     .is-fallback      : plain Satin Linen title band, no backdrop image.
     .has-hero-image   : ACF image is constrained to a capped-height backdrop
                         (never full-bleed past viewport), with a gradient
                         overlay so hero copy stays legible.
   ========================================================================== */

.category-hero {
  position: relative;
  background: var(--color-satin-linen);
  padding: 80px var(--content-margin) 64px;
  overflow: hidden;
  isolation: isolate;
}

/* Soft fade to the page background so the hero meets the archive grid
   without a hard edge. (Mirrors ::before in design-tokens.css .category-hero.) */
.category-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(229, 223, 209, 0) 0%,
    rgba(247, 243, 227, 1) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Hero backdrop image. Constrained so it can never bleed past the hero
   section, regardless of source image dimensions (LYC-215). */
.category-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 50vh;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 0;
  opacity: 0.55;
}
/* <picture> wrapper variant (mobile crop). */
.category-hero__media img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 50vh;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* When a hero image is present, the hero section cap matches the media
   cap so the section never grows taller than the contained image.
   Title content remains readable via the gradient + translucent overlay. */
.category-hero.has-hero-image {
  min-height: 400px;
}
.category-hero.has-hero-image::after {
  background: linear-gradient(
    180deg,
    rgba(229, 223, 209, 0.55) 0%,
    rgba(247, 243, 227, 0.95) 100%
  );
}

/* Inner grid: 80px icon column + content column, centered to container. */
.category-hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--content-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 32px;
  align-items: start;
}

.category-hero .icon {
  width: 80px;
  height: 80px;
  color: var(--color-claret);
  display: block;
}

.category-hero .eyebrow {
  color: var(--color-claret);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.category-hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-6xl);
  line-height: var(--leading-tight);
  color: var(--color-black);
  margin: 8px 0 20px;
  letter-spacing: -0.01em;
}

.category-hero .lede {
  max-width: 680px;
  color: var(--color-shuttle-gray);
  font-family: var(--font-body-serif);
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: var(--leading-normal);
}
.category-hero .lede p {
  margin: 0 0 12px;
}
.category-hero .lede p:last-child {
  margin-bottom: 0;
}

/* Tablet + mobile collapse. Icon shrinks and drops above the title so the
   headline can use the full inline size. */
@media (max-width: 640px) {
  .category-hero {
    padding: 48px var(--mobile-margin) 40px;
  }
  .category-hero.has-hero-image {
    min-height: 280px;
  }
  .category-hero-inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .category-hero .icon {
    width: 56px;
    height: 56px;
  }
  .category-hero h1 {
    font-size: var(--text-4xl);
    margin: 4px 0 14px;
  }
  .category-hero .lede {
    font-size: var(--text-lg);
  }
}

/* ==========================================================================
   Archive grid section spacing
   ========================================================================== */
.category-archive-grid {
  padding: 40px 0 96px;
}
@media (max-width: 640px) {
  .category-archive-grid {
    padding: 24px 0 64px;
  }
}

/* ==========================================================================
   Pagination (below the archive grid)
   ========================================================================== */
.page-category .pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 48px 0;
}
.page-category .pagination a,
.page-category .pagination span {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-shuttle-gray-soft);
  padding: 8px 16px;
  text-decoration: none;
  transition: color 0.2s ease;
}
.page-category .pagination a:hover,
.page-category .pagination a:focus-visible {
  color: var(--color-claret);
}
.page-category .pagination .current {
  color: var(--color-black);
}

/* ==========================================================================
   Legacy archive classes (kept for any call-site still referencing them).
   These predate LYC-136 and are not used by the current category.php /
   taxonomy-subcategory.php templates, but removal is out of scope for
   LYC-215.
   ========================================================================== */
.category-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--section-gap);
}

.category-content__inner {
  max-width: var(--content-width);
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding: 0 var(--content-margin);
}

.category-header {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 40px 0;
}

.category-header__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-6xl);
  line-height: var(--leading-tight);
  color: var(--color-black);
}

.category-header__description {
  font-family: var(--font-body-serif);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-shuttle-gray);
  max-width: 600px;
}

.category-subnav {
  display: flex;
  gap: 22px;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(4, 5, 3, 0.15);
}

.category-subnav__link {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-shuttle-gray-soft);
  transition: color 0.2s;
}

.category-subnav__link:hover,
.category-subnav__link--active {
  color: var(--color-black);
}

.category-articles {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.category-articles .article-expanded {
  margin-top: 44px;
}

.category-articles .article-expanded:first-child {
  margin-top: 0;
}

/* ==========================================================================
   Category archive : Featured 2-col + More grid + Load more (LYC-233)
   Mirrors designs/html/category-opinion.html lines 134-230.

   Architecture:
     .category-featured  -> 2-col: lead card (2fr) + stacked sidecars (1fr)
     .category-more      -> section-head ("More from {name}") + grid-3
     .category-load-more-wrap -> centered Load more button / link
   ========================================================================== */

/* Visually-hidden utility for screen-reader-only headings (used on the
   <h2 id="featured-head"> above the Featured 2-col, which is implicit
   hierarchy the eye already reads but the AT tree needs a label for). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.page-category .category-featured {
  margin-block: var(--space-10) var(--space-12);
}
.page-category .category-featured .grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-10);
  align-items: start;
}
@media (max-width: 1024px) {
  .page-category .category-featured .grid-2 {
    grid-template-columns: 1fr;
  }
}
.page-category .category-featured .card-lead .thumb {
  aspect-ratio: 16 / 10;
}
.page-category .category-featured .card-lead h3 {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
}

/* Stacked sidecar column (right column on desktop). Uses flex so the two
   small cards share the vertical rhythm inside the column regardless of
   excerpt length. */
.page-category .category-featured .stack-lg {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* Small card variant as emitted by card-article.php when variant='sm'
   (no .thumb element rendered, 20px H3). */
.page-category .category-featured .card-sm {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.page-category .category-featured .card-sm h3 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.15;
  margin: 0;
}

/* "More from {name}" section below the Featured block. Reuses the shared
   .section-head + .grid-3 utilities. */
.page-category .category-more {
  margin-block: var(--space-12);
}

/* Load more wrapper (button / link centered under the More grid). */
.page-category .category-load-more-wrap {
  text-align: center;
  margin-block: var(--space-10) var(--space-12);
}
.page-category .category-load-more-wrap .btn {
  min-width: 160px;
  text-decoration: none;
}

/* ==========================================================================
   Non-Opinion Archive Cards (LYC-591 / LYC-592 / Pass-3 Phase 6 Wave 2)

   Scopes the Pass-3 `.card-image` 16:9 primitive + placeholder pillar
   treatment to the shared category.php template (Guest Editorials,
   Long-Form Think Pieces, The Pulse, The Reel, Video Op-Eds, Think More).
   Opinion owns its own rules under `.page-category--opinion` below; the
   `:not(--opinion)` guard keeps the two archive families isolated.

   The `.card-image` aspect-ratio is owned by _cards.css; these rules only
   layer the non-Opinion archive treatment on top: full-card-width image,
   bottom margin for the meta stack, and placeholder sizing that mirrors
   category-opinion.php so empty thumbs render a visible pillar mark.
   ========================================================================== */

.page-category:not(.page-category--opinion) .card .card-image {
  display: block;
  width: 100%;
  margin-bottom: 16px;
  border-radius: 2px;
}

/* Featured block: lead card gets a larger bottom margin so the oversized
 * headline has room to breathe under the hero 16:9 thumb. */
.page-category:not(.page-category--opinion) .card-lead .card-image {
  margin-bottom: 24px;
}

/* Sidecar cards in the Featured column are compact; the 16:9 thumb still
 * reads well at a smaller size, so preserve the card-sm rhythm but give
 * the image a lighter bottom margin. */
.page-category:not(.page-category--opinion) .card-sm .card-image {
  margin-bottom: 12px;
}

/* Center the placeholder pillar inside the 16:9 .card-image tile so empty
 * thumbnails read as intentional rather than broken. Values mirror the
 * LYC-590 fix applied to Opinion so both archive families share the same
 * visible fallback mark. */
.page-category:not(.page-category--opinion) .card-image .placeholder-img {
  background: var(--color-satin-linen);
  min-height: 88px;
}
.page-category:not(.page-category--opinion) .card-image .placeholder-img img {
  width: auto;
  height: 50%;
  min-height: 44px;
  max-width: 60%;
  object-fit: contain;
  opacity: 0.75;
}

/* Featured section on page 1 also honors the explicit
 * 1-col mobile / 2-col tablet / 3-col desktop contract at the grid-2 level.
 * The existing .grid-2 rule covers tablet + desktop; this keeps the lead
 * thumb legible when the sidecar column stacks underneath on <=1024px. */
.page-category:not(.page-category--opinion) .category-featured .card-lead .card-image {
  aspect-ratio: 16 / 9;
}

/* ==========================================================================
   Opinion Archive (LYC-554 / REQ-10 / Pass-3 Phase 4 Wave 0)

   Canonical mockup: designs/upgrades/pass-3/html/opinion-archive.html

   Structure (category-opinion.php):

     .page-category--opinion
       .category-hero                (shared with category.php)
       .container
         .crumbs                      (shared)
         .opinion-archive             (lead + sidebar grid)
           .opinion-lead-card         (2/3 column on desktop)
             > a.opinion-lead-card__link
                 .card-image.card-image--hero   (16:9 primitive from _cards.css)
                 .opinion-lead-card__meta
                   .opinion-lead-card__eyebrow
                   .opinion-lead-card__title
                   .opinion-lead-card__excerpt
                   .opinion-lead-card__byline
           .opinion-sidebar           (1/3 column on desktop)
             .opinion-sidebar-card    (x N, each with 16:9 .card-image)

   The `.card-image` aspect-ratio is owned by _cards.css; these rules only
   layer the Opinion meta treatment on top.

   Responsive:
     >=1024px  desktop 2/3 + 1/3 grid.
     <1024px   sidebar stacks below the lead.
     <640px    tighter gutters, smaller headline, stacked cards.
   ========================================================================== */

.page-category--opinion .opinion-archive {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 48px;
  align-items: start;
  padding: 40px 0 48px;
}
@media (max-width: 1023px) {
  .page-category--opinion .opinion-archive {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
@media (max-width: 640px) {
  .page-category--opinion .opinion-archive {
    padding: 24px 0 32px;
    gap: 32px;
  }
}

/* ---------- Lead story card (2/3 column) ---------- */
.page-category--opinion .opinion-lead-card {
  margin: 0;
}
.page-category--opinion .opinion-lead-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.page-category--opinion .opinion-lead-card .card-image {
  margin-bottom: 24px;
  border-radius: 2px;
}
.page-category--opinion .opinion-lead-card__meta {
  display: block;
}
.page-category--opinion .opinion-lead-card__eyebrow {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-claret);
  margin: 0 0 12px;
}
.page-category--opinion .opinion-lead-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 3.5vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--color-black);
  margin: 0 0 16px;
}
.page-category--opinion .opinion-lead-card__link:hover .opinion-lead-card__title,
.page-category--opinion .opinion-lead-card__link:focus-visible .opinion-lead-card__title {
  color: var(--color-claret);
}
.page-category--opinion .opinion-lead-card__excerpt {
  font-family: var(--font-body-serif);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--color-shuttle-gray);
  margin: 0 0 20px;
  max-width: 640px;
}
.page-category--opinion .opinion-lead-card__byline {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  color: var(--color-shuttle-gray);
}

/* ---------- Sidebar column (1/3) ---------- */
.page-category--opinion .opinion-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.page-category--opinion .opinion-sidebar-card {
  margin: 0;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(4, 5, 3, 0.15);
  margin-bottom: 24px;
}
.page-category--opinion .opinion-sidebar-card:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.page-category--opinion .opinion-sidebar-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.page-category--opinion .opinion-sidebar-card .card-image {
  margin-bottom: 12px;
  border-radius: 2px;
}
.page-category--opinion .opinion-sidebar-card__meta {
  display: block;
}
.page-category--opinion .opinion-sidebar-card__eyebrow {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-claret);
  margin: 0 0 8px;
}
.page-category--opinion .opinion-sidebar-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--color-black);
  margin: 0 0 8px;
}
.page-category--opinion .opinion-sidebar-card__link:hover .opinion-sidebar-card__title,
.page-category--opinion .opinion-sidebar-card__link:focus-visible .opinion-sidebar-card__title {
  color: var(--color-claret);
}
/* LYC-603: sidebar excerpt mirrors the mockup .opinion-sidebar .card-sm .excerpt
 * rule (Source Serif body, ~15px, Shuttle Gray, 1.5 line-height). Sits between
 * the title and the byline. */
.page-category--opinion .opinion-sidebar-card__excerpt {
  font-family: var(--font-body-serif);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-shuttle-gray);
  margin: 0 0 10px;
}
.page-category--opinion .opinion-sidebar-card__byline {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--color-shuttle-gray);
  margin: 0;
}

/* Center the placeholder pillar inside the 16:9 .card-image tile so empty
 * thumbnails read as intentional rather than broken.
 * LYC-590 fix: floor the pillar at 44px min-height so even on compact sidebar
 * cards the fallback reads as a visible mark rather than a blank tile. The
 * earlier 40% height rule produced ~30px renders on narrow sidebar cards
 * which perceptually looked empty. Also explicit width + fallback bg ensures
 * the tile has structure even if the img 404s. */
.page-category--opinion .card-image .placeholder-img {
  background: var(--color-satin-linen);
  min-height: 88px;
}
.page-category--opinion .card-image .placeholder-img img {
  width: auto;
  height: 50%;
  min-height: 44px;
  max-width: 60%;
  object-fit: contain;
  opacity: 0.75;
}

/* ---------- Pagination (right-aligned per Pass-3 mockup) ---------- */
.page-category--opinion .opinion-pagination {
  padding: 0 0 var(--space-12, 48px);
  text-align: right;
}
.page-category--opinion .opinion-pagination a {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--text-base);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-claret);
  text-decoration: none;
  border-bottom: 1px solid var(--color-claret);
  padding-bottom: 3px;
}
.page-category--opinion .opinion-pagination a:hover,
.page-category--opinion .opinion-pagination a:focus-visible {
  color: var(--color-black);
  border-bottom-color: var(--color-black);
}

@media (max-width: 640px) {
  .page-category--opinion .opinion-lead-card__title {
    font-size: clamp(26px, 6.5vw, 34px);
  }
  .page-category--opinion .opinion-sidebar-card {
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
}

/* ==========================================================================
   Dual Pagination Primitive (LYC-635 / REQ-024 / Pass-4 Phase 6 Wave 0)

   Source of truth:
     - analysis/upgrades/pass-4/factory-ui-designer.md F-06
     - template-parts/pagination/dual.php

   3-slot grid: PREVIOUS PAGE | "Page N of M" | NEXT PAGE.
   Disabled boundaries render as inert spans (aria-disabled="true") and pick
   up the muted Shuttle Gray Soft color so they remain visible but signal
   inertia. Italic counter uses Source Serif 4 with tabular + lining
   numerals so the digit columns do not jitter between pages. Mobile (<480px)
   stacks the row to a single column with PREV / counter / NEXT in source
   order.
   ========================================================================== */

.lyceum-dual-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-6, 24px);
  padding: var(--space-12, 48px) 0;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--text-base, 16px);
  line-height: var(--leading-normal, 1.5);
  letter-spacing: 0.06em;
}

.lyceum-dual-pagination__prev,
.lyceum-dual-pagination__next {
  color: var(--color-claret);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.lyceum-dual-pagination__prev {
  justify-self: start;
}

.lyceum-dual-pagination__next {
  justify-self: end;
}

a.lyceum-dual-pagination__prev:hover,
a.lyceum-dual-pagination__prev:focus-visible,
a.lyceum-dual-pagination__next:hover,
a.lyceum-dual-pagination__next:focus-visible {
  color: var(--color-claret-hover, var(--color-black));
}

a.lyceum-dual-pagination__prev:focus-visible,
a.lyceum-dual-pagination__next:focus-visible {
  outline: 2px solid var(--color-accent, var(--color-claret));
  outline-offset: 2px;
}

/* Disabled boundary: visible but inert. Pointer disabled so even
 * keyboard-driven UAs and assistive tech treat the span as non-interactive. */
.lyceum-dual-pagination__prev.is-disabled,
.lyceum-dual-pagination__next.is-disabled {
  color: var(--color-shuttle-gray-soft, #95a0a6);
  cursor: not-allowed;
  pointer-events: none;
  user-select: none;
}

/* Italic page counter. Tabular + lining figures keep the digit columns
 * aligned across pagination clicks. */
.lyceum-dual-pagination__counter {
  justify-self: center;
  font-family: var(--font-body-serif), 'Source Serif 4', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: var(--leading-normal, 1.5);
  letter-spacing: 0;
  color: var(--color-shuttle-gray);
  font-feature-settings: "tnum", "lnum";
  font-variant-numeric: tabular-nums lining-nums;
  text-transform: none;
}

/* Mobile collapse: stack the row vertically so the counter centers above
 * a thumb-friendly NEXT target. PREV / counter / NEXT preserve source order. */
@media (max-width: 480px) {
  .lyceum-dual-pagination {
    grid-template-columns: 1fr;
    row-gap: 12px;
    padding: var(--space-8, 32px) 0;
    text-align: center;
  }
  .lyceum-dual-pagination__prev,
  .lyceum-dual-pagination__next,
  .lyceum-dual-pagination__counter {
    justify-self: center;
  }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .lyceum-dual-pagination__prev,
  .lyceum-dual-pagination__next {
    transition: none;
  }
}

/* ==========================================================================
   LYC-633 / REQ-022 / Pass-4 Phase 6: F-06 listing partial layout
   .........................................................................
   Layout-only rules for template-parts/category/listing.php. Card-internal
   styles come from template-parts/card-article (consumed by .lyceum-listing
   __card). The classes below cover four zones:
     1. Wrapper + breadcrumb + H1 page head
     2. Page-1 hero (full-content-width image, centered eyebrow / title /
        dek / byline)
     3. 2-column desktop grid that collapses to 1-column at 768px
     4. Empty state ("No pieces in <Category> yet.")
   Token names align to wp-content/themes/lyceum/assets/css/_tokens.css and
   _typography.css (--font-display, --font-body-serif, --font-ui). Hex
   fallbacks are kept inside the var() calls per dispatch direction.
   ========================================================================== */

.lyceum-listing {
  width: 100%;
  max-width: var(--content-width, 1380px);
  margin: 0 auto;
  padding: 24px var(--content-margin, 30px) 80px;
}

.lyceum-listing__head {
  margin: 0 0 32px;
}

.lyceum-listing__crumbs {
  font-family: var(--font-ui, "Archivo Narrow", sans-serif);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-shuttle-gray, #525e65);
  margin-bottom: 16px;
}
.lyceum-listing__crumbs a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.lyceum-listing__crumbs a:hover,
.lyceum-listing__crumbs a:focus-visible {
  color: var(--color-claret, #7D1138);
}
.lyceum-listing__crumbs .sep {
  margin: 0 8px;
  opacity: 0.6;
}
.lyceum-listing__crumbs .here {
  color: var(--color-black, #040503);
}

.lyceum-listing__title {
  font-family: var(--font-display, "Playfair Display", serif);
  font-weight: 500;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.1;
  margin: 0;
  color: var(--color-black, #040503);
}

/* HERO ZONE (page 1 only) */
.lyceum-listing__hero {
  margin: 0 0 56px;
}
.lyceum-listing__hero-media {
  display: block;
  aspect-ratio: 3 / 1;
  overflow: hidden;
  background: var(--color-satin-linen, #E5DFD1);
  margin-bottom: 24px;
}
.lyceum-listing__hero-media picture,
.lyceum-listing__hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lyceum-listing__hero-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-satin-linen, #E5DFD1);
}
.lyceum-listing__hero-text {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px;
}
.lyceum-listing__hero-eyebrow {
  font-family: var(--font-ui, "Archivo Narrow", sans-serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-claret, #7D1138);
  margin: 0 0 12px;
}
.lyceum-listing__hero-title {
  font-family: var(--font-display, "Playfair Display", serif);
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.15;
  margin: 0 0 16px;
  color: var(--color-black, #040503);
}
.lyceum-listing__hero-title a {
  color: inherit;
  text-decoration: none;
}
.lyceum-listing__hero-title a:hover,
.lyceum-listing__hero-title a:focus-visible {
  color: var(--color-claret, #7D1138);
}
.lyceum-listing__hero-dek {
  font-family: var(--font-body-serif, "Source Serif 4", serif);
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-shuttle-gray, #525e65);
  margin: 0 0 16px;
}
.lyceum-listing__hero-byline {
  font-family: var(--font-ui, "Archivo Narrow", sans-serif);
  font-size: 14px;
  color: var(--color-shuttle-gray, #525e65);
  margin: 0;
}

@media (max-width: 768px) {
  .lyceum-listing__hero-media {
    aspect-ratio: 16 / 9;
  }
}

/* GRID (page 1 + page 2+) */
.lyceum-listing__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 32px;
  margin: 0 0 56px;
}
.lyceum-listing__card {
  /* Card internals come from template-parts/card-article. This wrapper
     resets margins so the grid gap controls spacing. */
  margin: 0;
}

@media (max-width: 768px) {
  .lyceum-listing__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* EMPTY STATE (0 published posts in category) */
.lyceum-listing--empty {
  padding: 96px 24px;
  text-align: center;
}
.lyceum-listing__empty {
  font-family: var(--font-body-serif, "Source Serif 4", serif);
  font-style: italic;
  font-size: 22px;
  color: var(--color-shuttle-gray, #525e65);
  margin: 0;
}

/* ==========================================================================
   F-06 listing card thumb: override default 16:9 container with 3:2 to
   match the Recommended-section pattern (single.php). The default
   .card .thumb rule in _components.css forces 16:9 + object-fit:cover,
   which zoom-crops portrait sources aggressively. Listing cards now use
   medium_large (uncropped, native ratio) plus a 3:2 container so most
   editorial photos render with only a gentle, edge-honest cover crop.
   Scoped to .lyceum-listing__card so other consumers of card-article
   keep the existing 16:9 behavior.
   ========================================================================== */
.lyceum-listing__card .card .thumb,
.lyceum-listing__card .card-lead .thumb,
.lyceum-listing__card .card-sm .thumb {
  aspect-ratio: 3 / 2;
}