/* ==========================================================================
   FormulaRs: osiokohtainen kerros. Kaikki värit tokeneista (portti P2).
   ========================================================================== */

/* --- Hero: koko ensiruudun näyttämö.
   L0-L2 ovat rastereita, L3 on lasi ja säröt (SVG), L4 typografia DOM:ia.
   Sivun pinta on lasia: se murtuu vasemmalla ja paljastaa hallin oikealla.
   Lasilevy on samalla typografian kantava taso, joten kontrasti ei ole
   kiinni siitä mitä kuvassa sattuu olemaan. Ei laatikkoa, ei sädettä,
   ei varjoa: taso rajautuu säröön 35 asteen maailmassa.
   Ilman JavaScriptiä kerrokset ovat lopullisilla paikoillaan. --- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--vari-pohja);
  min-height: var(--hero-korkeus);
  display: flex;
  align-items: center;
}

.hero-naytto {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(100%, var(--hero-naytto-max));
  overflow: hidden;
}

.hero-naytto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, var(--vari-pohja) 0%, var(--vari-pohja-lasi) 31%, var(--vari-valo-0) 63%);
}

.hero-sisalto {
  position: relative;
  z-index: 4;
  width: 100%;
  padding-block: clamp(2rem, 5vw, 4rem);
  padding-inline: clamp(1.5rem, 5vw, 6rem);
}

.hero-sisalto > * {
  max-width: 31rem;
}

.hero-sisalto .esirivi {
  color: var(--vari-muste);
}

.hero-sisalto h1 {
  font-size: clamp(2.1rem, 0.9rem + 2.4vw, 3.25rem);
  text-wrap: balance;
}

.hero-linkki {
  font-weight: 500;
  text-underline-offset: 4px;
}

.hero-toiminnot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tila-2);
  margin-top: var(--tila-3);
  align-items: center;
}

/* Kerrokset peittävät näyttämön. Sama object-position kaikilla, muuten
   kerrokset eivät asetu yhteen. A3-julkaisuassetit ovat 3072 px leveitä;
   P3 varmistaa ettei leveäkään näyttö skaalaa niitä yli 1:1-suhteen. */
.hero-naytto picture,
.hero-naytto img[data-kerros] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-naytto img[data-kerros] {
  object-fit: cover;
  object-position: 62% 50%;
  will-change: transform;
}

/* L3: lasi ja säröt. Koodia, ei kuvatiedostoa. Tämä kerros EI liiku
   scrollissa: lasi on ruudun pinta, halli liikkuu sen takana. */
.hero-l3 {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.hero-lasi {
  display: block;
  width: 100%;
  height: 100%;
}

.lasi-hohde {
  stroke-dasharray: 10 90;
  stroke-dashoffset: 100;
  animation: hero-lasi-henkays var(--liike-hero-henkays) linear infinite;
  will-change: stroke-dashoffset;
}

.lasi-saro {
  opacity: 0.88;
}

@keyframes hero-lasi-henkays {
  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lasi-hohde {
    animation: none;
  }
}

@media (max-width: 64em) {
  /* Mobiilihero: näyttämö omana kaistanaan ylhäällä, typografia sen alla
     sivun omalla pinnalla. Lasilevy pois, vasen valotaitos jää. */
  .hero {
    display: block;
    min-height: 0;
  }

  .hero-naytto {
    position: relative;
    height: clamp(13rem, 40svh, 20rem);
  }

  .hero-naytto::after {
    background: linear-gradient(180deg, var(--vari-valo-0) 58%, var(--vari-pohja-lasi) 100%);
  }

  .hero-naytto img[data-kerros] {
    object-position: 74% 58%;
  }

  .lasi-levy {
    display: none;
  }

  .hero-sisalto {
    width: min(100% - 2.5rem, var(--sisalto-leveys));
    margin-inline: auto;
    padding-inline: 0;
    padding-block: var(--tila-3) var(--tila-4);
  }

  .hero-sisalto > * {
    max-width: none;
  }

}

/* --- Osio 2: kolme osaa (K2-havainnekaaviot) --- */

.osat-otsake {
  max-width: var(--teksti-mitta);
  margin-bottom: var(--tila-4);
}

.osat-ruudukko {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tila-3);
  margin-bottom: var(--tila-3);
}

