/* =================================================================
   MAYURA STATION — COMPONENT LIBRARY  (MAYURAWEB-17)
   Reusable UI components for the WordPress theme.

   Load order: tokens.css → base.css → main.css → components.css.
   DEPENDS ON:
     • tokens.css — all :root design tokens (--ink, --gold, --terra,
       --text, --mute, --rule, --s1..--s8, --maxw, --pad, --ease, fonts).
     • base.css   — reset, headings h1–h3, p, .lede, .body, .num, .k,
       .chapter__no, .wordmark, .wrap/.wrap--narrow, and the whole .btn
       family (.btn--gold/--solid/--ghost/--terra).
   These are REFERENCED / COMPOSED here — never redefined. This file
   adds ONLY new component classes and uses ONLY tokens (no raw hex).

   Generalised from the brand-correct prototype ui/v6/index.html
   ("The Dossier") and design-system/mayura-station/MASTER.md.
   Reflects v6 client feedback: image-rich, SMALL numeric markers
   (not oversized), tagline "Excellence Without Compromise" restored,
   social links footer-only.

   CONVENTIONS
     • Gold is the DEFAULT accent. Terracotta is Steakhouse-reserved;
       every terracotta rule below is commented "Steakhouse only"
       (the sole exception is the functional form-error signal — the
       brand's only sanctioned warm-red; bright reds are forbidden).
     • Every interactive element: cursor:pointer, a visible
       :focus-visible gold outline, transitions 150–300ms via
       var(--ease). No layout-shifting hovers (background/border only).
     • Responsive at the documented breakpoints: 1024px (laptop),
       768px (tablet), plus component-specific 860/520px stack points.
     • prefers-reduced-motion is handled globally in base.css and is
       not overridden here.
   ================================================================= */


/* =================================================================
   HAIRLINE RULE                        (from v6; absent in base.css)
   Chapter/section separators and inline dividers.
   ================================================================= */
.rule{height:1px;background:var(--rule);border:0;margin:0}
.rule--soft{background:var(--rule-soft)}


/* =================================================================
   EYEBROW / TAG                         → ACF: block "label" field
   Small Mulish uppercase label with a leading gold hairline.
   NOTE: base.css .chapter__no is the NUMBERED chapter eyebrow; this
   is the un-numbered inline tag (v6 .channel__tag / .panel__tag).
   ================================================================= */
.eyebrow{
  font-family:var(--mulish);font-size:10px;font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;color:var(--gold);
  display:inline-flex;align-items:center;gap:14px;
}
.eyebrow::before{content:"";width:32px;height:1px;background:var(--gold)}
/* Steakhouse only — terracotta accent */
.eyebrow--terra{color:var(--terra-2)}
.eyebrow--terra::before{background:var(--terra-2)}


/* =================================================================
   BADGE / PILL             → ACF: tag/marker repeater (markets etc.)
   Small outlined Mulish pill; gold-outline on hover when interactive.
   ================================================================= */
.badge{
  display:inline-block;
  font-family:var(--mulish);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text);
  padding:9px 16px;border:1px solid var(--rule);
  transition:border-color 200ms var(--ease),color 200ms var(--ease);
}
.badge--gold{color:var(--gold)}
a.badge,button.badge{cursor:pointer}
.badge:hover{border-color:var(--gold);color:var(--gold)}
a.badge:focus-visible,button.badge:focus-visible{outline:2px solid var(--gold);outline-offset:3px}


/* =================================================================
   SECTION HEADER                    → ACF: section intro (any block)
   Groups the eyebrow (.chapter__no or .eyebrow, from base/this file),
   an <h2> title and a .lede. Supplies grouping + spacing only.
   ================================================================= */
.section-head{max-width:820px;margin-bottom:var(--s7)}
.section-head > h2{margin-bottom:var(--s3)}
/* Centred intro */
.section-head--center{max-width:780px;margin-inline:auto;text-align:center}
.section-head--center .chapter__no{justify-content:center}
.section-head--center .lede,
.section-head--center .body{margin-inline:auto}
/* Split intro: title left, lede right (v6 .method__head) */
.section-head--split{
  max-width:none;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,80px);align-items:end;
}
@media(max-width:860px){
  .section-head--split{grid-template-columns:1fr;gap:var(--s4)}
}


/* =================================================================
   CARD FAMILY
   Base container + content / channel / product variants.
   Hover = subtle background LIFT to --ink-3 + gold hairline border
   (no transform → no layout shift). Interactive cards get
   cursor:pointer and a visible focus ring.
   ================================================================= */
