/* Bensimon Luxury, large-screen scaling.
 *
 * WHY THIS EXISTS. Every breakpoint on the site was a max-width one: the site
 * was built mobile-first and then never designed upward. Measured on
 * /preconstruction/cora/ before this file existed, the content column and the
 * body text were FROZEN at every screen size:
 *
 *      screen    column    share of screen    body text
 *      1440      1180px    82%                17px
 *      1920      1180px    61%                17px
 *      2560      1180px    46%                17px
 *      3440      1180px    34%                17px
 *
 * So on a 27 inch monitor the page used under half the width at 17px, and on
 * an ultrawide a third. A visitor session recording is what surfaced it.
 *
 * TWO STEPS, 1800px and 2400px. Below 1800 NOTHING here applies, so the
 * overwhelming majority of visitors see no change at all.
 *
 * THE TYPE scales by raising the root font size, which lifts every rem-based
 * size and every rem-based gap and padding together, so the rhythm is kept.
 * The 10, 11 and 12 pixel micro-labels (eyebrows, spec labels) are declared in
 * px and deliberately do NOT scale: they are meant to stay small.
 *
 * THE COLUMNS use clamp(current, vw, cap). The clamp MINIMUM is each
 * container's existing width, so this can only ever widen a column, never
 * narrow one. That matters because .hero-content alone ships at three
 * different widths across page types.
 *
 * Full-bleed sections, hero images, the map and the search results grid are
 * untouched: they already use the whole viewport.
 */

@media (min-width: 1800px) {
  html { font-size: 17.5px; }

  /* pre-construction project pages */
  .wrap        { max-width: clamp(1180px, 70vw, 1530px); }
  .car-content { max-width: clamp(1180px, 70vw, 1530px); }

  /* building pages: the dossier rail, the market band, the similar ring */
  .blx-spec-wrap,
  .blx-similar-in,
  .blx-stats-in { max-width: clamp(1120px, 68vw, 1460px); }

  /* neighborhood pages and the listing grids */
  .highlights-container,
  .gallery-container,
  .projects-container,
  .neighborhoods-container { max-width: clamp(1400px, 78vw, 1820px); }

  .related-inner { max-width: clamp(1300px, 74vw, 1690px); }
  .bx-wrap       { max-width: clamp(1150px, 70vw, 1500px); }

  /* contact blocks and the about page */
  .contact-wrap      { max-width: clamp(1080px, 66vw, 1400px); }
  .contact-container { max-width: clamp(1100px, 66vw, 1430px); }
  .about-container   { max-width: clamp(1100px, 66vw, 1430px); }
}

/* THE READING MEASURE has to grow WITH the type, not stay still.
 *
 * Body copy is capped at a fixed pixel width on purpose, to hold a comfortable
 * line length: .profile-text at 820px is about 70 characters at the old 17px.
 * But once the type is 19px, that same 820px is only about 58 characters,
 * which reads as a cramped narrow strip and makes the page look emptier, not
 * fuller. Restating each cap in rem pins the CHARACTER COUNT instead of the
 * pixel width, so the measure scales in step with the font and the line length
 * stays where it was designed.
 *
 * These are declared outside the media queries because 1rem is 16px below
 * 1800px, so every value below is identical to the pixel value it replaces
 * until the root size actually changes. Nothing moves for normal screens.
 */
.profile-text      { max-width: 51.25rem; } /* 820px */
.blx-sold-wrap     { max-width: 61.25rem; } /* 980px */
.story-container,
.bestfor-container { max-width: 56.25rem; } /* 900px */
.hero-intro        { max-width: 48.75rem; } /* 780px */
.f-sub             { max-width: 42.5rem;  } /* 680px */
.bestfor-list      { max-width: 40rem;    } /* 640px */
.footer-text,
.cta-inner         { max-width: 37.5rem;  } /* 600px */
.car-sub           { max-width: 35rem;    } /* 560px */
.cta-text          { max-width: 33.75rem; } /* 540px */

@media (min-width: 2400px) {
  html { font-size: 19px; }
}