/* ==========================================================================
   Klawerjas — Mobile layer
   Loaded AFTER styles.css. Desktop untouched: everything lives in media
   queries. Original rules are scoped to page IDs (#page-home etc.), so
   overrides use :is(#page-...) to match their specificity.

   Breakpoint is 860px to match the existing per-page nav-hide rules
   (`nav:not(.mobile-nav)` at max-width:860px) already in styles.css —
   the hamburger/menu must appear exactly when the desktop nav disappears.
   ========================================================================== */

html { overflow-x: hidden; }

/* ---- Hamburger + mobile menu (all viewports: hidden on desktop) ---- */
.menu-btn { display: none; }
.mobile-menu { display: none; }

@media (max-width: 860px) {
  .menu-btn {
    display: flex; flex-direction: column; justify-content: center; gap: 7px;
    width: 44px; height: 44px; padding: 0 6px;
    background: none; border: 0; cursor: pointer; z-index: 210;
  }
  .menu-btn span {
    display: block; height: 1px; background: var(--brass-light);
    transition: transform .35s var(--ease, ease), opacity .25s ease, width .35s var(--ease, ease);
  }
  .menu-btn span:nth-child(1) { width: 26px; }
  .menu-btn span:nth-child(2) { width: 18px; margin-left: 8px; }
  .menu-btn.open span:nth-child(1) { transform: translateY(4px) rotate(45deg); width: 26px; }
  .menu-btn.open span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); width: 26px; margin-left: 0; }

  .mobile-menu {
    position: fixed; inset: 0; z-index: 200;
    background:
      radial-gradient(120% 90% at 80% 10%, rgba(201,169,105,.12) 0%, rgba(201,169,105,0) 50%),
      var(--green-deep, #1C2620);
    display: flex; flex-direction: column; justify-content: center;
    padding: 0 9vw;
    opacity: 0; pointer-events: none;
    transition: opacity .4s ease;
  }
  .mobile-menu.open { opacity: 1; pointer-events: auto; }
  .mobile-menu .mm-eyebrow {
    font-size: .62rem; letter-spacing: .32em; text-transform: uppercase;
    color: var(--brass-light); margin-bottom: 2rem;
  }
  .mobile-menu a.mm-link {
    font-family: 'Fraunces', serif; font-weight: 300;
    font-size: clamp(1.7rem, 8vw, 2.3rem); line-height: 1.15;
    color: var(--linen-soft, #EDE7D8); text-decoration: none;
    padding: .55rem 0; border-bottom: 1px solid rgba(201,169,105,.16);
    opacity: 0; transform: translateY(14px);
    transition: opacity .5s ease, transform .5s var(--ease, ease);
  }
  .mobile-menu.open a.mm-link { opacity: 1; transform: none; }
  .mobile-menu a.mm-link.active { color: var(--brass-light); font-style: italic; }
  .mobile-menu a.mm-book {
    margin-top: 2.2rem; align-self: flex-start;
    font-size: .72rem; letter-spacing: .26em; text-transform: uppercase;
    color: var(--green-deep); background: var(--brass, #A8823C);
    padding: 1rem 2.2rem; text-decoration: none;
  }
  /* staggered entrance */
  .mobile-menu.open a.mm-link:nth-child(2) { transition-delay: .06s; }
  .mobile-menu.open a.mm-link:nth-child(3) { transition-delay: .11s; }
  .mobile-menu.open a.mm-link:nth-child(4) { transition-delay: .16s; }
  .mobile-menu.open a.mm-link:nth-child(5) { transition-delay: .21s; }
  .mobile-menu.open a.mm-link:nth-child(6) { transition-delay: .26s; }
  .mobile-menu.open a.mm-link:nth-child(7) { transition-delay: .31s; }
  body.menu-lock { overflow: hidden; }
}

/* ---- Global mobile pass (all six pages share these patterns) ---- */
@media (max-width: 860px) {
  /* Header: tighter, book pill hidden (it lives in the menu) */
  :is(#page-home, #page-accommodation, #page-elzeth-art, #page-journal, #page-explore, #page-contact) header {
    padding: 1.05rem 6vw;
  }
  :is(#page-home, #page-accommodation, #page-elzeth-art, #page-journal, #page-explore, #page-contact) header .book-pill {
    display: none;
  }

  /* Section rhythm: roughly half the desktop breathing room */
  :is(#page-home, #page-accommodation, #page-elzeth-art, #page-journal, #page-explore, #page-contact) section {
    padding: 3.4rem 6vw;
  }

  /* Footer */
  :is(#page-home, #page-accommodation, #page-elzeth-art, #page-journal, #page-explore, #page-contact) footer {
    padding: 3rem 6vw 2rem;
  }
  :is(#page-home, #page-accommodation, #page-elzeth-art, #page-journal, #page-explore, #page-contact) footer nav ul {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.2rem;
  }

  /* Inner page heroes: don't demand a full screen before content */
  :is(#page-accommodation, #page-elzeth-art, #page-journal, #page-explore, #page-contact) .page-hero {
    min-height: 72svh; height: auto; padding-top: 5.5rem;
  }

  /* Staff dividers: half-height on mobile */
  :is(#page-home, #page-accommodation, #page-elzeth-art, #page-journal, #page-explore, #page-contact) .staff-divider {
    padding: 1.4rem 0;
  }
}

/* ---- Home page pass ---- */
@media (max-width: 860px) {
  /* Hero: svh so the URL bar doesn't jump; content clears the scroll cue */
  #page-home .hero { height: 100svh; min-height: 560px; }
  #page-home .hero-content { padding: 0 6vw 5.2rem; }
  #page-home .hero h1 { font-size: clamp(2.35rem, 11vw, 3.2rem); margin-bottom: 1.3rem; }
  #page-home .hero-eyebrow { margin-bottom: 1.2rem; font-size: .64rem; letter-spacing: .24em; }
  #page-home .hero p { font-size: .92rem; max-width: 34ch; }

  /* Vine: signature feature, kept full width and full opacity — upper-right
     of the hero, below the header (header z-index sits above it). A soft
     gradient fade at its foot keeps the headline zone at the bottom clean. */
  #page-home .hero-3d {
    width: 88vw; max-width: none; top: 0; right: 0; bottom: auto; height: 60%;
  }
  #page-home .hero-3d.ready { opacity: 1; }
  #page-home .hero-vine-img { top: 0; right: -6%; width: 100%; }
  #page-home .hero-3d::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 45%;
    background: linear-gradient(180deg, rgba(20,26,18,0) 0%, rgba(18,22,15,.95) 100%);
    pointer-events: none;
  }

  /* Scroll cue: dot only, nudged in from the corner */
  #page-home .scroll-cue { right: 6vw; bottom: 1.6rem; }

  /* Welcome */
  #page-home .welcome h2 { font-size: clamp(1.6rem, 6.4vw, 1.9rem); }
  #page-home .welcome-grid { gap: 1.8rem; }
  #page-home .welcome-copy p { font-size: .92rem; }

  /* Heritage: the 7rem padding was the worst scroll offender */
  #page-home .heritage-text { padding: 3.4rem 6vw; }
  #page-home .heritage-text h2 { font-size: clamp(1.5rem, 6vw, 1.8rem); }
  #page-home .heritage .ph { min-height: 260px; }

  /* Rooms triptych: single column already; tighten the column */
  #page-home .room-grid { gap: 2.6rem; max-width: 400px; }
  #page-home .rooms-head { margin-bottom: 2.4rem; }
  #page-home .rooms-head p { font-size: .92rem; }
  #page-home .room-card h3 { font-size: 1.35rem; }

  /* Valley */
  #page-home .valley-grid { gap: 1.8rem; }
  #page-home .valley-text h2 { font-size: clamp(1.5rem, 6vw, 1.8rem); }
  #page-home .valley-grid .ph { min-height: 240px; aspect-ratio: 4 / 3; }

  /* Type + tags */
  #page-home .welcome-tag { font-size: .6rem; letter-spacing: .14em; margin-bottom: .9rem; }

  /* Footer wordmark */
  #page-home footer .wordmark { font-size: 1.2rem; }
}

/* Small phones */
@media (max-width: 400px) {
  #page-home .hero h1 { font-size: 2.15rem; }
}

/* ---- Page-transition veil: brand mark must fit narrow viewports ---- */
@media (max-width: 860px) {
  .lux-veil .veil-mark {
    font-size: clamp(1.5rem, 7vw, 2.2rem);
    letter-spacing: .18em; text-indent: .18em;
  }
}

/* ---- Explore: trail cards were overflowing narrow phones (320px min-width) ---- */
@media (max-width: 860px) {
  #page-explore .trail-grid {
    grid-template-columns: 1fr;
  }
  #page-explore .trail-card {
    padding: 1.8rem 1.4rem;
  }
}