/* OPPAAN TAITTO.
 *
 * MIKSI LISÄOSASSA EIKÄ TEEMASSA. Sama lisäosa ajaa kolmea sivustoa,
 * joilla on kolme eri teemaa. Oppaan merkkauksen tuottaa lisäosa
 * (Liidi_Content::render_opas), mutta tyylit oli kirjoitettu yhteen
 * teemaan kolmesta. Seuraus mitattiin 6.9.2026: asunnonhinta-arvio.fi
 * renderöi oppaan nostoluvut peräkkäisinä tekstinpätkinä ilman
 * erottelua ("2,4-kertainenKuinka paljon…"), koska teema tyylitteli
 * luokat .luvut/.luku ja lisäosa tuottaa .aha-luvut/.aha-luku.
 * Komponentin tyyli kuuluu sinne, missä sen merkkauskin on.
 *
 * MIKSI KAIKKI ON .aha-opas -ETULIITTEEN ALLA. Teeman säännöt ladataan
 * tämän jälkeen, joten yhden luokan tarkkuus häviäisi niille. Kahden
 * luokan valitsin voittaa, eikä mikään sääntö vuoda oppaan ulkopuolelle.
 *
 * VÄRIT TEEMAN MUUTTUJISTA VARASÄVYN KANSSA (var(--x, oletus)):
 * komponentti ottaa kunkin sivuston oman ilmeen ja tumman teeman, mutta
 * ei kaadu jos muuttujaa ei ole. Sama sopimus kuin kehote.css:ssä.
 */

/* ── otsikkolohko ──────────────────────────────────────────────────
   Nimike, otsikko, kärki ja kirjoittajarivi ovat yhtä lohkoa: ne
   vastaavat samaan kysymykseen (mikä tämä sivu on ja kuka sen takana
   on). Aiheen merkki on oikeassa laidassa eikä tekstin päällä. */
.aha-opas {
  --opas-mitta: 68ch;
}
.aha-opas > * { max-width: none; }

/* SIVUPOHJAN LUKUMITTA POIS OPPAAN KOHDALTA. Teeman sisältökääre
   kaventaa sivun noin 74 merkin lukumittaan, mikä on oikein
   yksipalstaiselle tekstille mutta estää palstat kokonaan: kahta
   palstaa ei mahdu 800 pikseliin. Kavennus poistetaan vain silloin kun
   kääreen sisällä on opas, joten juridiset ja muut sisältösivut
   pitävät oman mittansa. Oppaan oma lukupalsta pysyy kapeana
   (--opas-mitta), joten rivit eivät pitene. */
.aha-sisalto:has(> .aha-runko > .aha-opas),
.aha-sisalto:has(> .aha-opas) { max-width: none; }

