/* ==========================================================================
   SMART SPITI — LAYOUT / GRID / CONTAINER / SECTION RHYTHM
   ========================================================================== */

.container{
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--narrow{ max-width: 860px; }
.container--text{ max-width: 720px; }

/* 12-column grid -----------------------------------------------------------
   Used for deliberate composition, not forced on every section. */
.grid{
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--grid-gap);
}

@media (max-width: 1024px){
  .grid{ grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 640px){
  .grid{ grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
}

/* Column span helpers (desktop / tablet / mobile) */
[class*="col-"]{ grid-column: span var(--grid-cols); }
.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-12{ grid-column: span 12; }

@media (max-width: 1024px){
  .col-3, .col-4{ grid-column: span 3; }
  .col-5, .col-6, .col-7{ grid-column: span 6; }
  .col-8, .col-9, .col-12{ grid-column: span 6; }
}
@media (max-width: 640px){
  [class*="col-"]{ grid-column: span 4; }
}

/* Simple auto-fit card grids for repeating content */
.card-grid{
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1024px){ .card-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .card-grid{ grid-template-columns: 1fr; } }

.card-grid--3{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px){ .card-grid--3{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .card-grid--3{ grid-template-columns: 1fr; } }

/* ---- Section rhythm ------------------------------------------------------
   Alternating black / white weight is applied per-section via modifiers,
   with consistent vertical breathing room so transitions feel deliberate. */

.section{
  padding-block: var(--space-9);
  position: relative;
}

@media (max-width: 768px){
  .section{ padding-block: var(--space-7); }
}

.section--tight{ padding-block: var(--space-7); }

.section--light{ background: var(--surface-light); color: var(--text-on-light); }
.section--tint{ background: var(--surface-light-tint); color: var(--text-on-light); }
.section--dark{ background: var(--surface-dark); color: var(--text-on-dark); }

/* Section heading block: eyebrow + heading + lead, capped width so
   headlines never stretch full-bleed on wide desktops. */
.section-head{
  max-width: 760px;
  margin-bottom: var(--space-6);
}
.section-head > .eyebrow{ margin-bottom: var(--space-3); display: block; }
.section-head > h2{ margin-bottom: var(--space-3); }

.section-head--split{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-5);
  max-width: none;
}
@media (max-width: 768px){
  .section-head--split{ flex-direction: column; align-items: flex-start; }
}

/* Divider between stacked black/white sections */
.divider-line{
  height: 1px;
  background: var(--border-on-light);
  width: 100%;
}
.on-dark .divider-line{ background: var(--border-on-dark); }

/* Utility spacing stack */
.stack > * + *{ margin-top: var(--space-4); }
.stack-sm > * + *{ margin-top: var(--space-2); }
.stack-lg > * + *{ margin-top: var(--space-6); }

/* Visually hidden (a11y) */
.sr-only{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}