/* ============================================================================
   /doors/{slug} - door template (Google Business Profile reference instance).
   Data-driven: fields from doors[] + the weight matrix in index-2026.json.
   ============================================================================ */

/* ---- hero with rate stat -------------------------------------------------- */
.door-hero { display: grid; gap: var(--bdri-space-7); }
.door-hero__one {
  font-family: var(--bdri-text-display-family);
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  font-weight: var(--bdri-weight-semibold);
  color: var(--color-accent-primary);
  margin-top: var(--bdri-space-3); line-height: var(--bdri-lh-snug);
  max-width: var(--measure-narrow);
}
.door-hero__stat {
  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-modal);
  padding: var(--bdri-space-6);
  align-self: start;
}
.door-hero__rate {
  font-family: var(--bdri-text-display-family);
  font-size: clamp(3rem, 7vw, 4.5rem); font-weight: var(--bdri-text-display-weight);
  line-height: 1; letter-spacing: var(--bdri-track-tight); color: var(--color-text-default);
}
.door-hero__unit { font-size: 0.45em; color: var(--color-accent-primary); font-weight: var(--bdri-weight-semibold); }
.door-hero__rate-label { margin-top: var(--bdri-space-2); font-size: var(--bdri-size-small); color: var(--color-text-subtle); }
.bar--hero { height: 14px; margin-top: var(--bdri-space-4); background: color-mix(in srgb, var(--color-text-default) 16%, transparent); }
.door-hero__rate-sub { margin-top: var(--bdri-space-3); font-family: var(--bdri-font-mono); font-size: var(--bdri-size-caption); color: var(--color-text-muted); }
@media (min-width: 860px) {
  .door-hero { grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr); align-items: center; gap: var(--bdri-space-8); }
}

/* ---- why it matters ------------------------------------------------------- */
.why { background: var(--color-surface-default); padding-block: var(--bdri-space-8); }
.why__inner { max-width: var(--measure); }
.why__title { font-family: var(--bdri-text-h2-family); font-size: var(--bdri-text-h2-size); font-weight: var(--bdri-text-h2-weight); line-height: var(--bdri-text-h2-lh); letter-spacing: var(--bdri-text-h2-tracking); margin-block: var(--bdri-space-3) var(--bdri-space-4); text-wrap: balance; }
.why__body { font-size: var(--bdri-size-body-lg); line-height: var(--bdri-lh-loose); color: var(--color-text-subtle); }
@media (min-width: 760px) { .why { padding-block: var(--bdri-space-9); } }

/* ---- who needs this door -------------------------------------------------- */
.whoneeds { 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) { .whoneeds { padding-block: var(--bdri-space-9); } }
.who-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--bdri-space-4); }
.who-tile {
  display: grid; gap: var(--bdri-space-2);
  background: var(--color-surface-default);
  border: var(--bw-divider) solid var(--color-border-subtle);
  border-left: var(--bw-accent) solid var(--color-door-strong);
  border-radius: var(--radius-card); padding: var(--bdri-space-5);
  text-decoration: none; color: var(--color-text-default);
  transition: transform 160ms ease-out, box-shadow 160ms ease-out;
}
.who-tile:hover { transform: translateY(-2px); box-shadow: var(--bdri-shadow-card); }
.who-tile__name { font-family: var(--bdri-text-h3-family); font-size: var(--bdri-size-body-lg); font-weight: var(--bdri-weight-semibold); }
.who-tile__rate { font-family: var(--bdri-font-mono); font-size: var(--bdri-size-h3); font-weight: var(--bdri-weight-semibold); color: var(--color-text-default); }
.who-tile__lvl { display: inline-flex; align-items: center; gap: var(--bdri-space-2); font-size: var(--bdri-size-small); font-weight: var(--bdri-weight-semibold); color: var(--color-text-subtle); }
/* IMPORTANCE ramp: the who-tile "Required" weight dot is gold, matching the
   four-doors matrix (Required = gold). Scoped to .who-tile__lvl so it never
   touches the site-wide door-STATE dots (e.g. the how-to cost dot, where
   .dot--strong stays aquamarine). Gold here is a fill accent, never text. */
