/* ============================================================================
   /industries/{slug} - industry template (Restaurants reference instance).
   Data-driven: all fields come from industries[] in index-2026.json.
   ============================================================================ */

/* ---- hero with stats ------------------------------------------------------ */
.ind-hero { display: grid; gap: var(--bdri-space-7); }
.ind-hero__standing {
  font-family: var(--bdri-text-display-family);
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  font-weight: var(--bdri-weight-semibold);
  color: var(--color-accent-primary); /* aquamarine-bright on dark */
  margin-top: var(--bdri-space-3);
  line-height: var(--bdri-lh-snug);
}
.ind-hero__stats {
  display: grid; gap: var(--bdri-space-4);
  margin: 0;
}
.ind-hero__sample {
  margin-top: var(--bdri-space-4);
  font-family: var(--bdri-font-mono); font-size: var(--bdri-size-caption);
  letter-spacing: 0.02em; color: var(--color-text-muted);
  padding: var(--bdri-space-2) var(--bdri-space-3);
  border-left: var(--bw-input-focus) solid var(--color-door-developing);
  background: color-mix(in srgb, var(--color-text-inverted) 5%, transparent);
  border-radius: var(--radius-input);
  max-width: var(--measure-narrow);
}
.ind-stat {
  display: grid; gap: 2px;
  padding: var(--bdri-space-4) var(--bdri-space-5);
  background: color-mix(in srgb, var(--color-text-inverted) 6%, transparent);
  border: var(--bw-divider) solid color-mix(in srgb, var(--color-text-default) 16%, transparent);
  border-radius: var(--radius-card);
}
.ind-stat dt {
  font-family: var(--bdri-font-mono); font-size: var(--bdri-size-caption);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted);
}
.ind-stat dd {
  margin: 0; font-family: var(--bdri-text-display-family);
  font-size: var(--bdri-size-h2); font-weight: var(--bdri-text-display-weight);
  line-height: 1.05; color: var(--color-text-default);
}
.ind-stat__vs {
  font-family: var(--bdri-font-mono); font-size: var(--bdri-size-caption);
  font-weight: var(--bdri-weight-regular); letter-spacing: 0.02em;
  color: var(--color-accent-primary);
}
@media (min-width: 860px) {
  .ind-hero { grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.6fr); align-items: center; gap: var(--bdri-space-8); }
  .ind-hero__stats { grid-template-columns: 1fr; }
}

/* ---- which doors matter (priority weights) -------------------------------- */
.weights { background: var(--color-surface-default); padding-block: var(--bdri-space-8); }
@media (min-width: 760px) { .weights { padding-block: var(--bdri-space-9); } }

.weight-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--bdri-space-4);
}
.weight-card {
  display: grid; gap: var(--bdri-space-3); align-content: start;
  background: var(--color-surface-subtle);
  border: var(--bw-divider) solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  padding: var(--bdri-space-5);
}
/* IMPORTANCE ramp (NOT the door-state vocabulary): on these weight cards the
   weight is how much a door MATTERS for this industry. Required = gold (the
   strongest signal, per operator), Recommended = aquamarine, Optional = steel.
   Gold stays a fill/border accent here, never text (Required text uses ink).
   Mirrors the /four-doors matrix .mdoor[data-level] encoding so the two pages
   agree. Do NOT "fix" this back to the door-state colors. */
.weight-card[data-weight='required']    { border-left: var(--bw-accent) solid var(--bdri-color-gold); background: color-mix(in srgb, var(--bdri-color-gold) 12%, var(--color-surface-subtle)); }
.weight-card[data-weight='recommended'] { border-left: var(--bw-accent) solid var(--bdri-color-aquamarine); }
.weight-card[data-weight='optional']    { border-left: var(--bw-accent) solid var(--bdri-color-steel); }

