/* site-mobile.css
   Mobile overrides for the three Dune Ridge site variations.
   Because each site is built with inline styles (for Tweak-friendly palette
   swaps), we use !important here to tame things at ≤768px. Scoped to
   [data-site-root] so the canvas chrome isn't affected. */

/* ============ ≤ 820 px : tablet compression ============ */
@media (max-width: 820px) {
  [data-site-root] section,
  [data-site-root] nav,
  [data-site-root] footer {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  /* collapse any two-column grid to single column */
  [data-site-root] [style*="gridTemplateColumns: '1fr 1fr'"],
  [data-site-root] [style*="grid-template-columns: 1fr 1fr"],
  [data-site-root] [style*="gridTemplateColumns: '1fr 1.6fr'"],
  [data-site-root] [style*="gridTemplateColumns: '1fr 1.4fr'"],
  [data-site-root] [style*="gridTemplateColumns: '1.6fr 1fr'"],
  [data-site-root] [style*="gridTemplateColumns: '1.4fr 1fr'"],
  [data-site-root] [style*="gridTemplateColumns: '1.2fr 1fr'"],
  [data-site-root] [style*="gridTemplateColumns: '1fr 1.2fr'"],
  [data-site-root] [style*="gridTemplateColumns: '1.4fr 1fr'"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  [data-site-root] [style*="gridTemplateColumns: 'repeat(3"],
  [data-site-root] [style*="gridTemplateColumns: 'repeat(4"],
  [data-site-root] [style*="gridTemplateColumns: 'repeat(5"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}

/* ============ ≤ 640 px : phone ============ */
@media (max-width: 640px) {
  [data-site-root] section,
  [data-site-root] nav,
  [data-site-root] footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }
  /* All multi-column grids go single */
  [data-site-root] [style*="gridTemplateColumns: 'repeat(3"],
  [data-site-root] [style*="gridTemplateColumns: 'repeat(4"],
  [data-site-root] [style*="gridTemplateColumns: 'repeat(5"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
  [data-site-root] [style*="gridTemplateColumns: '340px"],
  [data-site-root] [style*="gridTemplateColumns: '1fr 340px"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* Collapse display headings */
  [data-site-root] h1 { font-size: clamp(44px, 12vw, 72px) !important; line-height: 1 !important; letter-spacing: -1.5px !important; }
  [data-site-root] h2 { font-size: clamp(36px, 9vw, 56px) !important; line-height: 1.02 !important; letter-spacing: -1px !important; }
  [data-site-root] h3 { font-size: clamp(24px, 6vw, 36px) !important; }
  /* Clamp anything explicitly sized > 48px on desktop */
  [data-site-root] [style*="fontSize: 180"],
  [data-site-root] [style*="fontSize: 168"],
  [data-site-root] [style*="fontSize: 160"],
  [data-site-root] [style*="fontSize: 128"],
  [data-site-root] [style*="fontSize: 112"],
  [data-site-root] [style*="fontSize: 104"],
  [data-site-root] [style*="fontSize: 96"],
  [data-site-root] [style*="fontSize: 88"] {
    font-size: clamp(40px, 11vw, 80px) !important;
    letter-spacing: -1.5px !important;
    line-height: 1 !important;
  }
  [data-site-root] [style*="fontSize: 80"],
  [data-site-root] [style*="fontSize: 72"],
  [data-site-root] [style*="fontSize: 68"],
  [data-site-root] [style*="fontSize: 64"] {
    font-size: clamp(34px, 8.5vw, 60px) !important;
    letter-spacing: -1px !important;
    line-height: 1.02 !important;
  }
  [data-site-root] [style*="fontSize: 56"],
  [data-site-root] [style*="fontSize: 52"],
  [data-site-root] [style*="fontSize: 48"],
  [data-site-root] [style*="fontSize: 44"] {
    font-size: clamp(28px, 7vw, 44px) !important;
    letter-spacing: -0.5px !important;
    line-height: 1.05 !important;
  }
  /* Ease the shouting stat numbers */
  [data-site-root] [style*="fontSize: 140"],
  [data-site-root] [style*="fontSize: 200"] {
    font-size: clamp(56px, 16vw, 120px) !important;
    line-height: 1 !important;
  }
  /* Nav adjustments — let links wrap and hide the middle menu on phone */
  [data-site-root] nav {
    flex-direction: column !important;
    gap: 16px !important;
    align-items: flex-start !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  [data-site-root] nav > div:nth-child(2) { display: none !important; }
  /* Hero — drop minimum heights that don't make sense on phone */
  [data-site-root] [style*="minHeight: 960"],
  [data-site-root] [style*="minHeight: 900"],
  [data-site-root] [style*="minHeight: 860"],
  [data-site-root] [style*="minHeight: 820"],
  [data-site-root] [style*="minHeight: 780"],
  [data-site-root] [style*="minHeight: 720"],
  [data-site-root] [style*="minHeight: 700"] {
    min-height: auto !important;
  }
  /* Fixed huge widths collapse */
  [data-site-root] [style*="maxWidth: 980"],
  [data-site-root] [style*="maxWidth: 1080"],
  [data-site-root] [style*="maxWidth: 1120"],
  [data-site-root] [style*="maxWidth: 1200"] {
    max-width: 100% !important;
  }
  /* Give image blocks a reasonable aspect on phone */
  [data-site-root] [style*="aspectRatio: '16/9'"],
  [data-site-root] [style*="aspect-ratio: 16 / 9"] {
    aspect-ratio: 4 / 3 !important;
  }
  /* Reservation modal fits phone */
  [data-site-root] ~ [style*="position: fixed"] > div,
  body > div > [style*="position: fixed"] > div {
    padding: 28px !important;
  }
}

/* Prevent the body from showing horizontal scroll on tiny phones */
@media (max-width: 640px) {
  html, body { overflow-x: hidden; }
}