/* Certifications & Compliance page - assets/css/certifications-compliance.css
   Loaded only on the /certifications-compliance/ route (inc/routes.php enqueues <slug>.css after
   tokens.css and style.css). Mobile first; every colour, size and space is a var() token, so the
   accent preset or the type scale can change in tokens.css without touching this file.

   This page publishes no certificate number, validity date, issuing body, MOQ, lead time or
   price, so no layout here tabulates figures: each card states a scope, not a serial number. */

/* --- hero ---------------------------------------------------------------- */
.certs-hero{padding-block:var(--section-y-tight) var(--section-y)}
.certs-hero__inner{display:grid;justify-items:start}
.certs-hero h1{max-width:22ch}
.certs-hero .lead{margin-bottom:var(--space-5)}
.certs-hero .btn-row{margin-top:var(--space-2)}

/* --- shared section head ------------------------------------------------- */
.certs-head{max-width:var(--wrap-narrow);margin-bottom:var(--space-6)}
.certs-head h2{max-width:30ch}
.certs-head .lead{margin-top:var(--space-2);margin-bottom:0}

/* --- certificates: image + name + one scope line, per card --------------- */
.certs-cards{margin-top:var(--space-6)}
.certs-card{display:grid;align-content:start;gap:var(--space-4)}
.certs-card__media{
  margin:0;
  padding:var(--space-5);
  background:var(--c-surface);
  border:var(--border-hair);
  border-radius:var(--r-sm);
  overflow:hidden;
}
.certs-card__media img{width:100%;height:auto;aspect-ratio:2/1;object-fit:contain}
.certs-card h3{margin:0}
.certs-card__status{margin:var(--space-3) 0 0;letter-spacing:var(--ls-eyebrow);text-transform:uppercase}
.certs-card__scope{margin:var(--space-2) 0 0;font-size:var(--fs-small);color:var(--c-ink-soft)}

/* --- the two notes under the cards -------------------------------------- */
.certs-note{margin-top:var(--space-5);margin-bottom:0;max-width:var(--measure)}
.certs-note+.certs-note{margin-top:var(--space-2)}

/* --- supplier system: prose beside a short fact list -------------------- */
.certs-system__grid{align-items:start}
.certs-facts{list-style:none;max-width:none;margin:0;padding:0;border-top:var(--border-hair)}
.certs-fact{display:flex;gap:var(--space-4);margin:0;padding-block:var(--space-4);border-bottom:var(--border-hair)}
.certs-fact__index{
  flex:none;
  font-size:var(--fs-small);
  letter-spacing:var(--ls-eyebrow);
  color:var(--c-ink-mute);
  font-variant-numeric:tabular-nums;
}
.certs-fact__body{margin:0;max-width:var(--measure)}

/* --- supplier system: named in text, sitting where a mark would sit ------ */
.certs-system__wordmark{
  margin:0 0 var(--space-2);
  font-family:var(--font-display);
  font-size:var(--fs-h4);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--c-ink-mute);
}

/* --- what we can support: six requirements, as cards -------------------- */
.certs-support__list{
  list-style:none;
  max-width:none;
  margin:var(--space-6) 0 0;
  padding:0;
  display:grid;
  gap:var(--space-4);
}
.certs-support__item{
  background:var(--c-surface);
  border:var(--border-hair);
  border-radius:var(--r-md);
  padding:var(--space-5);
}
.certs-support__title{
  font-family:var(--font-body);
  font-size:var(--fs-h4);
  font-weight:600;
  letter-spacing:normal;
  margin-bottom:var(--space-2);
}
.certs-support__item p:last-child{margin-bottom:0}

/* --- closing call to action (on the ink surface) ------------------------ */
.certs-cta__inner{display:grid;justify-items:start}
.certs-cta h2{max-width:30ch}
.certs-cta .lead{margin-bottom:0}
.certs-cta .btn-row{margin-top:var(--space-4)}
.certs-cta .btn--ghost{border-color:var(--c-on-ink-line);color:var(--c-on-ink)}
.certs-cta .btn--ghost:hover{border-color:var(--c-on-ink);color:var(--c-on-ink);background:var(--c-on-ink-line)}
.certs-cta__contact{
  width:100%;
  max-width:var(--measure);
  margin:var(--space-5) 0 0;
  padding-top:var(--space-4);
  border-top:1px solid var(--c-on-ink-line);
}
.certs-cta__contact a{color:var(--c-on-ink);text-decoration-color:var(--c-on-ink-line)}
.certs-cta__contact a:hover{text-decoration-color:var(--c-on-ink)}

/* --- from 720px --------------------------------------------------------- */
@media (min-width:720px){
  .certs-support__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* --- from 900px: wider gutters inside the card row ---------------------- */
@media (min-width:900px){
  .certs-cards{gap:var(--space-6)}
}

/* --- from 1000px: three cards, three support columns -------------------- */
@media (min-width:1000px){
  .certs-hero h1{max-width:20ch}
  .certs-support__list{grid-template-columns:repeat(3,minmax(0,1fr))}
}