.osa-kortti {
  background: var(--vari-pohja);
  border-radius: var(--sade-pinta);
  box-shadow: var(--varjo-pinta);
  padding: var(--tila-3);
}

.osa-kortti img {
  width: 100%;
  max-width: 17rem;
  margin-inline: auto;
  margin-bottom: var(--tila-2);
}

.osa-kortti .mono {
  color: var(--vari-signaali);
  display: block;
  margin-bottom: var(--tila-1);
}

.osa-kortti h3 {
  margin-bottom: var(--tila-1);
}

.osa-kortti p {
  margin: 0;
  font-size: var(--koko-pieni);
  line-height: 1.55;
}

.osat-huomio {
  font-family: var(--fontti-mono);
  font-size: var(--koko-mono);
  letter-spacing: 0.02em;
  margin-bottom: var(--tila-4);
}

.osat-hinta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tila-2) var(--tila-4);
  border-top: 1px solid var(--vari-hiusviiva);
  padding-top: var(--tila-3);
}

.osat-hinta p {
  margin: 0;
}

@media (max-width: 64em) {
  .osat-ruudukko {
    grid-template-columns: 1fr;
  }
}

/* --- Osio 3: ei jälkiä. Rakenteellinen pääidea: palautuva asennus --- */

.eijalkia-ylaosa {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  margin-bottom: var(--tila-5);
}

.eijalkia-kaavio {
  margin: 0;
}

.eijalkia-kaavio img {
  width: 100%;
}

.eijalkia-kaavio figcaption,
.kuva-selite {
  font-family: var(--fontti-paa);
  font-size: var(--koko-leipa);
  letter-spacing: normal;
  margin-top: var(--tila-2);
  line-height: 1.6;
}

.palautus-lista {
  list-style: none;
  padding: 0;
  margin: var(--tila-3) 0 0;
  display: grid;
  gap: var(--tila-2);
}

.palautus-lista li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--tila-2);
  align-items: baseline;
  margin: 0;
  border-top: 1px solid var(--vari-hiusviiva);
  padding-top: var(--tila-2);
}

.palautus-lista .indeksi {
  font-family: var(--fontti-mono);
  font-size: var(--koko-mono);
  color: var(--vari-signaali);
  letter-spacing: 0.08em;
}

.palautus-lista strong {
  display: block;
}

.eijalkia-kuva {
  margin: 0 0 var(--tila-5);
}

.eijalkia-kuva img {
  width: 100%;
  border-radius: var(--sade-kuva);
}

.eijalkia-kuva figcaption {
  font-family: var(--fontti-mono);
  font-size: var(--koko-mono);
  letter-spacing: 0.02em;
  margin-top: var(--tila-2);
}

.sahkoauto {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}

.sahkoauto figure {
  margin: 0;
}

.sahkoauto img {
  width: 100%;
  border-radius: var(--sade-kuva);
}

.sahkoauto figcaption {
  font-family: var(--fontti-mono);
  font-size: var(--koko-mono);
  letter-spacing: 0.02em;
  margin-top: var(--tila-2);
}

@media (max-width: 64em) {
  .eijalkia-ylaosa,
  .sahkoauto {
    grid-template-columns: 1fr;
  }

  .sahkoauto figure {
    order: -1;
  }
}

/* --- Osio 4: todisteet (K3, asiakkaan omat työkuvat) --- */

.todisteet-otsake {
  max-width: var(--teksti-mitta);
  margin-bottom: var(--tila-4);
}

