/* ============================================================
   COASTAL BLOOM — mobile refinements (loads last, after v6)
   Keeps the scroll-journey legible and well-composed on phones.
   ============================================================ */

/* ---- never allow sideways drag/scroll on phones ----
   Decorative absolutely-positioned art can poke past the viewport edge;
   clip it horizontally and pin the document width to 100%. */
html, body{ max-width:100%; overflow-x:clip; }
@media (max-width:760px){
  html, body{ overflow-x:clip; overscroll-behavior-x:none; }
  .journey, .stage, .layer, .closing, section, header{
    max-width:100%; overflow-x:clip;
  }
  /* Highlights get their own dedicated mobile rebuild lower down —
     here we only make sure the section itself never clips. */
  .highlights{ overflow-x:visible; }
}

/* ---- PHONES: drop the pinned cinematic dolly-scroll entirely ----
   Each chapter becomes a normal full-height section that simply scrolls.
   No height-stretched journey, no per-frame transforms — just a gentle
   fade-in as each caption enters view. Matches isSimple() in the JS. */
@media (max-width:760px){
  .journey{ height:auto !important; }
  .stage{
    position:static; height:auto; min-height:0;
    overflow:visible; background:none;
  }
  .layer{
    position:relative; inset:auto;
    min-height:100svh; height:auto;
    visibility:visible !important;
  }
  .layer .bgwrap{
    position:absolute; inset:0;
    transform:none !important; opacity:1 !important; filter:none !important;
  }
  .layer .art .d{ transform:none !important; }
  .ghost{ transform:none !important; opacity:.42 !important; }
  .motes{ display:none; }

  /* soft reveal driven by the IntersectionObserver (.layer.in) */
  .layer:not(.hero) .cap{
    opacity:0; transform:translateY(22px);
    transition:opacity .8s var(--ease), transform .8s var(--ease);
  }
  .layer.in .cap{ opacity:1 !important; transform:none !important; }
  .layer.hero .cap{ opacity:1 !important; transform:none !important; }
}

@media (max-width:640px){

  /* ---- journey captions: guaranteed legibility over photos ----
     A soft paper scrim sits behind each caption so the dark ink
     text stays readable even where a photo peeks behind it. */
  .layer:not(.hero) .cap{
    padding-bottom:64px;
    width:min(560px,92vw);
  }
  .layer:not(.hero) .cap::before{
    content:''; position:absolute; z-index:-1;
    left:calc(-1 * clamp(20px,4vw,60px)); right:-26px;
    top:-48px; bottom:-72px;
    background:linear-gradient(to top,
      var(--paper) 0%, var(--paper) 36%,
      color-mix(in srgb, var(--paper) 78%, transparent) 66%,
      transparent 100%);
    pointer-events:none;
  }
  .layer:not(.hero) .cap h2{ font-size:clamp(33px,8.6vw,44px); line-height:1.1; }
  .layer:not(.hero) .cap p{ font-size:15px; line-height:1.6; margin-top:14px; }
  .layer:not(.hero) .cap .kicker{ margin:14px 0 8px; }

  /* ---- lift the framed photos into the upper half so the
     subject sits clear of the caption scrim ---- */
  .s-living .frame--arch{ width:46vmin; height:56vmin; left:50%; transform:translateX(-50%); bottom:40%; }
  .s-balcony .frame--soft{ width:64vmin; height:42vmin; right:50%; transform:translateX(50%); bottom:42%; }
  .s-pool .frame--round{ width:50vmin; height:50vmin; left:50%; transform:translateX(-50%); bottom:40%; }
  .s-pool .ring{ left:auto; right:14%; bottom:34%; }
  /* ---- rooms scene: lift BOTH prints into the top half, side by side,
     fully clear of the (tall) caption that sits in the lower half ---- */
  .s-rooms .alcove{
    top:4%; bottom:auto; right:50%; transform:translateX(50%);
    width:56vmin; height:30vh;
  }
  .s-rooms .frame--bed{
    top:6%; bottom:auto; left:6%; right:auto; transform:none;
    width:40vmin; height:26vh;
  }
  .s-rooms .frame--kitchen{
    top:17%; bottom:auto; right:5%; left:auto; transform:none;
    width:29vmin; height:18vh;
  }

  /* ---- decorative ground elements pulled down a touch ---- */
  .s-living .floor, .s-rooms .floor2{ height:10%; }

  /* ---- smaller ghost numbers so they don't crowd the text ---- */
  .ghost{ font-size:clamp(104px,30vw,170px); top:8%; opacity:.38; }

  /* ---- hero: keep the building photo on the RIGHT and the temperature
     pill on the LEFT so they sit side by side, never overlapping ---- */
  .cap--hero{ padding-top:13vh; }
  .s-arrival .frame--arch{
    width:38vmin; height:48vmin;
    right:3%; left:auto; bottom:5%; transform:none;
  }
  .cap--hero .weather{ max-width:170px; align-self:flex-start; }

  /* ---- comfortable tap target on the booking pill ---- */
  .book{ padding:12px 18px; }
}

/* ============================================================
   MOBILE HIGHLIGHTS — clean rebuild (overrides v4 + v6 collage)
   Same cards, same content, same print-photo look — but laid out
   as one safe single column. Cards are inset well inside the
   viewport so the gentle tilt can NEVER reach the clip edge.
   ============================================================ */
@media (max-width:760px){
  .highlights{
    padding-left:20px; padding-right:20px;
    overflow-x:visible;
  }
  /* reset every desktop span + rotation rule in one place */
  .hl-grid{
    display:flex !important;
    flex-direction:column;
    align-items:center;
    gap:30px;
    width:100%; max-width:440px; margin-inline:auto;
    grid-template-columns:none !important;
  }
  .hl-card,
  .hl-card:nth-child(n){
    grid-column:auto !important;
    width:88%; max-width:360px;
    margin:0; box-sizing:border-box;
    transform-origin:center center;
    transform:none;
  }
  /* every image the same comfortable ratio so the column reads evenly */
  .hl-card img,
  .hl-card:nth-child(n) img{ aspect-ratio:4/3 !important; }

  /* gentle alternating tilt — amplitude tiny relative to the 6% side
     margin, so a corner can't overflow even on the narrowest phone */
  .hl-card:nth-child(odd){ transform:rotate(-1.2deg); }
  .hl-card:nth-child(even){ transform:rotate(1.2deg); }

  /* keep the staggered reveal working with the tilt preserved */
  .hl-grid.reveal.in > .hl-card:nth-child(odd){ transform:rotate(-1.2deg); }
  .hl-grid.reveal.in > .hl-card:nth-child(even){ transform:rotate(1.2deg); }
}

/* very narrow phones — keep type from getting cramped */
@media (max-width:380px){
  .layer:not(.hero) .cap h2{ font-size:32px; }
  .hl-head h2, .closing h2{ font-size:34px; }
}