/* ==========================================================================
   Birchwood Living — responsive.css
   Loaded after site.css. Tablet (760–1279) and phone (≤760, verified at 500).
   Horizontal scrolling is confined to the photo rail and photo strips.
   ========================================================================== */

/* --- tablet: 900–1279 ---------------------------------------------------- */
@media (max-width: 1279px) {
  :root {
    --sec-y: 80px;
    --hero-top: 128px;
    --hero-bot: 64px;
    --fs-display-xl: 68px; --lh-display-xl: 66px;
    --fs-display-l: 48px;  --lh-display-l: 50px;
    --fs-h2: 36px;         --lh-h2: 40px;
  }
  .doc { grid-template-columns: 200px minmax(0, 1fr); gap: var(--s12); }
  .unit-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s12); }
  .sitemap-grid { gap: var(--s12); }
  .amen-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .split__overlay .d-l { font-size: min(var(--fs-display-l), 5.4vw); line-height: 1.05; }
  .site-header__contact { display: none; }
  .site-nav { gap: var(--s6); }
  .site-nav__list { gap: var(--s4); }
  .comm-row { grid-template-columns: 52px minmax(0, 1fr) 130px; }
  .comm-row__street { display: none; }
  .band--statement { min-height: 380px; padding-block: var(--s24); }
  .split__overlay { padding: var(--s8); }
  .split__preview { min-height: 520px; }
}