.card{
  display:flex;flex-direction:column;
  background:var(--ink-2);border:1px solid var(--rule);
  transition:background 240ms var(--ease),border-color 240ms var(--ease);
}
a.card,
.card--channel,
.card--product{cursor:pointer}
a.card:hover,
.card--channel:hover,
.card--product:hover{background:var(--ink-3);border-color:var(--gold)}
a.card:focus-visible,
.card[tabindex]:focus-visible,
.card--channel:focus-visible,
.card--product:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---- Card sub-elements ---- */
.card__media{overflow:hidden;border-bottom:1px solid var(--rule);background:var(--ink)}
.card__media img{
  width:100%;height:100%;display:block;object-fit:cover;
  aspect-ratio:3/2;filter:saturate(1) contrast(1.02);
}
.card__body{
  display:flex;flex-direction:column;gap:var(--s2);
  padding:clamp(24px,3vw,40px);flex:1;
}
.card__title{
  font-family:var(--cinzel);font-weight:500;letter-spacing:.02em;
  color:var(--text);line-height:1.15;font-size:clamp(20px,2vw,28px);
}
.card__text{color:var(--mute);font-size:14.5px;line-height:1.7}
.card__link{
  font-family:var(--mulish);font-size:10px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  display:inline-flex;align-items:center;gap:10px;
  margin-top:auto;padding-top:var(--s3);
}
.card__link .arr{transition:transform 240ms var(--ease)}
a.card:hover .card__link .arr,
.card--channel:hover .card__link .arr,
.card--product:hover .card__link .arr{transform:translateX(4px)}
/* Feature list inside a card (v6 .channel ul) */
.card__list{
  display:flex;flex-direction:column;gap:14px;
  padding-top:var(--s3);border-top:1px solid var(--rule);margin-top:var(--s2);
}
.card__list li{
  display:grid;grid-template-columns:14px 1fr;gap:14px;
  font-size:14px;font-weight:300;color:var(--text);line-height:1.55;
}
.card__list li::before{content:"";width:8px;height:1px;background:var(--gold);margin-top:10px}

/* ---- Content card: image + title + body + link ---- */
.card--content .card__link{border-top:1px solid var(--rule)}

/* ---- Channel / audience card: eyebrow, title, description, arrow ---- */
.card--channel{padding:clamp(28px,4vw,72px);gap:var(--s3)}
.card--channel .card__title{font-size:clamp(24px,2.4vw,36px)}
.card--channel .card__link{padding-top:var(--s3);border-top:1px solid var(--rule)}

/* ---- Product / label-tier card: label image, tier name, score, meta ---- */
.card--product{gap:0}
.card--product .card__label{
  border-bottom:1px solid var(--rule);background:var(--ink);overflow:hidden;
}
.card--product .card__label img{width:100%;height:auto;display:block}
.card--product .card__body{gap:var(--s3)}
.card--product .card__tier{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding-bottom:var(--s3);border-bottom:1px solid var(--rule);
  font-family:var(--mulish);font-size:10px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;
}
.card--product .card__tier .no{color:var(--mute)}
.card--product .card__tier .series{color:var(--gold)}
.card--product .card__score{
  font-family:var(--cinzel);font-weight:500;color:var(--gold);
  font-variant-numeric:tabular-nums lining-nums;
  font-size:clamp(22px,2vw,30px);line-height:1;
}


/* =================================================================
   CARD GRID                       → ACF: grid wrapper for any cards
   Responsive auto-fit grid; modifiers fix column counts. The
   --seamless modifier renders the shared-hairline "ledger" look from
   v6 (.channels / product ledger): 1px gold gutters, no card borders.
   ================================================================= */
