/* ──────────────────────────────────────────────────────────────────────
   Elmbridge Mews — Design Tokens

   NRL brand-correct per NorthRidge Brand Style Guide v Sept 2021.

   Brand identity (page 8 of the brand guide):
     Primary  — Deep teal / navy   #003344   (CMYK 95/56/38/62)
     Secondary — Copper / burnt orange #C06D3B (CMYK 20/62/80/9)
     White used for reversed colour-ways.

   Typography (page 9 of the brand guide):
     Headlines, subheads, CTAs — Lexend (Bold + Semibold)
     Body / tagline / disclaimers — Cera Pro Regular / Bold
       (Cera Pro is paid; the brand guide explicitly allows Arial
        as a substitute. Arial is web-safe and ships with all OSes.)
     Wordmark "NORTHRIDGE.NZ" — Cera Pro Bold, tracking 60

   Brand hierarchy: Elmbridge Mews is a development under the single
   NRL parent brand. There is no Elmbridge sub-brand palette — the
   NRL colour system carries across all four developments.

   Token names mirror the styx-mill site so base.css + components.css
   carry across unchanged.
   ────────────────────────────────────────────────────────────────────── */

/* Typography — premium pairing:
   • Headings: Fraunces, a refined optical serif (warm, editorial, high-end)
     — the "premium residential" feel Landmark-style sites achieve. Renders
     cleanly as a web font (the earlier issue was Lexend specifically).
   • Body / UI: the native system-UI stack (Segoe UI / SF / Roboto) — crisp,
     instant, highly readable for body copy. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap');

:root {
  /* ── Colour tokens ───────────────────────────────────────────────── */
  /* Surfaces — clean off-white so brand colours read crisp */
  --colour-surface:        #fbfaf7;   /* page background — off-white */
  --colour-surface-elev:   #ffffff;   /* cards / elevated surfaces */
  --colour-surface-tint:   #f1ede4;   /* subtle section divider */

  /* Text — deep brand navy for body; softens to charcoal at lower hierarchy */
  --colour-text:           #1a242b;   /* body text — near-black with navy undertone */
  --colour-text-muted:     #4a5860;
  --colour-text-soft:      #7d8a92;

  /* Primary brand — deep teal/navy (Page 8) */
  --colour-brand:          #003344;
  --colour-brand-hover:    #00222e;
  --colour-brand-soft:     #d6e0e4;   /* tint for subtle backgrounds */

  /* Accent — copper/burnt orange (Page 8) — CTAs, links, hover states */
  --colour-accent:         #C06D3B;
  --colour-accent-hover:   #a85a2c;
  --colour-accent-soft:    #f3ddcd;

  /* Alias — preserve the styx-mill name "accent" for shared components.
     Components default to NRL accent (copper) for CTAs; brand navy is
     used for headers/footers via --colour-brand directly. */

  /* Functional */
  --colour-border:         #e3ddd0;
  --colour-border-strong:  #c6bda1;
  --colour-success:        #2f7a4d;
  --colour-warning:        #C06D3B;
  --colour-on-accent:      #ffffff;   /* white on copper */
  --colour-on-brand:       #ffffff;   /* white on navy */

  /* ── Type tokens ─────────────────────────────────────────────────── */
  /* Native system-UI stack for body, UI and the wordmark — crisp, instant,
     highly readable. Headings use the Fraunces serif (--font-serif) below. */
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --font-sans:    var(--font-system);
  --font-body:    var(--font-system);
  --font-wordmark: var(--font-system);

  /* Refined serif display for headings (base.css maps h1–h6 to this). */
  --font-serif:   "Fraunces", Georgia, "Times New Roman", serif;

  --text-xs:   0.875rem;
  --text-sm:   1rem;
  --text-base: 1.125rem;
  --text-md:   1.25rem;
  --text-lg:   1.5rem;
  --text-xl:   2rem;
  --text-2xl:  2.75rem;
  --text-3xl:  3.75rem;

  --line-tight:  1.15;
  --line-snug:   1.3;
  --line-normal: 1.55;
  --line-relaxed: 1.75;

  /* ── Spacing scale ───────────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  /* ── Layout tokens ───────────────────────────────────────────────── */
  --layout-max:           1200px;
  --layout-narrow:        720px;
  --layout-gutter:        var(--space-5);

  /* ── Radius / shadows / motion ───────────────────────────────────── */
  /* Hard 90° edges throughout — crisp, squared boxes / buttons / photos. */
  --radius-sm: 0;
  --radius:    0;
  --radius-lg: 0;

  --shadow-sm: 0 1px 2px rgba(0, 51, 68, 0.05), 0 1px 3px rgba(0, 51, 68, 0.07);
  --shadow:    0 4px 12px rgba(0, 51, 68, 0.07), 0 2px 4px rgba(0, 51, 68, 0.05);
  --shadow-lg: 0 12px 32px rgba(0, 51, 68, 0.10);

  --motion-fast:   120ms;
  --motion:        220ms;
  --motion-slow:   360ms;
  --ease:          cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ──────────────────────────────────────────────────────────────────────
   Header wordmark / logo slot — brand-sanctioned typography.

   When NRL supplies the official logo files (PDF vector for print,
   SVG/PNG for web; full-colour + reversed + white variants per brand
   guide p.4-7 and p.15), drop them in /assets/brand/ and uncomment
   the img tag in each page header. The text wordmark below acts as
   the brand-compliant placeholder in the meantime.
   ────────────────────────────────────────────────────────────────────── */