/* --- below 900: no hover-dependent previews, no sticky rails ------------- */
@media (max-width: 899px) {
  .split { display: none; }
  .stack-list { display: grid; }
  .unit-grid { grid-template-columns: minmax(0, 1fr); }
  .unit-rail { position: static; }
  /* ledger reflows to two lines; photo drops to 64px; nothing truncates */
  .ledger, .ledger thead, .ledger tbody, .ledger tr, .ledger td, .ledger th { display: block; }
  .ledger__head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ledger-panel { padding: 0 var(--s4); }
  .ledger__cell { padding: 0; }
  /* `.ledger tr` above is more specific than `.ledger__row`, so the grid rule
     has to name the element too or the block rule wins. */
  .ledger tr.ledger__row {
    display: grid; grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-areas: "photo addr rent" "photo spec spec" "photo avail avail";
    gap: var(--s1) var(--s4); padding: var(--s4) 0; align-items: start;
  }
  .ledger td.ledger__c-photo, .ledger__c-photo { grid-area: photo; width: 64px; align-self: center; }
  .ledger__photo { width: 64px; height: 64px; }
  .ledger td.ledger__c-addr { grid-area: addr; }
  .ledger td.ledger__c-rent { grid-area: rent; text-align: right; }
  .ledger td.ledger__c-spec { grid-area: spec; }
  .ledger td.ledger__c-avail { grid-area: avail; text-align: left; }
  .ledger__addr { font-size: 17px; line-height: 22px; }
  .ledger__go { display: none; }
  .ledger__rent-foot { justify-content: flex-end; gap: 0; }
  .ledger-list .ledger__link {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-areas: "photo addr rent" "photo spec spec";
    gap: var(--s1) var(--s4); padding: var(--s4) 0; align-items: start;
  }
  .ledger-list .ledger__photo { grid-area: photo; align-self: center; }
  .ledger-list .ledger__main { grid-area: addr; display: block; }
  .ledger-list .ledger__spec { grid-area: spec; }
  .ledger-list .ledger__side { grid-area: rent; text-align: right; }
  .ledger__foot { padding: var(--s4) 0; }

  .specrow { display: grid; grid-template-columns: 1fr 1fr; }
  .specrow__cell { border-left: 0; border-top: var(--hair); min-width: 0; }
  .specrow__cell:nth-child(2n) { border-left: var(--hair); }
  .specrow__cell:nth-child(-n+2) { border-top: 0; }
  .specrow__cell:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .doc { grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
  .doc__nav { position: static; }
  .doc__nav ol { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); }
  .sitemap-grid { grid-template-columns: minmax(0, 1fr); }
  .start-here { position: static; order: -1; }
  .places { grid-template-columns: 1fr; }
  /* below 900 there is no room for a 460px column beside a usable map, so the
     section returns to the stack the 500px note already describes */
  .locate { grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
  .locate .map { aspect-ratio: 16 / 9; height: auto; min-height: 0; }
  .contact-panel { grid-template-columns: minmax(0, 1fr); }
  .contact-panel__left { border-right: 0; border-bottom: var(--hair); }
  .mosaic { display: none; }
  .mosaic-mobile { display: block; }
  .mosaic-mobile > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
  .terms > div, .terms__row { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  /* the hero's two columns need ~470px on the left for a 16-character display
     line; below 900 the paragraph goes under the display instead of beside it */
  .comm-index__head { grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
  .comm-row { grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; }
  .comm-row__from { font-size: var(--fs-body); }
  /* Below 900 the two tracks stop working: a copy column wide enough to read
     leaves a display column too narrow for the type. The grid collapses to one
     column and the paragraph moves BELOW the cascade at full size rather than
     being squeezed into illegibility beside it. The display track becomes the
     whole wrap, so the fit calc has the whole width to spend. */
  .home-hero { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .home-hero { --hero-disp-w: var(--hero-w); --cascade-room: .93; }
  .home-hero__copy { grid-column: 1; grid-row: auto; max-width: 46ch; margin-top: var(--s8); }
  .home-hero__cta { grid-column: 1; grid-row: auto; }
  .cascade__line:nth-child(1) { margin-left: 0; }
  .home-hero__cta, .cascade__line:nth-child(2), .cascade__line:nth-child(3) { margin-left: 7%; }
  .subbar__inner { gap: var(--s2); }
  .subbar__spacer { display: none; }
}

/* --- phone: ≤760, laid out and verified at 500 --------------------------- */
@media (max-width: 760px) {
  :root {
    --sec-y: 56px;
    --hero-top: 128px;
    --hero-bot: 64px;
    --fs-display-xl: 44px; --lh-display-xl: 44px;
    --fs-display-l: 34px;  --lh-display-l: 36px;
    --fs-rent: 30px;       --lh-rent: 30px;
    --fs-h2: 28px;         --lh-h2: 32px;
    --fs-h3: 21px;         --lh-h3: 27px;
    --fs-lead: 18px;       --lh-lead: 29px;
    --fs-body: 16px;       --lh-body: 26px;
    --fs-small: 14px;      --lh-small: 21px;
    --fs-label: 12px;      --lh-label: 15px;
    --header-h: 64px;
  }

  .d-xl { line-height: 1; }

  /* Keep the hero compact and align the photo rail to consistent mobile gutters. */
  .cascade__line:nth-child(1) { margin-left: 0; }
  .cascade__line:nth-child(2), .cascade__line:nth-child(3),
  .home-hero__cta { margin-left: 6%; }
  .hero--home { padding-block: var(--s16) 0; }
  .rail { margin-top: var(--s12); gap: var(--s4); padding-inline: 16px; scroll-padding-inline: 16px; align-items: flex-start; }
  .rail__item:nth-child(6n+1), .rail__item:nth-child(6n+2), .rail__item:nth-child(6n+3),
  .rail__item:nth-child(6n+4), .rail__item:nth-child(6n+5), .rail__item:nth-child(6n+6) {
    width: min(78vw, 300px); margin-top: 0; scroll-snap-align: start;
  }
  .rail__cap { padding-top: var(--s4); }
  .rail__where { margin-top: var(--s1); }

  .comm-index { padding-block: var(--sec-y); }
  .comm-row {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: var(--s4); padding: var(--s4) 0;
  }
  .comm-row__name { font-size: 24px; line-height: 28px; }
  .chip { width: 36px; height: 44px; font-size: 18px; }
  .comm-row__from { font-size: var(--fs-small); }

  .band--statement { min-height: 0; padding-block: var(--s16); }
  .band--statement .measure { margin-top: var(--s6); }
  .metaline { font-size: 14px; line-height: 20px; }
  .metaline > span + span { margin-left: var(--s3); padding-left: var(--s3); }

  /* the panel stops overlapping: at 56px section padding the lift would eat
     the whole gap between the band above it and the panel */
  .panel--lift { margin-top: 0; }
  .ledger-panel { padding: var(--s6) var(--s4) 0; }

  .subbar { padding-block: var(--s2); }
  .subbar__inner { gap: var(--s2); }
  .subbar__spacer { display: none; }
  .subbar .btn { width: auto; }

  /* one column everywhere */
  .cols-2, .about-block, .home-hero, .overview { display: block !important; }
  .cols-2 > * + *, .about-block > * + *, .home-hero > * + *, .overview > * + * { margin-top: var(--s8); }

  /* mosaic replaced by one exterior + a horizontal strip */
  .mosaic-mobile { display: block; }
  .mosaic-mobile > img, .mosaic-mobile .photo-btn img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: var(--frame); }
  .mosaic-mobile .strip { margin-top: var(--s6); }
  .strip > * { flex: 0 0 200px; }
  .strip img { width: 200px; height: 134px; }

  /* W10's 500px note: "the four-cell spec row wraps to two rows of two and never
     truncates". Round 2, finding 3: `display: block` gave four full-width rows —
     329px of stack for four short facts. Two tracks, hairlines between both rows
     and both columns, and a fifth cell (the unit template's AVAILABLE) spanning
     the width rather than sitting alone in a half-empty row. */
  .hero--tight, .hero--tighter { padding-bottom: var(--hero-bot); }

  .tiles { display: grid; grid-template-columns: 1fr 1fr; }
  .tile { min-width: 0; }
  .amen-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s4); }

  .band img { aspect-ratio: 3 / 2; }
  .map, .locate .map { aspect-ratio: 4 / 3; }
  .map--tall { aspect-ratio: 4 / 3; }

  .panel, .contact-panel__left, .contact-panel__right { padding: var(--s6) var(--s4); }
  .unit-rail { padding: var(--s6) var(--s4); }

  .footer-top { gap: var(--s8); }
  .footer-word { font-size: clamp(38px, 11vw, 58px); }
  .footer-grid { grid-template-columns: 1fr; gap: var(--s8); }
  .footer-legal { grid-template-columns: 1fr; }
  .footer-legal__end { justify-content: flex-start; gap: var(--s2) var(--s6); }

  .pillbar { padding-block: var(--s2); }
  .pillbar__spacer { margin-left: 0; width: 100%; }
  .pill { min-height: 36px; padding: 0 var(--s4); }

  .actions .btn, .unit-rail .btn { width: fit-content; max-width: 100%; flex: 0 1 auto; justify-content: center; }
  .actions { gap: var(--s3); align-items: flex-start; }
  .finder-search { align-items: center; }
  .finder-search .btn { align-self: center; width: fit-content; }
  .home-hero__cta .btn { width: auto; }

  .quote blockquote { font-size: var(--fs-h3); line-height: var(--lh-h3); }

  /* finding 9: the sitemap row stacks so nothing forces a wider viewport */
  .sitemap-list a { flex-direction: column; align-items: flex-start; gap: var(--s1); }
  .sitemap-list .meta { align-items: flex-start; text-align: left; }

  .strip__nav { flex-wrap: wrap; gap: var(--s3); }

}

/* --- header: the drawer breakpoint --------------------------------------
   RESPONSIVE AUDIT, round 5. This used to sit inside the 899px block, which
   meant the full five-link nav plus the CTA pill plus the brand lockup were
   all laid out between 761px and 1279px. They do not fit: the bar measured
   1050px of content, so /  scrolled horizontally by 282px at 768, 216px at
   834 and 26px at 1024. Prior rounds only ever captured 500 and 1440, which
   is exactly the pair that misses it.
   The drawer now runs to 1099px, which is the first width where the desktop
   bar (brand lockup 69px + wordmark + five links + pill) measures clear.
   The 1.728:1 BRG monogram is 31px wider than the square birch mark it
   replaced, so this had to move whether or not it was already broken. */
@media (max-width: 1099px) {
  .site-header__bar { gap: var(--s3); }
  .brand__word { font-size: 16px; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--panel); border-bottom: var(--hair); padding: var(--s6) 16px var(--s8);
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
  }
  .site-nav[data-open="true"] { display: block; }
  .site-nav__list { display: block; }
  .site-nav__list li + li { margin-top: var(--s4); }
  .site-nav__link { display: block; font-size: 15px; }
  .site-header__contact {
    display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
    padding-bottom: var(--s6); margin-bottom: var(--s6); border-bottom: var(--hair);
    font-size: 15px;
  }
  .site-nav .site-header__contact { display: flex; }
  .site-nav > .btn { display: inline-flex; }
  /* the bar reduces to the reference's own phone header: wordmark left, one
     circular toggle right. The CTA is not duplicated — it lives in the drawer
     with the links, which is also where the phone number lives. */
  .site-header__actions > .btn { display: none; }
  /* .site-nav carries margin-left:auto at desktop, but in the drawer state it
     is display:none (and absolutely positioned when open), so nothing was
     pushing the toggle to the right edge. Below 420px, where the wordmark goes
     to .sr-only, that left the toggle bunched against the monogram. */
  .site-header__actions { margin-left: auto; }
  .site-nav .btn { width: fit-content; max-width: 100%; margin-top: var(--s4); }
  .nav-toggle {
    display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center;
    border: 1px solid var(--ink); border-radius: var(--r-circle);
    background: transparent; color: var(--ink); cursor: pointer;
  }
  .nav-toggle svg { width: 20px; height: 20px; }
}

