/* Laskurisivu on yhta pintaa ja samaa varia kuin header: kolme osiota,
   ei varirajaa eika erotinviivaa niiden valissa. */
.pricing-intro,
.pricing-calculator,
.pricing-explainer { background: var(--paper); }

.pricing-intro { padding-bottom: 36px; }
.pricing-intro .font__body { max-width: 62ch; }
/* align-items: stretch (oletus): salviainen lomake ja tumma arviolaatikko
   ovat saman korkuisia, eli rivin korkeus tulee korkeammasta. Kun laskuriin
   lisataan toinen tyo, lomake kasvaa ja laatikko seuraa perassa. */
.pricing-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 32px; padding-bottom: 80px; }
/* Sama pinta kuin aluesivun laskurikortissa: salvia ilman reunaviivaa. Tämä on
   sama työkalu samassa roolissa, vain useammalla kentällä - paikkakuntaa ei
   voi lukea sivulta, töitä voi olla monta ja käyntimäärä on säädettävissä.
   Kenttien määrä ei ole tyylillinen ero, joten pinnan pitää olla sama.
   Padding yhtenäistettiin aluesivun clamp(24px, 3vw, 36px):iin. */
.calculator { background: var(--sage); padding: clamp(24px, 3vw, 36px); }
.calculator > fieldset { padding: 0; margin: 0; border: 0; min-width: 0; }
.calculator legend { margin-bottom: 24px; }
.calculator label { display: block; font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: .055em; text-transform: uppercase; color: var(--service-text); }
/* text-transform ja letter-spacing nollataan kentissä, koska nimilappu käärii
   kontrollin sisäänsä (<label>Teksti<select>...</select></label>) toisin kuin
   aluesivulla, jossa label ja kenttä ovat sisaruksia. Ilman nollausta versaali
   ja harvennus valuisivat paikkakuntavalikon vaihtoehtoihin. */
/* Sama hillitty fokus kuin muualla; oma sääntö koska .calculator input voittaisi
   muuten globaalin input:focus -säännön lähdejärjestyksellä. */