.site-header__brand {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--colour-brand);
  line-height: 1.1;
}
.site-header__logo {
  height: 36px;
  width: auto;
  display: block;
}
.site-header__brand .brand-parent {
  font-family: var(--font-wordmark);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.06em;     /* tracking 60 per brand guide p.9 */
  color: var(--colour-brand);
  text-transform: uppercase;
}
.site-header__brand .brand-dev {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--colour-accent);
  text-transform: uppercase;
  margin-top: 2px;
}

/* CTA accent override — NRL brand uses copper for primary CTAs.
   Base components.css uses --colour-accent which we've mapped to copper. */

/* ──────────────────────────────────────────────────────────────────────
   Inline page imagery — patterns layered on shared components.

   - .page-hero-band   tall photo band below a subpage h1 (~340-420px)
   - .room-photo       photo above a room-by-room article
   - .split-photo      half-photo / half-text two-col layout

   Designed to break up wall-of-text pages without restyling base.css
   or components.css. All photo treatments use the brand-navy overlay
   gradient family for consistency.
   ────────────────────────────────────────────────────────────────────── */

.page-hero-band {
  position: relative;
  overflow: hidden;
  margin-block: var(--space-7);
  border-radius: var(--radius);
}
.page-hero-band img {
  width: 100%;
  height: clamp(280px, 36vw, 460px);
  object-fit: cover;
  display: block;
}
.page-hero-band__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-5) var(--space-6);
  background: linear-gradient(180deg, transparent, rgba(0, 30, 40, 0.75));
  color: var(--colour-on-brand);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-md);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.room-photo {
  width: 100%;
  height: clamp(220px, 32vw, 360px);
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.split-photo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
  margin-block: var(--space-7);
}
.split-photo img {
  width: 100%;
  height: clamp(240px, 40vw, 380px);
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 720px) {
  .split-photo {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
  }
  .split-photo--reverse img {
    order: 2;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   Layout patterns — desktop-aware composition.

   Default stacks single-column on mobile (per existing convention).
   Above 720px viewports, sections use horizontal composition so
   widescreen reading doesn't degrade to wall-of-text.

   Patterns:
   - .split            two equal columns (text + photo)
   - .split--40-60     asymmetric (sidebar : main)
   - .split--60-40     asymmetric (main : sidebar)
   - .split--reverse   swaps order at desktop
   - .stats-band       4-up number strip across full width
   - .cards-3up        responsive 3-column card grid
   - .cards-4up        responsive 4-column card grid
   - .panel            elevated content block (white card)
   - .container--wide  1320px max width for layouts needing breath
   ────────────────────────────────────────────────────────────────────── */

.container--wide {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

/* Split — alternating text/photo on desktop */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}
.split__media {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.split__media img {
  display: block;
  width: 100%;
  height: clamp(260px, 36vw, 480px);
  object-fit: cover;
}
.split__text > :first-child { margin-top: 0; }
.split__text > :last-child { margin-bottom: 0; }

@media (min-width: 760px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .split--40-60 { grid-template-columns: 5fr 7fr; }
  .split--60-40 { grid-template-columns: 7fr 5fr; }
  .split--reverse .split__media { order: 2; }
}

/* Stats band — 4-up numbers strip */
.stats-band {
  background: var(--colour-brand);
  color: var(--colour-on-brand);
  padding-block: var(--space-7);
}
.stats-band__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-5);
  text-align: center;
}
@media (min-width: 720px) {
  .stats-band__grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
}
.stats-band__item dt {
  font-family: var(--font-sans);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: var(--space-2);
}
.stats-band__item dd {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.85;
  margin: 0;
}

/* Cards grids — responsive 3-up / 4-up */
.cards-3up,
.cards-4up {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 600px) {
  .cards-3up, .cards-4up { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .cards-3up { grid-template-columns: repeat(3, 1fr); }
  .cards-4up { grid-template-columns: repeat(4, 1fr); }
}

/* Reusable elevated panel */
.panel {
  background: var(--colour-surface-elev);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.panel__media {
  display: block;
  width: 100%;
  height: clamp(160px, 22vw, 240px);
  object-fit: cover;
}
.panel__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.panel__eyebrow {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--colour-accent);
  margin: 0;
}
.panel__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--colour-brand);
  margin: 0;
}
.panel__desc {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--colour-text-muted);
  margin: 0;
  flex: 1;
}
.panel__cta {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--colour-accent);
  text-decoration: none;
  margin-top: var(--space-2);
}
.panel__cta:hover { color: var(--colour-accent-hover); }

