/* Quality Control — assets/css/quality-control.css
   Loaded only on /quality-control/ (inc/routes.php -> zeroy_enqueue_page_style('quality-control'),
   after tokens.css and style.css). Every colour, size and space below is a var() token from
   tokens.css, so the accent preset or the type scale can change there and this file follows.
   No literal colour, no new font, no script; mobile first.

   Bands styled here, in template order:
     1 .qc-hero        copy + inspection photograph
     2 .qc-against     the four standards (qc-item blocks)
     3 .qc-where       five numbered steps + the partner-line note
     4 .qc-tolerance   three cards + note
     5 .qc-deviation   four cards, two card--quiet
     6 .qc-yours       prose + the customer's four decisions
     7 .qc-cta         closing ink band + ghost button

   The global classes the template uses (.section .wrap .stack .split .grid .card .media .btn
   .meta .eyebrow .lead .rule-accent) stay defined in style.css; only qc-* hooks are added here. */

/* --- 1. hero ------------------------------------------------------------- */
.qc-hero{padding-block:var(--section-y-tight) var(--section-y)}
.qc-hero__grid{display:grid;gap:var(--space-6);align-items:center}
.qc-hero h1{max-width:22ch}
.qc-hero .lead{max-width:58ch}
.qc-hero__copy .btn-row{margin-top:var(--space-5)}
.qc-hero__media{margin:0}

/* --- section head shared by bands 2 to 5 --------------------------------- */
.qc-head{max-width:var(--wrap-narrow);margin-bottom:var(--space-6)}
.qc-head h2{max-width:32ch}
.qc-head .lead{margin-top:var(--space-2);margin-bottom:0}

/* --- card rows: title spacing, and no dead space under the last line ----- */
.qc-tolerance__cards .card h3,
.qc-deviation__cards .card h3{margin-bottom:var(--space-2)}
.qc-tolerance__cards .card p:last-child,
.qc-deviation__cards .card p:last-child{margin-bottom:0}

/* --- 2. the standard: one block per thing goods are checked against ------ */
.qc-against__list{
  list-style:none;
  max-width:none;
  margin:0;
  padding:0;
  display:grid;
  gap:var(--space-4)}
.qc-item{
  margin:0;
  padding:var(--space-5);
  background:var(--c-surface);
  border:var(--border-hair);
  border-radius:var(--r-md)}
.qc-item h3{margin-bottom:var(--space-2)}
.qc-item p:last-child{margin-bottom:0}

/* --- 3. where it happens: five steps, numbered in the order they happen -- */
.qc-where__steps{counter-reset:qc-step;list-style:none;max-width:52rem;margin:0;padding:0}
.qc-where__steps li{
  counter-increment:qc-step;
  margin:0;
  padding:var(--space-4) 0 var(--space-4) 3rem;
  border-bottom:var(--border-hair)}
.qc-where__steps li:first-child{padding-top:0}
.qc-where__steps li:last-child{padding-bottom:0;border-bottom:0}
/* number hangs in the gutter: display serif, accent ink, against the body text */
.qc-where__steps li::before{
  content:counter(qc-step,decimal-leading-zero);
  display:inline-block;
  width:2.25rem;
  margin-left:-3rem;
  font-family:var(--font-display);
  font-size:var(--fs-h3);
  line-height:1;
  color:var(--c-accent-strong);
  font-variant-numeric:tabular-nums}
.qc-where__note{margin-top:var(--space-5);margin-bottom:0}

/* --- 4. tolerance: three cards; auto-fit keeps a narrow band one column --- */
.qc-tolerance__cards{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.qc-tolerance__note{margin-top:var(--space-5);margin-bottom:0}

/* --- 5. deviation: four cards, two card--quiet; gap widens at 900px ---- */

/* --- 6. your part: prose beside the four decisions only you can take ----- */
.qc-yours__body{align-items:start}
.qc-yours__list{
  list-style:none;
  margin:0;
  padding:0;
  max-width:var(--measure);
  display:grid;
  gap:var(--space-4)}
.qc-yours__list li{position:relative;margin:0;padding-left:1.25rem}
.qc-yours__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:.4rem;
  height:.4rem;
  border-radius:50%;
  background:var(--c-accent)}

/* --- 7. closing band on the ink surface ---------------------------------- */
.qc-cta__inner{display:grid;gap:var(--space-6);align-items:start}
.qc-cta__copy h2{max-width:28ch;margin-bottom:var(--space-4)}
.qc-cta__copy .lead{max-width:54ch}
.qc-cta__copy .btn-row{margin-top:var(--space-2)}
/* on this dark surface the ghost button takes its contrast from the light foreground tokens
   tokens.css already defines for dark areas: --c-on-ink (label), --c-on-ink-line (border, and
   a faint fill on hover). No hard-coded colour here. */
.qc-cta__ghost{border-color:var(--c-on-ink-line);color:var(--c-on-ink)}
.qc-cta__ghost:hover{border-color:var(--c-on-ink);color:var(--c-on-ink);background:var(--c-on-ink-line)}
.qc-cta__contact{border-top:1px solid var(--c-on-ink-line);padding-top:var(--space-5)}
.qc-cta__line{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--space-2) var(--space-4);
  margin:0 0 var(--space-3);
  font-size:var(--fs-small)}
.qc-cta__line:last-child{margin-bottom:0}
.qc-cta__label{
  min-width:8rem;
  font-size:var(--fs-eyebrow);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--c-on-ink-mute)}
.qc-cta__contact a{color:var(--c-on-ink);text-decoration-color:var(--c-on-ink-line)}
.qc-cta__contact a:hover{text-decoration-color:var(--c-on-ink)}

/* --- from 640px --------------------------------------------------------- */
@media (min-width:640px){
  .qc-where__steps li{padding-left:3.5rem}
  .qc-where__steps li::before{width:2.5rem;margin-left:-3.5rem}
  .qc-cta__line{flex-wrap:nowrap}
}

/* --- from 720px: the four standards sit two by two ---------------------- */
@media (min-width:720px){
  .qc-against__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* --- from 900px: two-column hero, wider card rows, a two-column CTA ----- */
@media (min-width:900px){
  .qc-hero{padding-block:var(--section-y)}
  .qc-hero__grid{grid-template-columns:1.05fr .95fr;gap:var(--space-7)}
  .qc-tolerance__cards,
  .qc-deviation__cards{gap:var(--space-6)}
  .qc-cta__inner{grid-template-columns:1.15fr .85fr;gap:var(--space-7)}
  .qc-cta__contact{border-top:0;padding-top:0}
}