/* =================================================================
   MAYURA STATION — PRODUCT SHOWCASE  (MAYURAWEB-32)
   Product CPT archive (archive-product.php) + single (single-product.php):
   the filter UI, product-card grid specifics, empty state and single
   detail layout glue.

   Loaded ONLY on is_post_type_archive('product') || is_singular('product')
   (see functions.php), AFTER tokens -> base -> components -> main, so it
   extends the shared kit. DEPENDS ON:
     • tokens.css — all :root tokens (--ink, --gold, --text, --mute,
       --rule, --s1..--s8, --pad, --section, --maxw, --ease, fonts).
     • base.css   — .wrap, .chapter__no, .k, .lede, .body, .btn, .wordmark.
     • components.css — .section-head, .card / .card--product (.card__label,
       .card__body, .card__tier, .card__title, .card__score, .card__link),
       .card-grid[--3], .badge[--gold], .media[--portrait], .ledger,
       .cta-band[--center].
   These are REFERENCED / COMPOSED — never redefined. This file adds ONLY
   product-showcase-specific rules and uses ONLY tokens (no raw hex).

   Accent: GOLD only. No terracotta (Steakhouse-reserved).
   Everything degrades gracefully with ZERO products present.
   ================================================================= */


/* =================================================================
   ARCHIVE SHELL + HEAD
   Vertical rhythm; .section-head styles its <h2>, so give the archive
   <h1> the matching bottom spacing.
   ================================================================= */
.shop{padding:clamp(56px,8vw,120px) 0 var(--section)}
.shop__head{margin-bottom:var(--s5)}
.shop__head > h1{margin-bottom:var(--s3)}


/* =================================================================
   FILTER UI
   Accessible pill links (compose .badge). Grouped by taxonomy with a
   Mulish .k label. The active pill is filled gold (aria-current="true"),
   distinct from .badge's outline-gold hover. Keyboard focus inherits the
   gold :focus-visible ring from .badge in components.css.
   ================================================================= */
.shop__filters{
  display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);
  margin-bottom:var(--s6);
  padding-bottom:var(--s4);border-bottom:1px solid var(--rule);
}
.filter{display:flex;flex-direction:column;gap:var(--s2)}
.filter__label{margin:0}
.filter__list{
  display:flex;flex-wrap:wrap;gap:var(--s1) 10px;
  list-style:none;margin:0;padding:0;
}
/* Active filter — filled gold, clearly "on" vs the outline hover state. */
.shop__filters a.badge[aria-current="true"]{
  background:var(--gold);color:var(--ink);border-color:var(--gold);
}
.shop__filters a.badge[aria-current="true"]:hover{color:var(--ink)}


/* =================================================================
   PRODUCT CARD — archive grid specifics
   Uniform label imagery + a branded placeholder so the grid never
   breaks with mixed image ratios or missing thumbnails. The marble
   score gets a small Mulish key over the Cinzel-gold .card__score.
   ================================================================= */
.shop .card--product .card__label{aspect-ratio:3/2}
.shop .card--product .card__label img{
  width:100%;height:100%;object-fit:cover;
}
.shop .card--product .card__label-ph{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;background:var(--ink);
}
.shop .card--product .card__label-ph .wordmark{
  font-size:13px;letter-spacing:.28em;color:var(--gold);opacity:.55;
}
/* Marble-score line: label + big gold figure. */
.shop .card--product .card__spec{
  display:flex;flex-direction:column;gap:6px;margin:0;
}


/* =================================================================
   EMPTY STATE  (zero products, or a filter with no matches)
   Centred, calm "coming soon" / "no matches" notice with a CTA.
   ================================================================= */
.shop-empty{text-align:center;padding-block:var(--s7)}
.shop-empty .lede{margin:0 auto var(--s3);max-width:52ch}
.shop-empty .body{margin:0 auto var(--s5);max-width:56ch;text-align:center}
.shop-empty .btn{margin-inline:auto}


/* =================================================================
   PAGINATION  (mirrors the generic archive pager, token-based)
   ================================================================= */