/* --- 320px: the narrowest width WCAG 1.4.10 Reflow names -----------------
   At 320 the brand lockup (69px monogram + 12px gap + the wordmark at 16px)
   and the 44px toggle together needed 328px inside a 288px container, so the
   header pushed the document 27px wide and the whole page scrolled sideways.
   The wordmark goes to .sr-only rather than display:none: the monogram's own
   alt is empty by design (it sits inside the brand link beside the words), so
   hiding the words outright would leave the link with no accessible name at
   all. Visually the monogram does the job on its own — it literally spells the
   company's initials. */
@media (max-width: 419px) {
  /* The cascading display type is clamped on vw, which holds it at its floor
     below ~400px; with the WCAG 1.4.12 text-spacing metrics applied, those
     floors overflow a 288px container. Lower floors at 320-419 keep the
     cascade intact instead of relying on the break-word guard in site.css. */
  :root { --fs-cascade: clamp(30px, 9.4vw, 108px); --fs-statement: clamp(30px, 9.4vw, 104px); }
  .footer-word { font-size: clamp(30px, 9.4vw, 58px); }
  .brand__word {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* The gallery switches at the same breakpoint as the desktop mosaic. */
@media (min-width: 900px) {
  .mosaic-mobile { display: none; }
}

/* The homepage rail and search are one discovery flow, not two full section gaps. */
@media (min-width: 761px) {
  .hero--home { padding-bottom: 0; }
  .hero--home + .apartment-finder { padding-top: var(--s12); }
}

/* Balance the office information with a compact desktop enquiry form. */
@media (min-width: 900px) {
  .contact-page .contact-panel__left,
  .contact-page .contact-panel__right { padding: var(--s8); }
  .contact-page .contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s6); }
  .contact-page .contact-form > .field { margin-top: 0; }
  .contact-page .contact-form > .field:nth-child(n+5),
  .contact-page .contact-form > .actions,
  .contact-page .contact-form > p { grid-column: 1 / -1; }
  .contact-page .contact-form > .actions,
  .contact-page .contact-form > p { margin-top: 0 !important; }
  .contact-page .form-status:empty { display: none; }
  .contact-page > .section { padding-bottom: var(--s8); }
  .contact-page > .section + .section { padding-top: var(--s12); padding-bottom: var(--sec-y); }
}

