/* Aria at Idlewild — responsive layer.
   The pages are inline-styled, so responsive behaviour is keyed off explicit
   hooks injected into the markup:
     data-rp="pN"  page container — mobile padding (rules generated below)
     data-rg=      grid collapse: one | two-up (four) | stats3 | auto
     data-r=       named component hooks (hero, cover, unit-row, nb-*, …)
   Add the matching attribute when you add new markup; do not match on inline
   style text — the runtime re-serializes it. */

html,body{max-width:100%}
body{overflow-x:hidden}
img,svg{max-width:100%}

/* ---------- Tablet ---------- */
@media (max-width:1120px){
  [data-rp]{padding-left:32px!important;padding-right:32px!important}
}

/* ---------- Phones and small tablets ---------- */
@media (max-width:900px){

  /* Page containers */
  [data-rp="p1"]{padding:27px 20px 27px!important}
  [data-rp="p2"]{padding:64px 20px 52px!important}
  [data-rp="p3"]{padding:58px 20px 58px!important}
  [data-rp="p4"]{padding:56px 20px 56px!important}
  [data-rp="p5"]{padding:49px 20px 0!important}
  [data-rp="p6"]{padding:21px 20px 21px!important}
  [data-rp="p7"]{padding:30px 20px 4px!important}
  [data-rp="p8"]{padding:18px 20px 18px!important}
  [data-rp="p9"]{padding:16px 20px 0!important}
  [data-rp="p10"]{padding:19px 20px 0!important}
  [data-rp="p11"]{padding:30px 20px 0!important}
  [data-rp="p12"]{padding:52px 20px 24px!important}
  [data-rp="p13"]{padding:0 20px 32px!important}
  [data-rp="p14"]{padding:16px 20px 56px!important}
  [data-rp="p15"]{padding:48px 20px 64px!important}
  [data-rp="p16"]{padding:53px 20px 27px!important}
  [data-rp="p17"]{padding:16px 20px 16px!important}
  [data-rp="p18"]{padding:30px 20px 16px!important}
  [data-rp="p19"]{padding:0 20px 41px!important}
  [data-rp="p20"]{padding:44px 20px 48px!important}
  [data-rp="p21"]{padding:48px 20px 58px!important}
  [data-rp="p22"]{padding:51px 20px 48px!important}
  [data-rp="p23"]{padding:0 20px 52px!important}
  [data-rp="p24"]{padding:52px 20px 52px!important}
  [data-rp="p25"]{padding:51px 20px 34px!important}
  [data-rp="p26"]{padding:0 20px 58px!important}
  [data-rp="p27"]{padding:51px 20px 58px!important}

  /* Grids */
  [data-rg="one"]:not([data-r="nav-row"]){grid-template-columns:1fr!important;gap:26px!important}
  [data-rg="auto"]{grid-template-columns:1fr!important;gap:22px!important}
  [data-rg="four"]{grid-template-columns:1fr 1fr!important;gap:26px 20px!important}
  [data-rg="stats3"]{gap:0 14px!important}

  /* Type */
  h1[style]{font-size:clamp(32px,8.6vw,46px)!important;line-height:1.08!important}
  h2[style]{font-size:clamp(25px,6.2vw,34px)!important;line-height:1.12!important}

  /* Media */
  [data-r="cover"]{height:auto!important;aspect-ratio:3/2}
  /* Five across only works at desktop widths. Let the rows wrap two up
     instead, which keeps every photo at its own aspect ratio rather than
     cropping it into a column. */
  [data-r="jgal"]{padding-left:20px!important;padding-right:20px!important}
  [data-r="jrow"]{flex-wrap:wrap!important}
  [data-r="jrow"]>div{min-width:calc(50% - 5px)!important}
  [data-r="jrow"]>div[aria-hidden="true"]{display:none}
  /* No hover to reveal captions with at these widths. */
  [data-r="jrow"] [data-r="gcap"]{opacity:1!important}

  /* Hero */
  [data-r="hero"]{height:78vh!important;min-height:480px!important}
  [data-r="hero-copy"]{padding:0 20px 56px!important}

  /* Availability — site plan tags */
  [data-r="plan-tag"]{padding:5px 7px!important;transform:translate(-14%,-108%)!important}
  /* Amenity callouts have no tap target and their labels are long — the legend
     under the plan carries the same three facts at phone width. */
  [data-r="amen-tag"]{display:none!important}
  [data-r="plan-legend"]{gap:9px 20px!important;padding-top:16px!important}
  [data-r="plan-tag"]>span{font-size:9px!important;letter-spacing:0.06em!important}
  [data-r="plan-tag"]>span+span{font-size:7px!important;margin-top:2px!important}

  /* Availability — per-building floor callouts become a chip row under a
     full-width render: the gutter/leader treatment needs a tall container,
     and at phone width the render is too short to space the tags apart. */
  [data-r="bldg-diagram"]{padding-left:0!important;display:flex!important;flex-wrap:wrap!important;gap:8px}
  [data-r="bldg-diagram"]>div:first-child{flex:0 0 100%;margin-bottom:4px}
  [data-r="bldg-diagram"] svg{display:none!important}
  [data-r="bldg-head"]{gap:14px!important;padding-top:22px!important}
  [data-r="floor-tag"]{position:static!important;transform:none!important;flex:none;
    display:flex!important;flex-direction:column;justify-content:center;
    min-height:40px!important;padding:8px 13px!important;box-sizing:border-box}
  [data-r="floor-tag"]>span{font-size:11px!important;letter-spacing:0.04em!important}
  [data-r="floor-tag"]>span+span{font-size:8px!important;letter-spacing:0.14em!important;margin-top:3px!important}

  /* Availability — unit rows */
  [data-r="unit-row"]{grid-template-columns:1fr auto!important;gap:3px 14px!important;padding:16px 2px!important}
  [data-r="unit-row"]>span:last-child{grid-column:2!important;grid-row:1!important;font-size:15px!important}
  [data-r="unit-row"]>span:nth-child(3){text-align:right}

  /* Neighborhood explorer stacks: map first, then the category selectors as a
     wrapped chip row under it (mirrors the floor chips under each building
     view), then the places list. A scrolling strip hid most selectors. */
  [data-r="nb-grid"]{display:flex!important;flex-direction:column!important;
    height:auto!important;min-height:0!important;overflow:visible!important}
  [data-r="nb-map"]{order:1;height:64vh!important;min-height:360px!important;flex:none!important}
  [data-r="nb-rail"]{order:2;flex-direction:row!important;flex-wrap:wrap!important;
    flex:none!important;gap:8px;overflow:visible!important;padding:14px 16px!important;
    border-right:none!important;border-top:1px solid #E0D8C8!important;
    border-bottom:1px solid #E0D8C8!important}
  [data-r="nb-rail"]>div{display:none!important}
  [data-r="nb-cat"]{width:auto!important;flex:none!important;padding:10px 13px!important;
    border:1px solid #E0D8C8!important}
  [data-r="nb-list"]{order:3;width:100%!important;max-height:42vh!important;flex:none!important;
    padding:18px 16px 12px!important}
  [data-r="nb-list"] h2{font-size:21px!important;margin-bottom:8px!important}
  [data-r="nb-place"]{padding:6px 2px!important}
  [data-r="nb-list"][data-open="closed"]{display:none!important}
  [data-r="map-badge"]{left:12px!important;top:12px!important;padding:10px 13px!important}
  [data-r="map-recentre"]{right:12px!important;top:12px!important}
  /* Phone: the place card becomes a bottom sheet fixed to the viewport rather
     than to the map. The map is only the top 64vh at this width, so a card
     pinned inside it is already scrolled off screen by the time a tap in the
     list below selects a place. Fixed keeps it under the thumb either way. */
  [data-r="map-card"]{position:fixed!important;left:0!important;right:0!important;
    bottom:0!important;top:auto!important;max-width:none!important;
    padding:18px 20px 22px!important;border-left:0!important;border-right:0!important;
    border-bottom:0!important;border-top:2px solid #8A6534!important;
    box-shadow:0 -18px 44px -26px rgba(24,20,14,0.5)!important;z-index:3800!important}
  /* On the sheet the underlined-link treatment doesn't survive a 44px touch
     target — the border-bottom detaches from the text. A filled full-width
     button is the better phone affordance anyway. */
  [data-r="map-card-dir"]{margin-top:16px!important;min-height:46px!important;
    width:100%!important;box-sizing:border-box!important;justify-content:center!important;
    padding:0 18px!important;border:0!important;background:#8A6534!important;
    color:#FFFDF8!important}
  [data-r="map-card-close"]{min-height:44px!important;min-width:44px!important;
    justify-content:center!important;margin:-12px -14px 0 0!important}

  /* Nav — Residents lives in the menu panel at phone width */
  [data-r="nav-residents"],.ariaNav__residents{display:none!important}

  /* Home — hero copy panel and the full-width interior band */
  [data-r="hero-panel"]{max-width:none!important}
  [data-r="imgband"]>img{height:52vh!important;min-height:270px!important}
  [data-r="imgband-copy"]{position:static!important;padding:0!important;display:block!important}
  [data-r="imgband-panel"]{max-width:none!important;background:#FAF7F0!important;backdrop-filter:none!important;border:none!important;box-shadow:none!important;padding:32px 20px 38px!important}

  /* Footer */
  [data-r="footer-bar"]{margin-top:40px!important;flex-wrap:wrap;gap:12px!important}
}

/* ---------- Phones ---------- */
@media (max-width:560px){
  [data-r="jrow"]>div{min-width:100%!important}

  [data-rp]{padding-left:16px!important;padding-right:16px!important}
  [data-rg="four"]{gap:22px 16px!important}
  [data-rg="stats3"]{grid-template-columns:1fr 1fr!important;gap:0 14px!important}
  [data-r="bldg-diagram"]{gap:7px}
  [data-r="floor-tag"]{padding:8px 11px!important}
  [data-r="floor-tag"]>span{font-size:10.5px!important}
  [data-r="floor-tag"]>span+span{font-size:7.5px!important}
  /* Site-plan tags are unreadable and untappable at phone width — the plan
     stays tappable through its polygons, and every building has its own
     titled section below. */
  [data-r="plan-tag"]{display:none!important}
  [data-r="imgband-panel"]{padding:30px 16px 34px!important}
}


/* ---------- Small laptops (901–1120) ---------- */
@media (max-width:1120px) and (min-width:901px){
  [data-rg="four"]{grid-template-columns:repeat(3,1fr)!important;gap:26px 28px!important}
}
@media (max-width:1000px) and (min-width:901px){
  [data-rg="one"]:not([data-r="nav-row"]){grid-template-columns:1fr!important;gap:34px!important}
}

/* ---------- Touch targets (phones and small tablets) ---------- */
@media (max-width:900px){
  [data-r="nav-row"],.ariaNav__inner{padding-left:16px!important;padding-right:16px!important;column-gap:12px!important}
  [data-r="nav-logo"]{height:54px!important}
  [data-r="nav-row"]>div:last-child,.ariaNav__side--end{gap:12px!important}
  [data-r="nav-toggle"],.ariaNav__toggle{min-height:44px!important;padding:10px 2px!important}
  [data-r="nav-tour"],.ariaNav__tour{display:inline-flex!important;align-items:center;min-height:44px!important;padding:0 12px!important}
  [data-r="nav-phone"],.ariaNav__phone{display:inline-flex!important;align-items:center;min-height:44px!important}
  [data-rp] button:not([data-r="plan-tag"]):not([data-r="floor-tag"]):not([data-r="amen-tag"]){min-height:44px!important}
  [data-r="nb-cat"]{min-height:52px!important}
  [data-r="map-recentre"],[data-r="nb-list"] button:not([data-r="nb-place"]){min-height:44px!important;min-width:44px!important}
  [data-r="nb-list"] button[data-r="nb-place"]{min-height:36px!important}
  .leaflet-bar a{width:42px!important;height:42px!important;line-height:42px!important;font-size:18px!important}
  [data-r="unit-row"]{padding-top:18px!important;padding-bottom:18px!important}

  /* Touch: the desktop 0.45s hover fades read as lag on tap — filter chips
     and in-page buttons respond near-instantly at phone width */
  [data-rp] button,[data-r="nb-cat"],[data-r="nb-place"]{transition-duration:0.12s!important}

  /* Minimum readable label sizes */
  [data-r="nb-title"]{font-size:21px!important;line-height:1.2!important}
  [data-r="floor-tag"]>span+span{font-size:9.5px!important}
  [data-r="nb-eyebrow"]{font-size:10.5px!important}
}
@media (max-width:560px){
  [data-r="nav-phone"],.ariaNav__phone{display:none!important}
  [data-r="floor-tag"]>span+span{font-size:9px!important}
}


/* ---------- Touch: footer + inline links ---------- */
@media (max-width:900px){
  [data-r="foot-links"]{gap:4px!important}
  [data-r="foot-links"] a,[data-r="foot-link"]{display:inline-flex!important;align-items:center;min-height:44px!important}
  [data-r="foot-links"][style*="row"] a{padding-right:8px}
  [data-r="plan-card"] > div:first-child{padding-right:54px!important}
  [data-r="plan-card"] button{width:40px!important;height:40px!important;min-height:40px!important}
}

/* ---------- accessibility ---------- */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid #8A6534;outline-offset:3px}
.aria-skip{position:absolute;left:12px;top:-60px;z-index:5000;background:#23282E;color:#F3EFE7;padding:12px 18px;font-family:Jost,sans-serif;font-size:11px;letter-spacing:.2em;transition:top .2s ease}
.aria-skip:focus{top:12px;color:#F3EFE7}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  html.rvjs [data-reveal]{opacity:1!important;transform:none!important}
}
/* --- accessibility --- */