/* Service-area cards, local public-agency contacts, call checklist and nearby chips.
   Assumes load order: styles.css, about-areas.css, coverage.css, then this file.
   Every selector is namespaced; no existing class is restyled. */

/* Shared icon (one family: 24px grid, 1.7 stroke, set inline on each svg). */
.area-icon{display:block;width:100%;height:100%}

/* ---------- Section and heading block ---------- */
.area-cards-section{padding:20px 0 60px;--area-accent:var(--red);--area-tint:#f6eceb}
.area-cards-inner{min-width:0}
.area-cards-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:35px;margin-bottom:32px}
.area-cards-heading .eyebrow{margin-bottom:11px}
.area-cards-heading h2{font-size:clamp(30px,3.2vw,38px);line-height:1.1;letter-spacing:-.025em}
.area-cards-lede{max-width:390px;font-size:15px;line-height:1.7;color:var(--muted);margin:0}

/* ---------- State groups ---------- */
.area-card-group{--area-accent:var(--red);--area-tint:#f6eceb}
.area-card-group[data-state="OR"]{--area-accent:var(--ink);--area-tint:#edebe5}
.area-card-group+.area-card-group{margin-top:44px}
.area-card-group-head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.area-group-code{flex:0 0 auto;display:inline-grid;place-items:center;min-width:36px;height:24px;padding:0 7px;border-radius:3px;background:var(--area-accent);color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;line-height:1}
.area-card-group-head h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;min-width:0;font-size:23px;line-height:1.2;margin:0}
.area-group-name{font-weight:700}
.area-group-sub{font-size:13px;font-weight:400;letter-spacing:0;color:var(--muted)}
.area-group-rule{flex:1 1 24px;min-width:24px;height:1px;background:var(--line)}
.area-group-count{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}

/* ---------- Grid: 1 column mobile, 2 tablet, 3 desktop ---------- */
.area-card-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:17px}
.area-card-item{min-width:0;margin:0;padding:0}

