/* ==========================================================================
   Location page
   ========================================================================== */

/* --- Hero + gallery ---------------------------------------------------- */

.ca-loc-hero h1 { margin-bottom: 6px; }
.ca-loc-hero .ca-badge { margin-bottom: 14px; }

/* --- Info card + map --------------------------------------------------- */

.ca-loc-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.ca-loc-info__card {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ca-loc-info__address {
  color: var(--ca-ink);
  font-size: var(--ca-text-lg);
  font-weight: 600;
  line-height: 1.4;
}
.ca-loc-info__address:hover { color: var(--ca-orange-dark); }

.ca-loc-info__pair { display: flex; flex-wrap: wrap; gap: 22px; }
.ca-loc-info__pair a { color: var(--ca-ink); font-size: var(--ca-text-md); font-weight: 600; }
.ca-loc-info__pair a:hover { color: var(--ca-orange-dark); }

.ca-loc-info__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ca-loc-info__hours { color: var(--ca-ink); font-size: var(--ca-text-md); font-weight: 600; }

.ca-loc-info__directions { margin-top: auto; }

.ca-loc-info__disclaimer {
  text-align: center;
  color: var(--ca-faint);
  font-size: var(--ca-text-sm);
  font-family: var(--ca-font-mono);
  margin: -6px 0 0;
}

.ca-loc-map {
  position: relative;
  min-height: 300px;
  border: 1px solid var(--ca-hairline);
  border-radius: var(--ca-r-lg);
  overflow: hidden;
}
.ca-loc-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Q&A search -------------------------------------------------------- */

.ca-qa {
  background: var(--ca-white);
  border: 1px solid var(--ca-teal-line);
  border-radius: 22px;
  padding: clamp(22px, 4vw, 30px);
  box-shadow: var(--ca-shadow-md);
}

.ca-qa__list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ca-qa__question::-webkit-details-marker { display: none; }
.ca-qa__question::marker { content: ""; }

.ca-qa__sign {
  flex: none;
  color: var(--ca-teal);
  font-size: 18px;
  line-height: 1;
}
.ca-qa__item[open] .ca-qa__sign { transform: rotate(45deg); }

.ca-qa__empty {
  padding: 16px 18px;
  background: var(--ca-tint);
  border-radius: 14px;
  color: var(--ca-muted);
  font-size: 14.5px;
  line-height: 1.5;
}

/* --- Admission table --------------------------------------------------- */

.ca-rates { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }

.ca-rates__head,
.ca-rates__row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 8px;
  align-items: center;
}

.ca-rates__head {
  padding-inline: 4px;
  font-family: var(--ca-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ca-faint);
}
.ca-rates__head span + span { text-align: right; }

.ca-rates__row {
  background: var(--ca-cream);
  border: 1px solid var(--ca-hairline);
  border-radius: var(--ca-r-sm);
  padding: 14px;
  font-size: var(--ca-text-base);
}

.ca-rates__age { font-weight: 600; color: var(--ca-ink); }
.ca-rates__note { font-size: var(--ca-text-xs); color: var(--ca-teal); margin-top: 2px; }
.ca-rates__price {
  text-align: right;
  font-family: var(--ca-font-display);
  font-weight: 700;
  color: var(--ca-ink);
}

/* --- Specials ---------------------------------------------------------- */

.ca-special__headline {
  font-family: var(--ca-font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--ca-orange);
  letter-spacing: var(--ca-tracking-tight);
}
.ca-special__detail { color: var(--ca-muted); font-size: 14px; margin-top: 6px; }

/* --- Membership "coming soon" ------------------------------------------ */

.ca-coming-soon {
  background: var(--ca-sand);
  border: 1px solid rgba(242, 103, 43, 0.25);
  border-radius: var(--ca-r-md);
  padding: clamp(20px, 3vw, 26px);
  text-align: center;
}
.ca-coming-soon p {
  color: var(--ca-body);
  font-size: var(--ca-text-base);
  line-height: 1.6;
  max-width: 46ch;
  margin-inline: auto;
}

/* --- Sticky action bar -------------------------------------------------- */

.ca-actionbar {
  position: fixed;
  bottom: 0; left: 0;
  z-index: var(--ca-z-sticky);
  width: 100%;
  background: color-mix(in srgb, var(--ca-cream) 95%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--ca-hairline-mid);
}
.ca-actionbar__inner {
  max-width: 640px;
  margin-inline: auto;
  padding: 10px clamp(12px, 3vw, 20px);
  display: flex;
  gap: 10px;
}
.ca-actionbar__call {
  flex: none;
  width: 46px;
  padding: 12px 0;
  font-size: 18px;
}
.ca-actionbar__book { flex: 1; padding: 12px; }

/* --- Locations archive -------------------------------------------------- */

