/* ============================================
   Sub-location detail page (template for all sub-locations)
   ============================================
   Pattern: Bootstrap classes do as much as possible;
   this file holds only what Bootstrap utilities can't:
   - CSS-variable overrides for cream theme
   - Pseudo-elements, @keyframes, @media queries
   - :hover / transition effects
   - Custom CSS Grid (Bootstrap d-grid has no template)
   ============================================ */

:root {
  /* Override Bootstrap variables — Bootstrap utilities now use brand palette */
  --bs-danger: #cc0000;
  --bs-danger-rgb: 204, 0, 0;
  --bs-danger-bg-subtle: #ffe5e5;
  --bs-dark: #1a1a1a;
  --bs-dark-rgb: 26, 26, 26;
  --bs-border-color: #e5dfd4;
  --bs-border-radius-xl: 1.25rem; /* rounded-4 → 20px (was 16px) */

  /* Brand-specific shades Bootstrap has no equivalent for */
  --sl-cream: #faf7f2;
  --sl-cream-deep: #f0ebe3;
  --sl-red-dark: #a00000;
}

/* Custom cream backgrounds — Bootstrap has no equivalent */
.sl-bg-cream { background: var(--sl-cream); }
.sl-bg-cream-deep { background: var(--sl-cream-deep); }

/* Tune Bootstrap .card so it matches the cream theme out of the box */
.card {
  --bs-card-border-color: var(--bs-border-color);
  --bs-card-border-radius: var(--bs-border-radius-xl);
  --bs-card-spacer-y: 1.5rem;
  --bs-card-spacer-x: 1.5rem;
}

/* Open-now banner overlay pattern */
.sl-banner-open::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.06) 0 12px,
    transparent 12px 24px
  );
  pointer-events: none;
}

/* Pulse animation */
@keyframes sl-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
  70% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
.sl-pulse-dot { animation: sl-pulse 1.6s infinite; }

/* Responsive borders on meta cells — needs descendant + @media */
@media (min-width: 768px) {
  .sl-meta-card .sl-meta-cell { border-right: 1px solid var(--bs-border-color); }
  .sl-meta-card .sl-meta-cell:last-child { border-right: none; }
}
@media (max-width: 767px) {
  .sl-meta-card .sl-meta-cell { border-bottom: 1px solid var(--bs-border-color); }
  .sl-meta-card .sl-meta-cell:last-child { border-bottom: none; }
}

/* Buttons — hover + transitions */
.sl-btn { transition: transform .15s, box-shadow .2s, background .2s, border-color .15s; }
.sl-btn:hover { transform: translateY(-1px); box-shadow: var(--bs-box-shadow); }
.sl-btn-red:hover { background: var(--sl-red-dark); }
.sl-btn-dark:hover { background: #000; }

/* Tiles */
.sl-tile { transition: transform .15s, box-shadow .2s, border-color .2s; }
.sl-tile:hover { transform: translateY(-2px); border-color: var(--bs-danger); box-shadow: var(--bs-box-shadow-lg); }
.sl-tile-icon { transition: background .15s, color .15s; }
.sl-tile:hover .sl-tile-icon { background: var(--bs-danger); color: #fff; }

/* Reviews */
.sl-review { transition: transform .15s, box-shadow .2s, border-color .2s; }
.sl-review:hover { transform: translateY(-2px); box-shadow: var(--bs-box-shadow); }

/* Timeline steps */
.sl-step { transition: transform .15s, box-shadow .2s, border-color .2s; }
.sl-step:hover { transform: translateY(-2px); box-shadow: var(--bs-box-shadow); }

/* FAQ accordion */
.sl-faq-btn { transition: background .15s; }
.sl-faq-btn:hover { background: rgba(204, 0, 0, 0.04); }
.sl-faq-chevron { transition: transform .25s ease; }
.sl-faq-chevron.sl-rotated { transform: rotate(180deg); }

/* Service pills (commented section) */
.sl-svc-pill { transition: background .15s, border-color .15s, color .15s; cursor: pointer; }
.sl-svc-pill:hover { background: #fff; border-color: var(--bs-danger); color: var(--bs-danger); }

/* Inside-our-ER gallery — Bootstrap d-grid doesn't expose grid-template */
.sl-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 240px 240px;
  gap: 12px;
}
.sl-gallery > .sl-gallery-cell { transition: box-shadow .2s; }
.sl-gallery > .sl-gallery-cell:nth-child(1) { grid-row: 1 / span 2; }
.sl-gallery > .sl-gallery-cell:hover { box-shadow: var(--bs-box-shadow); }
.sl-gallery > .sl-gallery-cell img { transition: transform .5s ease; }
.sl-gallery > .sl-gallery-cell:hover img { transform: scale(1.06); }
@media (max-width: 768px) {
  .sl-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 280px 180px 180px; }
  .sl-gallery > .sl-gallery-cell:nth-child(1) { grid-row: 1; grid-column: 1 / span 2; }
}

/* CTA row — stack full-width on small screens so buttons line up uniformly
   instead of wrapping with different widths. */
@media (max-width: 575px) {
  .sl-cta-row {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }
  .sl-cta-row > * { width: 100%; }
}

/* Stacked CTA buttons with equal heights on mobile — used when one button's
   label wraps to 2 lines and the other is single-line, which otherwise
   produces a tall/short mismatch in the column. */
@media (max-width: 575px) {
  .sl-cta-equal-h {
    display: grid !important;
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
  }
}

/* Hero grid — title, image, rest are three named areas so the image can sit
   between title and rest on mobile while still occupying the right column
   across two rows on desktop. */
.sl-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "title" "image" "rest";
  row-gap: 1.5rem;
}
.sl-hero-grid > .sl-hero-title { grid-area: title; }
.sl-hero-grid > .sl-hero-image { grid-area: image; }
.sl-hero-grid > .sl-hero-rest { grid-area: rest; }
@media (min-width: 992px) {
  .sl-hero-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "title image"
      "rest  image";
    column-gap: 3rem;
    row-gap: 1.5rem;
    align-items: center;
  }
  .sl-hero-grid > .sl-hero-title { align-self: end; }
  .sl-hero-grid > .sl-hero-rest { align-self: start; }
}

/* Founders section — hover effect on each block + photo zoom */
.sl-founder > .row {
  transition: background-color .25s ease, transform .25s ease;
}
.sl-founder:hover > .row {
  background-color: var(--sl-cream);
  transform: translateY(-2px);
}
.sl-founder-photo {
  overflow: hidden;
}
.sl-founder-photo img {
  transition: transform .6s ease;
}
.sl-founder:hover .sl-founder-photo img {
  transform: scale(1.06);
}

/* Founders divider — single tapered gradient line */
.sl-founder-divider {
  align-self: stretch;
  width: 1px;
  margin: 2.5rem 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(204, 0, 0, 0.28) 50%,
    transparent 100%
  );
}

/* Map info card — floats over the map on md+, sits below it on mobile so
   the address + rating + Directions button get full width instead of
   being squeezed into a narrow absolute-positioned strip. */
.sl-map-overlay {
  position: static;
  margin-top: 12px;
}
@media (min-width: 768px) {
  .sl-map-overlay {
    position: absolute;
    bottom: 14px;
    left: 14px;
    right: 14px;
    margin-top: 0;
    z-index: 10;
  }
}