/* ============================================================
   CASA BLANCA — RESPONSIVE
   Tablet (≤1024) → Mobile (≤768) → Small (≤420)

   On mobile the secondary detail moves into bottom sheets instead
   of hover, so nothing is hidden behind an interaction a finger
   cannot perform.
   ============================================================ */

/* ── BURGER (hidden until mobile) ───────────────────────────── */
.burger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;flex:none;border:none;background:none;cursor:pointer;
  padding:0 10px;z-index:1002;margin-left:auto;
}
.burger span{
  display:block;width:20px;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .34s var(--ease),opacity .25s ease,width .3s var(--ease);
  transform-origin:center;
}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);background:var(--rose)}
.burger.open span:nth-child(2){opacity:0;width:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);background:var(--rose)}

.nav-overlay{
  display:none;position:fixed;inset:0;z-index:998;
  background:rgba(32,20,25,.38);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
.nav-overlay.open{display:block;opacity:1;pointer-events:auto}

/* ============================================================
   TABLET — 769 to 1024
   ============================================================ */
@media (min-width:769px) and (max-width:1024px){
  :root{--gutter:20px}
  .nav-links{gap:0}
  .nav-links a{padding:9px 11px;font-size:13.5px}

  .canvas-stage{aspect-ratio:4/3;min-height:420px}
  .canvas-mosaic{grid-template-columns:repeat(4,1fr)}
  .canvas-mosaic figure:nth-child(n+6){display:none}

  .vignettes{grid-template-columns:repeat(2,1fr)}
  .rooms{grid-template-columns:repeat(2,1fr)}
  .rooms .room:last-child{grid-column:span 2}
  .stories{grid-template-columns:repeat(2,1fr)}
  .place-wrap{grid-template-columns:1fr;gap:34px}
  .place-map{aspect-ratio:16/10}
  .host{grid-template-columns:1fr}
  .host-media{min-height:320px}
  .gallery{column-count:2}
  .footer-inner{grid-template-columns:1fr 1fr;gap:32px}
}

/* ============================================================
   MOBILE — ≤768
   ============================================================ */
@media (max-width:768px){
  :root{--gutter:18px;--nav-h:60px}
  html,body{overflow-x:clip;max-width:100%}
  body{font-size:16px}
  html{scroll-padding-top:86px}

  /* ── NAV ────────────────────────────────────────────── */
  .top-nav{padding:10px 0}
  .top-nav.scrolled{padding:8px 0}
  .nav-inner{height:58px;padding:0 8px 0 16px;border-radius:var(--pill)}
  .top-nav.scrolled .nav-inner{height:54px}
  .logo img{height:28px}
  .logo-mark{height:28px}
  .footer-brand .logo-mark{height:36px}
  .logo-text b{font-size:18px}
  .logo-text span{font-size:7px;letter-spacing:.26em}
  .burger{display:flex}
  .nav-cta{display:none}

  /* ── DRAWER ─────────────────────────────────────────
     Every link rule below is scoped with `>` to the top-level
     list items. Unscoped, they also hit the <a class="btn"> pair
     in the footer of the drawer and stripped them of their
     padding, pill radius and font. */
  .nav-links{
    position:fixed;top:0;left:0;right:0;z-index:1001;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--white);
    border-radius:0 0 var(--r-xl) var(--r-xl);
    box-shadow:var(--sh-4);
    padding:84px 22px 26px;margin:0;
    translate:0 -110%;opacity:0;pointer-events:none;
    transition:translate .42s var(--ease-out),opacity .3s var(--ease);
  }
  .nav-links.open{translate:0 0;opacity:1;pointer-events:auto}

  .nav-links > li{border-bottom:1px solid var(--line);position:relative}
  .nav-links > li:last-of-type{border-bottom:none}
  .nav-links > li > a{
    display:flex;align-items:center;
    padding:16px 2px;border-radius:0;background:none;
    font-family:var(--display);font-size:23px;font-weight:600;
    letter-spacing:-.022em;color:var(--ink);
  }
  /* a chevron, drawn in CSS so there's no markup to add.
     margin-left:auto parks it against the right edge. */
  .nav-links > li > a::before{
    content:"";order:2;margin-left:auto;
    width:8px;height:8px;flex:none;
    border-right:2px solid var(--line-2);border-bottom:2px solid var(--line-2);
    rotate:-45deg;
    transition:border-color var(--t),translate var(--t);
  }
  .nav-links > li > a:hover{background:none}
  .nav-links > li.active > a{color:var(--rose)}
  .nav-links > li.active > a::before{border-color:var(--pink);translate:3px 0}
  .nav-links > li.active > a::after{display:none}
  .nav-links > li:not(.active) > a::after{display:none}

  /* the drawer's own heading, so the panel doesn't open onto a lone X */
  .nav-drawer-title{
    display:block;margin:0 0 6px;
    font-size:11.5px;font-weight:700;letter-spacing:.2em;
    text-transform:uppercase;color:var(--rose);
  }

  /* the two buttons at the foot of the drawer */
  .nav-drawer-cta{
    display:flex;gap:10px;margin-top:24px;padding-top:4px;
  }
  .nav-drawer-cta .btn{
    flex:1;justify-content:center;
    padding:14px 16px;border-radius:var(--pill);
    font-family:var(--sans);font-size:14.5px;font-weight:600;
    letter-spacing:.005em;
  }
  /* `.nav-links a { color: inherit }` from the desktop sheet outranks
     `.btn-wa`, so the label was coming through ink on green. Two
     classes here beats one class + one type. */
  .nav-drawer-cta .btn-wa{color:#fff}
  .nav-drawer-cta .btn-ghost{color:var(--ink)}
  .nav-drawer-cta .btn svg{width:17px;height:17px}
  .nav-drawer-cta .btn:hover{transform:none}

  /* a quiet line under them, so the drawer ends on something useful */
  .nav-drawer-cta + .nav-drawer-note,
  .nav-drawer-note{
    display:block;margin-top:16px;text-align:center;
    font-size:12.5px;color:var(--ink-3);letter-spacing:.01em;
  }

  /* the burger's focus ring was reading as a bordered box around the X */
  .burger{border-radius:var(--pill)}
  .burger:focus:not(:focus-visible){outline:none}

  /* ── HERO ───────────────────────────────────────────── */
  .hero{padding-top:calc(var(--nav-h) + 30px);padding-bottom:40px}
  .canvas-stage{aspect-ratio:3/4;min-height:0;border-radius:var(--r-l)}

  /* The paint interaction is desktop-only — see initCanvasHero().
     The veil keeps its element but stops being a canvas: it becomes
     the static wash that used to live on .canvas-mosaic::after, and
     it never intercepts a touch, so the page scrolls from the first
     tap. */
  .paint-hint{display:none}
  .canvas-veil{
    pointer-events:none;cursor:default;touch-action:auto;
    background:linear-gradient(105deg,
      rgba(var(--ink-rgb),.30) 0%,
      rgba(var(--ink-rgb),.12) 50%,
      rgba(var(--rose-rgb),.20) 100%);
  }
  .canvas-mosaic::after{display:none}

  /* the strip: full-height slides drifting right to left, forever */
  .canvas-stage.drift .canvas-mosaic{
    display:flex;width:max-content;right:auto;gap:3px;
    will-change:transform;
    animation:drift 56s linear infinite;
  }
  /* Each slide is exactly as wide as its photo is at full stage
     height, so nothing is cropped. Portrait and landscape shots
     simply take up different amounts of the strip.
     min-width keeps the strip from collapsing to zero in the
     moment before the images have loaded. */
  .canvas-stage.drift .canvas-mosaic figure{
    display:block;flex:0 0 auto;width:auto;height:100%;
    min-width:40vw;background:none;
    grid-column:auto;grid-row:auto;
  }
  .canvas-stage.drift .canvas-mosaic img{
    width:auto;height:100%;max-width:none;
    object-fit:contain;transform:none;
  }

  .canvas-copy{padding:22px}
  .canvas-copy .hero-sub{font-size:14.5px;margin-top:14px}
  /* the copy block takes up proportionally more of a 3:4 card, so the
     scrim has to reach higher than it does on desktop */
  .canvas-copy::before{
    background:linear-gradient(to top,
      rgba(var(--ink-rgb),.84) 0%,
      rgba(var(--ink-rgb),.76) 10%,
      rgba(var(--ink-rgb),.58) 25%,
      rgba(var(--ink-rgb),.28) 40%,
      rgba(var(--ink-rgb),0)   50%);
  }
  .paint-hint{top:18px;left:18px;padding:8px 13px 8px 10px;font-size:11.5px}
  .hero-foot{margin-top:22px;flex-direction:column;align-items:stretch}
  .hero-foot .btn{width:100%}
  /* Three EQUAL columns, centred. The flex row sized each column
     to its own text, which is what made the row look crooked;
     a grid gives them identical widths and centring absorbs the
     fact that one label wraps to an extra line. */
  .hero-marks{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:10px;width:100%;align-items:start;
  }
  .hero-mark{
    display:flex;flex-direction:column;align-items:center;
    text-align:center;gap:3px;
  }
  /* `> span` is the label only. Unscoped, this also caught the
     <span data-count> that lives INSIDE the <b>, which is why the
     number stayed small however large the <b> was set. */
  .hero-mark b{font-size:30px;line-height:1.05}
  /* text-wrap:balance evens the line lengths instead of leaving
     one long line and one orphan word */
  .hero-mark > span{
    font-size:12.5px;max-width:none;line-height:1.35;
    text-wrap:balance;
    /* reserve two lines so a shorter label doesn't leave its cell
       sitting higher than the other two */
    min-height:2.7em;
  }

  /* ── SECTIONS ───────────────────────────────────────── */
  .sec{padding:56px 0}
  .sec-head{margin-bottom:30px}

  /* Vignettes become a swipeable rail — keeps the mosaic feel
     without stacking four tall cards. */
  .vignettes{
    display:flex;gap:14px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:0 calc(var(--gutter) * -1);padding:4px var(--gutter) 14px;
  }
  .vignettes::-webkit-scrollbar{display:none}
  .vignette{flex:0 0 73%;scroll-snap-align:center;aspect-ratio:4/5}
  /* no hover on touch — the caption is always open */
  .vignette-body p:not(.hour){max-height:140px;opacity:1;margin-top:9px}

  /* ── RAILS ──────────────────────────────────────────
     overflow-y:hidden stops the rail scrolling inside itself
     while the page is trying to move vertically. The rail is
     also pulled out to the page edge so a card can bleed. */
  .rail{
    overflow-y:hidden;gap:14px;
    margin:0 calc(var(--gutter) * -1);
    padding:4px var(--gutter) 12px;
    scroll-snap-type:x mandatory;
  }
  .rail > *{flex:0 0 84%;scroll-snap-align:center}
  .rail-nav{display:none}      /* swipe instead */

  .rooms{grid-template-columns:1fr;gap:18px}
  .room-body{padding:20px 20px 22px}
  .room-body h3{font-size:21px}

  .amen-grid{grid-template-columns:1fr 1fr;gap:10px}
  .amen{padding:14px;gap:10px;flex-direction:column;align-items:flex-start;text-align:left}
  .amen-ico{width:34px;height:34px}
  .amen-more{position:absolute;top:14px;right:14px;width:16px;height:16px}
  .amen{position:relative}

  .place-wrap{grid-template-columns:1fr;gap:26px}
  .place-map{aspect-ratio:4/3;border-radius:var(--r-l)}
  .place-map-foot{left:12px;right:12px;bottom:12px;padding:12px 14px}
  .place-map-foot .btn{padding:9px 15px;font-size:13px}
  .dist{padding:14px 10px;gap:13px}
  .dist:hover{padding-left:10px;box-shadow:none;background:transparent}
  .dist-txt b{font-size:14.5px}
  .dist-km{font-size:17px}

  .host{grid-template-columns:1fr;border-radius:var(--r-l)}
  .host-media{min-height:300px;aspect-ratio:4/3}
  .host-body{padding:26px 22px 30px}
  .host-loves{grid-template-columns:repeat(2,1fr)}

  .tagcloud{gap:8px;margin-bottom:30px}
  .gtag{padding:8px 14px;font-size:13px}
  .stories{grid-template-columns:1fr;gap:14px}
  .story{padding:24px 22px}
  .story p{font-size:16.5px}

  /* ── ENQUIRY FORM ───────────────────────────────────
     Dates stay side by side; the guest counts and the room
     selector stack, since three across is unreadable here. */
  .enq{padding:20px 18px;gap:15px;border-radius:var(--r-l)}
  .field-row{grid-template-columns:1fr 1fr;gap:12px}
  .field-row:has(.field:nth-child(3)){grid-template-columns:1fr 1fr}
  .field-row:has(.field:nth-child(3)) .field:nth-child(3){grid-column:span 2}
  .enq input,.enq select,.enq textarea{
    font-size:16px;              /* under 16px, iOS zooms the page on focus */
    padding:12px 14px;
  }
  .field label{font-size:11.5px}
  .msg-bubble{font-size:14px}
  .enq-foot{flex-direction:column;gap:10px}
  .enq-foot .btn{width:100%}

  .book-grid{grid-template-columns:1fr;gap:12px}
  .book-card{padding:20px;gap:15px}
  .book-card.wide{grid-column:span 1}
  .book-ico{width:46px;height:46px}
  .book-txt .value{font-size:17px}
  .ota{flex-direction:column;align-items:flex-start;gap:16px;padding:22px}
  .ota-links{width:100%}
  .ota-link{flex:1;justify-content:center}

  .band{padding:34px 24px;border-radius:var(--r-l)}
  .band .btn-row .btn{width:100%}

  /* the gallery runs nearly edge to edge — at this width the
     container gutter was eating most of the photo */
  #gallery .container{padding-left:10px;padding-right:10px}
  .gallery{column-count:2;column-gap:8px}
  .gal-item{margin:0 0 8px;border-radius:var(--r-s)}
  .gal-cap{opacity:1;translate:0 0;font-size:11.5px;padding:26px 12px 11px}

  .page-hero{padding-top:calc(var(--nav-h) + 40px)}
  .page-hero-media{aspect-ratio:4/3;border-radius:var(--r-l)}

  /* ── SHEET → true bottom sheet ──────────────────────── */
  .sheet{
    top:auto;bottom:0;left:0;width:100%;max-height:88vh;
    border-radius:var(--r-xl) var(--r-xl) 0 0;
    translate:0 100%;scale:1;
    transition:translate .4s var(--ease-out),opacity .25s var(--ease);
  }
  .sheet.open{translate:0 0;scale:1}
  .sheet-grab{
    display:block;width:42px;height:4px;border-radius:4px;
    background:var(--line-2);margin:12px auto 0;flex:none;
  }
  .sheet-head{padding:14px 22px 14px}
  .sheet-head h3{font-size:21px}
  .sheet-body{padding:20px 22px 28px}
  .sheet-foot{padding:14px 22px calc(18px + env(safe-area-inset-bottom,0px))}

  /* ── DOCK → full-width bar above the bottom nav ─────── */
  .dock{
    right:0;left:0;bottom:calc(66px + env(safe-area-inset-bottom,0px));
    flex-direction:row;padding:0 var(--gutter);gap:10px;
    transition:opacity .4s var(--ease),translate .4s var(--ease),bottom .35s var(--ease);
  }
  /* follow the bottom nav down instead of leaving a gap behind it */
  .dock.nav-hidden{bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .dock-btn{flex:1;justify-content:center;padding:13px 14px;font-size:13.5px}
  .dock-btn.secondary{flex:0 0 52px;padding:13px 0}
  .dock-btn.secondary span{display:none}

  /* ── SCREEN EDGES ───────────────────────────────────
     The nav pills float, so without these the very top and
     bottom of the viewport were bare page showing through. */
  .top-nav::before{
    opacity:1;                       /* always on, not only when scrolled */
    top:calc(-1 * env(safe-area-inset-top,0px));
    height:calc(150% + env(safe-area-inset-top,0px));
  }
  /* a white band under the bottom nav, covering the home-indicator
     strip — and still there when the nav slides away */
  /* z-index sits under the dock (990) and the bottom nav (997),
     so it backs them both rather than covering them */
  body::before{
    content:"";position:fixed;left:0;right:0;bottom:0;z-index:980;
    height:calc(16px + env(safe-area-inset-bottom,0px));
    background:var(--white);pointer-events:none;
  }
  .bottom-nav{background:rgba(255,255,255,.96)}

  /* ── FOOTER ─────────────────────────────────────────── */
  .footer{border-radius:0;padding-bottom:104px}
  .footer-inner{grid-template-columns:1fr 1fr;gap:30px 20px}
  .footer-brand{grid-column:span 2}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:16px;margin-top:34px}

  /* ── KILL HOVER TRANSFORMS ON TOUCH ─────────────────── */
  .room:hover,.vignette:hover,.story:hover,.amen:hover,
  .book-card:hover,.love:hover,.gtag:hover,.gal-item:hover{transform:none}
  .btn:hover{transform:none}
}

/* ============================================================
   BOTTOM NAV — mobile only, injected by script.js
   ============================================================ */
@media (max-width:768px){
  .bottom-nav{
    position:fixed;left:0;right:0;bottom:0;z-index:997;
    display:flex;justify-content:space-around;align-items:center;
    background:rgba(255,255,255,.93);
    -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
    border-top:1px solid var(--line);
    box-shadow:0 -6px 24px rgba(var(--rose-rgb),.1);
    padding:8px 6px calc(8px + env(safe-area-inset-bottom,0px));
    translate:0 0;transition:translate .35s var(--ease);
  }
  .bottom-nav.hidden{translate:0 110%}
  .bottom-nav-item{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
    text-decoration:none;padding:5px 0;position:relative;
    color:var(--ink-3);transition:color .25s var(--ease);
  }
  .bottom-nav-item svg{width:21px;height:21px}
  .bottom-nav-item span{font-size:10.5px;font-weight:500;line-height:1}
  .bottom-nav-item.active{color:var(--rose)}
  .bottom-nav-item.active::before{
    content:"";position:absolute;top:-8px;left:50%;translate:-50% 0;
    width:22px;height:3px;border-radius:3px;background:var(--pink);
  }
}
@media (min-width:769px){
  .bottom-nav{display:none !important}
  /* script.js injects these into .nav-links for the mobile drawer —
     they must never appear in the desktop nav bar */
  .nav-drawer-cta,
  .nav-drawer-title,
  .nav-drawer-note{display:none}
}

/* the loop closes because script.js duplicates the slides once,
   so -50% lands exactly on the start of the second copy */
@keyframes drift{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(-50%,0,0)}
}
@media (prefers-reduced-motion:reduce){
  .canvas-stage.drift .canvas-mosaic{animation:none}
}

/* ============================================================
   TOUCH DEVICES — no hover to resolve, so open things up
   ============================================================ */
@media (hover:none){
  .room-media::after{transform:scaleX(1)}
  .gal-cap{opacity:1;translate:0 0}
  .story-src{opacity:1}
}

/* ============================================================
   SMALL — ≤420
   ============================================================ */
@media (max-width:420px){
  .d1{font-size:38px}
  .canvas-copy .d1{font-size:33px}
  .amen-grid{grid-template-columns:1fr}
  .host-loves{grid-template-columns:1fr 1fr}
  .gallery{column-count:1}
  .hero-marks{gap:8px}
  .hero-mark b{font-size:26px}
  .hero-mark > span{font-size:12px}
  .vignette{flex-basis:80%}
}