/* ══════════════════════════════════════════════════════════════════════════════
   Escargo — /ie/* local discovery pages (discover.html). PAGE-SCOPED LAYOUT ONLY.
   Every component comes from the DS: os-ui.css (.os-* + --os-* tokens) and the
   site chrome (.eo-*). This file only adds what os-ui.css does not provide:
   the hero band, breadcrumb trail, provider-card grid, category-chip grid and
   FAQ accordion layout. Tokens only — no new colour/type/spacing systems.
   ══════════════════════════════════════════════════════════════════════════════ */

.dv, .dv *{box-sizing:border-box}
.dv{font-family:var(--os-font);color:var(--os-text)}
.dv-wrap{max-width:1200px;margin:0 auto;padding:0 20px}

/* ── hero band (forest, mirrors /find) ──────────────────────────────────────── */
.dv-hero{background:var(--os-forest);color:#fff;padding:26px 0 36px}
.dv-hero .os-kicker{color:var(--os-lime)}   /* kicker is forest by default → invisible on forest */
.dv-hero h1{color:#fff;font-size:clamp(1.55rem,4.6vw,2.4rem);line-height:1.12;letter-spacing:-.02em;
  margin:8px 0 10px;overflow-wrap:anywhere}
.dv-sub{color:var(--os-d-text);font-size:clamp(.95rem,2.3vw,1.06rem);line-height:1.5;max-width:64ch;margin:0}
.dv-hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

/* ── breadcrumb trail (on the forest hero) ──────────────────────────────────── */
.dv-crumbs{margin:0 0 14px}
.dv-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 6px;margin:0;padding:0;font-size:.84rem}
.dv-crumbs li{display:inline-flex;align-items:center;gap:6px;color:var(--os-d-muted)}
.dv-crumbs li+li::before{content:"›";color:var(--os-d-muted)}
.dv-crumbs a{color:var(--os-d-text);text-decoration:none;font-weight:600;display:inline-flex;align-items:center;min-height:24px}
.dv-crumbs a:hover{color:#fff;text-decoration:underline}
.dv-crumbs [aria-current]{color:#fff;font-weight:700}

/* ── body sections ──────────────────────────────────────────────────────────── */
.dv-body{padding:28px 0 64px}
.dv-sec{margin:0 0 40px}
.dv-sec:last-child{margin-bottom:0}
.dv-sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.dv-sec-h>div{min-width:0}
.dv-sec-h h2{font-size:clamp(1.2rem,3.2vw,1.5rem);letter-spacing:-.015em;color:var(--os-ink);margin:0;overflow-wrap:anywhere}
.dv-count{display:block;font-size:.86rem;color:var(--os-muted);font-weight:600;margin-top:4px}
.dv-link{font-weight:700;color:var(--os-forest);text-decoration:none;white-space:nowrap;
  min-height:44px;display:inline-flex;align-items:center}
.dv-link:hover{color:var(--os-lime-press)}
.dv-note{font-size:.84rem;color:var(--os-muted);margin:12px 0 0;max-width:74ch}

/* ── provider cards (real data only; mirrors the proven /results card) ──────── */
.dv-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:16px;align-items:stretch}
.dv-card{position:relative;display:flex;flex-direction:column;gap:8px;height:100%;overflow-wrap:anywhere}
.dv-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.dv-card-top .os-chip{flex:0 0 auto;white-space:nowrap}
.dv-name{font-size:1.04rem;font-weight:800;letter-spacing:-.01em;color:var(--os-ink);line-height:1.25;margin:0}
.dv-name a{color:inherit;text-decoration:none}
.dv-name a:hover{color:var(--os-forest)}
/* stretched link — the whole card navigates to the storefront; Call sits above it */
.dv-name a::after{content:"";position:absolute;inset:0;z-index:1}
.dv-cat{font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--os-muted);margin:0}
.dv-where{font-size:.9rem;color:var(--os-text);margin:0}
.dv-fact{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;font-size:.9rem;margin:2px 0 0}
.dv-rating{font-weight:700;color:var(--os-ink)}
.dv-star{color:var(--os-lime-press)}
.dv-rcount{color:var(--os-muted);font-weight:600}
.dv-new{color:var(--os-muted);font-weight:600}
.dv-price{font-weight:800;color:var(--os-ink)}
.dv-quote{font-weight:600;color:var(--os-muted)}
.dv-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:6px;position:relative;z-index:2}
.dv-acts .os-btn{min-height:44px;padding:8px 16px;font-size:.88rem}

/* ── category / related-service chips (≥44px tap target, mirrors /find) ─────── */
.dv-chips{display:flex;flex-wrap:wrap;gap:10px}
.dv-chip{min-height:44px;padding:10px 16px;font-size:.9rem;font-weight:600;
  background:var(--os-white);color:var(--os-ink);border-color:var(--os-line);
  text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s}
.dv-chip:hover{border-color:var(--os-lime);background:#f2fbe3}

/* ── honest FAQs (native details/summary — keyboard accessible) ─────────────── */
.dv-faqs{display:grid;gap:10px;max-width:840px}
.dv-faq{padding:0}
.dv-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  gap:12px;min-height:44px;padding:12px 16px;font-weight:700;color:var(--os-ink)}
.dv-faq summary::-webkit-details-marker{display:none}
.dv-faq summary::after{content:"+";font-weight:800;color:var(--os-forest);flex:0 0 auto}
.dv-faq[open] summary::after{content:"–"}
.dv-faq p{margin:0;padding:0 16px 14px;color:var(--os-text);line-height:1.55;font-size:.92rem}

/* ── corridor SOS card ──────────────────────────────────────────────────────── */
.dv-sos{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:24px}
.dv-sos h3{margin:0 0 4px}
.dv-sos p{margin:0;font-size:.92rem;line-height:1.5;max-width:60ch}

/* ── states ─────────────────────────────────────────────────────────────────── */
.dv-empty-cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
.dv-skel-t{height:18px;width:64%;margin:2px 0}
.dv-skel-b{height:44px;margin-top:10px}

/* focus ring — these pages sit outside .os-shell, so scope it here (WCAG 2.4.7) */
.dv a:focus-visible,.dv summary:focus-visible{outline:3px solid var(--os-lime);outline-offset:2px;border-radius:4px}

@media (max-width:560px){
  .dv-wrap{padding:0 14px}
  .dv-hero{padding:20px 0 28px}
  .dv-body{padding:22px 0 56px}
  .dv-sec{margin-bottom:32px}
}