/* ==========================================================================
   pages/areas.css — Areas index, area pages and the corridor map partial
   (partials/corridor-map.php links this file itself on pages that do not load it, e.g. Home).
   Contract: docs/DESIGN.md §3.3 (.area-map, .area-card, .timeline, .chapters), §3.7 (.area-layout), §4.7.
   Mobile-first; breakpoints 640 / 980 / 1200 only; semantic tokens only.
   ========================================================================== */

/* ---------------------------------------------------------------- corridor map */
.area-map{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-4); min-width:0; }
.area-map__frame{
  position:relative; overflow:hidden; border-radius:var(--radius-md);
  aspect-ratio:var(--cw) / var(--ch);
}
/* The canvas is the whole 1200×640 map; the frame crops it (--cx/--cy/--cw/--ch in map units). */
.area-map__canvas{
  position:relative; aspect-ratio:1200 / 640;
  width:calc(100% * 1200 / var(--cw));
  margin-left:calc(-100% * var(--cx) / var(--cw));
  margin-top:calc(-100% * var(--cy) / var(--cw));
}
.area-map__canvas > svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
@media (min-width:980px){
  .area-map--full .area-map__frame{ aspect-ratio:1200 / 640; }
  .area-map--full .area-map__canvas{ width:100%; margin:0; }
}

/* geometry: defined once per page (<g id="rs-corridor-geo">) and drawn with <use>; colours come through
   custom properties so each instance follows its own theme (--map-dot / --map-road can be overridden). */
.area-map__defs{ position:absolute; width:0; height:0; overflow:hidden; }
.area-map__dots{ fill:none; stroke:var(--map-dot,var(--map-land)); stroke-width:4.4; stroke-linecap:round; stroke-dasharray:0 8; }
.area-map__river{ fill:none; stroke:var(--secondary); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; opacity:.85; }
.area-map__road{ fill:none; stroke:var(--map-road,var(--line-strong)); stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; }
.area-map__channel{ fill:none; stroke:var(--secondary); stroke-width:2; stroke-dasharray:6 5; stroke-linecap:round; }
.area-map__bridge{ fill:var(--text); stroke:var(--bg); stroke-width:2; }
.area-map__campus{ fill:var(--bg); stroke:var(--text); stroke-width:2; }

/* HTML overlay: labels keep a constant, legible size at every map scale */
.area-map__overlay{ position:absolute; inset:0; pointer-events:none; }
.area-map__place{ position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%); white-space:nowrap; }
.area-map__place--wide{ display:none; }
.area-map__overlay .area-map__tag{ font:500 var(--fs-micro)/1 var(--font-mono); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--muted); }
.area-map__overlay .area-map__label{ font:500 var(--fs-micro)/1.2 var(--font-mono); letter-spacing:.04em; color:var(--text-2); }
.area-map__label--city{ transform:translate(-50%, 2px); color:var(--text); }
.area-map__label--water,.area-map__tag--water{ color:var(--secondary); text-transform:uppercase; letter-spacing:.12em; }
.area-map__label--channel{ transform:translate(-50%,-50%) rotate(-30deg); }
.area-map__label--anchor{ transform:translate(0,-50%); padding:2px 5px; border-radius:var(--radius-xs); background:var(--bg); }
.area-map__shield{
  padding:3px 6px; border:1px solid var(--line-strong); border-radius:var(--radius-xs);
  background:var(--bg); color:var(--text-2); font:600 12px/1 var(--font-sans); letter-spacing:.02em; /* DESIGN §2.2: 12px floor */
}
.area-map__dot{
  position:absolute; left:var(--x); top:var(--y); width:6px; height:6px; margin:-3px 0 0 -3px;
  border-radius:50%; background:var(--text);
}
.area-map__long{ display:none; }
@media (min-width:980px){
  .area-map--full .area-map__place--wide{ display:block; }
  .area-map--full .area-map__long{ display:inline; }
  .area-map--full .area-map__short{ display:none; }
}

