/* fl718-santa-fe-mobile.css — Santa Fe, New Mexico mobile additive styles
   Version: 1.0.0
   Last updated: 2026-05-18
   Body class: fl718-location-santa-fe
   All rules inside @media (max-width: 768px) — additive overrides only */

@media (max-width: 768px) {

  /* ------------------------------------------------------------
     BODY — iOS 15 Safari overflow-x fallback
     overflow-x: hidden before clip (Safari < 16 fallback).
     Safe on mobile — no position:sticky elements.
     ------------------------------------------------------------ */
  body.fl718-location-santa-fe {
    overflow-x: hidden;
    overflow-x: clip;
  }

  /* ------------------------------------------------------------
     HERO — full viewport height on mobile
     Not calc(100vh + 56px) on mobile — the fixed nav is hidden
     behind the menu curtain. 100vh fills the frame correctly.
     overflow: hidden fallback before clip — iOS 15.
     ------------------------------------------------------------ */
  body.fl718-location-santa-fe .fl718-sf-hero {
    height: 100vh;
    margin-top: 0;
    overflow: hidden;
    overflow: clip;
  }

  body.fl718-location-santa-fe .fl718-sf-hero__image {
    object-position: 28% 50%;
    opacity: 0;
  }

  /* Veil-hole: seed CSS transform to prevent 220vmax circle showing at first paint */
  body.fl718-location-santa-fe .fl718-sf-hero__veil-hole {
    transform: translate(-50%, -50%) scale(0);
    transform-origin: center center;
  }

  /* Hero title: desktop clamp resolves to ~18px at 375px — too small */
  body.fl718-location-santa-fe .fl718-sf-hero__title {
    font-size: clamp(1.8rem, 8vw, 3.0rem);
  }

  /* Hero subtitle: 14px floor */
  body.fl718-location-santa-fe .fl718-sf-hero__subtitle {
    font-size: 0.875rem;
  }

  /* Hero text: 85vw max, tighter padding for 375px */
  body.fl718-location-santa-fe .fl718-sf-hero__text {
    max-width: 85vw;
    padding: clamp(1.2rem, 5vw, 2rem) 0 0 clamp(1rem, 5vw, 1.8rem);
  }

  /* ------------------------------------------------------------
     GRID — 1-col at ≤480px already handled in desktop CSS.
     These rules reinforce for the mobile template specifically.
     ------------------------------------------------------------ */
  body.fl718-location-santa-fe .fl718-sf-item {
    overflow: hidden;
    overflow: clip;
  }

  /* ------------------------------------------------------------
     LIGHTBOX — iOS scroll lock + overscroll
     Close button: position:fixed so it stays thumb-reachable
     even after iOS scroll position shifts.
     ------------------------------------------------------------ */
  body.fl718-location-santa-fe .fl718-sf-ap-close-btn {
    position: fixed;
    top: clamp(1rem, 2vh, 1.6rem);
    right: clamp(1rem, 2vw, 1.6rem);
  }

  body.fl718-location-santa-fe .fl718-sf-ap-image {
    touch-action: pan-y pinch-zoom;
  }

  body.fl718-location-santa-fe .fl718-sf-ap-dark,
  body.fl718-location-santa-fe .fl718-sf-ap-stage,
  body.fl718-location-santa-fe .fl718-sf-ap-ui {
    overscroll-behavior: contain;
  }

  /* ------------------------------------------------------------
     AFTER-CONTENT — tap target padding on links
     ------------------------------------------------------------ */
  body.fl718-location-santa-fe .fl718-sf-after__link {
    padding: 13px 0;
  }

} /* end @media (max-width: 768px) */

/* ------------------------------------------------------------
   NO-JS MOBILE — hero image visible without JS
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  body.fl718-location-santa-fe:not(.fl718-js-loaded) .fl718-sf-hero__image {
    opacity: 1;
  }
}

/* ------------------------------------------------------------
   REDUCED MOTION — mobile hero image visible immediately
   ------------------------------------------------------------ */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  body.fl718-location-santa-fe .fl718-sf-hero__image {
    opacity: 1 !important;
  }
}