.calculator input:focus, .calculator select:focus { outline: none; border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.calculator input, .calculator select { width: 100%; min-width: 0; height: 48px; padding: 0 12px; margin-top: 7px; border: 1px solid #8a8e83; background: var(--paper); color: var(--ink); font-size: 16px; text-transform: none; letter-spacing: normal; }
.calculator-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px 20px; }
.calculator-wide { grid-column: 1 / -1; }
/* Viiva erottaa työt toisistaan ja koko työlistan seuraavasta kentästä.
   Viimeisen työn alta viiva siirtyy "+ Lisää toinen työ" -napin alle, jolloin
   nappi on listan sisällä eikä leiju irrallaan paikkakuntakentän yläpuolella. */
.calculator-job { min-width: 0; border: 0; padding: 0 0 24px; margin: 0 0 24px; border-bottom: 1px solid var(--service-border); }
.calculator-job legend { float: left; font-size: 13px; font-weight: 700; margin: 0 0 18px; }
.calculator-job .calculator-fields { clear: both; }
.calculator-job .text-link { margin-top: 12px; }
.calculator .text-link { min-height: 44px; background: none; border: 0; padding: 0; font-size: 13px; }
.calculator .text-link:disabled { opacity: .55; cursor: default; }
/* Nappi asuu nyt viimeisen tyon sisalla, joten se ei tarvitse omaa viivaa eika
   alamarginaalia. Vali "Poista tyo" -nappiin tulee gapista. (0,2,0), koska
   .calculator .text-link nollaa paddingin ja voittaisi pelkan luokan. */
/* Vali vain kun "Poista tyo" on nakyvissa: yhden tyon laskurissa se on
   piilotettu, eika yksinainen lisaysnappi saa sisentya. */
.calculator [data-remove]:not([hidden]) + .calculator-add { margin-left: 24px; }
.calculator-includes { margin-top: 14px; }
/* Punainen 4px yläviiva pois: se oli sivuston ainoa "merkkiviiva", eikä
   aluesivun tulosalueella ole vastaavaa. Salvia yksin kertoo jo että tämä on
   laskurin pinta, ja punainen palaa sinne minne se kuuluu - nappiin. */
/* Arvio ja "Useampi työ kerralla" ovat samassa tummassa laatikossa: ne ovat
   saman kysymyksen kaksi vastausta — mitä yksi työ maksaa ja mitä kokonaisuus
   maksaisi. Erillisinä laatikkoina jälkimmäinen luki irrallisena mainoksena.
   .project-cta antaa pinnan ja perustypografian, tässä vain arvion osat. */
.pricing-estimate h2.font__h2 { margin: 0; font-size: var(--fs-estimate); line-height: 1.2; letter-spacing: -.03em; font-weight: 600; color: var(--white); }
/* Hintaluku on tietoa, ei toimintoa: punainen on tällä sivustolla varattu
   napeille ja linkeille. Aluesivun arvio noudatti sääntöä jo, tämä sivu ei.
   Koko jää isoksi - se on koko sivun pointti, ei kortin sisäinen rivi. */
.calculator-jump { display: none; }
.calculator label > [data-quantity-label] { color: inherit; font: inherit; }
/* .project-cta työntää ainoan nappinsa pohjaan (margin-top: auto). Tässä
   laatikossa nappeja on kaksi eikä kumpikaan ole pohjalla, joten auto pois. */
.pricing-estimate .button { width: 100%; margin-top: 20px; }
.pricing-estimate h3.font__h2 { margin-top: clamp(30px, 3.4vw, 44px); }
/* Sama valkoinen kuin ylemmillä osioilla eikä erotinviivaa: sivu on yksi
   yhtenäinen pinta, jolla laskuri on ainoa erottuva elementti. */
.pricing-explainer { padding-block: 64px; }
@media (max-width: 950px) {
  .pricing-layout { grid-template-columns: 1fr; gap: 24px; }
  .calculator-jump { display: inline-flex; margin-top: 24px; }
}
@media (max-width: 600px) {
  .pricing-intro { padding-bottom: 28px; }
  .pricing-layout { padding-bottom: 48px; }
  .calculator-fields { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pricing-explainer { padding-block: 48px; }
}

/* Projektikortti laskurin palstan alle: se on vaihtoehto laskemiselle, ei osa
   sitä, joten se on oma pintansa eikä yhteenvetolaatikon jatke. */

@media (max-width: 950px) {
}

/* Sama kuin palvelu- ja aluesivuilla: 950px:ssä palstat menevät päällekkäin,
   jolloin salviainen lomake valkoisella luki laatikkona. Lomake luopuu silloin
   omasta pinnastaan ja osio jää valkoiseksi. Tumma arviolaatikko jää laatikoksi
   tarkoituksella — se on eri pinta, ei sama sisältö. */
@media (max-width: 950px) {
  .pricing-calculator { padding-block: clamp(28px, 5vw, 40px); }
  .pricing-calculator .calculator { background: none; padding: 0; }
  .pricing-layout { padding-bottom: 0; }
}

/* Tulosmalli on sama kuin palvelusivuilla, mutta siellä se on salvian päällä ja
   tässä tumman punaruskean. Globaalit värit (--ink, --service-text, --muted)
   katoaisivat kaikki, joten ne ylikirjoitetaan. Kontrastit tarkistettu
   #4c2428:aa vasten: --white 12.53:1, --cta-text 9.42:1. */
.pricing-estimate .calc-result-label { color: var(--cta-text); }
.pricing-estimate .calc-amount { color: var(--white); }
.pricing-estimate .calc-amount--empty { color: rgba(255, 255, 255, .32); }
.pricing-estimate .calc-travel,
.pricing-estimate .calc-hint { color: var(--cta-text); }
.pricing-estimate .calc-city { color: var(--cta-text); opacity: .75; }