/* Maistelupolku — /tietoa-sivun oma tyyli. Nettisivumainen, ei appimainen:
   leveämpi rytmi, pidemmät tekstipalstat, ei kortti-UI:ta joka kohdassa.
   Sama brändipaletti kuin sovelluksessa (ks. sovellus-nayte.css), mutta
   omat, väljemmät mitat. */

@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/fredoka.woff2') format('woff2');
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url('../fonts/nunito.woff2') format('woff2');
}

:root {
  --bubblegum:      #FF7BAC;
  --peach-frost:    #F4BEAE;
  --kerma:          #FDF1EA;
  --grape-juice:    #6D1F42;
  --butter-yellow:  #EFCE7B;
  --lilacs:         #D3B6D3;

  --font-otsikko: 'Fredoka', system-ui, sans-serif;
  --font-leipa:   'Nunito', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--kerma);
  color: var(--grape-juice);
  font-family: var(--font-leipa);
}

img, svg { max-width: 100%; }

.palsta {
  /* Sama leveys joka osiossa (myös ylätunniste ja footer, myös hero jonka
     sisältö on tämän saman laatikon sisällä keskitettynä) niin että vasen
     reuna JA hero-osion keskikohta pysyvät täsmälleen samassa kohdassa
     koko sivun matkalta - 1080px koska osio 3 tarvitsee sen verran tilaa
     neljälle puhelimelle vierekkäin (4x230px kehys + 3x34px väli = 1022px
     sisältöä, +40px paddingia = 1062px vähimmäisleveys, 1080px antaa
     pienen marginaalin). Nostettu 900px:stä kun puhelin nro 4 lisättiin -
     jos puhelimia lisätään/poistetaan vielä, laske tämä luku uudelleen
     äläkä vain arvaa, ks. myös alempana .puhelinrivin justify-content ja
     sen media query. */
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

.osio {
  padding: 64px 0;
}

.osio-tumma {
  background: var(--bubblegum);
  color: var(--kerma);
}

.osio-vaalea {
  background: var(--peach-frost);
}

h1, h2, h3 {
  font-family: var(--font-otsikko);
  margin: 0 0 18px 0;
  line-height: 1.15;
  color: inherit;
}

h1 {
  font-size: clamp(28px, 6vw, 44px);
  font-weight: 700;
  letter-spacing: -0.5px;
}

h2 {
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 700;
}

p {
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 16px 0;
}

.leipateksti-iso {
  font-size: 19px;
  line-height: 1.6;
}

a {
  color: inherit;
}

/* ---- Ylätunniste ---- */

.ylatunniste {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 20px;
  max-width: 1080px;
  margin: 0 auto;
}

.ylatunniste span {
  font-family: var(--font-otsikko);
  font-weight: 700;
  font-size: 20px;
}

/* ---- Hero ---- */

.hero {
  padding: 20px 0 56px 0;
  text-align: center;
}

.hero .palsta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.nappi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-otsikko);
  font-weight: 700;
  border-radius: 999px;
  padding: 16px 30px;
  font-size: 18px;
  text-decoration: none;
  box-shadow: 0 3px 0 rgba(109, 31, 66, 0.18);
}

.nappi-paa {
  background: var(--butter-yellow);
  color: var(--grape-juice);
}

.nappi-sivu {
  background: none;
  color: var(--grape-juice);
  opacity: 0.75;
  font-weight: 600;
  font-size: 15px;
  text-decoration: underline;
  box-shadow: none;
  padding: 6px;
}

.hero-napit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* ---- Puhelinkehys (neljä sovellusnäytettä osiossa 3) ---- */

.puhelinrivi {
  /* Grid eikä flex: otsikko-, leipäteksti- ja puhelinrivi ovat oikeasti
     samoja gridin rivejä koko rivistön yli (grid-auto-flow: column täyttää
     ensin koko sarakkeen 1 ennen siirtymistä sarakkeeseen 2), jolloin
     jokaisen rivin korkeus tasautuu automaattisesti pisimmän sisällön
     mukaan - puhelimet alkavat aina samalta korkeudelta vaikka kuvaustekstit
     ovat eri pituisia.

     justify-content: start eikä center. Neljä puhelinta (230px) + kolme
     34px väliä tarvitsevat 1022px, ja .palsta antaa nyt 1040px sisältöä
     (1080px - 40px padding) - rivi mahtuu juuri sisään (18px marginaali),
     ei enää ylivuotoa. "start" pitää silti rivin vasemman reunan
     täsmälleen samassa kohdassa kuin h2:n ja hero:n keskikohdan (koska
     kaikki jakavat saman .palsta-laatikon) - "center" tekisi saman lähes
     huomaamattomalla ~9px erolla, mutta "start" on tarkempi eikä riipu
     tulevaisuudessa siitä pysyykö marginaali positiivisena. */
  display: grid;
  grid-template-rows: auto auto auto;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  column-gap: 34px;
  row-gap: 16px;
  justify-content: start;
  margin-top: 44px;
}

