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

/* ============================================================
   SHARED LOCATION CARDS (multi-location) — created by the Home
   agent. ONE block for the whole site: home, menu chooser,
   locations hub, contact page and location pages all reuse
   these classes. Do not duplicate; extend here only.
   Uses the template tokens from style.css/theme.css
   (--card, --sand, --chili, --chili-soft, --r-*, --shadow-*).

   Markup:
   <section class="sq-locations" id="locations">
     <div class="wrap">
       .sec-head (kicker + h2)  /  p.lede.sq-locations__lede
       <div class="sq-loc-cards">
         <article class="sq-loc-card" id="loc-<slug>">
           <img class="sq-loc-card__img">
           <div class="sq-loc-card__map"><iframe></iframe></div>  (optional, contact page)
           <div class="sq-loc-card__body">
             <span class="sq-loc-card__tag">  <h3 class="sq-loc-card__name">
             <ul class="sq-loc-card__info">
               <li><span class="sq-loc-card__ico">svg</span><a|span>text<small>sub</small></a|span></li>
             </ul>
             <div class="sq-loc-card__actions"> .btn / .btn-line / .btn--butter ... </div>
   Modifier: .sq-locations--sand = warm sand section background.
   ============================================================ */

.sq-locations {
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}

.sq-locations--sand {
  background: var(--sand);
}

.sq-locations .sec-head {
  margin-bottom: 1rem;
}

.sq-locations__lede {
  margin-bottom: 2.25rem;
}

.sq-loc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}

.sq-loc-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: var(--r-xl);
  padding: 0.9rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sq-loc-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.sq-loc-card__img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-lg);
  background: var(--sand);
}

.sq-loc-card__map {
  position: relative;
  margin-top: 0.9rem;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--sand);
}

.sq-loc-card__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.sq-loc-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  flex: 1;
  padding: 1.15rem 0.5rem 0.5rem;
}

.sq-loc-card__tag {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chili);
}

.sq-loc-card__name {
  font-size: clamp(1.35rem, 2.2vw, 1.6rem);
  font-weight: 800;
}

.sq-loc-card__info {
  display: grid;
  gap: 0.7rem;
}

.sq-loc-card__info li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.97rem;
  font-weight: 600;
  line-height: 1.4;
}

.sq-loc-card__info a:hover {
  color: var(--chili-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sq-loc-card__info small {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--muted);
}

.sq-loc-card__ico {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--chili-soft);
  color: var(--chili-dark);
  font-size: 0.95rem;
}

.sq-loc-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: auto;
  padding-top: 0.6rem;
}

.sq-loc-card__actions .btn,
.sq-loc-card__actions .btn-line {
  flex: 1 1 9.5rem;
  padding: 0.9rem 1.25rem;
}

@media (max-width: 560px) {
  .sq-loc-card__actions .btn,
  .sq-loc-card__actions .btn-line {
    flex-basis: 100%;
  }
}

/* ===================== end SHARED LOCATION CARDS ===================== */

/* TF stretch fix (Brandy re-check of 650ce0e): dish heroes + explore banners
   had a fixed height with no ratio → squashed. Placed BEFORE the logo-card
   rule (same specificity) so contain still wins on the Party Platter hero. */
.dish-hero-image img { height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.explore__image img { height: auto; }

/* Rebrand (Siomai Queen): logo is ~1.1:1 (500x456), not a wide wordmark → size by height */
.brand img { width: auto; height: 64px; }
.foot-brand img { width: auto; height: 96px; }

/* Logo gap cards (no owner photo yet: Party Platter, Beef Goto) show the full
   logo, never cropped: contain on the logo's cream background. */
img[src*="popular-dishes/party-platter.webp"],
img[src*="gallery/7.webp"],
img[src*="gallery/9.webp"] {
  object-fit: contain;
  background: #fcf3e8;
}