/* pins: <ol> of links positioned on the canvas */
.area-map__pins{ position:absolute; inset:0; margin:0; padding:0; list-style:none; }
.area-map__pin-item{ position:absolute; left:var(--x); top:var(--y); width:0; height:0; }
.area-map__pin{
  position:absolute; left:0; top:0; display:flex; align-items:center; gap:6px;
  transform:translate(-11px,-11px); white-space:nowrap;
  color:var(--text); text-decoration:none; border-radius:var(--radius-pill);
}
.area-map__pin::after{ content:""; position:absolute; inset:-11px -4px; }  /* >= 44px tap area */
.area-map__pin:hover{ color:var(--text); }
.area-map__pin-dot{
  display:grid; grid-template-columns:minmax(0,1fr); place-items:center; flex:none; width:22px; height:22px; border-radius:50%;
  background:var(--accent-strong); color:var(--accent-ink); box-shadow:0 0 0 3px var(--bg);  /* white numerals: AA needs the strong fill */
  font:600 12px/1 var(--font-mono); transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.area-map__pin-label{
  padding:3px 7px; border-radius:var(--radius-xs); background:var(--bg); box-shadow:var(--shadow-1);
  font:600 var(--fs-xs)/1.2 var(--font-sans); transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
/* label side: data-side-c on cropped maps (mobile + area pages), data-side on the full map from 980 */
.area-map__pin[data-side-c="left"]{ flex-direction:row-reverse; transform:translate(calc(-100% + 11px),-11px); }
.area-map__pin[data-side-c="below"]{ flex-direction:column; gap:4px; transform:translate(-50%,-11px); }
@media (min-width:980px){
  .area-map--full .area-map__pin{ flex-direction:row; gap:6px; transform:translate(-11px,-11px); }
  .area-map--full .area-map__pin[data-side="left"]{ flex-direction:row-reverse; transform:translate(calc(-100% + 11px),-11px); }
  .area-map--full .area-map__pin[data-side="below"]{ flex-direction:column; gap:4px; transform:translate(-50%,-11px); }
  .area-map__pin-label{ font-size:var(--fs-sm); }
}
.area-map__pin:hover .area-map__pin-dot,
.area-map__pin.is-active .area-map__pin-dot{ transform:scale(1.18); box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--accent); }
.area-map__pin.is-active .area-map__pin-label,
.area-map__pin:hover .area-map__pin-label{ background:var(--surface-inverse); color:var(--text-inverse); }
.area-map__pin:focus-visible{ box-shadow:none; }
.area-map__pin:focus-visible .area-map__pin-dot{ box-shadow:var(--ring); }
.area-map__pin:focus-visible .area-map__pin-label{ background:var(--surface-inverse); color:var(--text-inverse); }

/* focus maps (area pages): only the current area keeps its label; the others show it on hover / focus */
.area-map--focus .area-map__pin:not(.is-active) .area-map__pin-label{ display:none; }
.area-map--focus .area-map__pin:not(.is-active):is(:hover,:focus-visible) .area-map__pin-label{ display:block; position:relative; z-index:2; }
.area-map--focus .area-map__pin-item:has(.is-active){ z-index:1; }

/* Pin <-> card sync without JS (.area-card[data-area] anywhere on the page; DESIGN.md §3.3 "toggles .is-active") */
body:has(.area-card[data-area="port-of-brownsville"]:is(:hover,:focus-visible)) .area-map__pin[data-area="port-of-brownsville"] .area-map__pin-dot,
body:has(.area-card[data-area="starbase-boca-chica"]:is(:hover,:focus-visible)) .area-map__pin[data-area="starbase-boca-chica"] .area-map__pin-dot,
body:has(.area-card[data-area="south-padre-island"]:is(:hover,:focus-visible)) .area-map__pin[data-area="south-padre-island"] .area-map__pin-dot,
body:has(.area-card[data-area="brownsville"]:is(:hover,:focus-visible)) .area-map__pin[data-area="brownsville"] .area-map__pin-dot,
body:has(.area-card[data-area="los-fresnos"]:is(:hover,:focus-visible)) .area-map__pin[data-area="los-fresnos"] .area-map__pin-dot,
body:has(.area-card[data-area="rancho-viejo-olmito"]:is(:hover,:focus-visible)) .area-map__pin[data-area="rancho-viejo-olmito"] .area-map__pin-dot{
  transform:scale(1.18); box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--accent);
}
body:has(.area-card[data-area="port-of-brownsville"]:is(:hover,:focus-visible)) .area-map__pin[data-area="port-of-brownsville"] .area-map__pin-label,
body:has(.area-card[data-area="starbase-boca-chica"]:is(:hover,:focus-visible)) .area-map__pin[data-area="starbase-boca-chica"] .area-map__pin-label,
body:has(.area-card[data-area="south-padre-island"]:is(:hover,:focus-visible)) .area-map__pin[data-area="south-padre-island"] .area-map__pin-label,
body:has(.area-card[data-area="brownsville"]:is(:hover,:focus-visible)) .area-map__pin[data-area="brownsville"] .area-map__pin-label,
body:has(.area-card[data-area="los-fresnos"]:is(:hover,:focus-visible)) .area-map__pin[data-area="los-fresnos"] .area-map__pin-label,
body:has(.area-card[data-area="rancho-viejo-olmito"]:is(:hover,:focus-visible)) .area-map__pin[data-area="rancho-viejo-olmito"] .area-map__pin-label{
  background:var(--surface-inverse); color:var(--text-inverse);
}
body:has(.area-map__pin[data-area="port-of-brownsville"]:is(:hover,:focus-visible)) .area-card[data-area="port-of-brownsville"] .area-card__name,
body:has(.area-map__pin[data-area="starbase-boca-chica"]:is(:hover,:focus-visible)) .area-card[data-area="starbase-boca-chica"] .area-card__name,
body:has(.area-map__pin[data-area="south-padre-island"]:is(:hover,:focus-visible)) .area-card[data-area="south-padre-island"] .area-card__name,
body:has(.area-map__pin[data-area="brownsville"]:is(:hover,:focus-visible)) .area-card[data-area="brownsville"] .area-card__name,
body:has(.area-map__pin[data-area="los-fresnos"]:is(:hover,:focus-visible)) .area-card[data-area="los-fresnos"] .area-card__name,
body:has(.area-map__pin[data-area="rancho-viejo-olmito"]:is(:hover,:focus-visible)) .area-card[data-area="rancho-viejo-olmito"] .area-card__name{
  color:var(--link);
}