.card-grid{
  display:grid;gap:var(--s4);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.card-grid--2{grid-template-columns:repeat(2,1fr)}
.card-grid--3{grid-template-columns:repeat(3,1fr)}
.card-grid--seamless{
  gap:1px;background:var(--rule);border:1px solid var(--rule);
}
.card-grid--seamless > .card{border:0}
@media(max-width:1024px){
  .card-grid--3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .card-grid--2,
  .card-grid--3{grid-template-columns:1fr}
}


/* =================================================================
   ATTESTATION BAR             → ACF: Certifications / Stat Strip block
   Bordered top+bottom strip on --ink-2. Two content modes:
     (a) inline diamond-separated labels  (.attest__row > li)
     (b) stacked stat items with .num + .k (.attest__item)
   Wraps / stacks on mobile.
   ================================================================= */
.attest{
  padding:28px var(--pad);background:var(--ink-2);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.attest__row{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:clamp(16px,3vw,48px);max-width:var(--maxw);margin:0 auto;
}
.attest__row li{
  font-family:var(--mulish);font-size:10px;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--gold);
  display:flex;align-items:center;gap:14px;white-space:nowrap;
}
.attest__row li::before{
  content:"";width:5px;height:5px;border:1px solid var(--gold);
  transform:rotate(45deg);display:inline-block;
}
.attest__row li:first-child::before{display:none}
/* Stat-item mode: stacked .num over .k */
.attest__item{text-align:center}
.attest__item .num{display:block;font-size:clamp(24px,3vw,40px);margin-bottom:8px}
.attest__item .k{font-size:9px;letter-spacing:.25em}
@media(max-width:768px){
  .attest__row{gap:var(--s3) var(--s4)}
}


/* =================================================================
   MEDIA                            → ACF: Full-width Media block
   Full-bleed bordered "exhibit" image with an optional caption.
   ================================================================= */
.media{position:relative;margin:0}
.media img{
  width:100%;display:block;object-fit:cover;
  border:1px solid var(--rule);filter:saturate(.98) contrast(1.02);
}
.media--portrait img{aspect-ratio:4/5}
.media--landscape img{aspect-ratio:16/9}
.media__caption,
.media figcaption{
  font-family:var(--mulish);font-size:10px;font-weight:500;
  letter-spacing:.25em;text-transform:uppercase;color:var(--mute);
  margin-top:16px;display:flex;justify-content:space-between;gap:16px;
}
.media__caption span:first-child,
.media figcaption span:first-child{color:var(--gold);font-weight:600}

/* -----------------------------------------------------------------
   MEDIA SPLIT                       → ACF: Text + Image block
   Two-column text | image; --reverse flips columns on desktop.
   Stacks on mobile with the image on top (v6 .land / .genetics).
   Expected children: .media-split__text  +  .media
   ----------------------------------------------------------------- */
.media-split{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(40px,5vw,96px);align-items:start;
}
.media-split--reverse .media-split__text{order:2}
@media(max-width:860px){
  .media-split{grid-template-columns:1fr;gap:var(--s6)}
  .media-split .media{order:-1}
}


/* =================================================================
   LEDGER                              → ACF: Spec / Data block
   Key/value rows for specs, marbling and formats. Mulish .k key
   (base.css) left, value right; hairline row separators; tabular
   figures. Also composes inside .card--product for tier specs.
   ================================================================= */
.ledger{border-top:1px solid var(--rule)}
.ledger__row{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s3);padding:16px 0;border-bottom:1px solid var(--rule);
}
.ledger__row .k{margin:0}
.ledger__val{
  font-family:var(--cinzel);font-weight:500;color:var(--gold);
  font-variant-numeric:tabular-nums lining-nums;
  font-size:16px;line-height:1.2;text-align:right;
}
/* Compact two-column tabular ledger (v6 .sheet__specs) */
.ledger--grid{
  border-top:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--rule);border:1px solid var(--rule);
}
.ledger--grid .ledger__cell{
  background:var(--ink-2);padding:20px 24px;
  display:flex;flex-direction:column;gap:6px;
}
.ledger--grid .ledger__cell .k{margin:0}
.ledger--grid .ledger__cell .ledger__val{
  text-align:left;font-size:clamp(20px,2vw,28px);
}
@media(max-width:520px){
  .ledger--grid{grid-template-columns:1fr}
}


/* =================================================================
   TABLE                       → ACF: Awards Index / Data Table block
   Archive-style tabular data. Mulish gold headers, --rule row lines,
   tabular figures, Cinzel-gold numeric cells. Wide tables MUST be
   wrapped in .table-scroll so they never break the mobile layout.
   ================================================================= */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;font-family:var(--mulish)}
.table thead th{
  font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);text-align:left;white-space:nowrap;
  padding:14px var(--s3) 14px 0;border-bottom:1px solid var(--rule);
}
.table tbody td{
  font-family:var(--roboto);font-size:14px;font-weight:300;color:var(--text);
  vertical-align:baseline;padding:18px var(--s3) 18px 0;
  border-bottom:1px solid var(--rule);
}
.table th:last-child,
.table td:last-child{padding-right:0;text-align:right}
.table tbody tr{transition:background 200ms var(--ease)}
.table tbody tr:hover{background:var(--ink-2)}
/* Numeric / year cell — Cinzel gold, tabular */
.table td.is-num{
  font-family:var(--cinzel);font-weight:500;color:var(--gold);
  font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;
}