.todisteet-nayte {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(var(--tila-3), 4vw, var(--tila-5));
  align-items: start;
}

.todisteet-nayte figure {
  margin: 0;
}

.todisteet-nayte picture {
  display: block;
  overflow: hidden;
  border-radius: var(--sade-kuva);
  background: var(--vari-syva-valo);
}

.todisteet-nayte img {
  width: 100%;
  height: auto;
  object-fit: cover;
  filter: saturate(0.84) contrast(1.03);
}

.todiste-paa img {
  aspect-ratio: 4 / 5;
  object-position: 52% 56%;
}

.todisteet-sivusarja {
  display: grid;
  gap: var(--tila-4);
}

.todisteet-sivusarja img {
  aspect-ratio: 4 / 3;
}

.todisteet-sivusarja figure:first-child img {
  object-position: 50% 36%;
}

.todisteet-nayte figcaption {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--tila-1);
  align-items: baseline;
  font-size: var(--koko-pieni);
  margin-top: var(--tila-2);
  line-height: 1.5;
}

.todiste-numero {
  font-family: var(--fontti-mono);
  font-size: var(--koko-mono);
  letter-spacing: 0.08em;
  color: var(--vari-signaali);
}

.todisteet-periaate {
  padding: var(--tila-4);
  border-radius: var(--sade-pinta);
  background: linear-gradient(135deg, var(--vari-lasi-kirkas), var(--vari-pinta-lasi));
  box-shadow: var(--varjo-pinta);
}

.todisteet-periaate .nimio {
  display: block;
  font-family: var(--fontti-mono);
  font-size: var(--koko-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vari-signaali);
  margin-bottom: var(--tila-2);
}

.todisteet-periaate p {
  margin: 0;
  max-width: 34rem;
}

@media (max-width: 52em) {
  .todisteet-nayte {
    grid-template-columns: 1fr;
  }

  .todiste-paa img {
    aspect-ratio: 4 / 3;
  }
}

/* --- Osio 5: hinta. Sivun ainoa tumma osio, lepotauko --- */

.hinta-otsake {
  max-width: var(--teksti-mitta);
}

.hinta-luvut {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tila-3) var(--tila-5);
  margin-block: var(--tila-4);
  max-width: 52rem;
}

.hinta-luku {
  border-top: 1px solid var(--vari-hiusviiva-tumma);
  padding-top: var(--tila-3);
}

.hinta-luku .nimio {
  font-family: var(--fontti-mono);
  font-size: var(--koko-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--tila-2);
}

.hinta-luku .arvo {
  font-family: var(--fontti-paa);
  font-weight: 700;
  font-size: var(--koko-hinta);
  line-height: 1;
  letter-spacing: -0.02em;
  display: block;
}

.hinta-luku .arvo .etuliite {
  font-size: 0.36em;
  font-weight: 500;
  letter-spacing: 0;
  display: block;
  margin-bottom: 0.35em;
}

.hinta-selite {
  max-width: var(--teksti-mitta);
}

.hinta-toiminnot {
  margin-top: var(--tila-3);
}

@media (max-width: 40em) {
  .hinta-luvut {
    grid-template-columns: 1fr;
  }
}

/* --- Osio 2: etusivun reititys, kaksi työtä ---
   Vasen palsta vie opetuspoljinsivulle, oikea korjaamoon. Palstat ovat
   tarkoituksella eri levyiset, ja jako tehdään valon lämpötilalla eikä
   viivalla, reunuksella tai kortilla. Oikea palsta vuotaa ruudun reunaan
   asti, jotta se ei muutu laatikoksi sivun päälle. --- */

/* Vuotava osio rajaa reunaan asti jatkuvan pinnan itseensä, jottei
   sivulle synny vaakasuuntaista ylivuotoa (mitattu vika 2026-08-31). */
.osio-vuotava {
  overflow: hidden;
}

