/* Bluebonnet Ridge — tablet and phone layer, loaded after site.css.
   Breakpoints follow Aria: 1100 (tablet), 900 (phones and small tablets), 560 (phones). */

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

@media (max-width:1100px){
  :root{--gutter:32px}
  .foot__top{grid-template-columns:1fr 1fr;gap:34px 32px;padding:52px 0 40px}
  .foot__brand{grid-column:1/-1;max-width:420px}
  .split,.split--rev{gap:48px}
  .sheet{grid-template-columns:1fr 1fr;gap:36px}
  .sheet__well{height:420px}
  .list-all .unit{grid-template-columns:70px minmax(0,1fr) minmax(0,1fr) 100px}
  .list-all .unit__go{display:none}
  .sitemap-groups{grid-template-columns:1fr 1fr}
  .nbx{grid-template-columns:220px 320px minmax(0,1fr)}
  .nbx__title{font-size:30px}
}

@media (max-width:900px){
  :root{--gutter:20px;--nav-h:76px}
  body{font-size:16px}
  .nav__inner{padding:0 16px;column-gap:10px}
  .nav__phone,.nav__residents{display:none}
  .nav__logo img{height:54px}
  .nav__word{display:none}
  .nav__toggle{min-width:44px;justify-content:center}
  .nav__tour{padding:0 12px;min-height:44px;display:inline-flex;align-items:center;font-size:10.5px;letter-spacing:.16em}
  .nav__call{display:inline-flex!important}
  /* The call button keeps a 44 x 44 box and a whole icon; the gap gives way. */
  .nav__side--end{gap:8px;min-width:0}
  .nav__call{flex:none;width:44px;height:44px;min-width:44px;padding:0;justify-content:center}
  .nav__call svg{flex:none;width:18px;height:18px}
  .nav__tour{flex:none}

  .menu__inner{grid-template-columns:1fr;gap:28px;padding:96px 22px 30px;align-content:start}
  .menu__nav a{font-size:28px;padding:9px 0}
  .menu__aside{align-self:start}
  .menu__aside .btn{align-self:stretch}

  .section{padding:64px 0}
  .section--tight{padding:48px 0}
  .split,.split--rev{grid-template-columns:1fr;gap:28px}
  .split--rev>:first-child{order:2}
  .page-head{padding:44px 0 36px}
  .photo--tall{height:auto;aspect-ratio:4/3}
  .photo--mid{height:auto;aspect-ratio:3/2}

  /* Home hero: the photo with the headline over it; Explore sits bottom-right under the headline. */
  .hero{height:72vh;min-height:520px;max-height:760px}
  .hero__media::after{background:linear-gradient(180deg,rgba(18,17,14,.5) 0%,rgba(18,17,14,.08) 30%,rgba(18,17,14,.12) 45%,rgba(18,17,14,.78) 100%)}
  .hero__bar{flex-direction:column;align-items:stretch;gap:22px;padding:0 20px 32px}
  .hero__copy p{font-size:16px;margin-top:12px}
  .hero__explore{align-self:flex-end;min-width:160px}

  .facts li{padding:22px 8px}
  .facts strong{font-size:26px}
  .facts span{font-size:10.5px;letter-spacing:.16em}

  .trio{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);gap:12px;margin:28px calc(var(--gutter) * -1) 28px;padding:0 var(--gutter)}
  .trio figure{flex:0 0 80vw;scroll-snap-align:start}
  .trio img{height:260px}

  .rows--two{grid-template-columns:1fr}
  .rows--two li:nth-child(2){border-top:0}
  .band{padding:64px 0}
  .band .btn-row{flex-direction:column;align-items:stretch}

  /* Filters collapse to one control that opens a sheet. */
  .filters{position:static}
  .filters__inner{gap:12px}
  .filters__toggle{display:inline-flex!important}
  .filters__inner>.filters__panel{display:none}
  .filters__count{margin-left:0;width:100%}
  .filters__active{display:flex!important;flex-wrap:wrap;gap:8px;width:100%}
  .filters__active:empty{display:none!important}

  .sheet{grid-template-columns:1fr;gap:22px;padding:36px 0}
  .sheet__well{height:300px;padding:16px}
  .sheet__actions{flex-direction:column;align-items:stretch}
  .unit{grid-template-columns:1fr auto;gap:2px 12px;padding:16px 4px}
  .unit__meta{grid-column:1}
  .unit__price{grid-row:1;grid-column:2}
  .unit__date{grid-column:1}
  .unit__go{grid-column:2;grid-row:2 / span 2;align-self:end}
  .list-all .unit{grid-template-columns:1fr auto}

  .panel{width:100vw}
  .panel__bar{padding:8px 16px}
  .panel__body{padding:24px 20px 110px}
  .panel__desk-only{display:none!important}
  .panel__sticky{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:absolute;left:0;right:0;bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--hairline)}
  .panel__sticky .btn{padding:12px 10px}

  .sched{width:100vw;max-height:100dvh;height:100dvh}
  .sched__head{padding:20px 20px 0}
  .sched__body{padding:8px 20px 32px}
  .sched h2{font-size:32px}
  .form-grid{grid-template-columns:1fr}

  .vt__bar{padding:8px 12px;gap:6px;flex-wrap:wrap}
  .vt__bar h2{font-size:19px;flex-basis:100%;order:-1;margin:4px 0}
  .vt__bar .lbl-long{display:none}

  .tours{grid-template-columns:1fr}
  .tour-card img{height:240px}

  /* Phones: chip rails scroll sideways. They start on the h1's gutter, the right
     edge fades so a cut chip reads as "more this way", and a trailing spacer lets
     the last chip scroll fully clear of the fade. */
  .gal-filters{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(var(--gutter) * -1) 24px;padding:0 var(--gutter) 4px;scroll-padding-inline:var(--gutter);scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
  .gal-filters::-webkit-scrollbar{display:none}
  .gal-filters::after{content:"";flex:none;width:28px}
  .gal-filters .chip{flex:none}
  .gal{grid-template-columns:1fr 1fr;gap:10px}
  .gal__item,.gal__item:nth-child(n),.gal__item[data-span]{grid-column:span 1}
  .gal__item[data-wide]{grid-column:1/-1}
  .gal__item[data-wide] img{aspect-ratio:2/1}
  .gal__item img{height:auto;aspect-ratio:3/2}
  /* Phones: captions sit under the photo in small muted text, so tiles read as photos. */
  .gal{align-items:start}
  .gal__item{background:none;overflow:visible}
  .gal__item img{background:#E5DED0}
  .gal__item:hover img{transform:none}
  .gal__cap{position:static;display:block;opacity:1;background:none;color:var(--muted);font-size:13px;line-height:1.4;padding:8px 0 4px;text-wrap:pretty}

  /* Neighborhood explorer: h1, the map at 55svh, one sideways chip row, then the
     list. A selected place opens as a bottom sheet (Crosswood Park's phone pattern). */
  .nbx{display:flex;flex-direction:column;height:auto;min-height:0}
  .nbx__rail{display:contents}
  .nbx__title{order:0;font-size:32px;margin:0;padding:26px var(--gutter) 20px;background:var(--paper)}
  .nbx__map{order:1;height:55svh;min-height:340px}
  .nbx__cats{order:2;flex-direction:row;flex-wrap:nowrap;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-padding-inline:var(--gutter);padding:12px var(--gutter);background:var(--paper);border-bottom:1px solid var(--hairline);scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
  .nbx__cats::-webkit-scrollbar{display:none}
  .nbx__cats::after{content:"";flex:none;width:28px}
  .nbx__cat{flex:none;width:auto;white-space:nowrap;min-height:44px;padding:8px 14px;gap:9px;border:1px solid var(--hairline);border-left-width:1px;background:var(--surface)}
  .nbx__cat[aria-pressed="true"]{border-color:var(--accent);background:var(--white)}
  .nbx__home{display:none}
  .nbx__list{order:3;overflow:visible;padding:28px 0 16px}
  .nbx__list-title,.nbx__note{padding-left:var(--gutter);padding-right:var(--gutter)}
  .nbx .place{padding:14px var(--gutter)}
  .nbx__map .map-btn{top:12px;right:12px}
  .nbx .maplibregl-ctrl-group button{width:44px;height:44px}
  .nbx .maplibregl-popup{position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;transform:none!important;max-width:none!important;z-index:3800}
  .nbx .maplibregl-popup-tip{display:none}
  .nbx .maplibregl-popup-content{border-top:2px solid var(--accent);padding:20px 56px calc(22px + env(safe-area-inset-bottom)) var(--gutter)!important;box-shadow:0 -18px 44px -26px rgba(24,20,14,.5)!important}
  .nbx .maplibregl-popup-close-button{width:44px;height:44px;top:6px;right:6px}

  .facts-list>div{grid-template-columns:1fr;gap:4px}
  /* /contact: facts and Book a tour come before the form. */
  .split--facts-first>:first-child{order:0}
  .facts-list .btn{width:100%}
  .contact-map{height:280px}

  .foot__top{grid-template-columns:1fr;gap:28px;padding:44px 0 32px}
  .foot__col a,.foot__inline a,.foot__policy a{display:inline-flex;align-items:center;min-height:44px}
  .foot__col{gap:0}
  .foot__legal{flex-direction:column;gap:16px}
  .foot__bar{flex-direction:column;gap:14px}
  .foot__kiara{max-width:none}
  .sitemap-groups{grid-template-columns:1fr}
}

@media (max-width:560px){
  .nav__tour .lbl-long{display:none}
  .facts ul{grid-template-columns:1fr 1fr 1fr}
  .chip{padding:8px 12px;letter-spacing:.12em}
  .gal__cap{font-size:12.5px}
  .btn{white-space:normal}
  .rows li,.rows>div{flex-wrap:wrap;gap:4px 16px}
  .rows .val{white-space:normal;margin-left:auto}
}

@media (min-width:901px){
  .filters__toggle,.filters__active,.nav__call{display:none!important}
}
@media (max-width:360px){
  .foot__kiara a{gap:8px;font-size:9.5px;letter-spacing:.18em}
}