/* assets/css/locations.css */
/* ============================================================
   SECTION 04 — Locations
   Desktop : pinned stage, horizontal rail scrubbed by scroll.
   Mobile  : no pin, native scroll-snap carousel.
   ============================================================ */

.locs{
  position:relative;
  background:var(--ink-2);
  color:var(--cream);
}
.locs::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(80% 60% at 18% 12%, rgba(70,106,96,.30), transparent 62%),
    radial-gradient(60% 50% at 92% 88%, rgba(184,82,44,.13), transparent 60%);
}
.locs__stage{
  position:relative;z-index:1;
  height:100vh;height:100svh;
  display:grid;
  grid-template-columns:minmax(280px,29vw) 1fr;
  align-items:center;
  overflow:hidden;
}

/* ------------------------------------------------------------
   Aside — title, map, counter
   ------------------------------------------------------------ */
/* padding-top clears the fixed masthead — the aside is the only column
   whose content starts at the very top of the stage */
.locs__aside{
  padding:clamp(92px,12vh,134px) clamp(18px,2.2vw,40px) clamp(28px,4vh,56px) var(--pad);
  display:flex;flex-direction:column;gap:clamp(12px,1.9vh,24px);
  height:100%;justify-content:flex-start;
  min-width:0;
}
.locs__title{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(30px,3.1vw,54px);line-height:.98;letter-spacing:-.018em;
}
.locs__lead{
  font-size:clamp(13px,.95vw,15px);line-height:1.66;font-weight:300;
  color:var(--cream-70);max-width:34ch;
}

/* filter chips */
.locs__filters{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  display:inline-flex;align-items:center;min-height:44px;
  padding:7px 15px;border-radius:100px;
  border:1px solid var(--cream-14);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream-52);
  transition:color .35s var(--ease),border-color .35s var(--ease),background-color .35s var(--ease);
  white-space:nowrap;
}
.chip:hover{color:var(--cream);border-color:var(--cream-28)}
.chip.is-on{
  color:var(--ink);background:var(--cream);border-color:var(--cream);
}

/* ---------- map ---------- */
.locs__map{
  position:relative;
  width:100%;max-width:clamp(180px,16vw,240px);
  aspect-ratio:1;
  margin-top:2px;
}
.locs__map svg{width:100%;height:100%;overflow:visible}
.map__grid line{stroke:var(--cream-08);stroke-width:.4}
.map__dot{
  fill:var(--cream-28);
  transition:fill .5s var(--ease),r .5s var(--ease);
}
.map__dot.is-on{fill:var(--terracotta)}
.map__ring{
  fill:none;stroke:var(--terracotta);stroke-width:.9;
  opacity:0;transform-box:fill-box;transform-origin:center;
}
.map__ring.is-on{animation:mapPulse 2.4s var(--ease) infinite}
@keyframes mapPulse{
  0%{opacity:.8;r:2.4}
  70%,100%{opacity:0;r:9}
}
.map__label{
  position:absolute;left:0;bottom:-26px;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cream-45);white-space:nowrap;
}

/* ---------- counter ---------- */
.locs__counter{
  display:flex;align-items:center;gap:14px;margin-top:auto;
  font-size:10px;letter-spacing:.2em;color:var(--cream-52);
}
.locs__counter b{font-weight:400;color:var(--cream)}
.locs__rail-progress{
  flex:1;height:1px;background:var(--cream-14);position:relative;overflow:hidden;max-width:160px;
}
.locs__rail-progress span{
  position:absolute;inset:0;background:var(--terracotta);
  transform:scaleX(0);transform-origin:left;
}

/* ------------------------------------------------------------
   Rail
   ------------------------------------------------------------ */
.locs__viewport{
  position:relative;height:100%;
  display:flex;align-items:center;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 3%,#000 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 3%,#000 100%);
}
.locs__rail{
  display:flex;align-items:stretch;
  gap:clamp(14px,1.4vw,24px);
  padding:0 var(--pad) 0 clamp(10px,1.4vw,24px);
  will-change:transform;
}

/* ------------------------------------------------------------
   Card
   ------------------------------------------------------------ */
.loc{
  position:relative;flex:none;
  width:clamp(276px,23vw,352px);
  height:min(80svh,700px);
  display:flex;flex-direction:column;
  background:rgba(243,240,236,.045);
  border:1px solid var(--cream-14);
  border-radius:3px;
  overflow:hidden;
  transition:opacity .55s var(--ease),border-color .45s var(--ease),background-color .45s var(--ease);
}
.loc.is-muted{opacity:.24}
.loc.is-match{border-color:rgba(184,82,44,.5)}

