@import url("/assets/css/tch-platform.css?v=20260909-a11y1");

/* TrueCostHousing — editorial/authority-page layer.
   Adds icon-led card headers, a two-up card grid, a numbered step flow,
   a source-register card grid, and a boundary (prohibited) list style.
   Used on: /about/, /methodology/, /data/sources/, /data/limitations/, /contact/ */

.tch-card-head{display:flex;align-items:center;gap:1rem;margin-bottom:.6rem}
.tch-card-head h2{margin:0}

/* Icon "medallion" — a two-layer illustrated badge, not a flat line icon */
.tch-section-icon{display:flex;align-items:center;justify-content:center;position:relative;width:72px;height:72px;flex:0 0 72px;border-radius:50%;background:radial-gradient(circle at 32% 28%, var(--tch-gold-bright), var(--tch-gold) 62%, color-mix(in srgb, var(--tch-gold) 65%, var(--tch-navy) 12%) 100%);box-shadow:0 8px 16px -9px color-mix(in srgb, var(--tch-navy) 60%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--tch-navy) 12%, transparent)}
.tch-section-icon::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--tch-cream-card);box-shadow:inset 0 1px 4px rgba(10,22,38,.14)}
.tch-section-icon svg{position:relative;z-index:1;width:32px;height:32px;color:var(--tch-navy)}
.tch-section-icon svg *{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Full illustrated scene used once per page, near the top of the hero */
.tch-hero-art{width:clamp(160px,22vw,220px);margin:.4rem 0 1.4rem}
.tch-hero-art svg{display:block;width:100%;height:auto}

.tch-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.tch-grid-2>.tch-card{margin:0}

.tch-steps{counter-reset:step;list-style:none;margin:0;padding:0}
.tch-steps li{position:relative;padding:0 0 1.4rem 3.15rem;margin-left:19px;border-left:2px solid color-mix(in srgb, var(--tch-gold) 45%, transparent)}
.tch-steps li:last-child{border-left-color:transparent;padding-bottom:0}
.tch-steps li::before{counter-increment:step;content:counter(step);position:absolute;left:-19px;top:-1px;width:38px;height:38px;border-radius:50%;background:var(--tch-navy);color:var(--tch-gold-bright);font:800 1.02rem/38px var(--tch-sans);text-align:center}

.tch-source-grid{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.tch-source-card{display:flex;align-items:flex-start;gap:.8rem;padding:.9rem 1rem;border:1px solid color-mix(in srgb, var(--tch-gold) 42%, transparent);border-radius:12px;background:var(--tch-cream-card)}
.tch-source-card .tch-section-icon{width:44px;height:44px;flex:0 0 44px}
.tch-source-card .tch-section-icon::before{inset:5px}
.tch-source-card .tch-section-icon svg{width:20px;height:20px}
.tch-source-card p{margin:.3rem 0 0;color:var(--tch-ink-muted);font-size:.92rem}
.tch-source-card a{font-weight:750}

.tch-bound-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.tch-bound-list li{display:flex;align-items:flex-start;gap:.7rem}
.tch-bound-list li svg{flex:0 0 20px;width:20px;height:20px;margin-top:.15rem}
.tch-bound-list li svg *{fill:none;stroke:var(--tch-danger);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:760px){
  .tch-grid-2{grid-template-columns:1fr}
  .tch-card-head{gap:.7rem}
  .tch-section-icon{width:56px;height:56px;flex-basis:56px}
  .tch-section-icon::before{inset:7px}
  .tch-section-icon svg{width:24px;height:24px}
  .tch-hero-art{width:min(170px,52vw)}
}