.ca-loc-card { display: flex; flex-direction: column; gap: 12px; }
.ca-loc-card__meta { color: var(--ca-muted); font-size: 14px; }
.ca-loc-card__actions { margin-top: auto; display: flex; gap: 8px; }
.ca-loc-card__actions > * { flex: 1; }

.ca-loc-state-heading {
  font-family: var(--ca-font-mono);
  font-size: var(--ca-text-xs);
  letter-spacing: var(--ca-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ca-orange-dark);
  margin: 32px 0 14px;
}

/* --- Locator results ---------------------------------------------------- */

/*
 * The list scrolls itself.
 *
 * It used to rely on the dialog being a flex column and the panel inside it
 * shrinking — which is the textbook pattern, and which I could not get to
 * actually scroll here. An explicit height on the list does not depend on how
 * anything above it is laid out, so there is nothing to get wrong.
 *
 * It also keeps the search box and "Use my location" in view while you scroll
 * the stores, which the previous arrangement did not.
 */
.ca-locator__results {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;

  /*
   * Sized so the list can never push the dialog past its own 88vh cap — the
   * head, search box and note above it come to roughly 340px. That way the
   * list's scrollbar is always the one that moves, on a laptop and on a short
   * window alike, rather than the two of them taking turns.
   */
  max-height: clamp(200px, calc(88vh - 340px), 520px);
  overflow-y: auto;
  /* Reaching the end should not start scrolling the page behind the dialog. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  /* Room for the scrollbar so it does not sit on top of the buttons. */
  padding-right: 4px;
  scrollbar-width: thin;
}


/* ==========================================================================
   Always-visible panels
   Hours, admission and specials are no longer collapsed, so they need the
   same card treatment the accordions had.
   ========================================================================== */

.ca-panel {
  background: var(--ca-white);
  border: 1px solid var(--ca-hairline-mid);
  border-radius: 18px;
  padding: var(--ca-panel-pad);
  margin-bottom: 14px;
  box-shadow: var(--ca-shadow-sm);
}

.ca-panel--accent {
  border-color: var(--ca-orange-line);
  background: linear-gradient(180deg, var(--ca-peach), var(--ca-white));
}

.ca-panel__title {
  font-family: var(--ca-font-display);
  font-weight: 700;
  font-size: clamp(18px, 3vw, 24px);
  letter-spacing: var(--ca-tracking-tight);
  margin: 0 0 16px;
}

.ca-panel__image {
  width: 100%;
  height: auto;
  border-radius: var(--ca-r-md);
  margin-bottom: 18px;
}

.ca-note--mono { font-family: var(--ca-font-mono); }
.ca-disclaimer { max-width: 70ch; margin-top: 22px; }

/* --- Hours table -------------------------------------------------------- */

.ca-hours {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 14px;
}

.ca-hours__row { border-bottom: 1px solid var(--ca-hairline); }
.ca-hours__row:last-child { border-bottom: 0; }

/* Today's row is tinted and bolded so the answer to "are they open now" is
   findable without reading the whole table. */
.ca-hours__row.is-today {
  background: var(--ca-teal-tint);
}
.ca-hours__row.is-today .ca-hours__day,
.ca-hours__row.is-today .ca-hours__time { font-weight: 700; color: var(--ca-ink); }

.ca-hours__day,
.ca-hours__time {
  padding: 11px 12px;
  font-size: var(--ca-text-base);
  text-align: left;
}
.ca-hours__day { font-weight: 500; color: var(--ca-body); }
.ca-hours__time { text-align: right; color: var(--ca-body); font-variant-numeric: tabular-nums; }

.ca-hours__today {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--ca-r-pill);
  background: var(--ca-teal);
  color: var(--ca-white);
  font-family: var(--ca-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
}

.ca-hours__closed { color: var(--ca-faint); }

@media (max-width: 520px) {
  .ca-hours__day, .ca-hours__time { padding: 9px 6px; font-size: 14px; }
}

/* Hours panel header carries the live status pill, so the badge and the table
   it refers to are read together rather than at opposite ends of the page. */
.ca-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.ca-panel__head .ca-panel__title { margin: 0; }

/* Hidden only when there is genuinely nothing to report. */
.ca-status[data-state="unknown"] { display: none; }

.ca-hours__unset {
  background: var(--ca-sand);
  border-radius: var(--ca-r-sm);
  padding: 14px 16px;
  margin: 0;
  color: var(--ca-body);
  font-size: var(--ca-text-base);
}.ca-special--flyer {
  border: 1px solid var(--ca-hairline);
  padding: 0;
  background: var(--ca-white);
  box-shadow: var(--ca-shadow-sm);
  margin: 0;
  border-radius: var(--ca-r-md);
  overflow: hidden;
}