.palvelujako {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: stretch;
  gap: clamp(1.5rem, 4vw, 4rem);
  width: min(100% - 2.5rem, var(--sisalto-leveys));
  margin-inline: auto;
}

.palvelu-paa h3 {
  font-size: var(--koko-h2);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: var(--tila-2);
}

.palvelu-paa .nappi {
  margin-top: var(--tila-2);
}

.palvelu-hinta {
  font-family: var(--fontti-mono);
  font-size: var(--koko-mono);
  letter-spacing: 0.02em;
  border-top: 1px solid var(--vari-hiusviiva);
  padding-top: var(--tila-2);
  margin-top: var(--tila-3);
}

/* Rinnalla kulkeva palsta: oma valon lämpötila, vuoto oikeaan reunaan */
.palvelu-rinnalla {
  position: relative;
  background: var(--vari-syva-valo);
  padding: var(--tila-5) var(--tila-3);
  margin-block: calc(-1 * var(--space-section));
}

/* Vuoto ruudun oikeaan reunaan: sama valo jatkuu, ei reunaa eikä varjoa */
.palvelu-rinnalla::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 50vw;
  background: var(--vari-syva-valo);
}

.palvelu-rinnalla h3 {
  margin-bottom: var(--tila-2);
}

@media (max-width: 64em) {
  .palvelujako {
    grid-template-columns: 1fr;
  }

  .palvelu-rinnalla {
    margin-block: 0;
    padding: var(--tila-3) var(--tila-2);
  }

  .palvelu-rinnalla::after {
    left: auto;
    right: -1.5rem;
    width: 1.5rem;
  }
}

/* --- Osio 3: monimerkkikorjaamo --- */

.korjaamo-toiminnot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tila-2) var(--tila-4);
  border-top: 1px solid var(--vari-hiusviiva);
  margin-top: var(--tila-4);
  padding-top: var(--tila-3);
}

.korjaamo-toiminnot p {
  margin: 0;
}

.korjaamo-otsake {
  max-width: var(--teksti-mitta);
  margin-bottom: var(--tila-4);
}

.palvelut {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--tila-4);
  margin: 0;
}

.palvelut > div {
  border-top: 1px solid var(--vari-hiusviiva);
  padding-block: var(--tila-3);
}

.palvelut dt {
  font-weight: 700;
  font-size: var(--koko-h3);
  margin-bottom: var(--tila-1);
}

.palvelut dd {
  margin: 0;
  font-size: var(--koko-pieni);
  line-height: 1.55;
}

.korjaamo-jatko {
  margin-top: var(--tila-3);
}

@media (max-width: 64em) {
  .palvelut {
    grid-template-columns: 1fr;
  }

  .palvelut > div {
    padding-block: var(--tila-2);
  }
}

/* --- Osio 7: sijainti --- */

.sijainti-sisalto {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}

.sijainti-kartta {
  margin: 0;
}

.sijainti-kartta-kuva {
  position: relative;
  overflow: hidden;
  border-radius: var(--sade-kuva);
  box-shadow: var(--varjo-pinta);
}

.sijainti-kartta img {
  width: 100%;
}

.kartta-merkki {
  position: absolute;
  left: 43.96%;
  top: 37.73%;
  width: 4rem;
  height: 4rem;
  border: 2px solid var(--vari-valo-0);
  border-radius: 50%;
  background: var(--vari-valo-0);
  transform: translate(-50%, -50%);
  cursor: pointer;
  text-decoration: none;
}

.kartta-merkki:hover,
.kartta-merkki:focus-visible {
  border-color: var(--vari-signaali);
  background: var(--vari-signaali-huntu);
  color: var(--vari-muste);
}

