/* =========================================================================
   O & L Maalaus -demo - hintalaskuri
   Ladataan style.css:n JÄLKEEN. Käyttää seedin omia muuttujia (värit, fontit,
   välit, kulmaviisteet) ja komponentteja (.btn, .field, .eyebrow, .section).
   Tämä tiedosto koskee vain hintalaskurisivua; etusivun tyyleihin ei kosketa.
   ========================================================================= */

/* ----------------------------- Matala hero ----------------------------- */
/* Sama diagonaali ja sisääntuloanimaatio kuin seedin palvelusivujen herossa,
   mutta matalampi ja keskitetty: sivun paino on laskurissa. */
.calc-hero {
  --svc-edge: clamp(20px, 3vw, 44px);
  position: relative;
  display: flex;
  align-items: flex-end;
  padding-block: clamp(8.5rem, 17vh, 11rem) clamp(2.75rem, 5vw, 4rem);
  overflow: hidden;
  background: var(--color-ink-deep);
  isolation: isolate;
  z-index: 1;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--svc-edge)), 0 100%);
}
/* Heron alle jäävä kiila täytetään vetämällä seuraava osio sen alle. */
.calc-hero + .section {
  --svc-edge: clamp(20px, 3vw, 44px);
  margin-top: calc(var(--svc-edge) * -1);
  padding-top: calc(var(--section-y) * 0.55 + var(--svc-edge));
}
.calc-hero__c { position: relative; z-index: 1; text-align: center; }
/* Murupolku on flex, joten sen keskitys ei tule text-alignista. */
.calc-hero .breadcrumb { justify-content: center; }
.calc-hero__c > * { animation: fadeUp 0.85s var(--ease-soft) both; }
.calc-hero h1 {
  color: var(--color-white);
  max-width: 21ch;
  margin: 0 auto 1.1rem;
  font-size: clamp(2.1rem, 4.6vw, 3.5rem);
  font-weight: 500;
  letter-spacing: -0.012em;
  animation-delay: 0.1s;
}
.calc-hero__lead {
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  max-width: 52ch;
  margin-inline: auto;
  animation-delay: 0.24s;
}

/* ----------------------------- Laskurin perusta ------------------------ */
#laskuri { background: var(--color-bg); }
.calc { max-width: 940px; margin-inline: auto; }

.calc__noscript {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.75rem;
  color: var(--color-text-light);
}

/* ----------------------------- Edistyminen ----------------------------- */
.calc__progress { margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.calc__progress-label {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: 0.85rem;
}
.calc__progress-track { display: block; height: 3px; background: var(--color-border); overflow: hidden; }
.calc__progress-fill {
  display: block;
  height: 100%;
  width: 25%;
  background: var(--color-primary);
  transition: width 0.5s var(--ease-soft);
}

/* ----------------------------- Vaihe ----------------------------------- */
.calc-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.calc-step[hidden] { display: none; }
/* Versaali kuten sivuston muutkin otsikot (asiakkaan muutoskierros 1). */
.calc-step__title {
  padding: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.35rem);
  font-weight: 560;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.1;
  color: var(--color-heading);
}
.calc-step__title:focus { outline: none; }

/* Vaihdon sisääntulo: uusi vaihe liukuu esiin, ei pomppaa paikalleen */
@keyframes calcStepIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.calc-step:not([hidden]) { animation: calcStepIn 0.4s var(--ease-soft) both; }

/* ----------------------------- Valintakortit --------------------------- */
.opt-grid { display: grid; gap: 0.9rem; margin-top: clamp(1.5rem, 3vw, 2.1rem); }
.opt-grid--2 { grid-template-columns: repeat(2, 1fr); }
.opt-grid--3 { grid-template-columns: repeat(3, 1fr); }
.opt-grid--4 { grid-template-columns: repeat(4, 1fr); }