/* 2x2 grid — for paired/quadrant content (FAQ 2x2, ownership pillars) */
.cards-2x2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 720px) {
  .cards-2x2 { grid-template-columns: repeat(2, 1fr); }
}

/* ──────────────────────────────────────────────────────────────────────
   Lot table — mobile-friendly responsive table.

   Desktop: standard 6-column table.
   Mobile (<720px): horizontal scroll wrapper so the full table is
   accessible without breaking layout, with a visual cue (gradient fade
   on the right edge) showing more content scrolls into view.
   ────────────────────────────────────────────────────────────────────── */

.lot-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--colour-surface-elev);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.lot-table th,
.lot-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--colour-border);
  vertical-align: middle;
}
.lot-table th {
  background: var(--colour-brand);
  color: var(--colour-on-brand);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  border-bottom: 1px solid var(--colour-brand);
}
.lot-table tbody tr:last-child td { border-bottom: none; }
.lot-table tbody tr:hover { background: var(--colour-surface-tint); }
.lot-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.lot-status--available {
  background: var(--colour-accent-soft);
  color: var(--colour-accent-hover);
}
.lot-status--sold {
  background: var(--colour-border);
  color: var(--colour-text-muted);
  text-decoration: line-through;
}
.lot-table--sold td:not(:last-child) { opacity: 0.55; }

/* Mobile: horizontal scroll the whole table */
@media (max-width: 720px) {
  .lot-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius);
    /* Keep the table laying out as a table inside the scroll container */
    white-space: nowrap;
  }
  .lot-table thead,
  .lot-table tbody { display: table; width: max-content; min-width: 100%; }
  .lot-table th,
  .lot-table td { padding: var(--space-3); font-size: var(--text-xs); }
}

/* Proposition-strip — small photo banner inside each tile */
.proposition-strip__item img {
  width: 100%;
  height: clamp(120px, 16vw, 160px);
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: var(--space-3);
  display: block;
  box-shadow: var(--shadow-sm);
}