/* Give a lone flyer more room than a three-across grid would allow. */
.ca-specials:has(> .ca-special--flyer:only-child) { --ca-min: 100%; }
@media (min-width: 700px) {
  .ca-specials:has(> .ca-special--flyer:only-child) .ca-special--flyer {
    max-width: 520px;
    margin-inline: auto;
  }
}

/* --- Q&A head and popular searches -------------------------------------- */

.ca-qa__head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.ca-qa__mascot { width: 46px; height: auto; flex: none; }
.ca-qa__head .ca-eyebrow { margin-bottom: 0; }

.ca-qa__suggest-label {
  margin: 16px 0 8px;
  font-family: var(--ca-font-mono);
  font-size: var(--ca-text-xs);
  letter-spacing: var(--ca-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ca-faint);
}

/* --- Locator head and today's hours -------------------------------------- */

.ca-locator__head { display: flex; align-items: center; gap: 12px; }
.ca-locator__mascot { width: 48px; height: auto; flex: none; }
.ca-locator__head .ca-modal__title { margin: 0; }

/* Hours stack one range per line — easier to scan than a dot-separated run. */
.ca-loc-info__hours-line {
  display: block;
  font-variant-numeric: tabular-nums;
}
.ca-loc-info__hours-line + .ca-loc-info__hours-line { margin-top: 3px; }

/* Mascot reads as a badge rather than a cut-out. */
.ca-qa__mascot,
.ca-locator__mascot {
  border-radius: 50%;
  background: var(--ca-sand);
  object-fit: cover;
  aspect-ratio: 1;
}

/* Q&A answers are always visible now; the question is a heading, not a button. */
.ca-qa__item {
  border: 1px solid var(--ca-hairline-mid);
  border-radius: 14px;
  overflow: hidden;
  background: var(--ca-white);
}.ca-qa__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 18px 0;
  background: var(--ca-cream);
  cursor: pointer;
  font-size: var(--ca-text-base);
  font-weight: 700;
  color: var(--ca-ink);
  list-style: none;
  margin: 0;
  font-family: var(--ca-font-display);
}.ca-qa__answer {
  padding: 8px 18px 16px;
  background: var(--ca-white);
  color: var(--ca-muted);
  font-size: 14.5px;
  line-height: 1.55;
}

/* --- Q&A: search-led ----------------------------------------------------- */

/*
 * Before JavaScript runs, every answer is visible — that is what keeps the
 * content indexable and usable without scripts. Once the box becomes
 * interactive the list collapses and the search drives it.
 */
.ca-qa.is-interactive .ca-qa__list { margin-top: 12px; }

.ca-qa__prompt {
  margin: 16px 0 0;
  padding: 16px 18px;
  background: var(--ca-tint);
  border-radius: 14px;
  color: var(--ca-muted);
  font-size: 14.5px;
  line-height: 1.5;
}

.ca-qa__item[hidden] { display: none; }

/* --- Accordion actions --------------------------------------------------- */

/*
 * Buttons inside an expandable section are the point of the section, so they
 * are centred rather than left-hanging under a paragraph.
 */
.ca-accordion__body .ca-btn-row {
  justify-content: center;
  margin-top: 20px;
}

.ca-accordion__body > .ca-btn,
.ca-accordion__body > a.ca-btn,
.ca-accordion__body > button.ca-btn {
  display: block;
  width: fit-content;
  margin: 20px auto 0;
}

.ca-accordion__body .ca-coming-soon .ca-btn { margin-inline: auto; }

/* --- Party package table -------------------------------------------------- */

/*
 * Reuses the admission table so the two read as the same thing. The two-column
 * variant is for stores that price per guest rather than by day.
 */
.ca-rates--party .ca-rates__age { font-size: var(--ca-text-lg); }
.ca-rates--party .ca-rates__note {
  color: var(--ca-muted);
  font-size: 13px;
  line-height: 1.45;
  margin-top: 4px;
}

.ca-rates--two .ca-rates__head,
.ca-rates--two .ca-rates__row {
  grid-template-columns: 1.7fr 1fr;
}.ca-locator__row {
  background: var(--ca-white);
  border: 1px solid var(--ca-hairline);
  border-radius: var(--ca-r-md);
  padding: 16px 18px;
  position: relative;
}

/* The name reads as a heading first and a link second. */
.ca-loc-card__link {
  color: var(--ca-ink);
  text-decoration: none;
}
.ca-loc-card__link:hover { color: var(--ca-orange-dark); text-decoration: underline; }.ca-locator__dist {
  font-family: var(--ca-font-display);
  font-size: var(--ca-text-base);
  color: var(--ca-ink);
  position: absolute;
  top: 16px;
  right: 18px;
  font-weight: 700;
}.ca-locator__today {
  margin-top: 4px;
  font-family: var(--ca-font-body);
  font-size: var(--ca-text-base);
  color: var(--ca-body);
  font-weight: 700;
}.ca-loc-card__name {
  font-size: 20px;
  margin: 0;
  padding-right: 78px;
}/*
 * Scrolls on its own, like the review strip: the track holds the cards twice
 * and slides by half its width, which loops without a visible seam.
 */