/* callout + key */
.area-map__callout{
  display:grid; grid-template-columns:minmax(0,1fr); gap:8px; align-content:start;
  background:var(--surface); color:var(--text-2); font-size:var(--fs-xs); line-height:1.5;
}
.area-map__callout-tag{ font:500 var(--fs-label)/1.2 var(--font-mono); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--eyebrow); }
.area-map__callout-fact{ color:var(--text); font-weight:600; font-variant-numeric:tabular-nums; }
.area-map__credit{ font-size:var(--fs-micro); color:var(--muted); }
.area-map__credit a{ color:inherit; }
.area-map__key{ display:flex; flex-wrap:wrap; gap:4px 16px; margin:0; padding:0; list-style:none; }
.area-map__key li{ display:flex; align-items:center; gap:6px; }
.area-map__key-mark{ flex:none; display:inline-block; }
.area-map__key-mark--pin{ width:12px; height:12px; border-radius:50%; background:var(--accent); }
.area-map__key-mark--bridge{ width:8px; height:8px; margin:2px; background:var(--text); transform:rotate(45deg); }
.area-map__key-mark--road{ width:18px; height:0; border-top:2px solid var(--line-strong); }
.area-map__key-mark--channel{ width:18px; height:0; border-top:2px dashed var(--secondary); }
@media (min-width:640px){
  .area-map--full .area-map__callout{ max-width:520px; }
}
@media (min-width:980px){
  .area-map--full{ position:relative; }
  .area-map--full .area-map__callout{ position:absolute; right:16px; bottom:16px; width:min(280px,24%); box-shadow:var(--shadow-2); }
  .area-map--full .area-map__key{ display:grid; grid-template-columns:minmax(0,1fr); }
}