/* ---------- Card ---------- */
.area-card{position:relative;display:flex;flex-direction:column;height:100%;min-width:0;padding:22px 20px 0;background:#fff;border:1px solid var(--line);border-radius:5px;overflow-wrap:break-word;transition:border-color .15s,box-shadow .15s}
.area-card-top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.area-card-icon{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;border-radius:4px;background:var(--area-tint);color:var(--area-accent)}
.area-card-icon .area-icon{width:22px;height:22px}
.area-card-kicker{margin:0;min-width:0;font-size:11px;font-weight:700;line-height:1.4;letter-spacing:.09em;text-transform:uppercase;color:var(--red)}
.area-card-name{margin:0 0 10px;font-size:25px;line-height:1.2;letter-spacing:-.015em;transition:color .15s}
.area-card-desc{margin:0 0 20px;font-size:16px;line-height:1.7;color:var(--muted)}

/* One anchor per card; its ::after is the whole-card hit area. */
.area-card-link{display:flex;flex-direction:row-reverse;align-items:center;justify-content:space-between;gap:14px;min-height:48px;margin:auto -20px 0;padding:0 20px;border-top:1px solid var(--line);color:var(--red);font-size:15px;font-weight:700;line-height:1.3}
.area-card-link::before{content:"\2192";content:"\2192" / "";font-size:19px;font-weight:400;line-height:1;transition:transform .15s}
.area-card a::after{content:"";position:absolute;inset:0;border-radius:5px}
.area-card a:focus-visible{outline:none}
.area-card a:focus-visible::after{outline:3px solid #a68217;outline-offset:3px}
.area-card:hover{border-color:var(--red);box-shadow:0 8px 22px #24232210}
.area-card:hover .area-card-name{color:var(--red)}
.area-card:hover .area-card-link{text-decoration:underline;text-underline-offset:4px}
.area-card:hover .area-card-link::before{transform:translateX(3px)}

@media(min-width:621px){
  .area-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .area-card{padding:26px 26px 0}
  .area-card-link{margin-inline:-26px;padding-inline:26px}
  .area-card-desc{font-size:15px}
  /* Lead card (Vancouver, Portland metro): full row on tablet, wider on desktop. */
  .area-card-item.is-lead{grid-column:1/-1}
  .area-card-item.is-lead .area-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);grid-template-areas:"top desc" "name desc" "link link";column-gap:44px;grid-template-rows:auto 1fr auto;padding-top:24px}
  .area-card-item.is-lead .area-card-top{grid-area:top;margin-bottom:14px}
  .area-card-item.is-lead .area-card-name{grid-area:name;align-self:start;margin-bottom:24px;font-size:32px;letter-spacing:-.025em}
  .area-card-item.is-lead .area-card-desc{grid-area:desc;align-self:center;margin:0 0 24px;font-size:16px}
  .area-card-item.is-lead .area-card-link{grid-area:link}
}
@media(min-width:961px){
  .area-card-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
  /* Washington: 1 full-width lead + 6 = two clean rows of three.
     Oregon: lead spans two columns beside one card, then 3 = clean rows. */
  .area-card-group[data-state="OR"] .area-card-item.is-lead{grid-column:span 2}
  .area-card-group[data-state="OR"] .area-card-item.is-lead .area-card{column-gap:32px}
}

/* Lead cards carry the single gold top rule at every width. */
.area-card-item.is-lead .area-card{border-top:3px solid var(--gold)}
.area-card-item.is-lead .area-card:hover{border-top-color:var(--gold)}

/* ---------- Narrow screens (320px safe) ---------- */
@media(max-width:760px){
  .area-cards-heading{display:block;margin-bottom:26px}
  .area-cards-lede{margin-top:14px;max-width:none}
}
@media(max-width:620px){
  .area-cards-section{padding-bottom:48px}
  .area-cards-heading h2{font-size:31px}
  .area-cards-lede{font-size:16px}
  .area-card-group+.area-card-group{margin-top:38px}
  .area-card-group-head{flex-wrap:wrap;gap:8px 12px}
  .area-card-group-head h3{flex:1 1 0;font-size:22px}
  .area-group-rule{display:none}
  .area-group-count{margin-left:auto}
  .area-card-link{min-height:50px;font-size:16px}
}

/* ---------- Local public-agency contacts (main column) ---------- */
.local-contacts{max-width:760px;margin:0 0 38px;padding:28px 30px;background:#fff;border:1px solid var(--line);border-left:4px solid #8c8a82;border-radius:5px}
.local-contacts-label{margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.13em;color:var(--muted)}
.local-contacts h2{font-size:28px;line-height:1.2;letter-spacing:-.02em;margin:0 0 12px}
.local-contacts-intro{margin:0 0 20px;font-size:16px;line-height:1.75;color:var(--muted)}
.local-contacts-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.local-contact{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.local-contact-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:4px;background:#f3f4f5;color:#30343a}
.local-contact-icon .area-icon{width:22px;height:22px}
.local-contact-body{min-width:0}
.local-contact-label{margin:0;font-size:17px;font-weight:700;line-height:1.35;color:var(--ink)}
.local-contact-detail{margin:3px 0 0;font-size:15px;line-height:1.6;color:var(--muted)}
.local-contact-phone{margin:5px 0 0;font-size:15px;line-height:1.5;color:var(--ink);font-variant-numeric:tabular-nums}
.local-contact-phone-label{margin-right:6px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.local-contact-phone-number{font-weight:700;white-space:normal;overflow-wrap:anywhere}
.local-contact-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border:1px solid #bdb9ad;border-radius:4px;background:transparent;color:var(--ink);font-size:14px;font-weight:700;line-height:1.2;white-space:nowrap;text-decoration:underline;text-decoration-color:#bdb9ad;text-underline-offset:4px}
.local-contact-link::after{content:"\2197";content:"\2197" / "";margin-left:8px;font-weight:400}
.local-contact-link:hover{background:#f0f1f2;border-color:var(--ink);text-decoration-color:var(--ink)}
.local-contacts-caveat{margin:18px 0 0;font-size:13px;line-height:1.7;color:var(--muted)}
@media(max-width:620px){
  .local-contacts{padding:22px 20px;margin-bottom:31px}
  .local-contacts h2{font-size:25px}
  .local-contact{grid-template-columns:40px minmax(0,1fr)}
  .local-contact-link{grid-column:2;justify-self:start;margin-top:6px}
}

/* Manager integration: dated provenance note directly under the agency block. */
.local-contacts-checked{max-width:760px;margin:-24px 0 34px;font-size:12px;line-height:1.6;color:var(--muted)}

/* ---------- Call checklist (inside .page-aside) ---------- */
.call-prep-list{list-style:none;margin:0;padding:0}
.call-prep-list .call-prep-item{display:flex;align-items:flex-start;gap:12px;margin:0;padding:12px 0;border-bottom:1px solid #d9dcdf;font-size:15px;line-height:1.5;color:#30343a}
.call-prep-list .call-prep-item:first-child{border-top:1px solid #d9dcdf}
.call-prep-check{flex:0 0 auto;display:grid;place-items:center;width:24px;height:24px;margin-top:1px;border:1px solid #d9dcdf;border-radius:50%;background:#fff;color:#8a6a14}
.call-prep-check .area-icon{width:15px;height:15px}
.call-prep-text{min-width:0;overflow-wrap:break-word}

/* ---------- Nearby area chips (aside or below main column) ---------- */
.nearby-areas{margin-top:26px}
.nearby-areas .nearby-areas-title{margin:0 0 12px;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.nearby-areas-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.nearby-areas-list li{margin:0;padding:0}
.nearby-areas .nearby-areas-link{display:inline-flex;align-items:center;min-height:40px;padding:0 15px;border:1px solid #d9dcdf;border-radius:4px;background:#fff;color:var(--ink);font-size:14px;font-weight:700;line-height:1.2;transition:border-color .15s,color .15s}
.nearby-areas .nearby-areas-link:hover{border-color:var(--red);color:var(--red)}
@media(max-width:620px),(pointer:coarse){.nearby-areas .nearby-areas-link{min-height:44px}}

/* ---------- Quiet the text directory only when the map is enhanced ---------- */
/* Without JS the class is never added, so the original directory is untouched. Still visible and focusable. */
.coverage-enhanced .coverage-directory{margin-top:18px;padding-top:18px;gap:30px;border-top-color:#d9dcdf}
.coverage-enhanced .coverage-directory .coverage-city-group h3{font-size:10px;color:#7d6f59;margin-bottom:8px}
.coverage-enhanced .coverage-directory .coverage-city-links>a{color:#6a5d49}
.coverage-enhanced .coverage-directory .coverage-city-links>a:hover{color:var(--red)}

/* ---------- Focus and motion ---------- */
.local-contact-link:focus-visible,.nearby-areas .nearby-areas-link:focus-visible{outline:3px solid #a68217;outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .area-card,.area-card-name,.area-card-link::before,.nearby-areas .nearby-areas-link{transition:none!important}
  .area-card:hover .area-card-link::before{transform:none}
}