/* ============================================================
   CAVMIR UI v4 — LOCATIONS family (.v4-loc)  ·  2026-09-06
   The first v4 layout for /locations/*. Loads AFTER css/v4.css, so it
   rides the base body.v4 layer (full-width gutter, copper-not-gold, no
   italics, big display type, restyled .page-header + .cta-section) and
   only adds the location-specific pieces: the stats band, the narrative
   deep-dive bands (turned into magazine two-column splits by the injector),
   the picks/cases grids and the two-column FAQ.
   Kept in its own file (not folded into v4.css) so the other 100+ v4 pages
   keep their cache-bust untouched.
   ============================================================ */

/* the location content wrappers were centered at ~880px; go full-width */
body.v4-loc .location-intro,
body.v4-loc .location-content,
body.v4-loc .dd .reveal[style*="max-width"],
body.v4-loc .loc-faq,
body.v4-loc .section .container[style*="max-width"] { max-width: none !important; }

/* ---------- hero: header sub reads a touch wider ---------- */
body.v4-loc .page-header p { max-width: 60ch; }

/* ---------- stats band: full width, big burgundy numerals ---------- */
body.v4-loc .stats-box {
  max-width: none;
  gap: clamp(10px, 1.3vw, 22px);
  border-top: 2px solid var(--v4-copper);
  padding-top: clamp(22px, 2.4vw, 36px);
}
body.v4-loc .stats-box-value {
  font-family: var(--font-primary);
  font-size: clamp(1.9rem, 2.7vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--v4-burg);
}
body.v4-loc .stats-box-label {
  color: var(--v4-copper);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.7rem;
}

/* ---------- intro: copy left, image right, both taller ---------- */
body.v4-loc .location-intro { gap: var(--v4-gap); align-items: stretch; }
body.v4-loc .location-content > h2,
body.v4-loc .location-content #loc-intro-heading {
  font-family: var(--font-primary);
  font-size: clamp(2rem, 3.3vw, 3.5rem);
  line-height: 1.03;
  letter-spacing: -0.022em;
  color: var(--v4-ink);
  max-width: 20ch;
}
body.v4-loc .location-content p { font-size: 17.5px; line-height: 1.75; color: rgba(10, 10, 10, 0.86); }
body.v4-loc .location-image-wrap { min-height: 100%; }
body.v4-loc .location-image-wrap img {
  width: 100% !important; height: 100% !important;
  min-height: 460px; object-fit: cover; border-radius: 10px;
}
@media (max-width: 900px) { body.v4-loc .location-image-wrap img { min-height: 300px; } }

/* ---------- deep-dive narrative bands ---------- */
body.v4-loc .dd { padding-block: clamp(64px, 7vw, 120px); }
body.v4-loc .dd h2 {
  font-family: var(--font-primary);
  font-size: clamp(2rem, 3.4vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.024em;
  color: var(--v4-ink);
  max-width: 22ch;
}
body.v4-loc .dd__eyebrow { color: var(--v4-copper); font-weight: 700; letter-spacing: 0.2em; }
body.v4-loc .dd p { font-size: 17.5px; line-height: 1.75; color: rgba(10, 10, 10, 0.86); }
/* the headline accent word: readable copper, not the pale copper-soft */
body.v4-loc .dd h2 em,
body.v4-loc .location-content h2 em { color: var(--v4-copper) !important; font-style: normal !important; font-weight: 700 !important; }
body.v4-loc .dd__subhead {
  font-family: var(--font-primary);
  font-size: clamp(20px, 1.7vw, 27px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--v4-ink);
  margin-top: 34px;
}

/* the injector wraps the three single-column bands (history / future /
   why-we-love) into base .v4-split (sticky head left, prose right) */
body.v4-loc .v4-split__head .dd__eyebrow { display: block; margin-bottom: 14px; }
body.v4-loc .v4-split__head .gold-divider { margin: 20px 0 0; }
body.v4-loc .v4-split__body > p:first-child { margin-top: 0; }

/* dd__grid bands (pricing / regulation / tips) already two-column */
body.v4-loc .dd__grid { gap: var(--v4-gap); align-items: start; }

/* callouts + fact + finance boxes: rounder, copper accents */
body.v4-loc .dd-callout,
body.v4-loc .dd-fact,
body.v4-loc .dd-finance { border-radius: 12px; }
body.v4-loc .dd-callout__eyebrow,
body.v4-loc .dd-fact__label { color: var(--v4-copper-soft); }

/* ---------- 'Why Cavmir' service cards ---------- */
body.v4-loc .services-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 900px) { body.v4-loc .services-grid { grid-template-columns: 1fr; } }
body.v4-loc .service-card-title { font-size: 1.3rem; }

