/* Avion Point — responsive.css: tablet (761-1180 px) and phone (360-760 px) overrides.
   Header and menu: desktop at 1100 px and up, tablet 760-1099, phone below 760.
   Neighborhood app: stacks at 900 px and below.
   Loaded after site.css. */

/* ---------- Header: below 1280 ---------- */
/* The phone shows as its labelled icon below 1280 px, so Book a tour and Residents keep their room
   beside the centred logo; the number returns at 1280. */
@media (max-width: 1279px) {
  .header-bar { column-gap: var(--s6); }
  .header-side--end { gap: 18px; }
  .header-phone-num { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .header-phone svg { width: 20px; height: 20px; color: var(--ink); }
}

/* ---------- Header and menu: tablet (760-1099) ---------- */
@media (max-width: 1099px) {
  :root { --header: 72px; }
  .brand img { height: 44px; }
  /* Menu, tablet and phone: the photo steps aside and the list takes the full width. */
  .menu-inner { grid-template-columns: minmax(0, 1fr); }
  .menu-photo { display: none; }
  .menu-body { padding: var(--s8) var(--gutter) var(--s8); }
  .menu-contact { margin-top: var(--s4); }
}

/* ---------- Tablet and small laptop ---------- */
@media (max-width: 1180px) {
  :root { --gutter: 32px; --section: 80px; }
  .ps-media { grid-column: 1 / 8; }
  .ps-panel { grid-column: 8 / 13; padding: var(--s6); }
  .tour-panel { padding: var(--s8) var(--s6); }
  .unit-table th, .unit-table td { padding-inline: var(--s2); }
  .intro .copy { grid-column: 1 / 7; }
  /* Home hero, tablet: the crop keeps the trees and the far building under the title. */
  .hero { --hero-pos: 40% 62%; --sky-pos: 18% 70%; --shade-a: 520px; --shade-b: 800px; }
  /* Plan viewer: the info panel takes a little more room beside the render. */
  .pv-info { grid-column: 1 / 7; }
  .pv-media { grid-column: 7 / 13; }
  .pv-figs { gap: var(--s6); }
  /* Floor plans: the render takes five columns, the header row and units seven. */
  .fp-media { grid-column: 1 / 6; }
  .fp-head, .fp-units { grid-column: 6 / 13; }
  .fp-extra .field { width: 148px; }
  .tb-card { padding: var(--s7) var(--s6) var(--s6); }
  .foot-brand { grid-column: 1 / -1; padding-right: 0; }
  .foot-col { grid-column: span 3 !important; }
}

@media (max-width: 1000px) {
  .page-hero h1 { grid-column: 1 / -1; }
  .page-hero .lead { grid-column: 1 / 10; margin-top: var(--s4); }
  .contact-call, .contact-form { grid-column: 1 / -1; }
  .amen-block .duo, .amen-block .list { grid-column: 1 / -1; }
  .bleed-glass .glass { grid-column: 3 / 13; }
  .fp-h1 { grid-column: 1 / -1; white-space: normal; }
  .fp-intro .lead { grid-column: 1 / 10; margin-top: var(--s4); }
  /* The filter bar wraps: the controls on one row, the count on its own line. */
  .fp-filters { flex-wrap: wrap; row-gap: var(--s2); }
  .fp-count { margin-left: 0; text-align: left; flex-basis: 100%; display: flex; gap: var(--s4); align-items: baseline; }
  .tour-band-grid > .tb-photo { grid-column: 1 / 6; }
  .tour-band-grid > .tb-card { grid-column: 6 / 13; }
}

/* ---------- Neighborhood: 900 px and below ---------- */
/* The map takes the top 64vh, the rail becomes a wrapped row of chips under it, and the list opens
   under the chips only after a category is picked (the page opens on the map alone). The place card
   is a bottom sheet fixed to the viewport, so it stays under the thumb. */
@media (max-width: 900px) {
  .nb { display: flex; flex-direction: column; height: auto; min-height: 0; max-height: none; overflow: visible; }
  .nb-map { order: 1; height: 64vh; min-height: 360px; flex: none; }
  .nb-rail { order: 2; flex-direction: row; flex-wrap: wrap; gap: var(--s2); overflow: visible; padding: var(--s4) var(--gutter); border-right: 0; border-bottom: 1px solid var(--line); }
  .nb-intro { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; }
  .nb-cats { display: flex; flex-wrap: wrap; gap: var(--s2); }
  .nb-cat { width: auto; min-height: 44px; padding: 0 var(--s4); border: 1px solid var(--line); border-radius: 999px; grid-template-columns: 18px auto auto; gap: var(--s2); background: var(--raised); font-size: 15px; }
  .nb-cat[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
  .nb-cat[aria-pressed="true"] .nb-ico, .nb-cat[aria-pressed="true"] .nb-count { color: var(--on-panel-muted); }
  .nb-ico svg { width: 18px; height: 18px; }
  .nb-note { flex-basis: 100%; margin: var(--s2) 0 0; padding: 0; border: 0; }
  .nb-list { order: 3; display: none; max-height: 52vh; overflow-y: auto; }
  .nb.is-picked.is-open .nb-list { display: block; }
  .nb-list > * { width: auto; }
  .nb-list-head { padding: var(--s5) var(--gutter) var(--s3); }
  .nb-places { padding: 0 var(--gutter) var(--s5); }
  .nb-badge { left: var(--s3); top: var(--s3); padding: var(--s2) var(--s3); }
  .nb-recentre { right: var(--s3); top: var(--s3); }
  .nb-card { position: fixed; left: 0; right: 0; bottom: 0; width: auto; z-index: 50; padding: var(--s5) var(--gutter) calc(var(--s5) + env(safe-area-inset-bottom)); border: 0; border-top: 2px solid var(--mark);
    box-shadow: 0 -18px 44px -26px rgba(28, 34, 41, 0.5); }
  .nb-card-dir { width: 100%; }
}

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  :root { --gutter: 20px; --section: 64px; }
  .grid, .text-block, .amen-block, .chapter-head, .foot-top, .contact-grid, .tour-band-grid, .fp-intro-grid { grid-template-columns: minmax(0, 1fr); }
  .grid > *, .text-block > *, .chapter-head > *, .foot-top > *, .tour-band-grid > *, .fp-intro-grid > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  /* Phone header, 64 px, as on Idlewild: Menu, the logo and Book a tour (the phone and Residents
     live in the menu panel). The pill is 36 px to the eye; its ::before lifts the tap target to 44 px. */
  :root { --header: 64px; }
  .header-bar { column-gap: var(--s2); }
  .brand { padding-inline: 0; }
  .brand img { height: 36px; }
  .header-phone, .header-residents { display: none; }
  .site-header .header-tour { min-height: 36px; padding: 0 calc(12px - 0.1em) 0 12px; font-size: 13px; letter-spacing: 0.1em; }
  .site-header .header-tour::before { content: ""; position: absolute; inset: -4px 0; }
  .menu-toggle { gap: 9px; font-size: 13px; letter-spacing: 0.14em; }
  .menu-label { min-width: 3.9em; }
  /* Menu panel, phone: full screen under the bar, the groups stacked, links about 30 px, the contact
     block under them and a pinned bar with Call and Apply. */
  .menu-body { gap: var(--s6); padding: var(--s6) var(--gutter) var(--s7); }
  .menu-links a { font-size: 34px; gap: 16px; }
  .menu-more { gap: 0 28px; margin-top: var(--s4); padding: var(--s3) 0 0; }
  .menu-contact { grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding-top: var(--s5); }
  .menu-cta { display: none; }
  .menu-bar { display: flex; gap: var(--s3); position: sticky; bottom: 0; z-index: 1; padding: var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom)); background: var(--ground); border-top: 1px solid var(--line); }
  .menu-bar .pill { flex: 1; }

  /* Home hero, phone: the crop moves onto the building's middle bay so the title sits over the
     parking lot and trees; the shade grows to cover the taller text block. */
  .hero { --hero-pos: 92% 50%; --sky-pos: 64% 50%; }
  .hero { --shade-a: 100%; --shade-b: 100%; --shade-h: 44%; }
  .hero-h1 { font-size: clamp(40px, 11.5vw, 48px); }
  .hero-lead { margin: var(--s4) 0 var(--s5); }
  .hero-copy .actions .pill { flex: 1 1 auto; }
  /* The buttons take the full width at the foot, so the dots and pause move to the top right. */
  .hero-controls { top: var(--s3); bottom: auto; right: var(--s3); }

  .page-hero > img { height: 44svh; min-height: 260px; }
  .page-hero .wrap { grid-template-columns: minmax(0, 1fr); padding-top: var(--s5); }
  .page-hero h1, .page-hero .lead { grid-column: 1 / -1; }
  .page-hero .lead { margin-top: var(--s3); }
  .page-hero .lead--fixed-wrap { max-width: 16.5em; }
  /* Single long words ("Neighborhood", "Accessibility") must fit 375 with the 20 px gutter. */
  .page-hero h1, .legal-head h1 { overflow-wrap: break-word; }

  .intro .copy .h2 { margin-bottom: var(--s5); }
  .intro .copy { padding-block: 0; }
  .intro .photo-wide { margin-top: var(--s6); height: auto; min-height: 0; aspect-ratio: 4 / 3; }

  /* Plan viewer, phone: the head, the chips (one scrolling row), the render on top of the info
     panel, and the arrows beside the counter. */
  .pv-head { flex-direction: column; align-items: stretch; gap: var(--s5); margin-bottom: var(--s5); }
  .pv-nav { justify-content: space-between; }
  .pv-tabs { gap: var(--s2); border: 0; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1) var(--s5); padding: 2px var(--gutter); scroll-padding-inline: var(--gutter); }
  .pv-tabs::-webkit-scrollbar { display: none; }
  .pv-tab { flex: none; min-height: 44px; padding: 0 var(--s4); border: 1px solid var(--line); border-radius: 999px; background: var(--raised); font-size: 15px; color: var(--ink); }
  .pv-tab::after { display: none; }
  .pv-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
  .pv-panel { grid-template-columns: minmax(0, 1fr); row-gap: var(--s5); align-content: start; }
  .pv-media { grid-column: 1; grid-row: 1; aspect-ratio: auto; height: 260px; }
  .pv-media img { inset: var(--s4); width: calc(100% - 2 * var(--s4)); height: calc(100% - 2 * var(--s4)); }
  .pv-info { grid-column: 1; grid-row: 2; padding: 0; gap: var(--s4); }
  .pv-name { font-size: 34px; }
  .pv-figs { gap: var(--s6); padding-block: var(--s4); }
  .pv-figs dd { font-size: 44px; }
  .pv-info .actions .pill { flex: 1 1 auto; }

  .amen .title { margin-bottom: var(--s6); }
  .duo { aspect-ratio: 4 / 3; gap: var(--s2); }
  .half-bleed { grid-template-columns: 1fr; min-height: 0; }
  .half-bleed > img { height: 56svh; }
  .half-bleed .content { padding: var(--section) var(--gutter); }

  /* The plan label stays on one line beside its rent. */
  .avail-rows a { gap: var(--s3); }
  .avail-rows .beds { white-space: nowrap; font-size: 15px; letter-spacing: 0.06em; }
  .avail-rows .rent { font-size: 16px; white-space: nowrap; }
  .avail-rows .rent > span { font-size: 18px; }
  .avail-rows .count { min-width: 0; white-space: nowrap; }

  /* Tour band, phone: the photo becomes a short strip above the card. */
  .tb-photo { min-height: 0; height: 220px; margin-inline: calc(var(--gutter) * -1); }
  .tb-card { padding: var(--s6) var(--gutter); margin-inline: calc(var(--gutter) * -1); border-inline: 0; }
  .tb-facts { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .tb-submit .pill { width: 100%; }
  .form-grid { grid-template-columns: 1fr; }

  /* Plan sheet at 390: media 4:3, scrolling thumbs, panel, unit cards */
  .plan-sheet { grid-template-columns: minmax(0, 1fr); }
  .ps-media, .ps-panel, .ps-units { grid-column: 1; }
  .ps-stage, .sheet-dialog .ps-stage { aspect-ratio: var(--plan-ar, 4 / 3); flex: none; min-height: 0; }
  .ps-view.is-plan img { padding: var(--s3); }
  /* Four thumbs sit two by two and six sit three by two, so no row is part-empty. */
  .ps-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: var(--s3) var(--gutter); }
  .ps-thumbs[data-n="4"], .ps-thumbs[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-panel { padding: var(--s6) var(--gutter); }
  .ps-units { padding: var(--s6) 0 0; }
  .wrap > .plan-sheet { margin-inline: calc(var(--gutter) * -1); }
  .wrap > .plan-sheet .ps-units { padding-inline: var(--gutter); }
  .unit-table { display: none; }
  .unit-cards { display: block; }
  .sheet-dialog .ps-media { position: static; min-height: 0; }
  .sheet-dialog .ps-stage { flex: none; min-height: 0; }
  .sheet-dialog .ps-units { padding: var(--s6) var(--gutter) 120px; }
  .sheet-dialog .dialog-close { position: fixed; top: var(--s3); right: var(--s3); background: var(--panel); }
  /* A solid sticky bar reserves the close button's strip, so scrolling unit cards pass beneath it instead of under the button. */
  .sheet-dialog::before { content: ""; display: block; position: sticky; top: 0; z-index: 4; height: calc(44px + var(--s3) * 2); background: var(--ground); border-bottom: 1px solid var(--line); }
  .sheet-dialog .plan-sheet { min-height: calc(100dvh - 44px - var(--s3) * 2); }
  .sheet-bar { display: flex; gap: var(--s3); position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; padding: var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom)); background: var(--ground); border-top: 1px solid var(--line); }
  .sheet-bar .pill { flex: 1; }

  /* Floor plans, phone: the bar keeps the bedroom chips and the count, "More filters" opens the
     rest; each plan stacks its render (at most 260 px), its header and its unit cards. */
  .fp-intro { padding-block: var(--s6) var(--s5); }
  .fp-h1 { font-size: clamp(38px, 10.6vw, 46px); }
  .fp-filters { gap: var(--s2) var(--s3); padding-block: var(--s3); }
  .fp-beds { flex: 1 1 auto; }
  .fp-beds .legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fp-beds .chips { flex-wrap: nowrap; }
  .fp-beds .chip { min-width: 0; flex: 1; padding: 0 10px; }
  .fp-toggle { display: inline-flex; min-height: 44px; padding: 0 16px; font-size: 14px; }
  .fp-extra { display: none; flex-basis: 100%; flex-wrap: wrap; gap: var(--s3); }
  .fp-extra.is-open { display: flex; }
  .fp-extra .field { width: calc(50% - 6px); }
  .fp-extra .field:last-child { width: 100%; }
  .fp-count { font-size: 15px; flex-wrap: wrap; gap: 2px var(--s3); }
  .fp-count > span:first-child { white-space: nowrap; }
  /* The stamp always takes its own line, so a longer live "Updated …" never rewraps the bar and shifts the plans. */
  .fp-count { flex-direction: column; align-items: flex-start; }
  .fp-count .stamp { white-space: nowrap; }
  .fp-plan { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--s4); padding-block: var(--s6); scroll-margin-top: 150px; }
  .fp-media, .fp-head, .fp-units { grid-column: 1; grid-row: auto; padding-left: 0; }
  .fp-media { height: 240px; }
  .fp-head { align-items: flex-start; flex-direction: column; gap: var(--s4); }
  .fp-side { width: 100%; justify-content: space-between; }
  .fp-price { justify-items: start; }
  .fp-units .unit-card .meta { flex-wrap: wrap; }

  .chapter { padding-top: var(--section); }
  .chapter-head { row-gap: var(--s6); margin-bottom: var(--s6); }
  .chapter-head .duo { order: -1; }
  .thumb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
  .thumb-grid button { aspect-ratio: 1; }
  .thumb-grid.is-odd li:first-child { grid-column: 1 / -1; }
  .thumb-grid.is-odd li:first-child button { aspect-ratio: 2 / 1; }
  .jump { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  /* One line of links that scrolls sideways, each on one line, with a fade at the
     right edge as the scroll cue; end padding lets the last link clear the fade. */
  .jump { margin-inline: 0; gap: var(--s5); padding-right: 56px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
  .jump > * { flex: none; white-space: nowrap; }

  .two-col { columns: 1; }
  .bleed-glass { min-height: 0; display: block; }
  .bleed-glass > img { position: relative; height: 50svh; }
  .bleed-glass .wrap { display: block; padding: 0; }
  .bleed-glass .glass { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; padding: var(--section) var(--gutter); }

  .deflist dd { font-size: 22px; }
  .text-block { row-gap: var(--s5); }
  .map-static { height: 50svh; }

  .tour-layout { grid-template-columns: 1fr; }
  .tour-layout .photo-side, .tour-panel { grid-column: 1; }
  .tour-layout .photo-side img { position: relative; top: 0; height: 24svh; object-position: 50% 66%; }
  .tour-panel { padding: var(--s7) var(--gutter) var(--s9); }
  .time-chips .chip { padding: 0 4px; font-size: 13px; white-space: nowrap; }

  .foot-top { row-gap: var(--s6); }
  .foot-top > .foot-col { grid-column: auto !important; }
  .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand, .foot-col[aria-labelledby="foot-contact"], .foot-col[aria-labelledby="foot-hours"] { grid-column: 1 / -1 !important; }
  .foot-legal { flex-direction: column; align-items: flex-start; gap: var(--s3); }
  .copyright { margin-left: 0 !important; }

  .lb-stage { grid-template-columns: 1fr; position: relative; }
  .lb-stage .lb-btn { position: absolute; bottom: -64px; }
  .lb-stage [data-prev] { left: var(--gutter); }
  .lb-stage [data-next] { right: var(--gutter); }
  .lb-caption { padding-inline: 88px; }

  .legal-head { padding-top: var(--s9); }
  .legal-h1 { margin-bottom: var(--s4); }
  .legal-head .lead { margin-top: var(--s5); }
  .legal-body { margin-top: var(--s6); }
}

/* ---------- Book a tour dialog: phone ---------- */
/* Full screen under the browser chrome, with the action bar pinned to the bottom edge. */
@media (max-width: 760px) {
  .book-dialog { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; border: 0; }
  .bk-body { padding: 56px var(--gutter) 0; }
  .bk-close { top: var(--s2); right: calc(var(--gutter) - 10px); }
  .bk-title { font-size: 34px; }
  .bk-next { margin-inline: calc(var(--gutter) * -1); padding: var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom)); flex-direction: column; align-items: stretch; gap: var(--s2); }
  .bk-next .bk-go { width: 100%; }
  .bk-next-text { min-height: 0; }
  .bk-list { max-height: none; }
  .bk-home { grid-template-columns: 1fr auto; padding: var(--s3) var(--s3); }
  .bk-days { gap: 4px; }
  .bk-day { padding: 6px 0; }
  .bk-home-name span { display: block; margin-top: 2px; }
  .bk-times { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bk-times .chip { padding: 0 4px; font-size: 13px; letter-spacing: 0.04em; }
  .bk-chosen { flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .bk-form .form-grid { grid-template-columns: minmax(0, 1fr); }
  .bk-status[data-state="fallback"] .pill { width: 100%; }
}