/* Gentle Touch Cleaning: /areas/ pages (builder "areas").
   Small additions only; every other component comes from site.css. No prices or fees anywhere on these pages. */

/* "At a glance" card beside a typographic hero (a .promise card with the broken-circle arc) */
.area-glance { width: 100%; max-width: 30rem; justify-self: end; padding: clamp(1.75rem, 1rem + 3vw, 3rem); }
.area-glance .eyebrow { margin: 0; }
.area-glance .area-facts { margin-top: var(--space-4); }
@media (max-width: 859px) { .area-glance { justify-self: stretch; max-width: none; } }

/* Schematic coverage sketch on /areas/ (decorative; the zone list carries the facts) */
.area-map { margin: 0; width: 100%; max-width: 30rem; justify-self: end; }
.area-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.area-map .ring { fill: none; stroke: var(--gt-ink); stroke-linecap: round; }
.area-map .ring--a { stroke-width: 2.4; }
.area-map .ring--b { stroke-width: 1.4; stroke-dasharray: 10 8; stroke: var(--gt-ink-2); }
.area-map .ring--c { stroke-width: 1.4; stroke-dasharray: 1.5 7; stroke: var(--gt-ink-3); }
.area-map .dot { fill: var(--gt-ink); }
.area-map .dot--open { fill: var(--gt-paper); stroke: var(--gt-ink); stroke-width: 2; }
.area-map .home-arc { fill: none; stroke: var(--gt-ink); stroke-width: 1.6; stroke-linecap: round; }
.area-map text { font-family: var(--font-display); font-size: 21px; font-weight: 500; fill: var(--gt-ink);
  paint-order: stroke; stroke: var(--gt-paper); stroke-width: 6px; stroke-linejoin: round; }
.area-map text.lbl-home { font-size: 24px; }
.map-legend { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: grid; gap: 8px; font-size: var(--step--1); color: var(--gt-ink-2); }
.map-legend li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; }
.map-legend .swatch { display: block; height: 0; border-top: 2.5px solid var(--gt-ink); }
.map-legend .swatch--b { border-top: 2px dashed var(--gt-ink-2); }
.map-legend .swatch--c { border-top: 3px dotted var(--gt-ink-3); }
.area-map figcaption .subtle { margin-top: var(--space-3); }
@media (max-width: 859px) { .area-map { justify-self: center; max-width: 24rem; } }

/* "At a glance" facts list (hero card, place lists, tab panels, sample scope) */
.area-facts { margin: 0; border-top: 1px solid var(--gt-ink); }
.area-facts > div { display: grid; grid-template-columns: minmax(6.5rem, 9rem) 1fr; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: var(--border-hair); }
.area-facts dt { font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gt-ink-3); padding-top: 3px; }
.area-facts dd { margin: 0; font-size: var(--step--1); color: var(--gt-ink); }
.area-facts--places dt { font: 500 var(--step-1)/1.25 var(--font-display); letter-spacing: 0; text-transform: none; color: var(--gt-ink); padding-top: 0; }
.area-facts--places dd { color: var(--color-text-muted); }
.area-facts--places > div { grid-template-columns: minmax(8rem, 12rem) 1fr; padding: var(--space-4) 0; }
@media (max-width: 519px) { .area-facts > div, .area-facts--places > div { grid-template-columns: 1fr; gap: 2px; } }

/* Place groups (Vinton, Botetourt) */
.hood-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--space-6); }
.hood-groups > div { padding-top: var(--space-4); border-top: 1px solid var(--gt-ink); }
.hood-groups h3 { font-size: var(--step-2); }
.hood-groups p { margin-top: var(--space-2); font-size: var(--step--1); color: var(--color-text-muted); }
.hood-groups + .area-todo { margin-top: var(--space-7); }

