/* ==========================================================================
   Locations page. Uses the shared design tokens from site.css.
   ========================================================================== */

.page-locations .sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- hero + glance strip ---------- */
.page-locations .phero__bg img { object-position: 50% 62%; }
.page-locations .phero__in { padding-top: clamp(64px, 9vw, 120px); gap: 20px; }
.page-locations .phero h1 { font-size: clamp(3rem, 7vw + 0.4rem, 6rem); }
.page-locations .phero .lede { max-width: 48ch; }

.glance { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; margin-top: clamp(14px, 2.4vw, 30px); justify-self: stretch; }
.gl {
  position: relative; overflow: hidden; display: grid; gap: 14px; align-content: space-between; padding: 18px 18px 18px; border-radius: var(--r); color: #fff;
  background: rgba(3, 23, 14, 0.62); border: 1px solid rgba(37, 228, 145, 0.28);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
.gl::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--neon), rgba(37, 228, 145, 0) 78%); }
.gl--soon { border-color: rgba(255, 255, 255, 0.22); }
.gl--soon::before { background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 78%); }
.gl__top { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; }
.gl__name { justify-self: start; text-decoration: none; font: 600 1.6rem/1.05 var(--font-display); letter-spacing: -0.03em; transition: color 0.2s; }
.gl__name:hover { color: var(--neon); }
.gl__brand { grid-column: 1 / -1; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); }
.gl__btns { display: grid; grid-template-columns: 1fr 1.5fr; gap: 8px; }
.gl--soon .gl__btns { grid-template-columns: 1fr; }
.gl__btns .btn { padding-inline: 0.8em; }

/* Sub-nav: keep the first chip inside the page gutter (scroll-snap otherwise pins it to the screen edge) and give chips a 44px tap target. */
.page-locations .subnav__in { scroll-padding-inline: var(--gutter); }
.page-locations .subnav a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }

