/* ============================================================
   Visit Us page — page-specific flourishes only.
   Builds entirely on the v4 shared kit in styles.css.
   ============================================================ */

/* Pastel ribbon colour for the flowing section dividers (daylight mix) +
   matching cool bubble palette */
:root {
  --flow-accent: linear-gradient(90deg, var(--sky) 0%, var(--teal) 50%, var(--sage) 100%);
  --bub-1: var(--sky); --bub-2: var(--teal); --bub-3: var(--sage); --bub-4: var(--sun);
  /* section-rhythm washes — cool teal into a sky beat */
  --wash-1: #dfeeea;  /* pale teal */
  --wash-2: #e7f1f7;  /* pale sky  */
}

/* ---- Hero: same recipe as Fusion — a single signature tile (map pins)
     repeated over a cool teal→meadow gradient. Mini location card sits
     beside the copy. ---- */
.page-hero.ph--visit {
  background:
    url("../../img/visit-tile-v2.svg") center / 132px repeat,
    linear-gradient(180deg, #C9E2DC 0%, #DCEAE0 58%, var(--base) 100%);
  padding-bottom: clamp(5.5rem, 4vw + 4rem, 7.5rem);
}
.ph--visit .container {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 760px) {
  .ph--visit .container { grid-template-columns: 1fr auto; }
}
.visit-hero-art {
  position: relative;
  max-width: 340px;
  margin-inline: auto;
}
.visit-loc-card {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 16px 28px rgba(40,80,70,0.20));
}
@media (prefers-reduced-motion: no-preference) {
  .visit-loc-card { animation: bob 7s ease-in-out infinite; }
}
/* Teal partner-tag eyebrow */
.ph--visit .partner-tag {
  background: rgba(255,255,255,0.85);
  color: #2c5a52;
  border: 1px solid rgba(63,114,104,0.30);
}

/* Hero pill row — semi-opaque white so they read over the gradient */
.ph--visit .pill {
  background: rgba(255,255,255,0.90);
  border-color: rgba(79,176,208,0.28);
  font-weight: 600;
}

/* Hero sticker wrapper — gives it breathing room before the eyebrow */
.visit-hero-sticker {
  margin-bottom: 1rem;
}

/* ---- Hours + Map split ---- */

/* Hours card: lively top accent strip */
.hours-card {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 1px 2px rgba(80,60,30,0.05),
    0 8px 18px -6px rgba(80,60,30,0.12),
    0 14px 36px -10px rgba(80,60,30,0.10);
  background: linear-gradient(180deg, #ffffff 0%, #fcf8f0 100%);
  border: 1px solid rgba(58,49,40,0.06);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease;
}
.hours-card:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 1px 2px rgba(80,60,30,0.06),
    0 14px 28px -10px rgba(80,60,30,0.16),
    0 28px 60px -16px rgba(80,60,30,0.14);
}

.hours-card-header {
  background: var(--grad-meadow);
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.hours-card-header h3 {
  color: var(--ink);
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.hours-card-header .clock-icon {
  width: 22px; height: 22px;
  flex: none;
  opacity: 0.92;
}

/* Hours table rows */
.hours-body {
  padding: 0.5rem 0;
}

.hours-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px dashed rgba(80,60,30,0.08);
  transition: background 0.18s ease;
}
.hours-row:last-child {
  border-bottom: none;
}
.hours-row:hover {
  background: var(--base);
}

/* Today's highlight (applied by JS; gracefully absent without JS) */
.hours-row.is-today {
  background: var(--sun-tint);
  border-bottom-color: transparent;
}
.hours-row.is-today .hours-day {
  color: var(--accent);
  font-weight: 700;
}
.hours-row.is-today .hours-time {
  color: var(--accent);
  font-weight: 700;
}

.hours-day {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--ink);
  font-size: 0.97rem;
  min-width: 0;
}
.hours-time {
  font-family: var(--font-head);
  font-weight: 500;
  color: var(--ink-soft);
  font-size: 0.97rem;
  white-space: nowrap;
}

/* Today badge */
.today-badge {
  display: none;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--sun);
  color: #5a3d12;
  padding: 0.18rem 0.55rem;
  border-radius: var(--r-pill);
  margin-left: 0.4rem;
  vertical-align: middle;
  white-space: nowrap;
}
.hours-row.is-today .today-badge { display: inline-block; }