.puhelinpaketti {
  /* Ei omaa laatikkoa - lapset (h3, p, puhelin-kehys) ovat suoraan
     .puhelinrivin gridin jäseniä, ks. yllä. */
  display: contents;
}

.puhelinpaketti h3 {
  font-size: 18px;
  margin: 0;
  text-align: left;
}

.puhelinpaketti p {
  font-size: 15px;
  opacity: 0.85;
  margin: 0;
  text-align: left;
}

@media (max-width: 1080px) {
  /* Sama raja kuin .palstan max-width. Kun ikkuna on kapeampi kuin
     1080px, .palsta kutistuu ikkunan levyiseksi (max-width lakkaa
     rajoittamasta) eikä anna enää 1040px sisältöä neljälle puhelimelle -
     rivi pinoutuu silloin yhdeksi sarakkeeksi ennen kuin ylivuotoa ehtii
     syntyä. */
  .puhelinrivi {
    grid-template-rows: none;
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }
}

.puhelin-kehys {
  width: 230px;
  height: 470px;
  background: var(--grape-juice);
  border-radius: 34px;
  padding: 10px;
  box-shadow: 0 10px 0 rgba(109, 31, 66, 0.14);
  position: relative;
  flex-shrink: 0;
}

.puhelin-kehys::before {
  content: '';
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 7px;
  border-radius: 999px;
  background: rgba(253, 241, 234, 0.35);
  z-index: 2;
}

.puhelin-ruutu {
  width: 100%;
  height: 100%;
  border-radius: 25px;
  overflow: hidden;
  background: var(--bubblegum);
  position: relative;
}

.puhelin-skaalaus {
  width: 375px;
  transform-origin: top left;
  /* 375px on sama leveys jolla sovellusnäytteet on alun perin kuvattu
     (ks. site/tietoa/index.html:n kommentit) - kapeammalla leveydellä mm.
     ikäbadge leikkautui puhelimen reunasta. Skaala: (230 - 2*10 padding) / 375 */
  transform: scale(0.56);
}

.puhelin-naytto .app-nayte {
  height: auto;
  /* Kehyksen sisäkorkeus (450px) takaisin skaalaamattomaksi: 450 / 0.56.
     Lyhyempi sisältö (esim. Eteneminen) venyy täyttämään kehyksen asti
     (main {flex-grow:1} työntää ala-navin kehyksen pohjalle), pidempi
     sisältö (Kirjaa maistelu) kasvaa tätä suuremmaksi kuten ennenkin. */
  min-height: 804px;
}

.puhelin-naytto main {
  overflow: visible;
}

.puhelin-naytto button {
  cursor: default;
  pointer-events: none;
}

/* ---- Tarina + kuva, vierekkäin ---- */

.tarina-sisalto {
  display: flex;
  gap: 36px;
  align-items: flex-start;
  margin-top: 8px;
}

.tarina-teksti {
  flex: 1 1 0;
  min-width: 0;
}

.tarina-teksti p:last-child {
  margin-bottom: 0;
}

.tarina-allekirjoitus {
  font-weight: 700;
  margin-top: 4px;
}

.tarina-kuva {
  flex: 0 0 260px;
  aspect-ratio: 3 / 4;
  border-radius: 24px;
  background: var(--lilacs);
  overflow: hidden;
}

.tarina-kuva img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  display: block;
}

@media (max-width: 680px) {
  .tarina-sisalto {
    flex-direction: column;
  }

  .tarina-kuva {
    flex: none;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }
}

/* ---- Tietosuoja tiivistettynä ---- */

.tietosuoja-linkki {
  display: inline-block;
  margin-top: 8px;
  font-weight: 700;
  text-decoration: underline;
}

/* ---- UKK ---- */

.ukk-kysymys {
  margin-bottom: 26px;
}

.ukk-kysymys h3 {
  font-size: 17px;
  margin-bottom: 6px;
}

.ukk-kysymys p {
  margin: 0;
  opacity: 0.9;
}

/* ---- Alatunniste ---- */

.alatunniste {
  padding: 40px 0 60px 0;
  text-align: center;
  font-size: 14px;
}

.alatunniste .palsta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.alatunniste a {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .osio { padding: 48px 0; }
  .puhelinrivi { gap: 26px; }
}