.kartta-merkki::after {
  content: "Google Maps";
  position: absolute;
  left: 50%;
  bottom: calc(100% + var(--tila-1));
  width: max-content;
  padding: var(--tila-1) var(--tila-2);
  border-radius: var(--sade-nappi);
  background: var(--vari-syva-pinta);
  color: var(--vari-valo-teksti);
  font-family: var(--fontti-mono);
  font-size: var(--koko-mono);
  opacity: 0;
  transform: translate(-50%, var(--tila-1));
  transition: opacity var(--liike-nopea) var(--easing-ulos),
    transform var(--liike-nopea) var(--easing-ulos);
  pointer-events: none;
}

.kartta-merkki:hover::after,
.kartta-merkki:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.sijainti-kartta figcaption {
  display: flex;
  justify-content: space-between;
  gap: var(--tila-2);
  align-items: baseline;
  font-family: var(--fontti-mono);
  font-size: var(--koko-mono);
  letter-spacing: 0.02em;
  margin-top: var(--tila-2);
}

.sijainti-kartta figcaption a {
  flex: none;
  font-weight: 700;
  text-decoration: none;
}

.osoite {
  font-style: normal;
  margin-bottom: var(--tila-2);
}

.osoite strong {
  display: block;
}

.palvelualue {
  list-style: none;
  padding: 0;
  margin: var(--tila-2) 0 var(--tila-3);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-family: var(--fontti-mono);
  font-size: var(--koko-mono);
  letter-spacing: 0.04em;
  max-width: none;
}

.palvelualue li {
  margin: 0;
}

.palvelualue li::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 2px;
  background: var(--vari-signaali);
  vertical-align: middle;
  margin-right: 0.45rem;
  transform: rotate(-35deg);
}

@media (max-width: 64em) {
  .sijainti-sisalto {
    grid-template-columns: 1fr;
  }

  .sijainti-kartta figcaption {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* --- Osio 8: yhteydenotto --- */

.yhteys-sisalto {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}

.yhteys-paneeli {
  padding: var(--tila-2);
  border: 1px solid var(--vari-lasi-viiva);
  border-radius: var(--sade-pinta);
  background: linear-gradient(135deg, var(--vari-lasi-kirkas), var(--vari-pinta-lasi));
  box-shadow: var(--varjo-pinta);
}

.yhteys-kanavat {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: var(--tila-1);
}

.yhteys-kanava {
  min-width: 0;
  display: grid;
  gap: var(--tila-1);
  align-content: start;
  padding: var(--tila-3);
  border-radius: var(--sade-kuva);
  background: var(--vari-pohja-lasi);
  text-decoration: none;
  transition: background-color var(--liike-nopea) var(--easing-ulos);
}

.yhteys-kanava:hover {
  color: var(--vari-muste);
  background: var(--vari-signaali-huntu);
}

.yhteys-kanava .nimio,
.yhteys-faktat dt {
  font-family: var(--fontti-mono);
  font-size: var(--koko-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.yhteys-arvo {
  font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.25rem);
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.yhteys-kanava-toimi {
  color: var(--vari-signaali);
  font-family: var(--fontti-mono);
  font-size: var(--koko-mono);
}

.yhteys-faktat {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tila-2);
  margin: var(--tila-2) 0 0;
  padding: var(--tila-3);
  border-radius: var(--sade-kuva);
  background: var(--vari-pinta-lasi);
}

.yhteys-faktat div {
  min-width: 0;
}

.yhteys-faktat dd {
  margin: var(--tila-1) 0 0;
  font-size: var(--koko-pieni);
  line-height: 1.5;
}

.yhteys-toiminnot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tila-2);
  margin-top: var(--tila-3);
}

@media (max-width: 64em) {
  .yhteys-sisalto {
    grid-template-columns: 1fr;
  }

  .yhteys-faktat {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 40em) {
  .yhteys-kanavat,
  .yhteys-faktat {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Opetuspoljinsivu: tietorikas, staattinen ja rauhallinen opas
   ========================================================================== */

.opas-hero {
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 16%, var(--vari-sumu-viilea), var(--vari-valo-0) 32%),
    var(--vari-pohja);
}

.opas-hero-sisalto {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.opas-hero figure {
  position: relative;
  margin: 0;
}

.opas-hero figure::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: var(--sade-kuva);
  background: linear-gradient(135deg, var(--vari-lasi-kirkas), var(--vari-valo-0) 28%);
}

.opas-hero img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--sade-kuva);
  box-shadow: var(--varjo-pinta);
}

@media (max-width: 64em) {
  .opas-hero-sisalto {
    grid-template-columns: 1fr;
  }
}

/* Kapea tekstiosio: opas luetaan, ei selata */
.opas-osio .raami {
  max-width: 46rem;
}

.opas-osio-levea .raami {
  max-width: var(--sisalto-leveys);
}

/* Prosessiosiot: Chivo Mono -vaiheindeksit */
.vaiheet {
  list-style: none;
  padding: 0;
  margin: var(--tila-3) 0 0;
  counter-reset: vaihe;
}

.vaiheet li {
  counter-increment: vaihe;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--tila-2);
  border-top: 1px solid var(--vari-hiusviiva);
  padding-block: var(--tila-2);
  margin: 0;
}