.weight-card__name { font-family: var(--bdri-text-h3-family); font-size: var(--bdri-size-h3); font-weight: var(--bdri-weight-semibold); }
.weight-card__level {
  display: inline-flex; align-items: center; gap: var(--bdri-space-2);
  font-family: var(--bdri-font-body); font-size: var(--bdri-size-small);
  font-weight: var(--bdri-weight-semibold); color: var(--color-text-default);
}
.weight-card__why { font-size: var(--bdri-size-small); color: var(--color-text-subtle); line-height: var(--bdri-lh-relaxed); }

.weight-key {
  display: flex; flex-wrap: wrap; gap: var(--bdri-space-3) var(--bdri-space-5);
  margin-top: var(--bdri-space-5); padding: var(--bdri-space-4) var(--bdri-space-5);
  background: var(--color-surface-subtle); border: var(--bw-divider) solid var(--color-border-subtle);
  border-radius: var(--radius-card); font-size: var(--bdri-size-small); color: var(--color-text-subtle);
}
.weight-key span { display: inline-flex; align-items: center; gap: var(--bdri-space-2); }

/* The weight-card and weight-key dots use the shared .dot--strong/developing/gap
   classes, which site-wide carry the door-STATE vocabulary (aquamarine / gold /
   steel). Here those dots encode IMPORTANCE instead: Required = gold, Recommended
   = aquamarine, Optional = steel. Scoped to .weights so the door-STATE dots in
   other sections of these pages (and the home hero plate) keep their normal
   colors. The .stands penetration section uses bars, not dots, so nothing there
   is affected. Mirrors the /four-doors .matrix .dot--* override. */
.weights .dot--strong     { background: var(--bdri-color-gold); }
.weights .dot--developing { background: var(--bdri-color-aquamarine); }
.weights .dot--gap        { background: var(--bdri-color-steel); }

@media (min-width: 720px) { .weight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .weight-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- where it stands (bars vs national) ----------------------------------- */
.stands {
  background: var(--color-surface-subtle);
  border-block: var(--bw-divider) solid var(--color-border-subtle);
  padding-block: var(--bdri-space-8);
}
@media (min-width: 760px) { .stands { padding-block: var(--bdri-space-9); } }

.stand-rows { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--bdri-space-6); }
.stand-row { display: grid; gap: var(--bdri-space-3); }
.stand-row__label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--bdri-space-3); }
.stand-row__door { font-family: var(--bdri-text-h3-family); font-size: var(--bdri-size-body-lg); font-weight: var(--bdri-weight-semibold); }
.stand-row__val { font-family: var(--bdri-font-mono); font-size: var(--bdri-size-body-lg); font-weight: var(--bdri-weight-semibold); }
.stand-row__natl { font-family: var(--bdri-font-mono); font-size: var(--bdri-size-caption); color: var(--color-text-muted); }

.bar--lg { height: 18px; background: var(--color-surface-default); border: var(--bw-divider) solid var(--color-border-subtle); }
/* national-average marker line over the bar */
.bar__natl {
  position: absolute; inset-block: -3px; width: 2px;
  inset-inline-start: var(--n); transform: translateX(-1px);
  background: var(--color-text-default); border-radius: var(--radius-pill);
  z-index: 2;
}
.bar__natl-key { display: inline-block; width: 2px; height: 14px; vertical-align: middle; background: var(--color-text-default); border-radius: var(--radius-pill); margin-right: 6px; }
.stand-legend { margin-top: var(--bdri-space-5); font-size: var(--bdri-size-small); color: var(--color-text-muted); }

