/* ============================================================
   CUSTOM — Per-store overrides for Template TL (Lantern)
   Add store-specific tweaks here. Loaded last so it wins
   over theme.css and style.css.
   ============================================================ */

/* Layout for the location / delivery boxes now lives in style.css
   (Lantern template). Keep only store-specific tweaks below. */

/* ---------- Become A Partner page: embedded iOrders form ---------- */
.partner-form-embed {
  max-width: 800px;
  margin: 2.5rem auto 0;
  padding: 0.75rem;
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

.partner-form-embed iframe {
  display: block;
  width: 100%;
  min-height: 1100px;
  border: 0;
  border-radius: calc(var(--r-lg) - 4px);
}

/* ---------- about page: single-photo variant of .story ----------
   .story-collage is a two-image collage; this page has one archival
   photo, so .story-photo stands in for it inside the same grid. */
.story-photo {
  margin: 0;
}

.story-photo img {
  width: 100%;
  max-width: 420px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}

.story-photo figcaption {
  margin-top: 0.85rem;
  max-width: 420px;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--muted);
}

#our-story .story-copy p {
  margin-bottom: 1.1rem;
  color: var(--muted);
}

#our-story .story-copy p:last-child {
  margin-bottom: 0;
}

/* ---------- Salsa Whisperer retail badge (about + our-food + footer) ----------
   Wrapped in a white card so the orange logo reads as a clean badge rather
   than a raw rectangle floating on top of a photo or the parchment texture. */
.salsa-whisperer-badge {
  display: inline-flex;
  margin-top: 1.1rem;
  padding: 0.6rem 0.8rem;
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  transition: transform var(--t-move) ease, box-shadow var(--t-move) ease;
}

.salsa-whisperer-badge:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.salsa-whisperer-badge img {
  display: block;
  width: 150px;
  height: auto;
  border-radius: 4px;
}

.foot-salsa .salsa-whisperer-badge {
  margin-top: 0.6rem;
  padding: 0.5rem 0.65rem;
}

.foot-salsa .salsa-whisperer-badge img {
  width: 120px;
}

/* ---------- home FAQ: questions are semantic h3 headings ----------
   Purely a normaliser: keeps the existing <summary> look untouched. */
.qa summary h3 {
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
  text-wrap: pretty;
}

/* ---------- home FAQ: internal links to tag pages ---------- */
.qa .qa-body a {
  color: var(--chili);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--chili) 35%, transparent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.qa .qa-body a:hover,
.qa .qa-body a:focus-visible {
  color: var(--chili-dark);
  text-decoration-color: currentColor;
}

/* long neighbourhood / dish lists (8+ items) read better in two columns */
.qa .qa-body ul:has(li:nth-child(8)) {
  columns: 2;
  column-gap: 1.5rem;
}

.qa .qa-body ul:has(li:nth-child(8)) li {
  break-inside: avoid;
}

@media (max-width: 560px) {
  .qa .qa-body ul:has(li:nth-child(8)) {
    columns: 1;
  }
}

/* ---------- home "find us" box: map on the left, details on the right ---------- */
.find-us .location-box__details {
  order: 0;
}

/* ---------- city + cuisine landing page "find us" box:
   map on the left, address / contact details on the right ---------- */
#location .location-box__details {
  order: 0;
}

/* ---------- our food: gallery captions are semantic h3 headings ----------
   Purely a normaliser: keeps the existing caption look untouched. */
.gallery-wall figcaption h3 {
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

/* keyboard users get the same reveal as hover */
.gallery-wall figure:focus-within figcaption {
  opacity: 1;
  transform: none;
}

/* dish page without a hero photo (burritos, photo pending) */
.dish-hero-container--no-image {
  grid-template-columns: 1fr !important;
}

/* ---------- home "inside Habaneros": restaurant photo mosaic ----------
   Dark band so the warm interior shots glow; 4-col mosaic on desktop
   (landscape a/d/e span 2 cols, portrait b/c span 1), 2-col on phones. */
.inside {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}

.inside .sec-head h2 {
  --wipe-ink: #fff;
  color: #fff;
}

/* dark surface: white label + ring, same as the hero / cta band */
.inside .btn-line {
  color: #fff;
  --ring: rgba(255, 255, 255, 0.85);
}

.inside-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(8rem, 14vw, 12.5rem);
  gap: clamp(0.6rem, 1.2vw, 1rem);
}

.inside-grid figure {
  position: relative;
  margin: 0;
  grid-row: span 2;
  overflow: hidden;
  border-radius: var(--r-md);
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}

.inside-grid.is-in > figure {
  opacity: 1;
  transform: none;
}

.inside-grid.is-in > :nth-child(2) { transition-delay: 0.08s; }
.inside-grid.is-in > :nth-child(3) { transition-delay: 0.16s; }
.inside-grid.is-in > :nth-child(4) { transition-delay: 0.24s; }
.inside-grid.is-in > :nth-child(5) { transition-delay: 0.32s; }

.inside-a,
.inside-d,
.inside-e {
  grid-column: span 2;
}

.inside-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}

.inside-grid figure:hover img {
  transform: scale(1.04);
}

.inside-grid figcaption {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  padding: 0.35rem 0.8rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--canvas);
  border-radius: var(--r-pill);
}

@media (max-width: 900px) {
  .inside .sec-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 600px) {
  .inside-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 7.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .inside-grid figure,
  .inside-grid img {
    transition: none;
  }
  .inside-grid figure:hover img {
    transform: none;
  }
}