/* =================================================================
   CTA BAND                                → ACF: CTA block
   Full-width call-to-action on --ink-2 with gold hairlines: heading
   + lede + button group. Buttons come from base.css (.btn family).
   ================================================================= */
.cta-band{
  background:var(--ink-2);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.cta-band__inner{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(48px,6vw,96px) var(--pad);
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(24px,4vw,64px);flex-wrap:wrap;
}
.cta-band__text{max-width:52ch}
.cta-band__text h2,
.cta-band__text h3{margin-bottom:var(--s2)}
.cta-band__actions{display:flex;gap:var(--s2);flex-wrap:wrap}
/* Centred variant */
.cta-band--center .cta-band__inner{flex-direction:column;text-align:center}
.cta-band--center .cta-band__text{margin-inline:auto}
.cta-band--center .cta-band__actions{justify-content:center}
/* Steakhouse only — terracotta-framed reservation CTA (v6 .reservation) */
.cta-band--terra{border:1px solid var(--terra)}


/* =================================================================
   QUOTE / TESTIMONIAL              → ACF: Quote / Testimonial block
   Cinzel body, gold quotation-mark accent, attribution in .k styling.
   ================================================================= */
.quote{position:relative;max-width:74ch;margin:0}
.quote::before{
  content:"\201C";display:block;
  font-family:var(--cinzel);color:var(--gold);
  font-size:clamp(48px,6vw,88px);line-height:.6;margin-bottom:var(--s2);
}
.quote__body{
  font-family:var(--cinzel);font-weight:400;color:var(--text);
  font-size:clamp(17px,1.9vw,24px);line-height:1.55;letter-spacing:.01em;
}
.quote__body strong{color:var(--gold);font-weight:500}
.quote__cite{
  display:block;margin-top:var(--s3);font-style:normal;
  font-family:var(--mulish);font-size:10px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
}
.quote--center{text-align:center;margin-inline:auto}
.quote--center::before{margin-inline:auto}
/* Bordered pull-quote variant (v6 .sheet__quote) */
.quote--rule{max-width:none;padding-left:16px;border-left:1px solid var(--rule)}
.quote--rule::before{display:none}
.quote--rule .quote__body{
  font-family:var(--roboto);font-style:italic;font-weight:300;
  color:var(--mute);font-size:14.5px;line-height:1.75;letter-spacing:0;
}


/* =================================================================
   FORM CONTROLS                       → ACF: Enquiry Form block
   Dark inputs on --ink-2, --rule border, gold focus ring, Mulish
   uppercase labels. .form__row lays out responsive multi-column
   fields. Buttons for submit come from base.css (.btn family).
   ================================================================= */
.form{display:flex;flex-direction:column;gap:var(--s4)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
@media(max-width:768px){
  .form__row{grid-template-columns:1fr}
}

.field{display:flex;flex-direction:column;gap:10px}
.field > label{
  font-family:var(--mulish);font-size:10px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--mute);
}
.field > label .req{color:var(--gold);margin-left:4px}
.field input,
.field textarea,
.field select{
  width:100%;
  font-family:var(--roboto);font-size:15px;font-weight:300;color:var(--text);
  background:var(--ink-2);border:1px solid var(--rule);padding:14px 16px;
  transition:border-color 200ms var(--ease),box-shadow 200ms var(--ease);
  appearance:none;-webkit-appearance:none;
}
.field textarea{min-height:140px;resize:vertical;line-height:1.6}
.field input::placeholder,
.field textarea::placeholder{color:var(--mute-2)}
.field input:focus,
.field textarea:focus,
.field select:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);
}
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* Select chevron — hairline glyph via CSS gradients (no emoji, no image) */
.field select{
  cursor:pointer;padding-right:44px;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--gold) 50%),
    linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 20px) center,calc(100% - 14px) center;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
/* Error state — uses Terracotta as a FUNCTIONAL warning signal.
   It is the brand's only sanctioned warm-red (bright reds are
   forbidden); this is the single non-Steakhouse terracotta use. */
.field--error input,
.field--error textarea,
.field--error select{border-color:var(--terra-2)}
.field__error{
  font-family:var(--mulish);font-size:11px;font-weight:500;
  letter-spacing:.06em;color:var(--terra-2);
}