/* ─── 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. */
/* Otsikkolohko on yksi palsta: otsikko ja ingressi jakavat saman mitan ja siten saman
   oikean reunan. Ilman rajausta otsikko levisi koko palstan levyiseksi (leveällä
   näytöllä yli 1200px) ja ingressi jäi omaan 46 merkkiinsä, jolloin sama lohko näytti
   kahdelta eri levyiseltä elementiltä. Rajaus on lohkossa eikä otsikossa, koska juuri
   niiden keskinäinen suhde on se mikä luetaan. */
.s-head {
  max-width: var(--s-measure-head);
  margin-bottom: var(--s-head-gap);
}

/* Ingressin oma kapeampi mitta on tarkoitettu leipätekstiksi kesken sivun. Otsikon alla
   se saa lohkon mitan, jotta reunat osuvat yhteen. */
.s-head .s-lead { max-width: none; }

.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); }
}

/* Tarkistuslista ingressin alla: lyhyitä konkreettisia väitteitä, ei kappaleita. */
.s-checks { display: grid; gap: 12px; margin-top: var(--s-2); }

.s-checks li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: baseline;
  max-width: 52ch;
  color: var(--s-ink-2);
  font-size: var(--s-fs-text);
  line-height: 1.5;
}

.s-checks li::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5.2 9.2 2.4 2.4 5-5' fill='none' stroke='%23d4176a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat,
    var(--s-accent-soft);
  transform: translateY(3px);
}

.s-dark .s-checks li { color: var(--s-on-black-2); }

/* Puhelimessa napit vierekkäin samankorkuisina: pino teki toissijaisesta
   napista uuden rivin, joka luettiin erillisenä toimintona. Pitkä teksti saa
   rivittyä napin sisällä, flex venyttää parin samaan korkeuteen. */
@media (max-width: 600px) {
  .s-actions,
  .s-cta__actions { flex-wrap: nowrap; align-items: stretch; gap: var(--s-2); width: 100%; }

  .s-actions > .s-btn,
  .s-cta__actions > .s-btn {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 18px;
    font-size: 14px;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
  }
}