.opt-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.9rem 1rem 1.15rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  transition: border-color 0.2s ease, background-color 0.25s ease, box-shadow 0.25s var(--ease-soft), transform 0.25s var(--ease-soft);
}
.opt-card:hover { border-color: var(--color-border-strong); background: var(--color-surface-2); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35); }
.opt-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt-card:has(input:checked) { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.opt-card:has(input:focus-visible) { outline: 3px solid var(--color-accent); outline-offset: 3px; }

/* Valintamerkki oikeaan ylänurkkaan, kortin viisteen alapuolelle */
.opt-card::after {
  content: "";
  position: absolute;
  top: 1.15rem;
  right: 0.85rem;
  width: 19px;
  height: 19px;
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-ink) no-repeat center / 12px 12px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
/* Keltainen on niin kirkas, että valintamerkki on mustalla, kuten sivuston
   muissakin keltaisissa elementeissä. */
.opt-card:has(input:checked)::after {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d0d0d' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.opt-card__art {
  display: block;
  background: var(--color-ink);
  border: 1px solid var(--color-border-dark);
  margin-bottom: 0.85rem;
  padding: 0.4rem 0.3rem;
  overflow: hidden;
}
.opt-card__art .iso { display: block; width: 100%; height: auto; transition: transform 0.45s var(--ease-soft); }
.opt-card:hover .iso { transform: translateY(-3px) scale(1.03); }
.opt-card__name {
  font-family: var(--font-heading);
  font-weight: 560;
  font-size: 1.02rem;
  letter-spacing: -0.015em;
  color: var(--color-heading);
  padding-right: 1.8rem;
}
.opt-card__desc { color: var(--color-text-light); font-size: 0.86rem; line-height: 1.5; }

/* Kuntovaihe: ei kuvakkeita, vaan kolme tekstivaihtoehtoa allekkain. */
.opt-grid--rows { grid-template-columns: 1fr; }
.opt-grid--rows .opt-card { gap: 0.35rem; padding: 1.1rem 3.6rem 1.2rem 1.3rem; }
.opt-grid--rows .opt-card__name { font-size: 1.02rem; padding-right: 0; }
.opt-grid--rows .opt-card__desc { font-size: 0.88rem; max-width: 48ch; }
/* Valintamerkki kortin keskelle, koska korkeutta on vain kaksi riviä. */
.opt-grid--rows .opt-card::after {
  top: 50%;
  margin-top: -9.5px;
  right: 1.2rem;
  width: 19px;
  height: 19px;
  background-size: 12px 12px;
}

/* ----------------------------- Isometriset kuvitukset ------------------ */
/* Kolme sävyä = kolme näkyvää pintaa (ylä, vasen, oikea). Katto on brändin
   keltainen, koska laskuri koskee katon pinnoitusta. Ohuet viivat antavat
   pinnoille tekstuurin: tiilirivit katolla, laudoitus julkisivulla. */
.iso path { stroke-linejoin: round; stroke-width: 1.05; vector-effect: non-scaling-stroke; }
.iso .i-l  { fill: #2b2b2b; stroke: #0b0b0b; }   /* vasen julkisivu */
.iso .i-r  { fill: #212121; stroke: #0b0b0b; }   /* oikea julkisivu */
.iso .i-at { fill: #ffde01; stroke: #7d6c00; }   /* pinnoitettu katto */
.iso .i-al { fill: #e0c400; stroke: #7d6c00; }   /* katon otsapinta */
.iso .i-as { fill: #c9ae00; stroke: #7d6c00; }   /* katteen otsa varjon puolella */
/* Katteen pintakuvio piirretään ilman ääriviivaa: tiheässä tekstuurissa
   ääriviivat lukisivat ruudukkona, ei kattona. */
.iso .i-av { fill: #d9be00; stroke: none; }      /* harjanteen varjon puoleinen kylki */
.iso .i-an { fill: #8a7600; stroke: none; }      /* tiilirivin etureuna, katteen tummin varjo */
.iso .i-ah { fill: #ffe95c; stroke: none; }      /* harjan laen valokohta */
.iso .i-dt { fill: #171717; stroke: #0b0b0b; }   /* ovi ja tummat detaljit */

/* Ikkunat */
.iso .i-gf { fill: #15171a; stroke: #0b0b0b; }              /* karmi */
.iso .i-gl { fill: #8a9298; stroke: none; }                 /* lasi */
.iso .i-ga { fill: #5f6b73; stroke: none; }                 /* päätykolmion lasi */
.iso .i-gh { fill: #c3ccd2; stroke: none; opacity: 0.5; }   /* heijastus */
.iso .i-gd { fill: none; stroke: #3f464b; stroke-width: 0.55; }  /* ruutujako */

/* Pintatekstuurit */
.iso .i-rl { fill: none; stroke: #8a7600; stroke-width: 0.6; opacity: 0.8; }   /* tiilirivit */
.iso .i-rs { fill: none; stroke: #8a7600; stroke-width: 0.45; opacity: 0.4; }  /* poikkisaumat */
.iso .i-wl { fill: none; stroke: #4a4a4a; stroke-width: 0.5; opacity: 0.85; }  /* laudoitus */

/* ----------------------------- Pinta-alan liukuri ---------------------- */
.calc-size {
  margin-top: clamp(1.5rem, 3vw, 2.1rem);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: clamp(1.6rem, 3.5vw, 2.4rem) clamp(1.4rem, 3vw, 2.2rem) clamp(1.4rem, 3vw, 2rem);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.calc-size__readout { display: flex; align-items: baseline; justify-content: center; gap: 0.55rem; }
.calc-size__value {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 4.6rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--color-white);
  width: 4ch;
  text-align: right;
  padding: 0 0 0.15rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  cursor: text;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.calc-size__value:hover { border-bottom-color: var(--color-border-strong); }
.calc-size__value:focus { outline: none; border-bottom-color: var(--color-primary); }
.calc-size__unit {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  font-weight: 560;
  color: var(--color-text-light);
}

/* Oma liukuri: kahva seuraa sormea vedon aikana ja asettuu pehmeästi
   lähimpään arvoon, kun ote irtoaa. */
.calc-slider {
  position: relative;
  height: 44px;
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  touch-action: none;
  cursor: pointer;
}
.calc-slider__track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: var(--color-border);
  overflow: hidden;
}
.calc-slider__fill { display: block; height: 100%; width: 0; background: var(--color-primary); }
.calc-slider__thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid var(--color-bg);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  cursor: grab;
  touch-action: none;
}
.calc-slider__thumb::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
}
.calc-slider__thumb:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; }
.calc-slider__fill,
.calc-slider__thumb { transition: left 0.16s var(--ease-soft), width 0.16s var(--ease-soft); }
.calc-slider.is-drag .calc-slider__fill,
.calc-slider.is-drag .calc-slider__thumb { transition: none; }
.calc-slider.is-drag .calc-slider__thumb { cursor: grabbing; transform: scale(1.08); }
.calc-slider__scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  color: var(--color-text-faint);
  margin-top: 0.3rem;
}

/* ----------------------------- Navigaatio ------------------------------ */
.calc__nav {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
}
.calc__nav[hidden] { display: none; }
.calc__back {
  font-family: var(--font-heading);
  font-weight: 540;
  font-size: 0.92rem;
  color: var(--color-text-light);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.2s ease;
}
.calc__back svg { width: 16px; height: 16px; transition: transform 0.25s var(--ease-soft); }
.calc__back:hover { color: var(--color-accent); }
.calc__back:hover svg { transform: translateX(-3px); }
.calc__back[hidden] { display: none; }
/* .btn on inline-flex, joka ohittaisi selaimen oman [hidden]-säännön */
.calc__nav .btn { margin-left: auto; }
.calc__nav .btn[hidden] { display: none; }

/* ----------------------------- Laskenta-animaatio ---------------------- */
.calc-loading {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1.7rem;
  min-height: 420px;
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  text-align: center;
}
.calc-loading[hidden] { display: none; }
.calc-loading__ring {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  animation: calcSpin 1.05s linear infinite;
}
.calc-loading__ring::after {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-bottom-color: var(--color-text-light);
  animation: calcSpin 1.6s linear reverse infinite;
}
@keyframes calcSpin { to { transform: rotate(360deg); } }
.calc-loading__text {
  font-family: var(--font-heading);
  font-weight: 540;
  font-size: 1.05rem;
  color: var(--color-text-light);
  margin: 0;
}
.calc-loading__text::after {
  content: "";
  animation: calcDots 1.4s steps(4, end) infinite;
}
@keyframes calcDots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
@media (prefers-reduced-motion: reduce) {
  .calc-loading__ring, .calc-loading__ring::after { animation-duration: 3s; }
  .calc-loading__text::after { animation: none; content: "..."; }
  .calc-step:not([hidden]) { animation: none; }
}

/* ----------------------------- Tulos ----------------------------------- */
.calc-result[hidden] { display: none; }
@keyframes calcResultIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.calc-result:not([hidden]) { animation: calcResultIn 0.55s var(--ease-soft) both; }

.calc-result__price-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  padding: clamp(1.9rem, 4.5vw, 3rem);
  text-align: center;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.calc-result__price-block .eyebrow { color: var(--color-text-light); justify-content: center; }
.calc-result__price {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 8vw, 4.4rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--color-primary);
  margin: 0.4rem 0 0;
}
.calc-result__price:focus { outline: none; }
.calc-result__meta { color: var(--color-text-light); font-size: 0.95rem; margin: 1.1rem auto 0; max-width: 44ch; }
.calc-result__edit { margin-top: 1.5rem; }

.calc-lead { margin-top: clamp(1.4rem, 3vw, 2rem); }

/* Kelluva kenttänimi: kenttä näyttää tyhjänä placeholderin, ja kun siihen
   kirjoitetaan tai se saa fokuksen, nimi kutistuu kentän yläreunaan.
   Nimi on DOM:ssa kentän jälkeen, jotta :not(:placeholder-shown) + label
   toimii; for/id pitää sen silti kentän oikeana nimilappuna. */
.calc-lead .field--float { position: relative; gap: 0; }
.calc-lead .field--float input { padding: 1.35rem 1rem 0.5rem; }
.calc-lead .field--float label {
  position: absolute;
  left: 1rem;
  top: 0.95rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text-faint);
  transform-origin: left top;
  pointer-events: none;
  transition: transform 0.18s var(--ease-soft), color 0.18s var(--ease-soft);
}
.calc-lead .field--float input:focus + label,
.calc-lead .field--float input:not(:placeholder-shown) + label {
  transform: translateY(-0.62rem) scale(0.74);
  color: var(--color-text-light);
}
.calc-lead .field--float input:focus + label { color: var(--color-primary); }
.calc-lead .field--float .field__error { margin-top: 0.35rem; }
.calc-lead h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 0.6rem; }
.calc-lead > p { color: var(--color-text-light); margin-bottom: 1.6rem; max-width: 52ch; }
.calc-lead .form__consent-note { color: var(--color-text-faint); font-size: 0.82rem; margin: 1rem 0 1.3rem; }
.calc-lead .form__consent-note a { color: var(--color-accent); }
.calc-lead .form__status { margin-top: 1.1rem; }

/* Kiitosnäkymä: näytetään onnistuneen lähetyksen jälkeen lomakkeen tilalla. */
.calc-kiitos { text-align: center; padding: clamp(1.5rem, 4vw, 2.5rem) 0; }
.calc-kiitos[hidden] { display: none; }
.calc-kiitos__mark {
  width: 56px;
  height: 56px;
  margin: 0 auto 1.2rem;
  display: grid;
  place-items: center;
  background: var(--color-primary);
  color: var(--color-on-primary);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.calc-kiitos__mark svg { width: 28px; height: 28px; }
.calc-kiitos h3 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); margin-bottom: 0.6rem; }
.calc-kiitos p { color: var(--color-text-light); max-width: 46ch; margin-inline: auto; }
.calc-kiitos p a { color: var(--color-accent); font-weight: 560; }

/* ----------------------------- CTA-banneri ----------------------------- */
/* Banneri kantaa id:n "tarjous", jotta chatbotin tarjousnappi löytää kohteen
   myös tältä alasivulta. Seedin sääntö #tarjous { background: var(--color-bg) }
   voittaisi luokan spesifisyydellä ja tekisi bannerista tumman, jolloin sen
   mustat tekstit katoaisivat. Palautetaan bannerin oma keltainen pinta. */
#tarjous.cta-banner { background: var(--color-primary); }

/* ----------------------------- Responsiivisuus ------------------------- */
@media (max-width: 860px) {
  .opt-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
/* Mobiilissa heron teksti tasataan vasemmalle, kuten etusivun herossa. */
@media (max-width: 767px) {
  .calc-hero__c { text-align: left; }
  .calc-hero .breadcrumb { justify-content: flex-start; }
  .calc-hero h1 { margin-inline: 0; }
  .calc-hero__lead { margin-inline: 0; }
}
@media (max-width: 620px) {
  .opt-grid { gap: 0.55rem; }
  .opt-card { padding: 0.6rem 0.6rem 0.8rem; }
  .opt-card::after { top: 0.75rem; right: 0.55rem; width: 16px; height: 16px; background-size: 10px 10px; }
  .opt-card__art { margin-bottom: 0.55rem; padding: 0.3rem 0.2rem; }
  .opt-card__name { font-size: 0.88rem; padding-right: 0; letter-spacing: -0.02em; }
  .opt-card__desc { font-size: 0.75rem; line-height: 1.4; }
  .calc__nav { gap: 0.8rem; }

  /* Jyrkkyysvaihtoehdot pysyvät samalla rivillä, jotta katot ovat
     keskenään vertailukelpoisen kokoisia. */
  .opt-grid--tight { grid-template-columns: repeat(3, 1fr); }

  .opt-grid--rows .opt-card { padding: 0.9rem 3rem 1rem 1rem; }
  .opt-grid--rows .opt-card__name { font-size: 0.95rem; }
  .opt-grid--rows .opt-card__desc { font-size: 0.8rem; }
}

/* Talotyyppivalinnat mobiilissa allekkain. Kolmessa sarakkeessa kuvake jäi
   alle 90 pikselin, eikä laudoituksen ja rappauksen eroa erottanut. Yhdellä
   rivillä kuvake saa noin kolmanneksen leveydestä ja teksti loput.
   Valintamerkki siirtyy vasempaan reunaan, koska oikea reuna on kuvakkeen. */
@media (max-width: 620px) {
  .opt-grid--talotyyppi { grid-template-columns: 1fr; gap: 0.6rem; }
  .opt-grid--talotyyppi .opt-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) clamp(104px, 37%, 140px);
    grid-template-areas: "merkki nimi kuva" "merkki teksti kuva";
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.15rem;
    padding: 0.8rem 0.85rem;
  }
  .opt-grid--talotyyppi .opt-card__art {
    grid-area: kuva;
    margin-bottom: 0;
    padding: 0.25rem 0.2rem;
  }
  /* Nimi ja kuvaus kohtaavat rivien rajalla, jolloin tekstipari asettuu
     pystysuunnassa keskelle vaikka kuvake on niitä korkeampi. */
  .opt-grid--talotyyppi .opt-card__name {
    grid-area: nimi;
    align-self: end;
    font-size: 0.95rem;
    padding-right: 0;
  }
  .opt-grid--talotyyppi .opt-card__desc {
    grid-area: teksti;
    align-self: start;
    font-size: 0.78rem;
  }
  .opt-grid--talotyyppi .opt-card::after {
    grid-area: merkki;
    position: static;
    align-self: center;
    width: 18px;
    height: 18px;
    background-size: 11px 11px;
  }
}

/* =========================================================================
   Talonmaalauslaskuri
   Samat komponentit kuin katon pinnoituslaskurissa. Alla vain se, mikä on
   tälle laskurille omaa: maalatun talon kuvakkeet, hintataulukko ja
   laskurien välinen vaihtolaatikko.
   ========================================================================= */

/* ---------- Isometriset kuvakkeet ----------
   Katon pinnoituslaskurissa brändin keltainen on katossa, koska työ kohdistuu
   sinne. Talonmaalauksessa keltainen siirtyy seiniin ja katto jää tummaksi. */
.iso .i-sl { fill: #ffde01; stroke: #7d6c00; }   /* maalattu seinä, valon puoli */
.iso .i-sr { fill: #d9be00; stroke: #7d6c00; }   /* maalattu seinä, varjon puoli */
.iso .i-sw { fill: none; stroke: #9c8500; stroke-width: 0.65; opacity: 0.9; }  /* laudoitus */
.iso .i-kt  { fill: #333333; stroke: #0b0b0b; }   /* katto, ei tässä työn kohde */
.iso .i-kl  { fill: #1e1e1e; stroke: #0b0b0b; }   /* räystään otsa */
.iso .i-kr  { fill: none; stroke: #565656; stroke-width: 0.6; opacity: 0.8; }   /* katteen rivit */
.iso .i-kr2 { fill: none; stroke: #565656; stroke-width: 0.45; opacity: 0.4; }  /* poikkisaumat */

/* ---------- Seinämateriaalin lähikuvat (vaihe 1) ----------
   Yksi seinä viistosta, keskeisperspektiivissä. Varjot ja valokohdat ovat
   läpikuultavia mustia ja valkoisia kalvoja, joten sama kerros toimii sekä
   keltaisella seinällä että sokkelikuvakkeen tummalla verhouksella.
   .i-sd ja .i-stx eivät saa fill-arvoa CSS:stä: se tulisi elementin
   fill="url(...)" -attribuutin päälle ja liuku tai kuvio katoaisi. */
.iso .i-sf  { fill: #ffde01; stroke: none; }   /* maalattu seinäpinta */
.iso .i-se  { fill: #a58c00; stroke: none; }   /* lähireunan leikkauspinta */
.iso .i-sd  { stroke: none; }                  /* etäisyyden tummennus */
.iso .i-stx { stroke: none; }                  /* pintakuvion kantaja */
.iso .i-so  { fill: none; stroke: #7d6c00; stroke-width: 1.05; }   /* ääriviiva */

/* Puutalon limilaudoitus */
.iso .i-ssh   { fill: #000000; opacity: 0.17; stroke: none; }  /* ylemmän laudan varjo */
.iso .i-shl   { fill: #ffffff; opacity: 0.15; stroke: none; }  /* laudan alareunan valo */
.iso .i-ssavy { fill: #000000; opacity: 0.05; stroke: none; }  /* lautojen sävyvaihtelu */
/* vector-effect: non-scaling-stroke tekee leveydestä ruutupikseleitä, joten
   alle 1 jäävä arvo häviäisi näkyvistä. */
.iso .i-sg { fill: none; stroke: #000000; opacity: 0.09; stroke-width: 1; stroke-linecap: round; }
.iso .i-sj { fill: none; stroke: #000000; opacity: 0.16; stroke-width: 1; }

/* Rappaus ja sokkelin betoni: karhea pinta kahdella pistekuviolla */
.iso .i-sp rect  { fill: #8f7a00; opacity: 0.8; }
.iso .i-sp2 rect { fill: #fff3ae; opacity: 0.55; }

/* Sokkelikuvakkeen tumma lautaverhous sokkelin yläpuolella */
.iso .i-sv    { fill: #2f2f2f; stroke: none; }
.iso .i-sve   { fill: #1c1c1c; stroke: none; }
.iso .i-svsh  { fill: #000000; opacity: 0.3; stroke: none; }
.iso .i-sdrip { fill: #000000; opacity: 0.45; stroke: none; }  /* tippanokan varjo */

/* ---------- Ennen ja jälkeen: yksi liuku ----------
   .ba-main on työpöydällä kolmen sarakkeen ruudukko. Kun paria on vain yksi,
   se jäisi kolmannekseen leveydestä, joten se levitetään koko riville. */
.ba-main .ba-item:only-child {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
}

/* ---------- Laskurista toiseen ----------
   Luovutus toiseen laskuriin. Ei laatikkoa vaan vapaasti aseteltu keskitetty
   lohko: laatikko kilpaili laskurin omien korttien kanssa ja jäi vaaleassa
   osiossa tummaksi läiskäksi. */
.calc-swap-osio { padding-block: calc(var(--section-y) * 0.72); }
.calc-swap {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}
/* .eyebrow on flex, joten sen keskitys ei tule text-alignista. */
.calc-swap .eyebrow { justify-content: center; }
.calc-swap h2 {
  font-size: clamp(1.55rem, 3.2vw, 2.3rem);
  margin: 0.9rem 0 0;
  text-wrap: balance;
}
.calc-swap__lead {
  color: var(--color-text-light);
  font-size: 1.02rem;
  max-width: 44ch;
  margin: 0.9rem auto 0;
}
.calc-swap .btn { margin-top: clamp(1.5rem, 3vw, 2rem); }

/* Vaalea osio: style.css tummentaa otsikot ja leipätekstin, mutta .calc-swap__lead
   on tämän tiedoston oma luokka eikä osu niihin sääntöihin. */
.section--light .calc-swap__lead { color: var(--color-on-light-muted); }

/* ---------- Kuvia työstämme ----------
   Kolme kuvaa rinnakkain kuten ennen ja jälkeen -liu'ut kattolaskurissa.
   style.css vaihtaa .kuvagridin kahteen sarakkeeseen 600 px:stä ylöspäin,
   joten kolmen kuvan rivi tarvitsee oman sääntönsä samasta rajasta. */
@media (min-width: 600px) {
  .kuvagrid--kolme { grid-template-columns: repeat(3, 1fr); }
}