.ca-specials {
  align-items: start;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--ca-edge-fade), #000 calc(100% - var(--ca-edge-fade)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--ca-edge-fade), #000 calc(100% - var(--ca-edge-fade)), transparent 100%);
}

/* Full width when static, so a single special centres. */
.ca-specials__track {
  display: flex;
  width: 100%;
  gap: 16px;
  justify-content: center;
  padding-block: 4px 10px;
}

.ca-specials__track.is-scrolling {
  width: max-content;
  justify-content: flex-start;
  /* Duration scales with the card count, so the speed does not. */
  animation: ca-marquee calc(var(--ca-marquee-items, 6) * var(--ca-marquee-per-item)) linear infinite;
}

/* You cannot read a card that is moving away from you. */
.ca-specials:hover .ca-specials__track,
.ca-specials:focus-within .ca-specials__track { animation-play-state: paused; }

.ca-specials__track > * { flex: 0 0 min(300px, 78vw); }

@media (prefers-reduced-motion: reduce) {
  .ca-specials__track.is-scrolling {
    animation: none;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .ca-specials__track > * { scroll-snap-align: start; }
}

.ca-special {
  background: var(--ca-white);
  border: 1px solid var(--ca-hairline);
  border-radius: var(--ca-r-md);
  overflow: hidden;
  box-shadow: var(--ca-shadow-sm);
  display: flex;
  flex-direction: column;
}

.ca-special__link { color: inherit; text-decoration: none; display: block; }
.ca-special__body { padding: 16px 18px; }.ca-special__image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--ca-r-md);
  box-shadow: var(--ca-shadow-md);
}

/* ==========================================================================
   Location hero

   The prototype's arrangement: status pill, store name and catchphrase as
   ordinary text, then the gallery as a framed panel beneath them.

   Deliberately not the homepage hero. There the copy is overlaid on the photo;
   here it sits above it. Same components, different arrangement — so this has
   its own block rather than the homepage hero growing a second mode.
   ========================================================================== */

.ca-loc-hero__status { margin-bottom: 14px; }

.ca-loc-hero__name {
  margin: 0 0 6px;
  font-family: var(--ca-font-display);
  font-size: clamp(32px, 7vw, 60px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: var(--ca-tracking-tightest);
  color: var(--ca-ink);
}.ca-loc-hero__phrase {
  font-family: var(--ca-font-display);
  font-weight: 600;
  font-size: clamp(16px, 2.4vw, 20px);
  color: var(--ca-orange-dark);
  margin: 0 0 18px;
}

/* --- Gallery -------------------------------------------------------------- */

.ca-loc-gallery {
  position: relative;
  isolation: isolate;
  aspect-ratio: 16 / 10;
  border-radius: var(--ca-r-xl);
  overflow: hidden;
  background: var(--ca-peach);
  box-shadow: var(--ca-shadow-lg);
}

/*
 * Slides are stacked and crossfaded rather than scrolled, which is what the
 * prototype does — opacity per slide, one transition.
 */
.ca-loc-gallery__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--ca-dur-slow) var(--ca-ease);
}
.ca-loc-gallery__slide.is-active { opacity: 1; }

.ca-loc-gallery__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 65%, rgba(20, 25, 43, 0.5) 100%);
}

/*
 * Mascot in the corner, at the same inset the eyebrow uses on the marketing
 * heroes, so the two corners of a page agree with each other.
 */
.ca-loc-gallery__mascot {
  position: absolute;
  top: var(--ca-corner-inset);
  right: var(--ca-corner-inset);
  z-index: 3;
  width: clamp(70px, 10vw, 130px);
  height: auto;
  filter: drop-shadow(0 10px 14px rgba(20, 25, 43, 0.28));
  pointer-events: none;
}

.ca-loc-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 248, 238, 0.85);
  backdrop-filter: blur(6px);
  color: var(--ca-ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.ca-loc-gallery__nav--prev { left: 12px; }
.ca-loc-gallery__nav--next { right: 12px; }
.ca-loc-gallery__nav:hover { background: var(--ca-cream); }

.ca-loc-gallery__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 7px;
}

.ca-loc-gallery__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 248, 238, 0.55);
  cursor: pointer;
}
.ca-loc-gallery__dot[aria-current="true"] {
  background: var(--ca-cream);
  transform: scale(1.25);
}

@media (max-width: 700px) {
  .ca-loc-gallery { aspect-ratio: 4 / 3; }
  .ca-loc-gallery__nav { width: 34px; height: 34px; font-size: 18px; }
}

/* Corner placement for the pill lives with the other two, in home.css. */