/* ─── Asettelu ────────────────────────────────────────────────────────────
   Neljä primitiiviä: osio, säiliö, pino ja ruudukko. Kaikki välit tulevat
   tokeneista, joten sama väli on sama väli joka sivulla. */

/* Osion ylä- ja alaväli on sama, joten kahden osion väliin jää tasan 2x. */
.s-section { padding-block: var(--s-section-y); }
.s-section--tight { padding-block: var(--s-section-y-tight); }
.s-section--flush { padding-block: 0; }

.s-light { background: var(--s-paper); color: var(--s-ink); }
.s-dark { background: var(--s-black); color: var(--s-on-black); }

/* Sivun ainoa vaakakehys. Ei max-widthia: rivin pituuden hoitavat
   tyyppiluokkien ch-katot, jolloin leveä näyttö saa hengittää. */
.s-container { width: 100%; padding-inline: var(--s-gutter); }

/* Pystysuuntainen rytmi. Yksi luokka hoitaa kaikkien lasten väliset raot,
   joten yksittäisille elementeille ei tarvita margin-bottomia. */
.s-stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-stack-gap); }
.s-stack--sm { --s-stack-gap: var(--s-3); }
.s-stack--lg { --s-stack-gap: var(--s-7); }

/* Osion otsikkolohko: otsikko + ingressi, ja sen alle aina sama väli. */
.s-head { margin-bottom: var(--s-head-gap); }

.s-grid { display: grid; gap: clamp(20px, 2.4vw, 32px); grid-template-columns: minmax(0, 1fr); }
.s-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s-grid--wide { gap: clamp(32px, 4vw, 64px); }

/* Kaksi palstaa, teksti ja kuva samalla rivillä optisesti keskitettynä. */
.s-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.s-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

@media (max-width: 900px) {
  .s-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-split { grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 6vw, 48px); }
}

@media (max-width: 600px) {
  .s-grid--2,
  .s-grid--3 { grid-template-columns: minmax(0, 1fr); }
}