.vaiheet li::before {
  content: counter(vaihe, decimal-leading-zero);
  font-family: var(--fontti-mono);
  font-size: var(--koko-mono);
  color: var(--vari-signaali);
  letter-spacing: 0.08em;
  padding-top: 0.3rem;
}

/* Sarjan osat opetuspoljinsivulla: pienet K2-kuvat tekstin rinnalla */
.sarja-osat {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tila-3);
  margin-block: var(--tila-3);
}

.sarja-osat > div {
  text-align: left;
}

.sarja-osat img {
  width: 100%;
  max-width: 13rem;
  margin-bottom: var(--tila-1);
}

.sarja-osat p {
  margin: 0;
  font-size: var(--koko-pieni);
  font-weight: 500;
}

@media (max-width: 40em) {
  .sarja-osat {
    grid-template-columns: 1fr;
  }
}

/* FAQ: yksipalstainen, ei haitarikoreografiaa */
.faq h3 {
  border-top: 1px solid var(--vari-hiusviiva);
  padding-top: var(--tila-3);
  margin-top: var(--tila-3);
}

.faq h3:first-of-type {
  margin-top: var(--tila-4);
}

/* Osionumerot oppaan väliotsikoissa */
.opas-osio .esirivi {
  color: var(--vari-muste);
}

/* ==========================================================================
   Sommittelun tarkennukset: leveä näyttö, tabletti ja kapea puhelin
   ========================================================================== */

@media (min-width: 64.01em) {
  .hero-sisalto {
    width: min(100% - 5rem, var(--sisalto-leveys));
    margin-inline: auto;
    padding-inline: 0;
  }

  .palvelujako {
    width: min(100% - 5rem, var(--sisalto-leveys));
  }

  .palvelu-rinnalla {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

@media (max-width: 64em) {
  .hero-sisalto > * {
    max-width: var(--teksti-mitta);
  }

  .opas-hero-sisalto > div {
    max-width: 42rem;
  }
}

/* Tärkeimmät palveluosiot saavat väljemmän rytmin. Sijainti ja yhteys
   ovat niitä seuraavia, tiiviimpiä päätösosia. */
#sijainti.osio,
#yhteys.osio {
  padding-block: var(--space-section-compact);
}

/* Työkuvat tarvitsevat lukupalstaa leveämmän kuva-alan, mutta eivät koko
   ultraleveää raamia. */
#todisteet .raami {
  max-width: 68rem;
}

@media (min-width: 40.01em) and (max-width: 64em) {
  .palvelut {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Työpöytäheron kapeimmassa muodossa toimintorivi pinoutuu vaalealle
   tekstialueelle. Kuva- ja lasikerrosten sommitteluun ei kosketa. */
@media (min-width: 64.01em) and (max-width: 79.99em) {
  .hero-toiminnot {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--tila-1);
  }
}