/* ---------- store sections ---------- */
.locs { display: grid; gap: clamp(28px, 4vw, 52px); }
.loc {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-1);
  scroll-margin-top: calc(var(--header-h) + 76px);
}
.loc__media { position: relative; margin: 0; aspect-ratio: 21 / 8; background: var(--forest); overflow: hidden; }
.loc__media picture, .loc__media img { display: block; width: 100%; height: 100%; }
.loc__media img { object-fit: cover; }
.loc__media--wixom img { object-position: 50% 32%; transform: scale(1.04); transform-origin: 0 40%; }
.loc__pill { position: absolute; top: clamp(14px, 2vw, 20px); left: clamp(14px, 2vw, 22px); filter: drop-shadow(0 2px 10px rgba(3, 23, 14, 0.35)); }
.loc__pill .status { font-size: 0.86rem; padding: 0.5em 0.95em 0.5em 0.8em; }
.loc__media figcaption {
  position: absolute; left: clamp(14px, 2vw, 22px); bottom: clamp(14px, 2vw, 20px); max-width: calc(100% - 28px);
  padding: 7px 12px; border-radius: 8px; font: 600 0.8rem/1.2 var(--font-body); letter-spacing: 0.02em; color: #fff;
  background: rgba(3, 23, 14, 0.7); border: 1px solid rgba(37, 228, 145, 0.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

.loc__body {
  display: grid; grid-template-columns: 1.15fr 1fr 1fr; grid-template-areas: "id hours act" "known known known";
  gap: clamp(24px, 3vw, 32px) clamp(24px, 3.6vw, 56px); padding: clamp(22px, 3.2vw, 40px); align-items: start;
}
.loc__id { grid-area: id; display: grid; gap: 10px; align-content: start; }
.loc__hours { grid-area: hours; }
.loc__act { grid-area: act; display: grid; gap: 12px; align-content: start; }
.loc__known { grid-area: known; }
.loc__napa { grid-area: napa; }
.loc--napa .loc__body { grid-template-areas: "id hours act" "id hours napa" "known known known"; }

.loc__id h3 { font-size: clamp(1.9rem, 2.4vw + 0.8rem, 2.7rem); }
.loc address { font-size: 1.12rem; line-height: 1.5; color: var(--ink-2); }
.loc h4 { font: 700 0.74rem/1 var(--font-body); letter-spacing: 0.15em; text-transform: uppercase; color: var(--green-deep); margin-bottom: 12px; }
.loc .hours { font-size: 1rem; }
.loc .hours > div:first-child { padding-top: 0; }
.loc__note { color: var(--ink-2); max-width: 30ch; }

.loc__act .btn { width: 100%; }
.loc__call { min-height: 60px; font-size: 1.1rem; }
.loc__dir { min-height: 52px; }

.loc__known { padding-top: clamp(20px, 2.4vw, 28px); border-top: 1px solid var(--line); }
.loc__known h4 { margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: 8px; text-decoration: none;
  font: 600 0.92rem/1.2 var(--font-body); color: var(--ink-2); background: var(--cream); border: 1px solid var(--line);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.chips a:hover { border-color: var(--green); color: var(--green-deep); background: #fff; }

.loc__napa {
  display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; align-self: start; border-radius: var(--r); text-decoration: none; color: #fff;
  background: var(--forest); border: 1px solid rgba(37, 228, 145, 0.25); transition: transform 0.25s var(--ease), border-color 0.2s, background 0.2s;
}
.loc__napa:hover { transform: translateY(-2px); border-color: var(--neon); background: var(--forest-2); }
.loc__napa-img { flex: none; width: 84px; aspect-ratio: 4 / 3; border-radius: var(--r-sm); overflow: hidden; background: var(--forest-2); }
.loc__napa-img picture, .loc__napa-img img { display: block; width: 100%; height: 100%; }
.loc__napa-img img { object-fit: cover; object-position: 50% 45%; }
.loc__napa-text { display: grid; gap: 2px; }
.loc__napa-text small { font: 700 0.68rem/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--neon); }
.loc__napa-text strong { font: 600 1.2rem/1.1 var(--font-display); letter-spacing: -0.02em; }
.loc__napa-go { margin-left: auto; color: var(--neon); font-size: 1.2rem; transition: transform 0.25s var(--ease); }
.loc__napa:hover .loc__napa-go { transform: translateX(4px); }

/* Lansing: opening soon (dark panel: grid + green glow) */
.loc--soon { display: grid; grid-template-columns: minmax(220px, 0.62fr) 2fr; }
.loc--soon .loc__media { aspect-ratio: auto; }
.loc__media--soon {
  display: grid; place-content: center; text-align: center; gap: 8px; color: #fff; min-height: 200px;
  background-color: var(--forest);
  background-image: radial-gradient(70% 90% at 90% -10%, rgba(37, 228, 145, 0.24), transparent 62%), linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: auto, 40px 40px, 40px 40px;
}
.loc__media--soon span { font: 600 clamp(2.4rem, 3.4vw, 3.4rem)/1 var(--font-display); letter-spacing: -0.035em; color: var(--neon); }
.loc__media--soon small { letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; font-size: 0.74rem; color: rgba(255, 255, 255, 0.82); }
.loc--soon .loc__body { grid-template-columns: 1.3fr 1fr 1fr; align-content: center; }

/* ---------- hours & directions (dark panel) ---------- */
.hd { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.hd__copy { display: grid; gap: 18px; justify-items: start; }
.hd .facts { grid-template-columns: 1fr; margin-top: 0; gap: 12px; }
.hd .fact {
  display: grid; grid-template-columns: 44px 1fr; column-gap: 18px; row-gap: 4px; align-items: start; padding: 20px 22px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--r);
}
.hd .fact__ic { grid-row: 1 / span 2; width: 44px; height: 44px; padding: 9px; border-radius: 10px; color: var(--neon); background: rgba(37, 228, 145, 0.08); border: 1px solid rgba(37, 228, 145, 0.35); }
.hd .fact strong { margin-bottom: 0; font: 600 1.25rem/1.2 var(--font-display); letter-spacing: -0.02em; color: #fff; }
.hd .fact span { color: rgba(255, 255, 255, 0.78); }

/* ---------- availability matrix ---------- */
.page-locations .matrix { min-width: 0; }
.page-locations .matrix th, .page-locations .matrix td { padding: 14px 18px; }
.page-locations .matrix tbody th { font-weight: 600; background: #fff; }
.page-locations .matrix tbody th a { text-decoration: none; border-bottom: 1.5px solid var(--line); padding-bottom: 1px; transition: border-color 0.2s, color 0.2s; }
.page-locations .matrix tbody th a:hover { color: var(--green-deep); border-color: var(--green); }
.page-locations .matrix thead th:not(:first-child) { text-align: center; }
.page-locations .matrix td { vertical-align: middle; }
.page-locations .matrix tbody tr:last-child th { border-bottom: 0; }
.page-locations .matrix th:first-child { width: 36%; }
.matrix .mk { display: block; line-height: 1.1; }
.matrix .lb { display: block; margin-top: 2px; font: 600 0.74rem/1.2 var(--font-body); letter-spacing: 0.02em; }
.matrix .y .lb { color: var(--green-deep); }
.matrix .n { color: #7b8680; }
.matrix .n .lb { color: var(--muted); font-weight: 500; }
.matrix .n .mk { font-size: 1.1rem; }
/* "Soon" tag shares the blue of the Opening soon status chip */
.matrix .s .lb, .legend b { display: inline-block; margin-top: 0; padding: 3px 9px; border-radius: 6px; background: #e3eeff; color: #0b4aa2; font: 600 0.78rem/1.2 var(--font-body); }
.legend { margin-top: 20px; color: var(--ink-2); font-size: 0.98rem; text-wrap: pretty; }
.legend a { font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--green); }
.legend a:hover { color: var(--green-deep); }
.legend__y { color: var(--green); font-weight: 700; }
.legend b { padding: 1px 7px; font-size: 0.86rem; }

/* ---------- closing ask ---------- */
.ask { display: flex; align-items: center; justify-content: space-between; gap: 28px 48px; flex-wrap: wrap; }
.ask > div:first-child { display: grid; gap: 12px; }
.ask h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
.ask__btns { display: flex; align-items: center; justify-content: flex-end; gap: 12px 14px; flex-wrap: wrap; margin-left: auto; }
.ask__links { flex: 1 0 100%; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 26px; margin-top: 6px; }

/* tap targets: grow the hit area to 44px without moving the visible text */
.page-locations .crumbs a, .gl__name, .matrix tbody th a, .ask__links .link-arrow { position: relative; }
.page-locations .crumbs a::before, .gl__name::before, .ask__links .link-arrow::before, .matrix tbody th a::before { content: ""; position: absolute; inset: -11px -6px; }
.matrix tbody th a::before { inset: -14px -8px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .loc__body, .loc--napa .loc__body { grid-template-columns: 1fr 1fr; grid-template-areas: "id act" "hours napa" "known known"; }
  .loc__body { grid-template-areas: "id act" "hours act" "known known"; }
  .loc--soon .loc__body { grid-template-columns: 1fr 1fr; }
  .glance { grid-template-columns: 1fr 1fr; }
  .gl--soon { grid-column: 1 / -1; }
  .gl--soon .gl__btns { grid-template-columns: minmax(0, 360px); }
}
@media (max-width: 960px) {
  .loc__media { aspect-ratio: 2 / 1; }
  .loc--soon { grid-template-columns: 1fr; }
  .loc--soon .loc__media { min-height: 0; aspect-ratio: auto; padding-block: 34px; }
  .hd { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .page-locations .phero__in { padding-top: 40px; }
  .glance { grid-template-columns: 1fr; }
  .gl { padding: 16px 16px 16px; gap: 12px; }
  .gl__name { font-size: 1.45rem; }
  .gl--soon .gl__btns { grid-template-columns: 1fr; }
  .loc__media { aspect-ratio: 16 / 10; }
  .loc__media figcaption { font-size: 0.74rem; padding: 6px 10px; }
  .chips a { min-height: 44px; padding: 8px 12px; font-size: 0.86rem; }
  .loc__body, .loc--napa .loc__body { grid-template-columns: 1fr; grid-template-areas: "id" "act" "hours" "known" "napa"; gap: 24px; padding: 22px 20px 24px; }
  .page-locations .phero__bg img { object-position: 12% 58%; }
  .loc--soon .loc__body { grid-template-columns: 1fr; }
  .hd .fact { grid-template-columns: 40px 1fr; column-gap: 14px; padding: 18px 16px; }
  .hd .fact__ic { width: 40px; height: 40px; padding: 8px; }
  .page-locations .matrix th, .page-locations .matrix td { padding: 12px 6px; }
  .page-locations .matrix tbody th { padding-left: 12px; font-size: 0.95rem; }
  .page-locations .matrix thead th { font-size: 0.66rem; letter-spacing: 0.06em; padding-inline: 4px; }
  .matrix .lb { font-size: 0.68rem; }
  .matrix .s .lb { font-size: 0.74rem; }
  .ask__btns { margin-left: 0; width: 100%; justify-content: flex-start; }
  .ask__btns .btn { flex: 1 1 140px; }
  .ask__links { justify-content: flex-start; }
}

/* brand badge + name + live status share a row (the badge must not stretch the old two-column grid) */
.gl__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.gl__top .bmark { flex: none; }
.gl__top .gl__brand { flex-basis: 100%; }