/* Multan Mile design tokens: the one grid, spacing scale, colours and type every page uses.
   Layout rule: place content with .l-wrap + .l-grid and span classes. Do not add page- or
   section-specific container widths or one-off margins to fix alignment. */

@font-face { font-family: "Plex Sans"; src: url("/assets/fonts/plex-sans-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("/assets/fonts/plex-sans-300-italic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("/assets/fonts/plex-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("/assets/fonts/plex-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  /* Brand, from the logo and the master plan */
  --plan-green: #0c211c;      /* the logo field (approved logo files); header, footer, hero, primary actions */
  --plan-green-2: #173a31;    /* hover and secondary dark surfaces */
  --logo-gold: #b8893a;       /* the logo's gold, flat; rules, focus, selected marks. Not text on light (2.7:1) */
  --gold-light: #d3b276;      /* gold text on the green (8.3:1) */
  --gold-text: #7c5a1c;       /* gold that passes contrast as text on light surfaces */
  --ivory: #eef0e8;           /* the logo's cool ivory ground; secondary surfaces */
  --paper: #ffffff;
  --ink: #16292c;
  --ink-2: #4d5f62;           /* secondary text */
  --rule: #d5dbd6;
  /* Plot status: identical to the map markers */
  --available: #20a464; --sold: #dc4b45; --status-not-confirmed: #8a9a97; --reserved: #7957cf;
  --whatsapp: #128249;
  --error: #b3261e;

  /* Type: one family, a 1.25 modular scale on a 16px base */
  --font: "Plex Sans", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-xs: 0.8rem; --t-s: 0.875rem; --t-m: 1rem; --t-l: 1.25rem; --t-xl: 1.563rem; --t-2xl: 1.953rem; --t-3xl: 2.441rem;
  --t-4xl: 3.052rem; --t-5xl: 3.815rem;
  --lh-tight: 1.2; --lh-body: 1.55;

  /* Spacing: 4px base */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* Grid: mobile first (4 columns) */
  --cols: 4; --gutter: 16px; --margin: 16px; --max: 1280px;
  --radius: 4px;              /* controls only; layout bands are square */
  --header-h: 64px;
}
@media (min-width: 600px)  { :root { --cols: 8;  --gutter: 20px; --margin: 32px; --header-h: 72px; } }
@media (min-width: 1024px) { :root { --cols: 12; --gutter: 24px; --margin: 40px; --header-h: 76px; } }

/* One container for header, body and footer */
.l-wrap { width: min(var(--max), 100% - 2 * var(--margin)); margin-inline: auto; }
.l-fluid { width: calc(100% - 2 * var(--margin)); margin-inline: auto; } /* same grid, no max width (explorer) */
.l-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); }

/* Spans: .s-{n} is the mobile span; t- and d- prefixes set tablet (8 col) and desktop (12 col) spans */
.s-all { grid-column: 1 / -1; }
.s-1 { grid-column: span 1; } .s-2 { grid-column: span 2; } .s-3 { grid-column: span 3; } .s-4 { grid-column: span 4; }
@media (min-width: 600px) {
  .t-2 { grid-column: span 2; } .t-3 { grid-column: span 3; } .t-4 { grid-column: span 4; } .t-5 { grid-column: span 5; }
  .t-6 { grid-column: span 6; } .t-8 { grid-column: span 8; }
}
@media (min-width: 1024px) {
  .d-2 { grid-column: span 2; } .d-3 { grid-column: span 3; } .d-4 { grid-column: span 4; } .d-5 { grid-column: span 5; }
  .d-6 { grid-column: span 6; } .d-7 { grid-column: span 7; } .d-8 { grid-column: span 8; } .d-9 { grid-column: span 9; }
  .d-12 { grid-column: span 12; }
}

/* Review aid: add ?grid to any URL to overlay the columns (site.js / app.js set html.show-grid) */
html.show-grid body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  width: min(var(--max), 100% - 2 * var(--margin)); margin-inline: auto;
  background: repeating-linear-gradient(to right,
    rgba(220, 75, 69, .13) 0, rgba(220, 75, 69, .13) calc((100% - (var(--cols) - 1) * var(--gutter)) / var(--cols)),
    transparent calc((100% - (var(--cols) - 1) * var(--gutter)) / var(--cols)), transparent calc((100% - (var(--cols) - 1) * var(--gutter)) / var(--cols) + var(--gutter)));
  outline: 1px solid rgba(220, 75, 69, .5);
}
html.show-grid.fluid-grid body::after { width: calc(100% - 2 * var(--margin)); }
.l-grid.rows { row-gap: var(--s5); }
/* Nested content that must sit on the page's columns: span the parent columns, then inherit them */
.l-sub { display: grid; grid-template-columns: subgrid; column-gap: var(--gutter); }