/* ---- gap + fix ------------------------------------------------------------ */
.gapfix { background: var(--color-surface-default); padding-block: var(--bdri-space-8); }
@media (min-width: 760px) { .gapfix { padding-block: var(--bdri-space-9); } }
.gapfix__grid { display: grid; gap: var(--bdri-space-5); }
.gapfix__card {
  border-radius: var(--radius-modal); padding: var(--bdri-space-6);
}
.gapfix__card--gap {
  background: var(--color-surface-subtle);
  border: var(--bw-divider) solid var(--color-border-subtle);
  border-left: var(--bw-accent) solid var(--color-door-gap);
}
.gapfix__card--fix {
  background: var(--color-surface-accent); color: var(--color-text-inverted);
  --color-accent-primary: var(--bdri-color-aquamarine-bright);
  border-left: var(--bw-accent) solid var(--bdri-color-aquamarine-bright);
}
.gapfix__head { font-family: var(--bdri-text-h3-family); font-size: var(--bdri-size-h3); font-weight: var(--bdri-weight-semibold); line-height: var(--bdri-lh-snug); margin-block: var(--bdri-space-3) var(--bdri-space-3); }
.gapfix__card--fix .gapfix__head { color: var(--bdri-color-white); }
.gapfix__body { line-height: var(--bdri-lh-loose); color: var(--color-text-subtle); }
.gapfix__card--fix .gapfix__body { color: var(--bdri-color-cloud); }
.gapfix__action {
  display: flex; flex-wrap: wrap; gap: var(--bdri-space-3) var(--bdri-space-5);
  margin-top: var(--bdri-space-5); padding-top: var(--bdri-space-4);
  border-top: var(--bw-divider) solid color-mix(in srgb, var(--bdri-color-white) 18%, transparent);
  font-family: var(--bdri-font-mono); font-size: var(--bdri-size-caption); letter-spacing: 0.04em;
}
.gapfix__door { color: var(--bdri-color-aquamarine-bright); font-weight: var(--bdri-weight-semibold); }
.gapfix__time { color: var(--bdri-color-cloud); }
@media (min-width: 760px) { .gapfix__grid { grid-template-columns: 1fr 1fr; align-items: stretch; } }

/* ---- score band ----------------------------------------------------------- */
.score-band { background: var(--color-surface-subtle); border-block: var(--bw-divider) solid var(--color-border-subtle); }
.score-band__inner { display: grid; gap: var(--bdri-space-4); align-items: center; padding-block: var(--bdri-space-8); }
.score-band__head { font-family: var(--bdri-text-h2-family); font-size: var(--bdri-size-h3); font-weight: var(--bdri-weight-semibold); line-height: var(--bdri-lh-snug); }
.score-band__body { color: var(--color-text-subtle); line-height: var(--bdri-lh-loose); }
@media (min-width: 760px) { .score-band__inner { grid-template-columns: 1fr auto; gap: var(--bdri-space-7); } }

.inst-section { background: var(--color-surface-default); padding-block: var(--bdri-space-8); }

/* ---- cross-links ---------------------------------------------------------- */
.crosslinks { background: var(--color-surface-subtle); border-top: var(--bw-divider) solid var(--color-border-subtle); padding-block: var(--bdri-space-8); }
.crosslinks__title { font-family: var(--bdri-text-h3-family); font-size: var(--bdri-size-h3); font-weight: var(--bdri-weight-semibold); margin-bottom: var(--bdri-space-5); }
.crosslinks__grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--bdri-space-3); }
.crosslink {
  display: grid; gap: 2px;
  background: var(--color-surface-default);
  border: var(--bw-divider) solid var(--color-border-subtle);
  border-radius: var(--radius-card); padding: var(--bdri-space-4) var(--bdri-space-5);
  text-decoration: none; color: var(--color-text-default);
  transition: transform 160ms ease-out, box-shadow 160ms ease-out, border-color 160ms ease-out;
}
.crosslink:hover { transform: translateY(-2px); box-shadow: var(--bdri-shadow-card); border-color: color-mix(in srgb, var(--color-accent-primary) 40%, var(--color-border-subtle)); }
.crosslink__k { font-family: var(--bdri-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.crosslink__n { font-weight: var(--bdri-weight-semibold); }
.crosslink--pdf { border-left: var(--bw-accent) solid var(--color-accent-primary); }
@media (min-width: 620px) { .crosslinks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 920px) { .crosslinks__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (max-width: 640px) {
  .section-title { font-size: var(--bdri-size-h3); }
}