/* LPJH Locations archive — assets/css/locations.css
   Enqueue AFTER brand-tokens.css and homepage.css: reuses .hp bands, buttons,
   hairlines and the residences carousel. Tokens only; no raw brand hexes.
*/
/* ============================================================
   LPJH — Locations archive
   Loads after homepage.css + location.css. Class prefix: .arc-
   ============================================================ */

/* Hero — the archive needs one: the site header is transparent white over
   photography, so a cream first band leaves the nav invisible. Reuses the
   single Location page's .loc-hero treatment for consistency. */
.arc-hero--dark{height:auto;min-height:0;padding:11rem 0 4.5rem;background:var(--tr-charcoal)}
.arc-hero--dark .loc-hero__body{position:static;bottom:auto}
.arc-hero--dark .loc-hero__h1{color:var(--tr-cream)}
.arc-hero--dark .loc-hero__line{color:rgba(250,250,248,.72)}

.arc-head{padding:5rem 0;background:var(--tr-cream)}
.arc-head__grid{display:grid;grid-template-columns:1.5fr 1fr;gap:4rem;align-items:start}
.arc-head__h1{margin:0;font-family:var(--tr-font-display);font-size:4.4rem;font-weight:500;line-height:1;letter-spacing:-.015em;color:var(--tr-heading)}
.arc-head__p{margin:1.5rem 0 0;font-family:var(--tr-font-body);font-size:1.08rem;line-height:1.75;color:var(--tr-text-muted);max-width:38em;text-wrap:pretty}
.arc-head__aside{padding-left:2.5rem;border-left:1px solid var(--tr-border)}
.arc-head__aside p{margin:0 0 1.1rem;font-family:var(--tr-font-body);font-size:.9rem;line-height:1.8;color:var(--tr-text-muted)}
.arc-head__aside p:last-child{margin:0;font-family:var(--tr-font-body);font-size:.64rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tr-stone-400)}

/* ---------- VALLEY MAP ---------- */
.arc-map{border-top:1px solid var(--tr-border);border-bottom:1px solid var(--tr-border);background:var(--tr-linen)}
.arc-map__inner{display:grid;grid-template-columns:1fr 22rem;gap:0}
.arc-map__canvas{height:620px;background:var(--tr-linen)}
[data-basemap="osm"] .arc-map__canvas .leaflet-tile-pane{filter:grayscale(1) contrast(.9) brightness(1.06)}
.arc-map__canvas .leaflet-container{font-family:var(--tr-font-body);background:var(--tr-linen)}
.arc-map__canvas .leaflet-control-attribution{font-size:9px;background:rgba(250,250,248,.86);color:var(--tr-stone-500)}
.arc-map__canvas .leaflet-control-attribution a{color:var(--tr-stone-500)}
.arc-map__canvas .leaflet-bar{border:1px solid var(--tr-border);border-radius:0;box-shadow:none}
.arc-map__canvas .leaflet-bar a{border-radius:0;color:var(--tr-heading);border-bottom-color:var(--tr-border)}
.arc-map__canvas .leaflet-bar a:hover{background:var(--tr-linen);color:var(--tr-accent)}
.arc-map__side{border-left:1px solid var(--tr-border);background:var(--tr-cream);display:flex;flex-direction:column}
.arc-map__side-h{padding:1.6rem 1.75rem 1.2rem;border-bottom:1px solid var(--tr-border);font-family:var(--tr-font-body);font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tr-accent)}
.arc-map__list{list-style:none;margin:0;padding:0;flex:1 1 auto;overflow-y:auto}
.arc-map__btn{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;width:100%;text-align:left;padding:1.1rem 1.75rem;background:none;border:0;border-bottom:1px solid var(--tr-border);cursor:pointer;transition:background-color .26s ease}
.arc-map__btn:hover,.arc-map__btn.is-active{background:var(--tr-linen)}
.arc-map__btn b{font-family:var(--tr-font-display);font-size:1.12rem;font-weight:500;letter-spacing:-.01em;color:var(--tr-heading);transition:color .26s ease}
.arc-map__btn:hover b,.arc-map__btn.is-active b{color:var(--tr-accent)}
.arc-map__btn i{font-style:normal;flex:0 0 auto;font-family:var(--tr-font-body);font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tr-stone-400);font-variant-numeric:tabular-nums}
.arc-map__note{padding:1.1rem 1.75rem;border-top:1px solid var(--tr-border);font-family:var(--tr-font-body);font-size:.68rem;line-height:1.6;color:var(--tr-stone-400)}