/* Corridor tabs (Roanoke County) */
.area-tabs [role="tabpanel"] { padding-top: var(--space-5); }
.area-tabs [role="tabpanel"]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.area-tabs [role="tabpanel"] h3 { font-size: var(--step-3); }
@media (max-width: 639px) {
  .area-tabs .tablist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-self: stretch; border-radius: var(--radius-m); }
  .area-tabs .tablist [role="tab"] { padding: 0 0.5rem; }
}

/* Icon lists: two columns (Vinton), and lists whose titles are links */
.feature-list--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); row-gap: var(--space-5); }
@media (max-width: 719px) { .feature-list--2col { grid-template-columns: 1fr; } }
.feature-list a { font-weight: 500; }
.feature-list--links { gap: var(--space-5); }
.feature-list--links strong { font: 500 var(--step-1)/1.3 var(--font-display); margin-bottom: 2px; }
.feature-list--links strong a { color: var(--gt-ink); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

/* Short tick lists inside cards (season cards) */
.card .ticks { font-size: var(--step--1); color: var(--gt-ink-2); gap: 8px; }
.card .ticks li::before { top: 0.25em; }
.season-cards .card { gap: var(--space-4); }
.season-cards .card h3 { font-size: var(--step-2); }

/* Sample small-office scope (Salem) */
.small-scope { padding: clamp(1.75rem, 1rem + 3vw, 3rem); }
.small-scope h3 { font-size: var(--step-2); }
.small-scope .area-facts { margin-top: var(--space-2); }
.small-scope .area-facts > div { grid-template-columns: minmax(5.5rem, 7.5rem) 1fr; }

/* Phase cards stacked beside text (Vinton) */
.phase-cards { gap: var(--space-4); }
.phase-cards .card p { margin-top: 0; }

/* Builders band (Botetourt) */
.builders-band .section-head { margin-bottom: clamp(2rem, 1.2rem + 2vw, 3rem); }
.builders-band .section-head p:not(.eyebrow) { max-width: 52ch; color: var(--color-text-muted); }
.builders-band .card h3 { font-size: var(--step-2); }
.builders-notes { max-width: 46rem; margin: var(--space-6) auto var(--space-5); text-align: center; }
.builders-notes .subtle { margin-inline: auto; }

/* Area cards on /areas/ */
.area-card .tag { align-self: flex-start; }

/* Compact facility links on /areas/ */
.space-links { gap: var(--space-4); }
.space-links .card { padding: var(--space-5); align-items: center; }
.space-links .card p { margin-top: 2px; }
.space-links-foot, .area-more { margin-top: var(--space-6); }

/* Buttons and links under a steps list */
.area-actions { margin-top: var(--space-7); align-items: center; }

/* Neighboring areas: a short area list under a compact heading row */
.nearby .section-head { margin-bottom: var(--space-5); align-items: center; }
.nearby .section-head h2 { font-size: var(--step-3); }

/* site.css zeroes the top padding of a plain section that follows another section, including one that follows a
   linen band, which leaves content touching the band's edge. Restore it on area pages. */
.section--band + .section:not(.section--band):not(.section--tint):not(.theme-ink) { padding-top: var(--space-section); }

/* Lists that reset their own margin still need the stack gap under a heading */
.stack > :is(.area-list, .ticks, .feature-list, .area-facts):not(:first-child) { margin-top: var(--space-4); }
.stack-lg > :is(.area-list, .ticks, .feature-list, .area-facts):not(:first-child) { margin-top: var(--space-stack); }

.eyebrow .nw { white-space: nowrap; }

/* Commitments row under the hero: keep air between it and an ink band that follows (Botetourt) */
.area-trust + .theme-ink { margin-top: clamp(3rem, 2rem + 3vw, 5rem); }

/* Area cards on /areas/: on phones, drop the repeated "Commercial cleaning in …" line so six cards stay short */
@media (max-width: 639px) {
  .area-card { padding: var(--space-5); }
  .area-card .meta { display: none; }
}