/* responsiivisuus.css — käsin ylläpidetyt korjaukset Claude Designin tuotokseen
 *
 * ÄLÄ siirrä näitä design-export/-kansioon. Seuraava export ylikirjoittaisi ne.
 * rakenna.sh liittää tämän jokaiseen sivuun design systemin jälkeen, jolloin
 * nämä säännöt voittavat.
 *
 * Korjattu ongelma (19.8.2026, havaittu puhelimella):
 * Design systemin tyylikoot ovat kiinteitä pikseleitä eikä yhdessäkään sen
 * CSS-tiedostossa ole media queryjä. --text-display-hero on 88px, mikä ei
 * mahdu 390px leveälle näytölle. Pitkät suomen sanat työnsivät sivun
 * leveämmäksi kuin ruutu, jolloin sivu vieri sivusuunnassa ja otsikot
 * leikkautuivat.
 */

/* --- 1. Otsikkokoot mukautuviksi ------------------------------------------
 * clamp(pienin, mukautuva, suurin): työpöydällä ennallaan, puhelimella pienempi.
 * Keskiarvo on vw-yksikköä, joten koko skaalautuu portaattomasti näytön mukaan.
 */
:root {
  --text-display-hero: clamp(40px, 8.5vw, 88px);
  --text-display-1:    clamp(32px, 6.8vw, 64px);
  --text-display-2:    clamp(27px, 5.4vw, 48px);
  --text-display-3:    clamp(23px, 4.4vw, 36px);
  --text-h1:           clamp(21px, 3.6vw, 30px);
  --text-xxl:          clamp(19px, 3vw, 24px);
}

/* --- 2. Pitkien sanojen katkaisu ------------------------------------------
 * Suomen yhdyssanat ovat pitkiä. Ilman tätä yksittäinen sana voi olla
 * leveämpi kuin näyttö, eikä mikään fonttikoko riitä.
 */
h1, h2, h3, h4, p, li, td, th, figcaption, blockquote {
  overflow-wrap: break-word;
  hyphens: auto;
}
h1, h2, h3, h4 {
  text-wrap: balance; /* tasaa rivit, tuetuissa selaimissa */
}

/* --- 3. Sivusuuntainen vieritys pois --------------------------------------
 * Turvaverkko: jos jokin yksittäinen elementti yhä ylittää leveyden,
 * se ei enää riko koko sivun asettelua.
 */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* --- 4. Kiinteäleveyksiset elementit -------------------------------------
 * Nämä on määritelty site.css:ssä kiinteinä pikseleinä ja ylittävät
 * kapean näytön leveyden.
 */
.lang-menu .menu {
  width: min(360px, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
}
.phone {
  max-width: min(290px, calc(100vw - 3rem));
}
.demo-frame {
  max-width: calc(100vw - 2rem);
}

/* --- 5. Taulukot vieritettäviksi ------------------------------------------
 * Hinnoittelutaulukko ei mahdu puhelimelle. Vieritys taulukon sisällä on
 * parempi kuin koko sivun vieriminen.
 */
.tier-table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}
@media (min-width: 720px) {
  .tier-table {
    display: table;
    white-space: normal;
  }
}

/* --- 6. Kuvat eivät ylitä leveyttä ---------------------------------------- */
img, svg, video, iframe {
  max-width: 100%;
  height: auto;
}