/* ---------- 'Cheat sheet' picks: card grid ---------- */
body.v4-loc .lc-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: none !important; margin-inline: 0 !important; width: auto; }
@media (max-width: 1080px) { body.v4-loc .lc-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { body.v4-loc .lc-picks { grid-template-columns: 1fr; } }
body.v4-loc .lc-pick {
  background: var(--v4-cream);
  border: 1px solid var(--v4-line);
  border-radius: 10px;
  padding: 24px 24px 26px;
}
body.v4-loc .lc-pick__eyebrow { color: var(--v4-copper); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.68rem; }
body.v4-loc .lc-pick__title { font-family: var(--font-primary); font-size: 1.16rem; font-weight: 700; letter-spacing: -0.01em; color: var(--v4-ink); margin: 10px 0 8px; }
body.v4-loc .lc-pick__body { font-size: 15px; line-height: 1.6; color: rgba(10, 10, 10, 0.72); }

/* ---------- case vignettes: three editorial columns ---------- */
body.v4-loc .lc-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: none !important; margin-inline: 0 !important; width: auto; }
@media (max-width: 1000px) { body.v4-loc .lc-cases { grid-template-columns: 1fr; } }
body.v4-loc .lc-case { background: #fff; border: 1px solid var(--v4-line); border-radius: 10px; padding: 26px; }
body.v4-loc .lc-case__label { font-family: var(--font-primary); font-weight: 700; color: var(--v4-burg); letter-spacing: -0.01em; }
body.v4-loc .lc-case__tag { color: var(--v4-copper); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.66rem; }

/* ---------- FAQ: two columns (injector wraps details in .v4-faq2) ---------- */
body.v4-loc .loc-faq .v4-faq2 { border-bottom: 1px solid rgba(107, 33, 75, 0.14); }
body.v4-loc .loc-faq .v4-faq2 > details { border-top: 1px solid rgba(107, 33, 75, 0.14); border-bottom: 0; }
body.v4-loc .loc-faq .v4-faq2 > details summary { font-size: 17px; }
@media (max-width: 900px) { body.v4-loc .loc-faq .v4-faq2 { grid-template-columns: 1fr; } }

/* ---------- 'keep exploring' related tail: full-width two columns ---------- */
body.v4-loc .rel-index {
  max-width: none !important;
  margin-inline: 0 !important;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--v4-gap);
}
body.v4-loc .rel-index a { padding: 20px 4px; }
@media (max-width: 800px) { body.v4-loc .rel-index { grid-template-columns: 1fr; } }

/* ---------- dark-bleed deep-dive sections (US-only: FL-HIST history hero +
   kiawah-style dd--bleed-dark bands) ----------
   These sit on a dark burgundy/wine background with light text. The base
   locations-v3 light-text rules are specificity (0,2,2) and TIE with v4's
   `.dd h2` / `.dd p` (also 0,2,2), which win on source order (loc-v4 loads
   last) and force the text to dark ink -> invisible on the dark background.
   The EU location pages have no dark-bleed bands, so this shipped untested.
   Re-assert the light text at higher specificity (`.dd.dd--bleed-dark`); the
   `.reveal > p` child combinator keeps nested light callout/fact/finance cards
   on their own colors. */
body.v4-loc .dd.dd--bleed-dark h2,
body.v4-loc .dd.dd--bleed-dark .dd__subhead { color: #fff; }
body.v4-loc .dd.dd--bleed-dark .reveal > p,
body.v4-loc .dd.dd--bleed-dark .fh-lead,
body.v4-loc .dd.dd--bleed-dark li { color: rgba(255, 255, 255, 0.9); }