/* Contact details block below the hours card */
.contact-details {
  margin-top: 1.4rem;
  display: grid;
  gap: 0.9rem;
}
.contact-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}
.contact-detail-icon {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  background: var(--teal-tint);
  display: grid;
  place-items: center;
  flex: none;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), background 0.2s ease;
}
.contact-detail-row:hover .contact-detail-icon {
  transform: scale(1.1) rotate(-5deg);
  background: var(--sky-tint);
}
.contact-detail-icon svg {
  width: 18px; height: 18px;
  color: var(--accent-teal);
}
.contact-detail-copy strong {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 0.15rem;
}
.contact-detail-copy a,
.contact-detail-copy span {
  font-size: 0.97rem;
  color: var(--accent);
  font-weight: 600;
}
.contact-detail-copy span { color: var(--ink-soft); font-weight: 400; }

/* ---- Map area ---- */
.map-frame {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--white);
  border: 1px solid rgba(80,60,30,0.06);
  position: relative;
}
.map-frame .map-light {
  border-radius: 0; /* parent clips it */
  box-shadow: none;
}

/* ---- Interactive map (MapLibre, themed + bounded) ---- */
.ltp-map {
  position: relative;
  width: 100%;
  aspect-ratio: 600 / 380;
  min-height: 240px;
  overflow: hidden;
  background: #f4efe3;
}
.ltp-map__poster {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: cover;
  z-index: 0;
}
.ltp-map.is-live .ltp-map__poster { opacity: 0; }
.ltp-map .maplibregl-canvas { outline: none; }
.ltp-map .maplibregl-ctrl-group {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(60,45,30,0.18);
  border: 1px solid rgba(120,95,60,0.14);
}
.ltp-map .maplibregl-ctrl-group button { width: 34px; height: 34px; background: #fffdf9; }
.ltp-map .maplibregl-ctrl-group button + button { border-top: 1px solid rgba(120,95,60,0.14); }
.ltp-map .maplibregl-ctrl-attrib { font-size: 10px; background: rgba(255,253,249,0.78); border-radius: 8px 0 0 0; }
.ltp-map .maplibregl-ctrl-attrib a { color: #8a7f68; }

/* Branded marker (Little Town pin + callout) */
.ltp-mk { display: flex; flex-direction: column; align-items: center; font-family: var(--font-body, "Quicksand"), system-ui, sans-serif; pointer-events: none; }
.ltp-card {
  display: flex; align-items: center; gap: 7px;
  background: #fffdf9; border-radius: 13px; padding: 7px 11px;
  box-shadow: 0 7px 18px rgba(70,55,40,0.30); border: 1px solid rgba(120,95,60,0.14);
  margin-bottom: 3px; white-space: nowrap;
}
.ltp-ic { flex: none; width: 22px; height: 22px; border-radius: 7px; background: #fbe7d8; display: flex; align-items: center; justify-content: center; }
.ltp-ic svg { width: 14px; height: 14px; }
.ltp-tx { display: flex; flex-direction: column; line-height: 1.18; }
.ltp-nm { font-weight: 700; color: #3a3128; font-size: 15px; }
.ltp-ad { font-weight: 600; color: #9a8f7c; font-size: 10.5px; }
.ltp-pin { filter: drop-shadow(0 3px 3px rgba(70,55,40,0.4)); }
.ltp-pin svg { display: block; width: 35px; height: 46px; }

/* Sticker cluster floating on the map */
.map-stickers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1rem;
  justify-content: flex-start;
}

/* ---- Plan your visit steps section ---- */
.visit-steps-section {
  background: linear-gradient(160deg, var(--sky-tint) 0%, var(--teal-tint) 55%, var(--sage-tint) 100%);
}
/* Flowing divider: rise into the section above using this same gradient */
.visit-steps-section.flow-top {
  --surface: linear-gradient(160deg, var(--sky-tint) 0%, var(--teal-tint) 55%, var(--sage-tint) 100%);
}

.visit-steps .step-no {
  background: var(--grad-sky, linear-gradient(135deg, var(--sky) 0%, var(--teal) 100%));
  width: 64px;
  height: 64px;
  font-size: 1.5rem;
  box-shadow: 0 4px 0 rgba(40,100,120,0.2), var(--shadow-sm);
}

/* override step-no gradient to use sky/teal instead of sunrise */
.visit-steps .step-no {
  background: linear-gradient(135deg, var(--sky) 0%, var(--teal) 100%);
}

.visit-steps .step h3 {
  font-size: 1.08rem;
  margin-bottom: 0.22rem;
}
.visit-steps .step p {
  font-size: 0.96rem;
}

/* Connector line between steps on desktop */
@media (min-width: 760px) {
  .visit-steps {
    position: relative;
    grid-template-columns: repeat(4, 1fr);
  }
  .visit-steps::before {
    content: "";
    position: absolute;
    top: 32px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: linear-gradient(90deg, var(--sky), var(--teal), var(--sage));
    opacity: 0.45;
    pointer-events: none;
    z-index: 0;
  }
  .visit-steps .step { position: relative; z-index: 1; }
}

/* Quick-facts pill cluster beneath the steps */
.visit-facts-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: center;
  margin-top: 2rem;
}
.visit-facts-pills .pill {
  background: rgba(255,255,255,0.85);
  border-color: rgba(79,176,208,0.25);
  font-weight: 600;
}

/* ---- Contact "quick" cards (call / email) ---- */
.contact-quick {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (max-width: 640px) {
  .contact-quick { grid-template-columns: 1fr; }
}
.contact-quick-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.4rem;
  background: #fff;
  border-radius: var(--r-lg, 22px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  border: 2px solid transparent;
}
.contact-quick-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(58,49,40,0.18);
  border-color: var(--sky);
}
/* tilt-3d contact cards: drop transform transition (smeared the rAF tilt). */
.contact-quick-card.tilt-3d {
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.contact-quick-icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--sky-tint, #e8f4f9);
  color: var(--accent-teal, #3F7268);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.contact-quick-icon svg { width: 24px; height: 24px; }
.contact-quick-card:nth-child(2) .contact-quick-icon {
  background: var(--terra-tint, #fbe6da);
  color: var(--accent, #d9774e);
}
.contact-quick-copy { display: flex; flex-direction: column; line-height: 1.25; }
.contact-quick-label {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}
.contact-quick-copy strong {
  font-family: var(--font-head);
  font-size: 1.15rem;
  color: var(--ink);
  margin: 0.15rem 0;
  /* `anywhere` only breaks a long token (the email) when it genuinely can't
     fit, and pairs with the <wbr> before "@" in the markup so any wrap lands
     at the @ — never mid-".com" leaving an "om" orphan. */
  overflow-wrap: anywhere;
}
.contact-quick-copy small { color: var(--ink-soft); font-size: 0.85rem; }

/* ---- FAQ section ---- */
/* Background is handled by the shared section-rhythm skin (.sec-*). */

/* Accent colour on open accordion question */
.acc-item[aria-expanded="true"] .acc-trigger {
  color: var(--accent);
}

/* ---- CTA closing band ---- */
.visit-cta-band {
  background: linear-gradient(135deg, var(--sky) 0%, var(--teal) 55%, var(--sage) 100%);
  border-radius: var(--r-xl);
  padding: clamp(2.4rem, 6vw, 4rem) clamp(1.6rem, 4vw, 3rem);
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
/* Decoration matches every other closing CTA: confetti only (real content is
   lifted above the .confetti-rain layer, which is z-index 0). The .sticker
   keeps its own sun-pill styling — it just needs to ride above the confetti. */
.visit-cta-band h2,
.visit-cta-band p { color: var(--ink); }
.visit-cta-band .sticker,
.visit-cta-band h2,
.visit-cta-band p,
.visit-cta-band .flex-cta { position: relative; z-index: 1; }
.visit-cta-band .btn--ghost {
  background: var(--white);
  border-color: var(--btn-edge);
  color: var(--ink);
}
.visit-cta-band .btn--ghost:hover { color: var(--accent); }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .visit-steps .step-no { box-shadow: var(--shadow-sm) !important; }
  .contact-detail-row:hover .contact-detail-icon { transform: none !important; }
}

/* ---- Responsive tweaks ---- */
@media (max-width: 480px) {
  .map-stickers { justify-content: flex-start; }
}

/* ==============================================================
   MOBILE LAYER — visit-us page-specific
   Primary targets: 360 – 414 px; verified down to 320 px.
   All desktop rules above are untouched; every rule here is
   gated behind a max-width so it can't bleed up.
   ============================================================== */

/* ── 760 px threshold: collapse hero art below copy ────────── */
@media (max-width: 760px) {
  /* Art card sits below the hero copy on narrow viewports */
  .ph--visit .container {
    grid-template-columns: 1fr;
  }
  /* Tuck the card in tighter so it doesn't dwarf the copy */
  .visit-hero-art {
    max-width: 260px;
    margin-top: 0.25rem;
  }
}

/* ── 600 px threshold: hours + map section ─────────────────── */
@media (max-width: 600px) {
  /* Stack the split columns so hours comes first, map second */
  .section .container.split {
    display: block;
  }

  /* Hours card: full-width, slightly tighter inner padding */
  .hours-card {
    max-width: 100% !important; /* override the inline max-width:420px */
  }
  .hours-row {
    padding-inline: 1rem;
  }
  .hours-card-header {
    padding-inline: 1rem;
  }

  /* Contact detail rows: bigger touch targets, clearer type */
  .contact-detail-row {
    align-items: center;          /* icon + text vertically centred */
    min-height: 44px;
    gap: 0.9rem;
  }
  .contact-detail-icon {
    width: 42px;
    height: 42px;
    flex: none;
  }
  /* Make address + phone + email links obviously tappable */
  .contact-detail-copy a {
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent-teal, #3F7268);
    text-decoration: underline;
    text-decoration-color: rgba(63,114,104,0.35);
    text-underline-offset: 3px;
  }
  .contact-detail-copy a:active {
    color: var(--accent, #d9774e);
  }

  /* Map: don't let it shrink to a sliver — give it a readable height */
  .map-frame {
    margin-top: 1.5rem;
  }
  .map-light img {
    width: 100%;
    height: auto;
    min-height: 180px;   /* readable but not a full-screen takeover */
    max-height: 280px;
    object-fit: cover;
    display: block;
  }

  /* Map stickers: comfortable tap targets inline */
  .map-stickers {
    margin-top: 0.85rem;
    gap: 0.5rem;
  }
}

/* ── 480 px threshold: small phones ────────────────────────── */
@media (max-width: 480px) {

  /* ·· Hero ·· */
  /* Art card: smaller on very narrow screens, no overflow */
  .visit-hero-art {
    max-width: 200px;
  }

  /* Hero pills: don't squash, let them wrap gracefully */
  .ph--visit .pill-row {
    gap: 0.5rem;
  }
  .ph--visit .pill {
    font-size: 0.8rem;
    padding: 0.35rem 0.7rem;
  }

  /* ·· Hours card ·· */
  .hours-day,
  .hours-time {
    font-size: 0.93rem;
  }
  /* Today badge: keep it but pull it slightly if space is tight */
  .today-badge {
    font-size: 0.62rem;
    padding: 0.15rem 0.4rem;
  }

  /* ·· Steps ·· */
  /* The shared .steps grid already collapses; just nudge the step-no */
  .visit-steps .step-no {
    width: 52px;
    height: 52px;
    font-size: 1.2rem;
    margin-inline: auto;
  }
  .visit-steps .step h3 { font-size: 1rem; }
  .visit-steps .step p  { font-size: 0.93rem; }

  /* ·· Contact quick-cards ·· */
  /* Already stacks at 640px; on a phone ensure the card fills width and
     icon+copy have enough breathing room */
  .contact-quick-card {
    padding: 1rem 1.1rem;
    gap: 0.85rem;
  }
  .contact-quick-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex: none;
  }
  /* Phone number big and easy to tap; trimmed a touch + tighter leading so the
     full email address fits the narrower quick-card text column on a phone. */
  .contact-quick-copy strong {
    font-size: 0.98rem;
    line-height: 1.3;
  }

  /* ·· FAQ accordion ·· */
  /* Trigger button: generous tap area */
  .acc-trigger {
    padding-block: 1rem;
    font-size: 0.97rem;
  }

  /* ·· CTA band ·· */
  .visit-cta-band {
    padding-inline: 1.1rem;
  }
  .visit-cta-band h2 {
    font-size: clamp(1.4rem, 5vw, 1.7rem);
  }
  .visit-cta-band p {
    font-size: 0.95rem;
  }
}

/* ── 320 px safety net ──────────────────────────────────────── */
@media (max-width: 320px) {
  /* Prevent any inline SVG art from forcing overflow */
  .visit-hero-art  { max-width: 160px; }
  .visit-loc-card  { max-width: 100%; }

  /* Hours rows: allow time to wrap beneath day name gracefully */
  .hours-row {
    flex-wrap: wrap;
    row-gap: 0.1rem;
    padding-block: 0.6rem;
  }

  /* Contact detail: slightly smaller icon, prevent text overflow */
  .contact-detail-icon { width: 36px; height: 36px; }
  .contact-detail-copy a { font-size: 0.92rem; }
}

/* ── Reduced-motion additions for mobile ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  .visit-loc-card { animation: none !important; }
}