/* ==========================================================================
   Layout & responsive contract
   --------------------------------------------------------------------------
   This file is the CSS translation of the design's applyReflow() and
   applyNavMode() JavaScript. In the Claude Design source there is not a single
   @media query: responsiveness was implemented by mutating inline styles on
   resize, which means the layout was desktop-only until React booted.

   Every rule below is a 1:1 restatement of what that JavaScript did. The
   original is quoted above each block so the two can be diffed by eye.

   Breakpoints (the design's own):
     phone   <= 767px
     tablet  <= 1024px
     nav     <  900px   (burger takes over)

   SPECIFICITY NOTE
   The desktop value for data-split / data-grid4 / data-stack-img comes from the
   element's own generated class. Attribute selectors and classes have equal
   specificity (0,1,0), so these overrides would depend on file order to win.
   Doubling the attribute — [data-split][data-split] — lifts them to (0,2,0) so
   they always beat a single class, independent of cascade order and immune to a
   section being re-saved through the editor with its wrapper changed.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Containers
   -------------------------------------------------------------------------- */

.cme-page {
  position: relative;
  background: var(--cme-sand);
  color: #2B2620;
  overflow-x: hidden;   /* the marquee and aurora layers overflow deliberately */
}

.cme-measure      { max-width: var(--cme-measure);      margin-inline: auto; }
.cme-measure--wide{ max-width: var(--cme-measure-wide); margin-inline: auto; }

/* Standard section padding, repeated verbatim across the source. */
.cme-section {
  padding-block:  var(--cme-section-y);
  padding-inline: var(--cme-gutter);
}


/* --------------------------------------------------------------------------
   [data-split] — two-column editorial splits
   was: n.style.gridTemplateColumns = tablet ? '1fr' : (attr value)
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  [data-split][data-split] {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   The homepage has NO reflow attributes at all
   --------------------------------------------------------------------------
   Every other page tags its grids (The Estate carries 3 data-split, 1
   data-cols3, 1 data-grid4). The homepage carries none — all eight of its grids
   are hardcoded inline, so without the rules below it stays a rigid desktop
   layout at every width.

   This was invisible during design because the tool previews at a fixed 1440px
   (`$preview: {width:1440, height:2600}`).

   Each grid below is mapped to the design's OWN convention for that shape, so
   nothing here is invented layout — it is the documented behaviour of
   [data-split], [data-cols3], [data-grid4] and [data-gallery] applied to the
   elements that should have carried those attributes. Listed one by one, with
   the design value and the reasoning, so every decision is reviewable.
   -------------------------------------------------------------------------- */

/* Two-column editorial splits → the [data-split] rule: collapse at ≤1024.
     .cme-estate__grid    "A Residential Estate in Clarens"     1.05fr .95fr
     .cme-security__grid  "Secure, manned & monitored 24/7"     1.12fr .88fr
     .cme-invest__grid    "Buy Land in Clarens Mountain Estate"  .95fr 1.05fr
     .cme-promise__grid   "We build on a tenth."                1.5fr  .9fr   */
/* SPECIFICITY: each class is doubled, exactly as the [data-*] rules above are.
   The generated 04-sections-*.css sets these same properties with an equally
   specific single-class rule AND loads later in the cascade, so a single class
   here would silently lose. Doubling reaches (0,2,0) and always wins.
   This was caught in the live preview, not by reading the CSS. */
@media (max-width: 1024px) {
  .cme-estate__grid.cme-estate__grid,
  .cme-security__grid.cme-security__grid,
  .cme-invest__grid.cme-invest__grid,
  .cme-promise__grid.cme-promise__grid {
    grid-template-columns: 1fr;
  }
}

/* Gallery tiles, repeat(4,1fr) → the [data-gallery] ladder: 4 / 3 / 2.
   Never collapses to a single column: at 2-up the tiles stay a usable size and
   the grid still reads as a gallery. */
