/* responsive.css — Full responsive pass across the target device matrix.
   Owner: Fable responsive agent. Loads LAST (after every other sheet) so these
   overrides win cleanly. All rules are scoped media-query overrides only.

   Verified matrix:
     iPad Pro landscape 1366×1024 (primary — untouched)
     Tab S7 1280×800            (primary — untouched)
     iPad Pro portrait 1024×1366
     Desktop 1440×900 · 1920×1080 · 2560×1440

   Brand contract: dark botanical green, bone, gold, serif — premium always.
   Invariant contract: the home ring geometry (--curve-x/--curve-y/--orb-frac)
   is NEVER retuned per breakpoint; only --ring-size may scale (the orbit SVG
   scales with its container, so proportional scaling keeps the alignment
   test green). */

/* ════════════════════════════════════════════════════════════════════
   1 · HOME — (removed) the per-height-band rhythm for the left editorial
   column and the MASTER PLAN pointer tag. The client declutter took the
   home page down to logo + buttons + model, so there is no %-anchored
   copy block left to nudge per band; the ring and the model are both
   proportionally anchored and need no height-band tuning.
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   2 · HOME — large-desktop 2560×1440: cap the compass ring so the orbs
   stop growing past jewellery scale (826px ring → 180px orbs read
   ballooned against 17px capped labels). Ring-size-only change: the
   orbit SVG and every orb scale together, so alignment holds. The
   fixed-size icons get a step up to keep their ratio inside the orb.
   ════════════════════════════════════════════════════════════════════ */
@media (orientation:landscape) and (min-width:2200px){
  #homeView.reference-home{--ring-size:min(57.4vh,42vw,780px)}
  .reference-home .destination-icon{transform:scale(1.05)!important}
  .reference-home .destination-icon svg{width:28px;height:30px}
}

/* ════════════════════════════════════════════════════════════════════
   3 · MASTERPLAN — portrait recompose (iPad Pro 1024×1366).
   a) The unscoped filter-dock rule (top:50% translateY(-50%)) strands
      the five filter medallions mid-canvas over the estate model —
      seat them as a centred row under the heading instead.
   b) The heading loses its <br> in portrait and ran on as
      "Choose a homefrom the land." — break at the <em>.
   c) The +/− / reset / plan tools sat in the same corner as the
      presenter FAB — slide them left of it.
   ════════════════════════════════════════════════════════════════════ */
@media (orientation:portrait){
  .masterplan-copy h2 em{display:block}
  .masterplan-filter-dock{
    top:25.5%!important;left:4%!important;right:4%!important;
    transform:none!important;width:auto!important;display:block!important;
  }
  .masterplan-filter{
    width:100%!important;display:flex!important;flex-direction:row!important;
    justify-content:center;gap:14px!important;border:0!important;margin-top:0!important;
  }
  .masterplan-filter button{width:64px!important;height:64px!important;flex:0 0 auto;justify-self:auto}
  .masterplan-filter button img{width:18px;height:18px}
  .masterplan-view .model-tools{right:104px!important;bottom:20px!important}
}

/* ════════════════════════════════════════════════════════════════════
   4 · LIFE AT EDEN — portrait filter restore (iPad Pro 1024×1366).
   The landscape arc coordinates live in a landscape-only block, but an
   unscoped companion rule leaves the buttons position:absolute — in
   portrait all seven medallions piled at (0,0) showing only "Arrive".
   Restore them to a single centred row under the heading (7×62px + gaps
   = 506px, comfortably inside 1024).
   ════════════════════════════════════════════════════════════════════ */
@media (orientation:portrait){
  .amenities-view .amenity-filters{
    position:static!important;display:flex!important;
    flex-direction:row!important;flex-wrap:nowrap!important;
    width:auto!important;height:auto!important;overflow:visible!important;
    margin:20px 0 0!important;gap:12px!important;align-items:center;
  }
  .amenities-view .amenity-filters button{
    position:static!important;left:auto!important;top:auto!important;
    transform:none!important;margin:0!important;flex:0 0 auto;
    width:62px!important;height:62px!important;font-size:8px!important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   5 · MANSIONS (villa) — portrait polish (iPad Pro 1024×1366).
   a) The stacked studio compressed the action row: the 46px grid split
      across two implicit rows left ~22px-tall tap targets — let the row
      grow and give every action a true ≥48px touch height.
   b) The hero render washes out the green ink title — the shade is now a
      top-down BEIGE wash (bottom/left washes retained, same alphas).
   ════════════════════════════════════════════════════════════════════ */