/* Keep the phone discovery controls compact and retain the staggered photo rail. */
@media (max-width: 760px) {
  .home-hero .cascade__line { font-size: clamp(28px, 6.8vw, 44px); }
  .hero--home .home-hero__cta { margin-top: var(--s12); }
  .hero--home .rail { margin-top: var(--s12); gap: 12px; }
  .hero--home .rail__item:nth-child(6n+1) { width: min(36vw, 150px); margin-top: 28px; }
  .hero--home .rail__item:nth-child(6n+2) { width: min(48vw, 200px); margin-top: 0; }
  .hero--home .rail__item:nth-child(6n+3) { width: min(34vw, 140px); margin-top: 40px; }
  .hero--home .rail__item:nth-child(6n+4) { width: min(46vw, 190px); margin-top: 12px; }
  .hero--home .rail__item:nth-child(6n+5) { width: min(36vw, 150px); margin-top: 32px; }
  .hero--home .rail__item:nth-child(6n+6) { width: min(50vw, 210px); margin-top: 4px; }
  .hero--home .rail__cap { padding-top: 12px; }
  .hero--home .rail__name { font-size: 16px; line-height: 1.25; }
  .hero--home .rail__where { font-size: 14px; line-height: 1.4; }
  .hero--home + .apartment-finder { padding-top: var(--s8); }
  .finder-controls h2 { font-size: clamp(23px, 5.6vw, 30px); line-height: 1.12; margin-bottom: 20px; }
  .finder-search { flex-direction: row; gap: 8px; margin-bottom: 20px; }
  .finder-search input { width: 0; padding: 12px; font-size: 16px; min-height: 48px; }
  .finder-search .btn { padding: 12px 16px; min-height: 48px; flex-shrink: 0; font-size: 15px; }
  .finder-controls > .label { font-size: 12px; }
  .finder-sizes { display: flex; gap: 6px; margin-top: 8px; }
  .finder-sizes .pill { font-size: 14px; line-height: 20px; padding: 11px 8px; min-height: 44px; }
  .finder-note { margin-top: 20px; font-size: 14px; line-height: 1.4; }
  .finder-note + .finder-status { margin-top: 8px; margin-bottom: 12px; font-size: 16px; line-height: 1.4; }
}

/* Removed listings must not retain an actionable application button. */
.btn[hidden] { display: none; }