.shop .tpl-pager-nav{margin-top:var(--s6)}
.shop .tpl-pager-nav .nav-links{
  display:flex;flex-wrap:wrap;gap:var(--s2);
  justify-content:center;align-items:center;
}
.shop .tpl-pager-nav .page-numbers{
  font-family:var(--mulish);font-size:12px;font-weight:600;letter-spacing:.12em;
  color:var(--mute);padding:10px 14px;border:1px solid var(--rule-soft);
  transition:color 200ms var(--ease),border-color 200ms var(--ease);
}
.shop .tpl-pager-nav a.page-numbers:hover{color:var(--gold);border-color:var(--gold)}
.shop .tpl-pager-nav .page-numbers.current{color:var(--gold);border-color:var(--gold)}
.shop .tpl-pager-nav a.page-numbers:focus-visible{outline:2px solid var(--gold);outline-offset:3px}


/* =================================================================
   SINGLE PRODUCT
   Title band → two-column media | specs "dossier" → optional prose →
   trade CTA. Composes .media / .ledger / .badge / .cta-band.
   ================================================================= */
.product{padding:clamp(56px,8vw,120px) 0 0}
.product__head{margin-bottom:var(--s6)}
.product__head h1{margin-bottom:var(--s3)}
.product__badges{display:flex;flex-wrap:wrap;gap:var(--s1) 12px;margin-top:var(--s3)}

/* Media | specs. Image column slightly wider than the ledger column. */
.product__grid{
  display:grid;grid-template-columns:1.15fr 1fr;
  gap:clamp(32px,5vw,80px);align-items:start;
  margin-bottom:var(--s7);
}
.product__media{position:relative}
/* Branded placeholder when no featured image is set. */
.product__media-ph{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:4/5;background:var(--ink-2);border:1px solid var(--rule);
}
.product__media-ph .wordmark{
  font-size:14px;letter-spacing:.28em;color:var(--gold);opacity:.5;
}
.product__specs{display:flex;flex-direction:column}
.product__lede{margin-bottom:var(--s4)}
.product__specs-label{margin-bottom:var(--s2)}

@media(max-width:860px){
  .product__grid{grid-template-columns:1fr;gap:var(--s5)}
}

/* Optional WYSIWYG body (prose defaults, mirrors the page/single prose). */
.product__body{margin-bottom:var(--s7)}
.product__body > * + *{margin-top:var(--s3)}
.product__body h2{margin-top:var(--s6);margin-bottom:var(--s2)}
.product__body h3{margin-top:var(--s5);margin-bottom:var(--s2)}
.product__body p{color:var(--text);max-width:68ch}
.product__body a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.product__body a:hover{color:var(--gold-dk)}
.product__body ul,.product__body ol{margin-left:1.25em;color:var(--text);max-width:68ch}
.product__body ul{list-style:disc}
.product__body ol{list-style:decimal}
.product__body li{margin-top:var(--s1);padding-left:.25em}
.product__body li::marker{color:var(--gold)}
.product__body strong{color:var(--text);font-weight:500}

/* Trade CTA — full-bleed band; sits flush after the detail. */
.product__cta{margin-top:0}


/* =================================================================
   AWARDS  (MAYURAWEB-32 — the honours ledger)
   Award CPT archive (archive-award.php) + single (single-award.php).
   The awards record reads as a data-table / ledger: Year · Competition ·
   Result · Awarding Body. Composes .section-head[--split], .table /
   .table-scroll / td.is-num, .attest / .attest__item, .badge and
   .cta-band from the global sheets — never redefines them. Adds ONLY
   award-specific glue. GOLD accent only (no terracotta). Degrades
   gracefully with ZERO awards.
   ================================================================= */

/* ---- Archive shell + head ---- */
.awards{padding:clamp(56px,8vw,120px) 0 var(--section)}
.awards__head{margin-bottom:var(--s5)}
/* .section-head styles its <h2>; give the split head's <h1> matching spacing. */
.awards__head h1{margin-bottom:0}

/* ---- Year filter (composes .filter / .badge; mirrors the product filter) ----
   The active pill is filled gold (aria-current="true"), distinct from
   .badge's outline-gold hover. Keyboard focus inherits the gold
   :focus-visible ring from .badge in components.css. */
.awards__filters{
  display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);
  margin-bottom:var(--s6);
  padding-bottom:var(--s4);border-bottom:1px solid var(--rule);
}
.awards__filters a.badge[aria-current="true"]{
  background:var(--gold);color:var(--ink);border-color:var(--gold);
}
.awards__filters a.badge[aria-current="true"]:hover{color:var(--ink)}

