/* ================================================================
   STORY Magazine G2 — Listing / Discovery Pages
   Phase 8
   Implements: 03-CATEGORY.md, 07-TYPOGRAPHY.md, 08-SPACING-GRID.md,
               10-RESPONSIVE.md, 11-COMPONENT-LIBRARY.md
   All values are measured reference forensics unless marked
   STORY IMPLEMENTATION DECISION.
   ================================================================ */

/* --- Grid -------------------------------------------------------
   Frozen geometry (03-CATEGORY): 2 columns at 390/768/1024,
   4 columns at 1280/1440/1920, gutter always 0, edge-to-edge. */
.story-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  padding-bottom: 96px;
}

.story-grid .story-card-copy {
  background: transparent;
  padding-inline: 0;
  text-align: center;
}

.story-grid .story-label {
  padding-block: 20px; /* 08-SPACING-GRID: archive label padding 20px vertical */
  text-align: center;
}

.story-grid .story-card-title {
  margin: 0;
  font: 300 24px/26px var(--story-font); /* 03-CATEGORY: archive/related title 24/26/300 centred */
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
}

.story-grid .story-card-excerpt {
  font: 400 14px/16px var(--story-font); /* 07-TYPOGRAPHY: archive excerpt 14/16/400 uppercase */
  text-transform: uppercase;
  text-align: center;
}

.story-grid .story-meta {
  font: 400 14px/16px var(--story-font); /* 07-TYPOGRAPHY: deck/byline 14/16/400 uppercase */
  text-transform: uppercase;
  text-align: center;
}

/* --- Page identity ---------------------------------------------- */
.story-page-identity {
  padding-block: 96px 64px;
}

.story-page-identity .story-label {
  text-align: center;
  padding-block: 20px;
}

.story-page-identity h1 {
  max-width: 600px;
  margin: 12px auto;
  font: 300 32px/36px var(--story-font);
  text-align: center;
  letter-spacing: normal;
  /* STORY IMPLEMENTATION DECISION: no frozen listing-page H1
     measurement exists; unified with the measured homepage/article
     H1 family 32/36/300 (07-TYPOGRAPHY). Replaces the previous
     clamp(38px,4.6vw,64px) with -0.04em letter-spacing
     (undocumented values). */
}

/* --- Category identity compaction --------------------------------
   HUMAN DESIGN AUTHORIZATION (category header pass): the Category
   page identity region was excessively tall (padding-block 96/64
   above). Category archives now use a content-driven identity:
   32px block padding below 1280 (mobile/tablet), 48px from 1280
   (desktop), mapping to existing tokens --story-space-8 /
   --story-space-12. Scoped to body.category only — archive.php
   (tag/date) and index.php identities are unchanged. */
body.category .story-page-identity {
  padding-block: var(--story-space-8);
}

@media (min-width: 1280px) {
  body.category .story-page-identity {
    padding-block: var(--story-space-12);
  }
}

/* --- Search (Priority-4 frozen) --------------------------------
   10-RESPONSIVE table: field height 48; input width 216.17 @390,
   594.17 @768, 649.17 @1024+; X inset 20 below 1280 / 40 from
   1280. The result grid below is itself full-bleed (.story-grid). */
.story-search-page {
  padding: 20px 20px 0;
  /* STORY IMPLEMENTATION DECISION: 20px block-start approximates
     the reference field Y=120 (fixed 101px header) onto our static
     header. 20px inline = measured X inset below 1280. */
}

.story-search-page-form label {
  display: block;
  margin-bottom: 8px; /* STORY IMPLEMENTATION DECISION */
  font: 500 14px/16px var(--story-font);
  text-transform: uppercase;
}

.story-search-page-form div {
  display: flex;
  align-items: stretch;
}

.story-search-page-form input[type="search"] {
  height: 48px;
  min-width: 0;
  flex: 1 1 auto;
  max-width: 216.17px; /* measured input width @390 */
  padding: 0 12px;
  border: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  font: 300 14px/20px var(--story-font); /* 07-TYPOGRAPHY: search input 14/20/300 */
}