/* numbered legend (focus maps) */
.area-map__legend{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(140px,100%),1fr)); gap:0 16px; margin:0; padding:0; list-style:none; }
.area-map__legend-link{ display:flex; align-items:center; gap:8px; min-height:var(--tap); color:var(--text); text-decoration:none; font-weight:500; }
.area-map__legend-link:hover{ color:var(--link); }
.area-map__legend-link[aria-current]{ font-weight:700; }
.area-map__legend-num{
  display:grid; grid-template-columns:minmax(0,1fr); place-items:center; flex:none; width:22px; height:22px; border-radius:50%;
  background:var(--accent-strong); color:var(--accent-ink); font:600 12px/1 var(--font-mono);
}

/* decorative backdrop (hero--area media and chapter figures when there is no photo) */
.hero--area .hero__media > .area-map__backdrop,
.chapters__figure > .area-map__backdrop,
.area-card__media > .area-map__backdrop{ display:block; width:100%; height:100%; }
.area-card__media:has(> .area-map__backdrop){ background:var(--surface-2); border-bottom:1px solid var(--line); }
.area-map__ghost{ fill:var(--accent); opacity:.5; }
.area-map__halo{ fill:none; stroke:var(--accent); stroke-width:1.5; opacity:.55; }
.area-map__halo--outer{ opacity:.25; }
.area-map__beacon{ fill:var(--accent); }
.hero--area .area-map__backdrop{ --map-dot:var(--line); --map-road:var(--line); }
.hero--area .area-map__halo{ stroke:var(--highlight); opacity:.65; }
.hero--area .area-map__halo--outer{ opacity:.3; }
.hero--area .area-map__beacon{ fill:var(--highlight); }
.chapters__figure:has(> .area-map__backdrop){ background:var(--surface-2); border:1px solid var(--line); }

/* ---------------------------------------------------------------- area hero: facts stack as rows on phones */
.hero--area .hero__facts{ grid-auto-flow:row; grid-template-columns:minmax(0,1fr); gap:12px; }
.hero--area .hero__fact{ grid-template-columns:auto minmax(0,1fr); column-gap:16px; row-gap:2px; align-items:baseline; padding:12px 0 0; }
.hero--area .hero__fact + .hero__fact{ padding-left:0; border-left:0; border-top:1px solid var(--line-strong); }
.hero--area .hero__fact b{ grid-row:1 / span 2; min-width:4.5ch; }
.hero--area .hero__fact cite{ grid-column:2; }
@media (min-width:640px){
  .hero--area .hero__facts{ grid-auto-flow:column; grid-template-columns:none; gap:0; }
  .hero--area .hero__fact{ grid-template-columns:minmax(0,1fr); padding:16px 16px 0 0; }
  .hero--area .hero__fact + .hero__fact{ border-top:0; padding-left:16px; border-left:1px solid var(--line-strong); }
  .hero--area .hero__fact b{ grid-row:auto; min-width:0; }
  .hero--area .hero__fact cite{ grid-column:auto; }
}
@media (min-width:980px){
  /* copy aligned to the container's left edge (site.css narrows the whole container to 640px) */
  .hero--area .hero__content{ max-width:calc(var(--container) + 2 * var(--gutter)); }
  .hero--area .hero__content > :not(.hero__facts){ max-width:600px; }
  .hero--area .hero__facts{ grid-auto-flow:row; grid-template-columns:minmax(0,1fr); gap:16px; }
  .hero--area .hero__fact,.hero--area .hero__fact + .hero__fact{ padding:0; border:0; }
}

