/* ========================================================
   Zen Yoga & Surf House — responsive overrides
   Inline styles are applied by support.js as React style
   objects, so every grid override needs !important to win.
   ======================================================== */

/* ---- Tablet: dense grids step down ---- */
@media (max-width: 980px) {
  .r-4col   { grid-template-columns: repeat(2, 1fr) !important; }
  .r-3col   { grid-template-columns: repeat(2, 1fr) !important; }
  .r-footer { grid-template-columns: 1fr 1fr !important; gap: 40px !important; }
}

/* ---- Mobile: everything stacks ---- */
@media (max-width: 768px) {
  .r-2col,
  .r-3col,
  .r-4col,
  .r-footer { grid-template-columns: 1fr !important; }

  .r-footer { gap: 36px !important; }

  /* Room rows: always show the photo first, text below */
  .r-room > * { order: 0 !important; }
}

/* ========================================================
   Navigation — hamburger menu on mobile
   ======================================================== */
.nav-burger { display: none; }

@media (max-width: 768px) {
  .nav-burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    color: #34251A;
    user-select: none;
    -webkit-user-select: none;
    border: 1px solid rgba(196, 154, 90, 0.4);
    border-radius: 10px;
    background: rgba(247, 242, 234, 0.6);
  }

  .nav-bar .nav-links {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    background: rgba(247, 242, 234, 0.98);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(196, 154, 90, 0.28);
    padding: 6px 0 16px !important;
    box-shadow: 0 22px 34px -20px rgba(52, 37, 26, 0.45);
  }

  .nav-bar.nav-open .nav-links { display: flex !important; }

  .nav-bar .nav-links > a {
    padding: 14px clamp(20px, 5vw, 64px) !important;
  }

  /* Reserve button (last link) gets a little breathing room */
  .nav-bar .nav-links > a:last-child {
    margin: 12px clamp(20px, 5vw, 64px) 0 !important;
    justify-content: center;
  }
}

/* ---- Small-phone hero tidy-up ---- */
@media (max-width: 560px) {
  .r-hero-h1 { font-size: 34px !important; }
}