.story-search-page-form button {
  flex: 0 0 auto;
  height: 48px;
  padding-inline: 16px;
  border: 0;
  background: var(--color-black);
  color: var(--color-white);
  font: 500 14px/16px var(--story-font);
  text-transform: uppercase;
}

.story-search-count {
  margin: 48px 0 0; /* STORY IMPLEMENTATION DECISION: approximates reference grid Y=244 */
  text-align: center;
  font: 400 14px/16px var(--story-font);
  text-transform: uppercase;
}

/* --- Contributor (author.php) ----------------------------------- */
.story-contributor {
  display: grid;
  gap: 40px;
  padding-block: 96px;
}

.story-contributor-portrait {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}

.story-contributor .story-label {
  padding-block: 20px;
}

.story-contributor h1 {
  font: 300 32px/36px var(--story-font);
  /* STORY IMPLEMENTATION DECISION: standalone contributor page is
     ACCEPTED UNKNOWN (11-COMPONENT-LIBRARY); this header renders
     real WordPress user data (avatar/display name/description),
     not an invented EE72 layout. H1 unified with 32/36/300. */
}

/* --- 404 ---------------------------------------------------------
   Deliberate correction of the recorded reference defect
   (10-RESPONSIVE Priority-4 404: empty viewport-height main with
   no H1/search/cards). Build spec requires a designed recovery
   page with one logical H1 and a route back. */
.story-error {
  max-width: 42rem;
  margin-inline: auto;
  padding: 96px 20px 64px; /* inline 20 below 1280 / 40 from 1280 */
  text-align: center;
}

.story-error .story-label {
  padding-block: 20px;
}

.story-error h1 {
  font: 300 32px/36px var(--story-font);
}

.story-error ul {
  list-style: none;
  padding: 0;
}

/* --- Basic page (page.php fallback) ------------------------------ */
.story-basic-page {
  padding-block: 96px;
}

.story-basic-page h1 {
  font: 300 32px/36px var(--story-font);
}

/* --- Empty state (template-parts/empty.php) ---------------------- */
.story-empty-state h2 {
  margin: 0 0 12px; /* STORY IMPLEMENTATION DECISION: empty heading is h2 (page H1 is the single logical H1) */
  font: 300 24px/26px var(--story-font);
}

.story-empty-state p {
  font: 400 14px/16px var(--story-font);
  text-transform: uppercase;
}

/* --- Pagination ---------------------------------------------------- */
.navigation.pagination {
  padding: 40px 20px 96px; /* inline 20 below 1280 / 40 from 1280 */
  text-align: center;
}

.nav-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.nav-links a,
.nav-links .page-numbers {
  font: 500 14px/16px var(--story-font);
  text-transform: uppercase;
}

.nav-links .current {
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

/* --- Responsive (frozen breakpoint family 640/834/1024/1280/1920/2560) --- */
@media (min-width: 768px) {
  .story-search-page-form input[type="search"] {
    max-width: 594.17px; /* measured input width @768 */
  }
}

@media (min-width: 834px) {
  /* STORY IMPLEMENTATION DECISION: 834 = nearest frozen breakpoint
     (family 640/834/1024/1280/1920/2560); prior 900 was not frozen. */
  .story-contributor {
    grid-template-columns: 360px 1fr;
    align-items: center;
  }
}

@media (min-width: 1024px) {
  .story-search-page-form input[type="search"] {
    max-width: 649.17px; /* measured input width @1024+ */
  }
}

@media (min-width: 1280px) {
  .story-grid {
    grid-template-columns: repeat(4, 1fr); /* 03-CATEGORY: 4 columns from 1280 */
  }

  .story-search-page {
    padding-inline: 40px; /* measured X inset @1280+ */
  }

  .story-error {
    padding-inline: 40px;
  }

  .navigation.pagination {
    padding-inline: 40px;
  }
}