.aha-opas .aha-opas-yla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding-bottom: 26px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--hair, #dde2e5);
}
.aha-opas .aha-opas-nimike {
  margin: 0 0 10px;
  font-size: var(--label, .75rem);
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--accent-2, #5d1d40);
}
.aha-opas .aha-opas-yla h1 {
  margin: 0 0 16px;
  font-size: var(--step-3, 2.125rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  text-wrap: balance;
  color: var(--ink, #12181d);
}
.aha-opas .aha-karki {
  margin: 0 0 18px;
  max-width: 60ch;
  font-size: var(--step-1, 1.25rem);
  line-height: 1.55;
  font-weight: 500;
  color: var(--ink, #12181d);
}
.aha-opas .aha-paivitetty {
  margin: 0;
  font-size: var(--step--1, .875rem);
  color: var(--faint, #8a979e);
}
.aha-opas .aha-paivitetty a { color: inherit; }
.aha-opas .aha-paivitetty a:hover { color: var(--accent-2, #5d1d40); }

/* Aiheen merkki. Piirros eikä valokuva: kuvituskuva olisi sama kuin
   kilpailijalla eikä kertoisi sivusta mitään. Hiljainen läpinäkyvyys,
   koska merkki on tunnus eikä kuvitus — se ei saa kilpailla otsikon
   kanssa. Pois kapealta ruudulta: siellä tila kuuluu tekstille. */
.aha-opas .aha-opas-kuvio { display: none; }
.aha-opas .aha-opas-merkki {
  width: 116px;
  height: 116px;
  color: var(--accent-2, #5d1d40);
  opacity: .28;
}

/* Kärki on kapealla ruudulla viisitoista riviä pitkä; suurin
   otsikkokoko tekee siitä oman sivunsa. Leveydellä koko kasvaa. */
@media (max-width: 620px) {
  .aha-opas .aha-karki { font-size: var(--step-0, 1.0625rem); line-height: 1.62; }
  .aha-opas .aha-opas-yla h1 { font-size: var(--step-2, 1.5rem); }
}

@media (min-width: 720px) {
  .aha-opas .aha-opas-yla {
    grid-template-columns: minmax(0, 1fr) 116px;
    gap: 34px;
  }
  .aha-opas .aha-opas-kuvio { display: block; justify-self: end; }
}

/* ── nostoluvut ────────────────────────────────────────────────────
   Vähintään kolme joka oppaassa: se on sekä oma sääntömme että ainoa
   asia sivulla, jota kilpailija ei voi kopioida. Siksi omana
   lohkonaan eikä leipätekstissä.

   EI RAKOA TAUSTAVÄRINÄ. Kun neljä lukua taittuu kolmen sarakkeen
   riville, viimeiselle riville jäisi tyhjä harmaa laatikko. Oma reuna
   jokaiselle: tyhjää solua ei ole olemassa. */
.aha-opas .aha-luvut {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin: 0 0 40px;
}
/* PITKÄ SANA EI SAA VUOTAA KORTISTA. "Keskuskauppakamarin
   kiinteistönarviointilautakunta" on versaalina ja harvennettuna
   leveämpi kuin 210 pikselin kortti, eikä suomen pitkiä yhdyssanoja
   voi lyhentää lähdemerkinnässä. Tavutus ensin, katkaisu vasta jos
   sekään ei riitä (mitattu: asunnon-arviointi 6.9.2026). */
.aha-opas .aha-luku {
  display: flex;
  flex-direction: column;
  hyphens: auto;
  overflow-wrap: anywhere;
  background: var(--surface, #ffffff);
  border: 1px solid var(--hair, #dde2e5);
  border-radius: var(--r, 4px);
  padding: 20px 22px;
}
.aha-opas .aha-luku b {
  display: block;
  margin: 0 0 8px;
  font-size: var(--step-2, 1.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--accent-2, #5d1d40);
}
.aha-opas .aha-luku span {
  display: block;
  font-size: var(--step--1, .875rem);
  line-height: 1.5;
  color: var(--muted, #5b6a73);
}
/* Lähde on kortin pohjassa ja hiusviivan takana: se on merkintä eikä
   väite, eikä se saa lukeutua luvun selityksen jatkoksi. margin-top:auto
   pitää sen pohjassa myös silloin kun selitykset ovat eri mittaisia —
   muuten neljä korttia näyttäisi neljältä eri komponentilta. */
.aha-opas .aha-luku em {
  display: block;
  margin-top: auto;
  padding-top: 12px;
  font-style: normal;
  font-size: var(--label, .75rem);
  line-height: 1.45;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--faint, #8a979e);
}
.aha-opas .aha-luku em::before {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  margin-bottom: 10px;
  background: var(--hair-strong, #c3cbcf);
}

/* ── palstat ───────────────────────────────────────────────────────
   Yksi palsta kapealla ruudulla, kaksi leveällä. Järjestys DOMissa on
   sisällys → leipä → jatkolinkit: puhelimessa lukija saa ensin kartan
   ja vasta lopuksi poistumislinkit. Leveällä ruudulla ruudukko siirtää
   sisällyksen ja jatkolinkit oikeaan palstaan pystysuunnassa. */
/* Kapealla ruudulla pino: kääre katoaa (display:contents) ja
   järjestys tulee order-arvoista, jotta lukija saa ensin kartan,
   sitten tekstin ja vasta lopuksi poistumislinkit. */
.aha-opas .aha-opas-palstat { display: flex; flex-direction: column; }
.aha-opas .aha-opas-kylki { display: contents; }
.aha-opas .aha-opas-sisallys { order: 1; }
.aha-opas .aha-opas-paa { order: 2; max-width: var(--opas-mitta); }
.aha-opas .aha-jatko { order: 3; margin-top: 34px; }

@media (min-width: 1080px) {
  .aha-opas .aha-opas-palstat {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 236px;
    column-gap: 48px;
    align-items: start;
  }
  /* SIVUPALSTA EI SEURAA VIERITYSTÄ (Petri 6.9.2026). Kiinnitetty
     (position:sticky) sisällys teki kaksi vikaa kerralla: se liikkui
     tekstin mukana ja valui jatkolinkkien päälle, koska sisällys ja
     linkit olivat kaksi erillistä ruudukon solua eikä kiinnitys voi
     liikkua oman solunsa ulkopuolelle. Nyt ne ovat yksi laatikko
     tekstin rinnalla: mikään ei liiku eikä mikään voi mennä toisen
     päälle. */
  .aha-opas .aha-opas-kylki {
    display: block;
    grid-column: 2;
    grid-row: 1;
  }
  .aha-opas .aha-opas-paa { grid-column: 1; grid-row: 1; max-width: none; }
  .aha-opas .aha-jatko { margin-top: 34px; }
}

/* Sisällysluettelo. details-elementti eikä nav+lista, jotta se voidaan
   sulkea puhelimessa ilman JavaScriptiä. Auki oletuksena: suljettu
   sisällys ei kerro, mitä sivulla on. */
.aha-opas .aha-opas-sisallys {
  margin: 0 0 32px;
  padding: 16px 0 0;
  border-top: 2px solid var(--ink, #12181d);
}
.aha-opas .aha-opas-sisallys > summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--label, .75rem);
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--ink, #12181d);
  padding-bottom: 12px;
}
.aha-opas .aha-opas-sisallys > summary::-webkit-details-marker { display: none; }
.aha-opas .aha-opas-sisallys > summary::after {
  content: "–";
  float: right;
  color: var(--faint, #8a979e);
  font-weight: 400;
}
.aha-opas .aha-opas-sisallys:not([open]) > summary::after { content: "+"; }
.aha-opas .aha-opas-sisallys ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.aha-opas .aha-opas-sisallys li { line-height: 1.4; }
.aha-opas .aha-opas-sisallys a {
  font-size: var(--step--1, .875rem);
  color: var(--muted, #5b6a73);
  text-decoration: none;
}
.aha-opas .aha-opas-sisallys a:hover {
  color: var(--accent-2, #5d1d40);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── leipäteksti ───────────────────────────────────────────────────
   Yksi lukumitta. Otsikon edessä lyhyt aksenttiviiva: se erottaa luvun
   alun ilman laatikkoa ja ilman väriä otsikkotekstissä. */
.aha-opas .aha-runko { max-width: none; }
.aha-opas .aha-runko > h2 {
  position: relative;
  margin: 52px 0 14px;
  padding-top: 14px;
  font-size: var(--step-2, 1.5rem);
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--ink, #12181d);
  scroll-margin-top: 24px;
  text-wrap: balance;
}
.aha-opas .aha-runko > h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 2px;
  background: var(--accent-2, #5d1d40);
}
.aha-opas .aha-runko > *:first-child { margin-top: 0; }
.aha-opas .aha-runko > h2:first-child { margin-top: 0; }
.aha-opas .aha-runko h3 {
  margin: 30px 0 8px;
  font-size: var(--step-1, 1.25rem);
  line-height: 1.3;
  color: var(--ink, #12181d);
}
.aha-opas .aha-runko p {
  margin: 0 0 16px;
  overflow-wrap: break-word;
  max-width: var(--opas-mitta);
  color: var(--muted, #5b6a73);
  line-height: 1.72;
}
.aha-opas .aha-runko strong,
.aha-opas .aha-runko b { color: var(--ink, #12181d); font-weight: 650; }
.aha-opas .aha-runko a { color: var(--accent-2, #5d1d40); }

.aha-opas .aha-runko ul,
.aha-opas .aha-runko ol {
  margin: 0 0 18px;
  padding-left: 22px;
  max-width: var(--opas-mitta);
  color: var(--muted, #5b6a73);
  line-height: 1.72;
}
.aha-opas .aha-runko li { margin-bottom: 9px; }
.aha-opas .aha-runko li::marker { color: var(--accent-2, #5d1d40); }
/* Numeroitu lista on oppaissa aina järjestys, ei luettelo: numero saa
   painon, koska sen paikka on tieto. */
.aha-opas .aha-runko ol > li::marker { font-weight: 700; }

/* ── taulukot ──────────────────────────────────────────────────────
   Taulukko on dataa: se luetaan sarakkeittain eikä riveittäin, ja se
   saa olla leveämpi kuin leipäteksti. Oma vierityskehys, jotta
   puhelimessa vierii taulukko eikä koko sivu. */
.aha-opas .aha-opas-taulu {
  max-width: none;
  margin: 8px 0 26px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.aha-opas .aha-opas-taulu:focus-visible {
  outline: 2px solid var(--accent-2, #5d1d40);
  outline-offset: 3px;
}
.aha-opas .aha-runko table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1, .875rem);
  font-variant-numeric: tabular-nums;
}
.aha-opas .aha-runko th,
.aha-opas .aha-runko td {
  padding: 11px 14px 11px 0;
  overflow-wrap: break-word;
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
  border-bottom: 1px solid var(--hair, #dde2e5);
  color: var(--muted, #5b6a73);
}
/* OTSIKKORIVI SAA RIVITTYÄ. Katkeamaton otsikko ("Laskutavan
   edellyttämä talon koko") leventää sarakkeen niin, ettei viiden
   sarakkeen taulukko mahdu palstaan, ja viimeinen sarake jää
   vierityksen taakse. Rivittyvä otsikko on lyhyempi lukea kuin
   sarake, jota ei näe. */
.aha-opas .aha-runko thead th {
  font-size: var(--label, .75rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--faint, #8a979e);
  border-bottom: 1px solid var(--hair-strong, #c3cbcf);
}
.aha-opas .aha-runko tbody th,
.aha-opas .aha-runko td:first-child { color: var(--ink, #12181d); }
.aha-opas .aha-runko th:last-child,
.aha-opas .aha-runko td:last-child { padding-right: 0; }
.aha-opas .aha-runko tbody tr:last-child td,
.aha-opas .aha-runko tbody tr:last-child th { border-bottom: 0; }

/* ── lähteet, usein kysytyt ja jatkolinkit ─────────────────────── */
.aha-opas .aha-lahteet { margin-top: 46px; }
.aha-opas .ukk { margin-top: 12px; }
.aha-opas .aha-jatko h2 {
  font-size: var(--label, .75rem);
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.aha-opas .aha-jatko ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.aha-opas .aha-jatko a {
  font-size: var(--step--1, .875rem);
  line-height: 1.4;
  color: var(--accent-2, #5d1d40);
  text-decoration: none;
}
.aha-opas .aha-jatko a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 1080px) {
  .aha-opas .aha-jatko {
    padding-top: 16px;
    border-top: 2px solid var(--ink, #12181d);
  }
}

/* Liike vain sille, joka ei ole pyytänyt sen pois. */
@media (prefers-reduced-motion: reduce) {
  .aha-opas * { transition: none !important; }
}

/* ── oppaiden listasivu ────────────────────────────────────────────
   VARASTYYLI, EI KAAPPAUS. Merkkauksen tuottaa lisäosa
   (.opaslista/.opaskortti), mutta vain yksi kolmesta teemasta
   tyylitteli sen — kilpailutavalittajat.fi:n listasivu renderöityi
   selaimen oletuksilla (mitattu 6.9.2026). Yhden luokan tarkkuus on
   tässä tarkoituksellinen: teeman oma tyyli ladataan myöhemmin ja
   voittaa, joten sivusto, jolla ilme on jo tehty, ei muutu. */
.opaslista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}
.opaskortti {
  background: var(--surface, #ffffff);
  border: 1px solid var(--hair, #dde2e5);
  border-radius: var(--r, 4px);
  padding: 22px 24px;
}
.opaskortti h2,
.opaskortti h3 { margin: 0 0 8px; font-size: var(--step-1, 1.25rem); line-height: 1.25; }
.opaskortti h2 a,
.opaskortti h3 a { color: var(--ink, #12181d); text-decoration: none; }
.opaskortti h2 a:hover,
.opaskortti h3 a:hover { color: var(--accent-2, #5d1d40); }
.opaskortti p {
  margin: 0;
  font-size: var(--step--1, .875rem);
  line-height: 1.6;
  color: var(--muted, #5b6a73);
}
.opaskortti .meta {
  display: block;
  margin-top: 14px;
  font-size: var(--label, .75rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--faint, #8a979e);
}