.loc__media{position:relative;height:31%;min-height:120px;overflow:hidden;flex:none;background:var(--green-deep)}
/* hotlinked photo refused — keep the frame, lose the broken-image icon */
.loc__media.is-dead img{display:none}
.loc__media.is-dead{background:radial-gradient(120% 90% at 30% 20%,rgba(70,106,96,.95),rgba(16,26,23,1))}
.loc__media.is-dead::before{
  content:'BOBO & WILD';position:absolute;inset:0;z-index:1;
  display:grid;place-items:center;
  font-size:10px;letter-spacing:.36em;color:var(--cream-28);
}
.loc__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.loc:hover .loc__media img{transform:scale(1.055)}
.loc__media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(12,21,18,.92) 0%,rgba(12,21,18,.30) 42%,rgba(12,21,18,.06) 100%);
}
.loc__kind{
  position:absolute;z-index:2;top:12px;left:12px;
  padding:5px 10px;border-radius:100px;
  background:rgba(12,21,18,.62);backdrop-filter:blur(6px);
  border:1px solid var(--cream-14);
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-70);
}
.loc__status{
  position:absolute;z-index:2;left:14px;bottom:12px;
  display:inline-flex;align-items:center;gap:7px;
  font-size:10px;letter-spacing:.12em;color:var(--cream);
}
.loc__status i{
  width:6px;height:6px;border-radius:50%;background:var(--closed);flex:none;
  box-shadow:0 0 0 0 rgba(111,191,138,.55);
}
.loc__status.is-open i{background:var(--open);animation:livePulse 2.6s ease-out infinite}
.loc__status.is-soon i{background:#E0A85C}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(111,191,138,.5)}
  70%,100%{box-shadow:0 0 0 7px rgba(111,191,138,0)}
}

.loc__body{
  flex:1;min-height:0;overflow:hidden;
  display:flex;flex-direction:column;
  gap:clamp(7px,.95vh,12px);
  padding:clamp(15px,1.4vw,21px);
}
.loc__num{
  font-size:9px;letter-spacing:.22em;color:var(--terracotta-lift);display:block;margin-bottom:7px;
}
.loc__name{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(21px,1.65vw,29px);line-height:1.02;letter-spacing:-.012em;
}
.loc__area{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-45);margin-top:6px}
.loc__offer{
  font-size:12px;line-height:1.45;color:var(--cream);
  padding-bottom:clamp(8px,1.1vh,13px);
  border-bottom:1px solid var(--cream-08);
}
/* clamped so a long entry can never push the buttons out of the card —
   the full sentence still lives in the DOM for search engines */
.loc__distinct{
  font-size:12.5px;line-height:1.6;font-weight:300;color:var(--cream-70);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;
  overflow:hidden;
}

.loc__meta{margin:0;display:flex;flex-direction:column;gap:6px;font-size:11px}
.loc__row{display:flex;gap:9px;align-items:flex-start;color:var(--cream-70);line-height:1.45}
.loc__row svg{width:12px;height:12px;flex:none;margin-top:2px;opacity:.5;stroke:currentColor;fill:none;stroke-width:1.6}
.loc__row a:hover{color:var(--cream);text-decoration:underline;text-underline-offset:3px}

.loc__score{
  display:flex;align-items:baseline;gap:8px;margin-top:auto;
  padding-top:clamp(8px,1.1vh,13px);border-top:1px solid var(--cream-08);
}
.loc__score b{font-family:var(--f-display);font-weight:400;font-size:19px;line-height:1}
.loc__score span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-45)}
.loc__stars{color:var(--terracotta-lift);font-size:11px;letter-spacing:.06em}

.loc__tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:5px}
.loc__tags li{
  font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 8px;border-radius:2px;
  background:var(--cream-08);color:var(--cream-52);
}

/* .btn itself now lives in site.css — the footer uses it on every page,
   and this file only loads on the homepage. Only the card-specific
   sizing belongs here. */
.loc__actions{display:flex;gap:7px}
.loc__actions .btn{flex:1}

/* ------------------------------------------------------------
   Tablet
   ------------------------------------------------------------ */
@media (max-width:1180px){
  .locs__stage{grid-template-columns:minmax(250px,34vw) 1fr}
  .locs__map{max-width:clamp(150px,17vw,200px)}
  .loc{width:clamp(262px,30vw,320px)}
}

/* ------------------------------------------------------------
   Mobile — unpinned, native snap carousel
   ------------------------------------------------------------ */
@media (max-width:860px){
  .locs__stage{
    display:block;height:auto;
    padding:clamp(72px,11vh,120px) 0 clamp(56px,8vh,96px);
  }
  .locs__aside{
    height:auto;padding:0 var(--pad);
    gap:16px;margin-bottom:26px;
  }
  .locs__map{max-width:170px;align-self:flex-start}
  .locs__counter{margin-top:20px}
  .locs__viewport{
    display:block;height:auto;overflow:visible;
    -webkit-mask-image:none;mask-image:none;
  }
  .locs__rail{
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:4px var(--pad);
    transform:none!important;
  }
  .locs__rail::-webkit-scrollbar{display:none}
  .loc{
    width:min(82vw,340px);
    height:auto;min-height:0;
    scroll-snap-align:center;
  }
  .loc__media{height:170px}
  .loc.is-muted{opacity:.35}
}

@media (max-width:420px){
  .loc{width:86vw}
}

/* ------------------------------------------------------------
   Reduced motion — the stage never pins, so the rail has to be
   reachable on its own. Mirrors the mobile carousel at any width.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .loc__media img,.loc,.chip{transition:none}
  .loc__status.is-open i,.map__ring.is-on{animation:none}
  .locs__stage{height:auto;padding:clamp(72px,11vh,120px) 0}
  .locs__aside{height:auto;justify-content:flex-start}
  .locs__viewport{
    overflow:visible;
    -webkit-mask-image:none;mask-image:none;
  }
  .locs__rail{
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    transform:none!important;
  }
  .loc{scroll-snap-align:center;height:auto}
}

/* tap targets: phone links (the buttons get theirs in site.css) */
.loc__meta a,.loc__phone{display:inline-flex;align-items:center;min-height:44px}