/* ---------------------------------------------------------------- shared page pieces */
.area-stack{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-6); }
.area-stack > .section-head{ margin-bottom:0; }
.area-card__num{
  position:absolute; left:16px; top:16px; display:grid; grid-template-columns:minmax(0,1fr); place-items:center; width:26px; height:26px; border-radius:50%;
  background:var(--accent-strong); color:var(--accent-ink); font:600 12px/1 var(--font-mono);
}
.area-legal{ padding-block:var(--space-6) var(--space-7); }
.breadcrumb:has(+ .hero--area){ padding-bottom:var(--space-4); }

/* ---------------------------------------------------------------- area page: overview column */
.area-summary{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-4); }
.area-summary__title{ font-size:var(--fs-h3); line-height:1.25; max-width:28ch; }
.area-summary__text{ font-size:17px; line-height:1.7; color:var(--text-2); max-width:var(--measure); }
.area-summary__more > summary{ list-style:none; cursor:pointer; }
.area-summary__more > summary::-webkit-details-marker{ display:none; }
.area-summary__more[open] > summary{ margin-bottom:var(--space-3); }

.area-inventory,.area-travel{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-3); }
.area-inventory__title,.area-travel__title{ font:600 var(--fs-h4)/1.3 var(--font-sans); letter-spacing:0; }
.area-inventory__list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(140px,100%),1fr)); gap:var(--space-2); }
.area-inventory__link{
  display:grid; grid-template-columns:minmax(0,1fr); gap:2px; padding:12px 14px; border-radius:var(--radius-sm);
  background:var(--surface-2); color:var(--text); text-decoration:none; font-size:var(--fs-xs);
}
.area-inventory__link b{ font:700 var(--fs-kpi)/1.1 var(--font-sans); font-variant-numeric:tabular-nums; }
.area-inventory__link:hover{ background:var(--accent-soft); color:var(--text); }
.area-inventory__link--static:hover{ background:var(--surface-2); }
.area-travel__note{ font-size:var(--fs-micro); color:var(--muted); }

/* the map column: natural ratio (not stretched to the viewport), sticky from 1200 */
.area-layout__map{ min-height:0; overflow:visible; background:transparent; border-radius:0; }
@media (min-width:1200px){
  .area-layout__map{ height:auto; }
}

/* ---------------------------------------------------------------- area page: strategies, FAQ + form */
@media (min-width:980px){
  .area-strategies.strategy-grid{ grid-auto-columns:minmax(0,260px); }
}
/* sourced stat rows: one shared figure column so values line up from row to row */
@media (min-width:640px){
  .area-stats.stat-grid--rows > .stat{ grid-template-columns:minmax(0,1fr) minmax(0,11rem) minmax(0,1.4fr); }
}
.area-ask{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-7); align-items:start; }
.area-ask__faq,.area-ask__form{ min-width:0; }
@media (min-width:980px){
  .area-ask{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--space-8); }
  .area-ask__form{ position:sticky; top:calc(var(--header-h) + 24px); }
}

.area-more{ display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-5); }
.area-listing-fallback{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-3); }
.area-listing-fallback .idx-attribution{ display:block; }

/* ---------------------------------------------------------------- areas index: strategy fit table */
.area-fit td:nth-child(2),.area-fit thead th:nth-child(2){ text-align:left; white-space:normal; min-width:220px; }
.area-fit th[scope="row"]{ white-space:normal; min-width:150px; font-weight:600; }
.area-fit th[scope="row"] a{ color:var(--text); }
.area-fit th[scope="row"] a:hover{ color:var(--link); }
.area-fit__chips{ display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; }
.area-fit .area-fit__num{ text-align:right; }
.area-fit tbody td,.area-fit tbody th{ vertical-align:middle; }

/* timeline without photos: moved to site.css §5.10 so every page that renders a .timeline gets it */