.who-tile__lvl .dot--strong { background: var(--bdri-color-gold); }
@media (min-width: 620px) { .who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 920px) { .who-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- national picture (dark) - claim stacked bar -------------------------- */
.picture {
  position: relative; overflow: hidden;
  background:
    radial-gradient(90% 120% at 8% 100%, color-mix(in srgb, var(--color-accent-primary) 16%, transparent) 0%, transparent 60%),
    var(--color-surface-default);
  border-block: var(--bw-accent) solid var(--color-accent-primary);
}
.picture__inner { display: grid; gap: var(--bdri-space-7); padding-block: var(--bdri-space-8); align-items: center; }
.picture__title { font-family: var(--bdri-text-h2-family); font-size: var(--bdri-text-h2-size); font-weight: var(--bdri-text-h2-weight); line-height: var(--bdri-text-h2-lh); letter-spacing: var(--bdri-text-h2-tracking); margin-block: var(--bdri-space-3) var(--bdri-space-4); text-wrap: balance; }
.picture__body { color: var(--color-text-subtle); font-size: var(--bdri-size-body-lg); line-height: var(--bdri-lh-loose); max-width: var(--measure-narrow); }

.claim-bar { list-style: none; padding: 0; margin: 0; display: flex; height: 220px; gap: var(--bdri-space-2); align-items: flex-end; }
.claim-seg { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: var(--bdri-space-2); height: 100%; flex: 1 1 0; }
.claim-seg::before {
  content: ''; display: block; width: 100%;
  height: calc(var(--p) * 2.2);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.claim-seg--claimed::before  { background: var(--color-door-strong); }       /* aquamarine-bright on dark */
.claim-seg--unclaimed::before{ background: var(--color-door-developing); }    /* gold - the opportunity */
.claim-seg--none::before     { background: var(--bdri-color-steel-light); }   /* lifted steel on dark */
.claim-seg__val { font-family: var(--bdri-font-mono); font-size: var(--bdri-size-body-lg); font-weight: var(--bdri-weight-semibold); color: var(--color-text-default); order: -1; }
.claim-seg__label { font-family: var(--bdri-font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--color-text-muted); text-align: center; }
.picture__cap { margin-top: var(--bdri-space-4); padding-top: var(--bdri-space-3); border-top: var(--bw-divider) solid color-mix(in srgb, var(--color-text-default) 14%, transparent); font-family: var(--bdri-font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
@media (min-width: 860px) {
  .picture__inner { grid-template-columns: minmax(0, 1fr) minmax(320px, 0.85fr); gap: var(--bdri-space-8); padding-block: var(--bdri-space-9); }
}

/* ---- how to open it ------------------------------------------------------- */
.howto { background: var(--color-surface-default); padding-block: var(--bdri-space-8); }
@media (min-width: 760px) { .howto { padding-block: var(--bdri-space-9); } }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--bdri-space-4); max-width: var(--measure); }
.step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--bdri-space-4); align-items: 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); }
.step__num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--color-accent-graphic); color: var(--color-text-default); font-family: var(--bdri-font-mono); font-weight: var(--bdri-weight-semibold); font-size: var(--bdri-size-body-lg); }
.step__head { font-family: var(--bdri-text-h3-family); font-size: var(--bdri-size-body-lg); font-weight: var(--bdri-weight-semibold); margin-bottom: var(--bdri-space-2); }
.step__text { color: var(--color-text-subtle); line-height: var(--bdri-lh-relaxed); }
.howto__cost { display: inline-flex; align-items: center; gap: var(--bdri-space-2); margin-top: var(--bdri-space-5); font-family: var(--bdri-font-mono); font-size: var(--bdri-size-small); font-weight: var(--bdri-weight-semibold); color: var(--color-text-default); }

/* ---- shared bands reused from industry styles ----------------------------- */
.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); }

.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(4, minmax(0, 1fr)); } }

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