/* RealEstateContent.ai — Spacing, radius, layout
   Layout is driven by CONTAINER QUERIES, never media queries. Page roots set
   `container-type: inline-size` (see .rec-page) so every breakpoint below is
   an @container rule. */

:root {
  /* ---- Spacing scale (px) ---- */
  --space-0: 0;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-112: 112px;

  /* Section padding formula — fluid against the container */
  --section-pad-y: clamp(64px, 9cqi, 112px);
  --section-pad-x: clamp(20px, 5cqi, 56px);

  /* ---- RADIUS LADDER — radius scales with the ELEMENT, so nested cards step
     down. A 20px card holding a 14px mockup holding a 5px cell reads as depth. */
  --radius-cell: 5px;    /* calendar cells, tiny pills */
  --radius-xs: 4px;      /* tags, checkboxes */
  --radius-pill-sm: 8px; /* inline pills, mockup inputs, small buttons (7–9px) */
  --radius-s: 8px;       /* buttons, inputs, badges */
  --radius-chip: 10px;   /* icon chips, mockup rows (10–11px) */
  --radius-mockup: 14px; /* mockup cards, post cards (13–14px) */
  --radius-m: 16px;      /* legacy card */
  --radius-card: 20px;   /* content cards, mega panel (18–20px) */
  --radius-pricing: 24px;/* pricing cards */
  --radius-l: 32px;
  --radius-panel: clamp(26px, 3cqi, 40px); /* large dark panels */
  --radius-full: 9999px;

  /* ---- Strokes ---- */
  --border-width: 1px;
  --divider-width: 1px;

  /* ---- Content max-widths by ROLE. Narrower content = more important message. */
  --w-feature: 1180px;  /* feature splits */
  --w-nav: 1120px;      /* nav + 3-up grids */
  --w-section: 1100px;  /* standard sections */
  --w-pricing: 960px;
  --w-faq: 780px;
  --w-cta: 760px;       /* final CTA */
  --container-max: 1440px;
  --content-max: var(--w-section);
  --gutter: var(--section-pad-x);

  /* ---- Container breakpoints (document; use in @container rules) ---- */
  --bp-mobile: 880px;  /* global mobile */
  --bp-820: 820px;
  --bp-760: 760px;
  --bp-720: 720px;

  /* Self-resolving card grid */
  --grid-card-min: 284px;
}

/* Put this on the page root. Everything fluid depends on it. */
.rec-page { container-type: inline-size; }
.rec-section { padding: var(--section-pad-y) var(--section-pad-x); }
.rec-inner { max-width: var(--w-section); margin-inline: auto; }
.rec-grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--grid-card-min), 1fr)); gap: var(--space-24); }