@media (max-width: 1024px) {
  .cme-gallery__grid.cme-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .cme-gallery__grid.cme-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The three Lifestyle pillars, repeat(3,minmax(0,1fr)) → the [data-grid4] rule
   (N / 2 / 1) rather than [data-cols3] (3 / 3 / 1).
   [data-cols3] is the design's rule for TEXT-ONLY statistic blocks, which stay
   legible three-up on a tablet. These are feature cards each carrying a 4/5
   image, and three of those across a 768px tablet leaves each image about
   230px wide — too small for the photography to do its job. */
@media (max-width: 1024px) {
  .cme-lifestyle__grid.cme-lifestyle__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .cme-lifestyle__grid.cme-lifestyle__grid { grid-template-columns: 1fr; }
}

/* The three Invest counters (1,400m² · 5-year · 46), repeat(3,1fr) → the
   [data-cols3] rule: text-only, so they stay three-up until phone. */
@media (max-width: 767px) {
  .cme-invest__grid-2.cme-invest__grid-2 { grid-template-columns: 1fr; }
}

/* .cme-the-estate__grid uses repeat(auto-fit, minmax(175px, 1fr)) and is
   therefore already fluid — it needs no media query, and adding one would
   override behaviour the design got right. Noted so nobody "fixes" it later. */


/* --------------------------------------------------------------------------
   [data-split-pad] — inline padding collapse, and prose released to full width
   was: paddingLeft/Right = tablet ? (phone ? '24px' : '48px') : original
        and, for descendant <p>, maxWidth = tablet ? '100%' : original
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  [data-split-pad][data-split-pad] {
    padding-left:  48px;
    padding-right: 48px;
  }
  [data-split-pad] p {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  [data-split-pad][data-split-pad] {
    padding-left:  24px;
    padding-right: 24px;
  }
}


/* --------------------------------------------------------------------------
   [data-cols3] — the three-up statistic row
   was: gridTemplateColumns = phone ? '1fr' : 'repeat(3,1fr)'
        and for every child after the first, on phone:
          borderLeft: none; borderTop: 1px solid rgba(201,169,110,.2);
          paddingTop: 30px
   Note this collapses only at phone — it stays three-up on tablet.
   -------------------------------------------------------------------------- */

[data-cols3] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 767px) {
  [data-cols3][data-cols3] {
    grid-template-columns: 1fr;
  }
  /* Stacked, the vertical dividers become horizontal ones. */
  [data-cols3] > * + * {
    border-left: none;
    border-top: 1px solid var(--cme-rule-gold-20);
    padding-top: 30px;
  }
}


/* --------------------------------------------------------------------------
   [data-grid4] — four-up feature grids
   was: phone ? '1fr' : tablet ? 'repeat(2,minmax(0,1fr))' : (attr value)
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  [data-grid4][data-grid4] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  [data-grid4][data-grid4] {
    grid-template-columns: 1fr;
  }
}


/* --------------------------------------------------------------------------
   [data-gallery] — the image grid
   was: phone ? 'repeat(2,...)' : tablet ? 'repeat(3,...)' : 'repeat(4,...)'
   -------------------------------------------------------------------------- */

[data-gallery] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1024px) {
  [data-gallery][data-gallery] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  [data-gallery][data-gallery] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* --------------------------------------------------------------------------
   [data-grid2] — two-up grids
   was: phone ? '1fr' : 'repeat(2,minmax(0,1fr))'
   -------------------------------------------------------------------------- */

[data-grid2] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 767px) {
  [data-grid2][data-grid2] {
    grid-template-columns: 1fr;
  }
}


/* --------------------------------------------------------------------------
   [data-stack-img] — media panels that must keep height once stacked
   was: phone ? '320px' : tablet ? '420px' : (original min-height)
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  [data-stack-img][data-stack-img] { min-height: 420px; }
}

@media (max-width: 767px) {
  [data-stack-img][data-stack-img] { min-height: 320px; }
}


/* --------------------------------------------------------------------------
   Navigation mode
   was: applyNavMode(), MOBILE_AT = 900
        nav.style.display    = mob ? 'none' : 'flex'
        burger.style.display = mob ? 'flex' : 'none'

   Inverted from the JS so that the no-JS default is correct: the burger is
   hidden and the full nav shown, then swapped below 900px. This way the header
   is usable before (and without) JavaScript.
   -------------------------------------------------------------------------- */

.cme-nav        { display: flex; }
.cme-burger     { display: none; }

@media (max-width: 899.98px) {
  .cme-nav      { display: none; }
  .cme-burger   { display: flex; }
}


/* --------------------------------------------------------------------------
   Reveal-on-scroll
   was: arm() setting opacity:0 + translateY(40px) inline, then show() clearing
        it via IntersectionObserver, with a 1500ms failsafe.

   Reimplemented so the content is VISIBLE BY DEFAULT and only hidden once JS
   confirms it can un-hide it (site.js sets .cme-js on <html>). If scripts fail
   or are blocked, every section still renders — the original relied on a
   timeout as its safety net, which is a real risk of a blank page.
   -------------------------------------------------------------------------- */

.cme-js [data-reveal]:not(.is-revealed) {
  opacity: 0;
  transform: translateY(40px);
}

.cme-js [data-reveal] {
  transition:
    opacity   1s var(--cme-ease-reveal),
    transform 1s var(--cme-ease-reveal);
}

.cme-js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  /* Never hide content when motion is unwelcome. */
  .cme-js [data-reveal]:not(.is-revealed) {
    opacity: 1;
    transform: none;
  }
  .cme-js [data-reveal] { transition: none; }
}