@media (orientation:portrait){
  .villa-view .drawing-actions{height:auto!important;min-height:0;gap:8px!important}
  .villa-view .drawing-actions button{min-height:48px}
  .villa-view .drawing-studio{padding-bottom:14px}
  .villa-view .villa-shade{
    background:
      linear-gradient(0deg,rgba(255,242,235,.88),transparent 55%),
      linear-gradient(180deg,rgba(255,242,235,.62) 0%,rgba(255,242,235,.26) 16%,transparent 38%),
      linear-gradient(90deg,rgba(255,242,235,.5),transparent 55%);
  }
}

/* ════════════════════════════════════════════════════════════════════
   6 · PRIVATE FOLIO — portrait: the card grid (top:14%) sat on the
   two-line serif heading — clear it.
   ════════════════════════════════════════════════════════════════════ */
@media (orientation:portrait){
  .saved-items{top:25%!important}
}

/* ════════════════════════════════════════════════════════════════════
   7 · ABOUT — portrait rhythm (iPad Pro 1024×1366): the emblem sat
   under the fixed brand chip and the visual panel started at 56%
   leaving a dead band after the copy — start the copy below the chip,
   cap the lede measure, and let the hero panel rise to meet the story.
   ════════════════════════════════════════════════════════════════════ */
@media (orientation:portrait){
  .about-copy{top:7.5%!important}
  .about-lede{max-width:620px!important}
  .about-visual{top:37%!important}
}

/* ════════════════════════════════════════════════════════════════════
   8 · LOCATION — portrait rhythm (iPad Pro 1024×1366): the kicker was
   clipped behind the brand chip and a dead band opened between the POI
   list and the map — drop the copy below the chip and raise the map.
   ════════════════════════════════════════════════════════════════════ */
@media (orientation:portrait){
  .location-copy{top:6.5%!important}
  .location-map{top:39%!important}
}

/* ════════════════════════════════════════════════════════════════════
   8b · LOCATION — short landscape (Tab S7 1280×800): the tuned
   top:5.5% (44px) slid the NORTH BENGALURU kicker behind the fixed
   brand chip (which ends ~71px) — start the column just below it.
   ════════════════════════════════════════════════════════════════════ */
@media (orientation:landscape) and (max-height:850px){
  .location-copy{top:9.5%!important}
}

/* ════════════════════════════════════════════════════════════════════
   9 · LOCATION — wide desktop (1920/2560): the square cover-fit map
   field crops vertically once the 65%-wide panel is wider than the
   viewport is tall, beheading the 7%/93% pins (Tarahunase · Air Force
   Station). Narrow the panel toward the viewport height so the square
   fits with no meaningful crop; the copy column breathes into the gap.
   ════════════════════════════════════════════════════════════════════ */
@media (orientation:landscape) and (min-width:1700px){
  .location-map{width:56%}
  .location-copy{width:30%}
}

/* ════════════════════════════════════════════════════════════════════
   10 · DESKTOP 1920+/2560 — quiet scale dial-up. Fixed-px body copy and
   rails tuned for 1366w read miniature on large desktops; lift them a
   register without touching the composed layouts. (Type only grows —
   headings already carry vw clamps that cap elegantly.)
   ════════════════════════════════════════════════════════════════════ */
@media (orientation:landscape) and (min-width:1900px){
  /* about spread */
  .about-copy{width:30%}
  .about-lede{font-size:14px;max-width:480px}
  /* location column */
  .location-lede{font-size:13.5px}
  .poi-card{min-height:58px}
  .poi-body b{font-size:17px}
  .poi-body small{font-size:11px}
  .poi-card em{font-size:14.5px}
  /* interiors filmstrip rail (reel.css scopes these under .interiors-view) */
  .interiors-view .interior-rail{height:150px}
  .interiors-view .interior-card{flex:0 0 214px}
  /* saved folio cards */
  .saved-items{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
  /* amenities detail card */
  .amenity-detail{width:380px;padding:26px}
  .amenity-detail h3{font-size:32px}
  .amenity-detail p{font-size:12px}
  /* supporting ledes */
  .villa-title>p:last-child{font-size:14px}
  .interior-copy>p:last-of-type{font-size:15px}
  .masterplan-copy>p:last-of-type{font-size:12px}
}