/* ---- The record table (composes .table / .table-scroll / td.is-num) ---- */
.awards__record{margin-bottom:var(--s6)}
/* Visually-hidden caption — names the table for assistive tech without
   duplicating the visible section heading. */
.awards__caption{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* Year column: keep the Cinzel-gold figure tight so the competition
   column takes the slack on wide screens. */
.awards__table td.is-num{width:1%;padding-right:var(--s4);font-size:16px}
/* Competition cell links through to the single award. Reads as body text,
   turns gold on hover/focus; gold focus ring for keyboard operation. */
.awards__link{
  color:var(--text);text-decoration:none;
  transition:color var(--dur-fast) var(--ease);
}
.awards__link:hover{color:var(--gold)}
.awards__link:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* Result "stamp" — a small Mulish uppercase label, distinct from the
   Roboto body cells, marking the placing without over-golding the table. */
.awards__result{
  font-family:var(--mulish);font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text);
}
/* Faint em-dash placeholder for a missing cell. */
.awards__na{color:var(--mute-2)}

/* ---- Summary strip (composes .attest / .attest__item) ----
   Full-bleed bordered strip; the .attest padding provides the bleed, so
   the flex row is capped to --maxw and centred within it. */
.awards__stats{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  gap:var(--s5) clamp(40px,8vw,120px);
  max-width:var(--maxw);margin-inline:auto;
}

/* ---- Empty / no-match state (mirrors .shop-empty) ---- */
.awards-empty{text-align:center;padding-block:var(--s7)}
.awards-empty .lede{margin:0 auto var(--s3);max-width:54ch}
.awards-empty .body{margin:0 auto var(--s5);max-width:58ch;text-align:center}
.awards-empty .btn{margin-inline:auto}


/* =================================================================
   SINGLE AWARD
   Title band → two-column logo | details "dossier" → optional prose →
   awards-record CTA. Composes .ledger / .badge / .cta-band.
   ================================================================= */
.award{padding:clamp(56px,8vw,120px) 0 0}
.award__head{margin-bottom:var(--s6)}
.award__head h1{margin-bottom:var(--s3)}
.award__badges{display:flex;flex-wrap:wrap;gap:var(--s1) 12px;margin-top:var(--s3)}

/* Logo | details. Logo column slightly narrower than the detail ledger. */
.award__grid{
  display:grid;grid-template-columns:1fr 1.1fr;
  gap:clamp(32px,5vw,80px);align-items:start;
  margin-bottom:var(--s7);
}
/* Award logo frame — bordered, CONTAIN-fit (logos must not be cropped),
   set on a lifted panel so light and dark badge art both read. */
.award__logo{
  margin:0;display:flex;align-items:center;justify-content:center;
  aspect-ratio:1/1;padding:clamp(24px,5vw,56px);
  background:var(--ink-2);border:1px solid var(--rule);
}
.award__logo img{
  width:100%;height:100%;display:block;object-fit:contain;
}
/* Branded placeholder when no logo is set. */
.award__logo--ph .wordmark{
  font-size:14px;letter-spacing:.28em;color:var(--gold);opacity:.5;
}
.award__detail{display:flex;flex-direction:column}
.award__detail-label{margin-bottom:var(--s2)}

@media(max-width:860px){
  .award__grid{grid-template-columns:1fr;gap:var(--s5)}
  .award__logo{aspect-ratio:16/10}
}

/* Optional WYSIWYG body (prose defaults; mirrors the product/single prose). */
.award__body{margin-bottom:var(--s7)}
.award__body > * + *{margin-top:var(--s3)}
.award__body h2{margin-top:var(--s6);margin-bottom:var(--s2)}
.award__body h3{margin-top:var(--s5);margin-bottom:var(--s2)}
.award__body p{color:var(--text);max-width:68ch}
.award__body a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.award__body a:hover{color:var(--gold-dk)}
.award__body ul,.award__body ol{margin-left:1.25em;color:var(--text);max-width:68ch}
.award__body ul{list-style:disc}
.award__body ol{list-style:decimal}
.award__body li{margin-top:var(--s1);padding-left:.25em}
.award__body li::marker{color:var(--gold)}
.award__body strong{color:var(--text);font-weight:500}

/* Awards-record CTA — full-bleed band; sits flush after the detail. */
.award__cta{margin-top:0}