/* =============================================================
   layout.css — illusionlab web layout system

   12-col grid, 1280px max, 80px outer padding, 96/160 section rhythm.
   Per parent-ci README §Layout.
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }

/* -------- Container -------- */
.il-container {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
  width: 100%;
}

/* -------- 12-col grid -------- */
.il-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-5); /* 24px gutter */
}

/* Column spans */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* -------- Section rhythm (96 / 160 vertical spacing) -------- */
.il-section        { padding-top: var(--sp-8); padding-bottom: var(--sp-8); } /* 96 */
.il-section-large  { padding-top: var(--sp-9); padding-bottom: var(--sp-9); } /* 160 */

/* -------- Section head pattern (per brand_site/styles.css) -------- */
.il-section-head {
  max-width: 640px;
  margin-bottom: var(--sp-7); /* 64 */
}
.il-section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.il-section-head .il-section-overline {
  font-size: var(--fs-overline);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--il-gold);
  margin-bottom: var(--sp-4);
  display: block;
}
.il-section-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--fs-h1); /* 56 */
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 var(--sp-5);
  text-wrap: balance;
  color: var(--il-text-1);
}
.il-section-body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--il-text-2);
  margin: 0;
}

/* -------- Responsive -------- */
@media (max-width: 900px) {
  :root {
    --page-pad: 32px;
  }
  .il-grid { gap: var(--sp-4); }
  .col-6, .col-4, .col-3 { grid-column: span 12; }
  .il-section { padding-top: var(--sp-7); padding-bottom: var(--sp-7); } /* 64 on mobile */
  .il-section-large { padding-top: var(--sp-8); padding-bottom: var(--sp-8); } /* 96 on mobile */
  .il-section-title { font-size: var(--fs-h2); } /* 40 */
}

@media (max-width: 480px) {
  :root { --page-pad: 20px; }
  .il-section-title { font-size: var(--fs-h3); } /* 28 */
}

/* -------- Utility spacing (row-level) -------- */
.sp-top-1 { margin-top: var(--sp-1); } .sp-top-2 { margin-top: var(--sp-2); }
.sp-top-3 { margin-top: var(--sp-3); } .sp-top-4 { margin-top: var(--sp-4); }
.sp-top-5 { margin-top: var(--sp-5); } .sp-top-6 { margin-top: var(--sp-6); }
.sp-top-7 { margin-top: var(--sp-7); } .sp-top-8 { margin-top: var(--sp-8); }