/* ---------- LOCATION ROWS ---------- */
.arc-row{padding:5.5rem 0;border-bottom:1px solid var(--tr-border)}
.arc-row:last-child{border-bottom:0}
.arc-row__grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.arc-row--flip .arc-row__media{order:2}
.arc-row__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--tr-linen)}
.arc-row__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.19,1,.22,1)}
.arc-row:hover .arc-row__media img{transform:scale(1.03)}
.arc-row__no{display:flex;align-items:center;gap:1rem;margin:0 0 1.1rem;font-family:var(--tr-font-body);font-size:.64rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--tr-accent)}
.arc-row__no::after{content:"";flex:1 1 auto;height:1px;background:var(--tr-border);max-width:4rem}
.arc-row__name{margin:0;font-family:var(--tr-font-display);font-size:3.1rem;font-weight:500;line-height:1.04;letter-spacing:-.015em;color:var(--tr-heading)}
.arc-row__line{margin:1.1rem 0 0;font-family:var(--tr-font-display);font-size:1.3rem;font-style:italic;font-weight:500;line-height:1.4;color:var(--tr-text-muted);max-width:26em;text-wrap:pretty}
.arc-row__p{margin:1.35rem 0 0;font-family:var(--tr-font-body);font-size:.98rem;line-height:1.8;color:var(--tr-text-muted);max-width:36em;text-wrap:pretty}
.arc-row__facts{display:flex;flex-wrap:wrap;gap:0;margin:2rem 0 0;border-top:1px solid var(--tr-border)}
.arc-row__fact{flex:1 1 8rem;padding:1.1rem 1.5rem 0;border-left:1px solid var(--tr-border)}
.arc-row__fact:first-child{padding-left:0;border-left:0}
.arc-row__fact span{display:block;margin-bottom:.35rem;font-family:var(--tr-font-body);font-size:.58rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tr-stone-400)}
.arc-row__fact b{display:block;font-family:var(--tr-font-display);font-size:1.3rem;font-weight:500;letter-spacing:-.01em;color:var(--tr-heading)}
.arc-row__acts{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;margin-top:2.25rem}

/* ---------- CLOSING HELP BAND ---------- */
.arc-help{display:flex;align-items:center;justify-content:space-between;gap:3rem}
.arc-help__h{margin:0;font-family:var(--tr-font-display);font-size:2.2rem;font-weight:500;line-height:1.1;letter-spacing:-.01em;color:var(--tr-cream)}
.arc-help__p{margin:.7rem 0 0;font-family:var(--tr-font-body);font-size:.95rem;line-height:1.75;color:rgba(250,250,248,.66);max-width:42em}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px){
  .arc-hero--dark{padding:9rem 0 3.5rem}
  .arc-head{padding:3.5rem 0}
  .arc-head__h1{font-size:3.2rem}
  .arc-map__inner{grid-template-columns:1fr}
  .arc-map__side{border-left:0;border-top:1px solid var(--tr-border)}
  .arc-map__list{max-height:280px}
  .arc-row__name{font-size:2.4rem}
}
@media (max-width:899px){
  .arc-hero--dark{padding:7.5rem 0 2.5rem}
  .arc-head{padding:3rem 0}
  .arc-head__grid{grid-template-columns:1fr;gap:2.25rem}
  .arc-head__h1{font-size:2.5rem}
  .arc-head__p{font-size:1rem}
  .arc-head__aside{padding-left:0;border-left:0;padding-top:2rem;border-top:1px solid var(--tr-border)}
  .arc-map__canvas{height:420px}
  .arc-row{padding:3.5rem 0}
  .arc-row__grid{grid-template-columns:1fr;gap:2rem}
  .arc-row--flip .arc-row__media{order:0}
  .arc-row__name{font-size:2rem}
  .arc-row__line{font-size:1.1rem}
  .arc-row__fact{flex:1 1 45%;padding:1rem 1rem 0}
  .arc-row__fact:nth-child(3){padding-left:0;border-left:0}
  .arc-help{flex-direction:column;align-items:flex-start;gap:1.75rem}
  .arc-help__h{font-size:1.7rem}
}

/* Closing band ("Not Sure Which End of the Valley?") sits on charcoal.
   Cassio's base `h1..h6 { color: var(--color-accent-secondary-2) }` (charcoal)
   was winning over .arc-help__h's own colour, same as it would on the homepage
   dark bands — which dodge it via `.hp__band--dark .hp__h2`. Mirror that here. */
.hp__band--dark .arc-help__h { color: var(--tr-cream); }
.hp__band--dark .arc-help__p { color: rgba(250, 250, 248, .66); }