/*
 * Hoitohuone Kivuton – sivuston v50-ulkoasu (lukittu 20.10.2026).
 * Lähde: design-system/components/sivusto.css (= design-system/luonnokset/v50/luonnos.css
 * ja tiedoston lopun WordPress-sovitukset). Ladataan bundle.css:n jälkeen.
 * Älä muokkaa tätä kopiota: muokkaa design systemin tiedostoa ja kopioi se tänne.
 */
/* Huom: bundle.css nollaa .kv-root h1–h4 ja p -marginaalit (0,1,1). Siksi otsikko- ja kappalesäännöt alkavat body-valitsimella. */
/* Hoitohuone Kivuton – uudelleensuunnittelun luonnos v50 ("Saman katon alla").
   Säilyvät osat (etusivun hero, hyllykaruselli, lahjakorttisivu) tulevat sivuston
   nykyisestä bundle.css:stä. Tässä ovat vain uudet ja uudelleen suunnitellut osat.
   Uudet tokenit on merkitty UUSI; ne viedään design systemiin, jos suunta hyväksytään. */

:root {
  --kivi: #f2f3f0;          /* UUSI: neutraali pinta mintunvihreiden laatikoiden tilalle. Muste 17,8:1 */
  --taulu: #13261b;         /* UUSI: nimitaulun tumma metsänvihreä. Valkoinen 15,9:1 */
  --taulu-viiva: rgba(255, 255, 255, 0.16);
  --taulu-heikko: #b4c3b9;  /* UUSI: toissijainen teksti taululla, 8,7:1 */
  --v5-gutter: clamp(16px, 4vw, 40px);
}

body { margin: 0; background: var(--pohja); color: var(--muste); font: 400 17px/28px var(--font-sans); }
.v5-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.v5-leveys { max-width: var(--max-sisalto); margin-inline: auto; padding-inline: var(--v5-gutter); }
:where(.v5-yla, .v5-hinnasto, .v5-tiimi, .v5-taulu) a:focus-visible,
:where(.v5-yla, .v5-hinnasto, .v5-tiimi, .v5-taulu) button:focus-visible,
:where(.v5-yla) summary:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: var(--radius-sm); }
.v5-taulu a:focus-visible { outline-color: var(--vihrea-500); }

/* ---------- Painikkeet: yksi täysvihreä toiminto, muut ääriviivalla ---------- */
.v5-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--kosketus-min); padding: 10px 18px; border-radius: var(--radius-md);
  font: 600 15px/20px var(--font-sans); text-decoration: none; white-space: nowrap;
  border: 2px solid transparent; transition: background-color .15s, color .15s, border-color .15s;
}
.v5-btn--varaa { background: var(--vihrea-500); color: var(--muste); }
.v5-btn--varaa:hover { background: var(--vihrea-800); color: var(--valkoinen); }
/* Ammattilaisen Varaa aika on sama painike kuin ylätunnisteessa: yksi ajanvarauspainike koko sivustolla. */
.v5-btn--reuna { background: var(--vihrea-500); color: var(--muste); }
.v5-btn--reuna:hover { background: var(--vihrea-800); color: var(--valkoinen); }
.v5-btn--pieni { min-height: 40px; padding: 8px 14px; font-size: 14px; }
@media (pointer: coarse) { .v5-btn--pieni { min-height: var(--kosketus-min); } }

/* ---------- Ylätunniste: Varaa aika aina näkyvissä ---------- */
.v5-yla { position: sticky; top: 0; z-index: 20; background: var(--pohja); border-bottom: 1px solid var(--viiva); }
.v5-yla__sisus { display: flex; align-items: center; gap: var(--space-8); min-height: var(--header-korkeus); }
.v5-yla__logo { display: inline-flex; margin-right: auto; }
.v5-yla__logo img { height: 32px; width: auto; display: block; }
.v5-nav ul { display: flex; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.v5-nav a { display: inline-block; padding: 19px 0 18px; color: var(--muste); font: 600 15px/24px var(--font-sans); text-decoration: none; border-bottom: 3px solid transparent; }
.v5-nav a:hover { border-bottom-color: var(--reuna); }
.v5-nav a[aria-current="page"] { border-bottom-color: var(--vihrea-700); }
.v5-mobiilinav { display: none; }
@media (max-width: 1023px) {
  .v5-nav, .v5-yla__varaa { display: none; }
  .v5-mobiilinav { display: block; position: relative; }
  .v5-mobiilinav summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--kosketus-min); padding: 0 var(--space-3); font: 600 15px/20px var(--font-sans); border: 2px solid var(--muste); border-radius: var(--radius-md); }
  .v5-mobiilinav summary::-webkit-details-marker { display: none; }
  .v5-mobiilinav ul { position: absolute; right: 0; top: calc(100% + 10px); min-width: 240px; list-style: none; margin: 0; padding: var(--space-2); background: var(--pohja); border: 1px solid var(--viiva); border-radius: var(--radius-md); box-shadow: var(--shadow-kortti); }
  .v5-mobiilinav a { display: block; padding: 12px var(--space-3); color: var(--muste); text-decoration: none; font-weight: 600; }
}

/* ---------- Etusivun osien rytmi (säilyvät osat sijoitetaan tähän) ---------- */
.v5-osa { padding-block: 0; } /* hyllyillä on bundle.css:ssä oma pystyväli */
.v5-osa.v5-osa--hero { padding-block: 0 var(--space-4); }
/* Hyllyt saavat valua oikeaan reunaan, mutta sivu ei saa vieriä vaakaan. */
main { overflow-x: clip; }

/* ---------- Ammattilaiset: isot nimet, hiljaiset toiminnot ---------- */
body .v5-tiimi__johdanto { max-width: var(--max-sisalto); margin: calc(-1 * var(--space-2)) auto var(--space-8); padding-inline: var(--kv-gutter); color: var(--harmaa-600); font-size: 19px; line-height: 30px; }
.v5-tiimi__johdanto > span { display: block; max-width: 56ch; }
.v5-tiimi .kv-hylly__rata { --kortti-leveys: 280px; }
@media (max-width: 760px) { .v5-tiimi .kv-hylly__rata { --kortti-leveys-mobiili: min(72%, 280px); } }
.v5-hlo { display: flex; flex-direction: column; width: 100%; }
.v5-hlo__kuva { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; background: var(--kivi); }
.v5-hlo__kuva img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
body .v5-hlo__nimi { margin: var(--space-4) 0 var(--space-1); font: 700 26px/30px var(--font-sans); letter-spacing: -0.01em; }
.v5-hlo__nimi a { color: inherit; text-decoration: none; }
.v5-hlo__nimi a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
body .v5-hlo__titteli { margin: 0; color: var(--harmaa-600); font-size: 15px; line-height: 22px; }
.v5-hlo__ala { margin-top: auto; padding-top: var(--space-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.v5-hlo__soita { color: var(--vihrea-700); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
body .v5-hlo__siru { align-self: flex-start; margin: 0 0 var(--space-2); padding: 2px 10px; border: 1px solid var(--reuna); border-radius: var(--radius-pill); font-size: 13px; line-height: 20px; }

/* ---------- Nimitaulu: alatunniste kuin porraskäytävän asukastaulu ---------- */
.v5-taulu { background: var(--taulu); color: var(--valkoinen); padding-block: var(--space-16) var(--space-8); }
.v5-taulu a { color: var(--valkoinen); }
.v5-taulu__ruudukko { display: grid; gap: var(--space-12); grid-template-columns: 1fr; }
@media (min-width: 1024px) { .v5-taulu__ruudukko { grid-template-columns: 5fr 7fr; gap: var(--space-16); } }
.v5-taulu__logo { display: inline-block; margin-bottom: var(--space-8); }
.v5-taulu__logo img { display: block; width: 160px; height: auto; }
body .v5-taulu__osoite { margin: 0; font: 600 21px/28px var(--font-sans); }
body .v5-taulu__kaupunki { margin: 0 0 var(--space-6); color: var(--taulu-heikko); font-size: 17px; line-height: 26px; }
.v5-taulu__toiminnot { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); align-items: center; }
.v5-taulu__toiminnot .v5-btn--varaa:hover { background: var(--valkoinen); color: var(--muste); }
/* Hoitolan somelinkit (Hoitolan tiedot → Muut): pyöreät kuvakepainikkeet, kosketusalue 44 px. */
.v5-taulu__some { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; margin: var(--space-6) 0 0; padding: 0; }
.v5-taulu__some a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--taulu-viiva); border-radius: var(--radius-pill); }
.v5-taulu__some a:hover { background: var(--valkoinen); color: var(--muste); }
.v5-taulu__some svg { display: block; width: 22px; height: 22px; }
body .v5-taulu__otsikko { margin: 0 0 var(--space-3); color: var(--taulu-heikko); font: 600 15px/20px var(--font-sans); }
.v5-nimet { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--valkoinen); }
.v5-nimet li { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-6); padding: var(--space-4) 0; border-bottom: 1px solid var(--taulu-viiva); }
.v5-nimet__nimi { font: 600 21px/28px var(--font-sans); }
.v5-nimet__nimi a { text-decoration: none; }
.v5-nimet__nimi a:hover { text-decoration: underline; text-underline-offset: 4px; }
.v5-nimet__ammatti { grid-column: 1; color: var(--taulu-heikko); font-size: 15px; line-height: 22px; }
.v5-nimet__puh { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 600 17px/24px var(--font-sans); font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; }
.v5-nimet__puh:hover { text-decoration: underline; }
@media (max-width: 520px) {
  .v5-nimet li { grid-template-columns: 1fr; }
  .v5-nimet__puh { grid-column: 1; grid-row: auto; margin-top: var(--space-1); }
}
.v5-taulu__ala { margin-top: var(--space-16); padding-top: var(--space-6); border-top: 1px solid var(--taulu-viiva); display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); justify-content: space-between; font-size: 15px; }
.v5-taulu__ala ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); list-style: none; margin: 0; padding: 0; }
body .v5-taulu__ala p { margin: 0; color: var(--taulu-heikko); }
.v5-murupolku ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0 0 var(--space-6); padding: 0; font-size: 14px; line-height: 20px; color: var(--harmaa-600); }
.v5-murupolku li + li::before { content: "/"; margin-right: var(--space-2); color: var(--reuna); }
.v5-murupolku a { color: var(--vihrea-700); }

/* ---------- Hyppylinkit palveluryhmiin ---------- */
.v5-hypyt { position: sticky; top: var(--header-korkeus); z-index: 10; background: var(--pohja); border-bottom: 1px solid var(--viiva); margin-top: var(--space-12); }
.v5-hypyt ul { display: flex; gap: var(--space-6); list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.v5-hypyt a { display: inline-block; padding: 14px 0 11px; border-bottom: 3px solid transparent; color: var(--muste); font: 600 15px/20px var(--font-sans); text-decoration: none; white-space: nowrap; }
.v5-hypyt a:hover { border-bottom-color: var(--reuna); }

/* ---------- Hinnasto: painetun hinnaston tuntu, ei laatikoita ---------- */
.v5-hinnasto { scroll-margin-top: calc(var(--header-korkeus) + 60px); }
:is(.v5-ryhma, .v5-osio) { display: grid; gap: var(--space-6); padding-block: var(--space-12); border-bottom: 1px solid var(--viiva); scroll-margin-top: calc(var(--header-korkeus) + 52px); }
:is(.v5-ryhma, .v5-osio):last-child { border-bottom: 0; }
@media (min-width: 1024px) {
  :is(.v5-ryhma, .v5-osio) { grid-template-columns: 4fr 8fr; gap: var(--space-12); padding-block: var(--space-16); }
  :is(.v5-ryhma, .v5-osio) > .v5-ryhma__paa { position: sticky; top: calc(var(--header-korkeus) + 72px); align-self: start; }
}
body :is(.v5-ryhma, .v5-osio) h2 { margin: 0; font: 700 clamp(28px, 3vw, 36px)/1.15 var(--font-sans); letter-spacing: -0.015em; hyphens: manual; } /* ei automaattista tavutusta: Valmennuspaketit ei saa katketa */
.v5-tekija + .v5-tekija { margin-top: var(--space-12); }
.v5-tekija__paa { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.v5-tekija__kuva { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: center 20%; flex: none; background: var(--kivi); }
body .v5-tekija__nimi { margin: 0; font: 700 21px/26px var(--font-sans); }
.v5-tekija__nimi a { color: inherit; text-decoration: none; }
.v5-tekija__nimi a:hover { text-decoration: underline; text-underline-offset: 4px; }
body .v5-tekija__titteli { margin: 2px 0 0; color: var(--harmaa-600); font-size: 14px; line-height: 20px; }
.v5-tekija__varaa { margin-left: auto; }
@media (max-width: 520px) { .v5-tekija__paa { flex-wrap: wrap; } .v5-tekija__varaa { margin-left: 72px; } }

.v5-hinnat { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.v5-hinnat thead th { padding: 0 0 var(--space-2); color: var(--harmaa-600); font: 600 13px/18px var(--font-sans); text-align: right; }
.v5-hinnat thead th:first-child { text-align: left; }
.v5-hinnat tbody tr { border-top: 1px solid var(--viiva); }
.v5-hinnat tbody tr:first-child { border-top: 2px solid var(--muste); }
.v5-hinnat tbody th, .v5-hinnat td { padding: 14px 0; vertical-align: baseline; }
.v5-hinnat tbody th { text-align: left; font-weight: 400; }
.v5-hinnat__palvelu { display: flex; align-items: baseline; gap: var(--space-2); }
.v5-hinnat__palvelu::after { content: ""; flex: 1 1 16px; min-width: 16px; border-bottom: 2px dotted var(--reuna); transform: translateY(-5px); }
.v5-hinnat__lisa { display: block; color: var(--harmaa-600); font-size: 14px; line-height: 20px; }
.v5-hinnat__kesto { width: 5.5em; padding-inline: var(--space-3) !important; color: var(--harmaa-600); text-align: right; white-space: nowrap; }
.v5-hinnat__hinta { width: 6.5em; text-align: right; font-weight: 700; white-space: nowrap; }
.v5-hinnat__valiotsikko th { padding-top: var(--space-6) !important; font-weight: 700 !important; }
@media (max-width: 420px) { .v5-hinnat__kesto { width: 4.2em; padding-inline: var(--space-2) !important; } }

/* ---------- Ajankohtaista: ryhmäkortti v50 ----------
   Ajankohta on kortin iso typografinen elementti (ei kalenterilehteä eikä vihreää palkkia).
   Ohjaajan kasvot vastaavat kysymykseen "kenen kanssa". Kortissa on tasan yksi toiminto. */
.v5-ajankohtaista .kv-hylly__rata { --kortti-leveys: 340px; }
@media (max-width: 760px) { .v5-ajankohtaista .kv-hylly__rata { --kortti-leveys-mobiili: min(88%, 340px); } }
.v5-ak { position: relative; display: flex; flex-direction: column; width: 100%; min-height: 360px; padding: var(--space-6); background: var(--kivi); border-radius: var(--radius-lg); }
/* Sama hover kuin Hoidot-korteilla: nosto 3 px ja otsikon alleviivaus, ei värimuutosta. */
.v5-ak { transition: transform .25s ease; }
.v5-ak:hover { transform: translateY(-3px); }
.v5-ak:hover .v5-ak__linkki { text-decoration: underline; text-underline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .v5-ak, .v5-ak:hover { transition: none; transform: none; } }
body .v5-ak__milloin { margin: 0 0 var(--space-4); }
.v5-ak__milloin time { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.v5-ak__pieni { color: var(--harmaa-600); font: 400 17px/24px var(--font-sans); }
.v5-ak__iso { font: 600 17px/24px var(--font-sans); font-variant-numeric: tabular-nums; color: var(--muste); } /* pienempi kuin kortin h3 (19 px), ettei kilpaile otsikkotasojen kanssa */
body .v5-ak__nimi { margin: 0; padding-top: var(--space-4); border-top: 2px solid var(--muste); font: 700 19px/25px var(--font-sans); letter-spacing: -0.01em; }
.v5-ak__linkki { color: inherit; text-decoration: none; }
.v5-ak__linkki::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.v5-ak__linkki:hover { text-decoration: underline; text-underline-offset: 4px; }
.v5-ak__linkki:focus-visible { outline: none; }
.v5-ak:has(.v5-ak__linkki:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 3px; }
body .v5-ak__ohjaaja { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0; font: 600 15px/20px var(--font-sans); }
.v5-ak__ohjaaja img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; object-position: center 20%; }
.v5-ak__faktat { margin: var(--space-4) 0 0; display: grid; gap: var(--space-2); font-size: 15px; line-height: 22px; }
.v5-ak__faktat div { display: grid; grid-template-columns: 4.2em 1fr; gap: var(--space-2); }
.v5-ak__faktat dt { color: var(--harmaa-600); }
.v5-ak__faktat dd { margin: 0; }
.v5-ak__ala { margin-top: auto; padding-top: var(--space-6); }
.v5-ak__toiminto { position: relative; z-index: 1; }
body .v5-ajankohtaista__jatko { max-width: var(--max-sisalto); margin: var(--space-4) auto 0; padding-inline: var(--kv-gutter); font-weight: 600; }
.v5-ajankohtaista__jatko a { color: var(--vihrea-700); }

/* ---------- Heron pikatoimintojen hover (säilyvä hero, vain hover-tila muuttuu) ----------
   Ei mustaa reunaa eikä koko tekstin alleviivausta. Vaalea laatta tummuu hieman,
   ikonipallo täyttyy ja nuoli siirtyy; Varaa aika tummuu kuten muut ajanvarauspainikkeet. */
.kv-pika__linkki { transition: background-color .15s ease, color .15s ease; }
.kv-pika__ikoni, .kv-pika__nuoli { transition: background-color .15s ease, color .15s ease, transform .15s ease; }
body .kv-pika__linkki:hover { background: color-mix(in srgb, var(--vihrea-050) 86%, var(--vihrea-500)); border-color: transparent; text-decoration: none; }
body .kv-pika__linkki:hover .kv-pika__ikoni { background: var(--vihrea-700); color: var(--valkoinen); }
body .kv-pika__linkki:hover .kv-pika__nuoli { transform: translateX(3px); }
body .kv-pika__linkki--ensisijainen:hover { background: var(--vihrea-800); color: var(--valkoinen) !important; border-color: transparent; text-decoration: none !important; }
body .kv-pika__linkki--ensisijainen:hover .kv-pika__alateksti { color: var(--valkoinen); }
body .kv-pika__linkki--ensisijainen:hover .kv-pika__ikoni { background: var(--valkoinen); color: var(--vihrea-800); }
@media (prefers-reduced-motion: reduce) { .kv-pika__linkki, .kv-pika__ikoni, .kv-pika__nuoli { transition: none; } body .kv-pika__linkki:hover .kv-pika__nuoli { transform: none; } }
body .v5-osio__johdanto { margin: 0 0 var(--space-6); max-width: 60ch; font-size: 19px; line-height: 30px; }
.v5-osio__sisus > :last-child { margin-bottom: 0; }
.v5-ulkoinen { color: var(--vihrea-700); font-weight: 600; text-underline-offset: 3px; }
.v5-ulkoinen::after { content: " ↗"; }

/* ---------- Ryhmät-sivu: sama rakenne kuin hinnasto ---------- */
.v5-rk__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); margin-bottom: var(--space-4); }
body .v5-rk__meta .v5-ak__milloin, body .v5-rk__meta .v5-ak__ohjaaja { margin: 0; }
body .v5-rk__kuvaus { margin: var(--space-2) 0 var(--space-3); max-width: 60ch; font-size: 19px; line-height: 30px; }
.v5-rk__faktat { margin: 0; padding-top: var(--space-4); border-top: 2px solid var(--muste); font-size: 17px; line-height: 26px; }
.v5-rk__faktat div { grid-template-columns: 8em 1fr; padding-bottom: var(--space-2); border-bottom: 1px solid var(--viiva); }
.v5-rk__ilmo { margin-top: var(--space-8); }
body .v5-rk__ilmo h3 { margin: 0 0 var(--space-3); font: 700 19px/26px var(--font-sans); }
body .v5-rk__ilmo p { margin: 0; }
.v5-rk__ilmo a:not(.v5-btn) { color: var(--vihrea-700); font-weight: 600; }
.v5-rk__lisa { margin-top: var(--space-8); border-top: 1px solid var(--viiva); border-bottom: 1px solid var(--viiva); }
.v5-rk__lisa summary { display: flex; align-items: center; justify-content: space-between; min-height: var(--kosketus-min); padding: var(--space-3) 0; cursor: pointer; font-weight: 700; list-style: none; }
.v5-rk__lisa summary::-webkit-details-marker { display: none; }
.v5-rk__lisa summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .15s ease; }
.v5-rk__lisa[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.v5-rk__lisa summary:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.v5-rk__lisa > div { padding-bottom: var(--space-6); }
body .v5-rk__lisa h3 { margin: 0 0 var(--space-2); font: 600 17px/26px var(--font-sans); }
body .v5-rk__lisa p { margin: var(--space-4) 0 0; max-width: 60ch; }
.v5-rk__lisa ul { margin: 0; padding-left: 1.2em; }
body .v5-rk__huom { color: var(--harmaa-600); }
@media (prefers-reduced-motion: reduce) { .v5-rk__lisa summary::after { transition: none; } }
body .v5-tyhja { padding-block: var(--space-12); color: var(--harmaa-600); }

/* ---------- Valmennukset: paketit typografisina palstoina ---------- */
.v5-paketit { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.v5-paketti { padding-top: var(--space-4); border-top: 2px solid var(--muste); }
body .v5-paketti h3 { margin: 0 0 var(--space-2); font: 700 21px/27px var(--font-sans); }
body .v5-paketti p { margin: 0; color: var(--harmaa-600); }
body .v5-paketti .v5-paketti__otsake { margin: var(--space-4) 0 var(--space-1); color: var(--muste); font-weight: 600; font-size: 15px; }
.v5-paketti ul { margin: 0; padding: 0; list-style: none; }
.v5-paketti ul li { padding: 6px 0; border-bottom: 1px solid var(--viiva); }

/* ---------- Yhteystiedot ---------- */
body .v5-yt__osoite { margin: 0 0 var(--space-3); font: 600 28px/36px var(--font-sans); letter-spacing: -0.01em; }
.v5-osio__sisus a:not(.v5-btn) { color: var(--vihrea-700); }
.v5-yt { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--muste); }
.v5-yt li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3) var(--space-6); padding: var(--space-4) 0; border-bottom: 1px solid var(--viiva); }
.v5-yt__toimet { justify-content: flex-end; }
@media (max-width: 600px) { .v5-yt li { grid-template-columns: 1fr; } .v5-yt__toimet { justify-content: flex-start; } }
body .v5-yt__nimi { margin: 0; font: 700 19px/26px var(--font-sans); }
.v5-yt__nimi a { color: var(--muste) !important; text-decoration: none; }
.v5-yt__nimi a:hover { text-decoration: underline; text-underline-offset: 4px; }
body .v5-yt__ammatti { margin: 2px 0 0; color: var(--harmaa-600); font-size: 15px; line-height: 22px; }
.v5-yt__toimet { display: flex; align-items: center; gap: var(--space-4); }
.v5-yt__puh { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Ryhmät-sivu: yksi palsta (Larsin palaute 18.10.). Nimi, ajankohta, kuvaus, faktat ja ilmoittautuminen ylhäältä alas. */
.v5-osio.v5-rk { grid-template-columns: minmax(0, 760px); gap: var(--space-3); }
.v5-osio.v5-rk > .v5-ryhma__paa { position: static; }

/* Ryhmät-sivu: vetäjä kuten hinnaston ammattilainen, Ilmoittaudu samassa kohdassa kuin Varaa aika. */
body .v5-rk__milloin { margin: 0; }
.v5-rk__tekija { margin-top: var(--space-6); }
.v5-rk__tekija .v5-rk__faktat { border-top: 2px solid var(--muste); }
body .v5-rk__ohje { margin: var(--space-4) 0 0; font-weight: 600; }
.v5-osio__sisus .v5-tekija__nimi a { color: var(--muste); } /* sama kuin hinnastossa */

/* Ryhmät-sivu, järjestys (Lars 18.10.): nimi → vetäjä ja Ilmoittaudu → viiva → intro → faktat. Ei erillistä kokoontumisriviä. */
body .v5-rk h2 { margin-bottom: var(--space-4); }
.v5-rk__runko { padding-top: var(--space-4); border-top: 2px solid var(--muste); }
body .v5-rk .v5-rk__kuvaus { margin: 0 0 var(--space-4); }
body .v5-rk .v5-rk__faktat { border-top: 0; padding-top: 0; }
.v5-hinnastolinkki { font-weight: 600; text-underline-offset: 3px; }

/* Valmennuspaketit allekkain (Lars 18.10.): nimi ja kuvaus vasemmalla, Sisältää oikealla. */
.v5-paketit { grid-template-columns: 1fr; gap: 0; border-top: 2px solid var(--muste); }
.v5-paketti { display: grid; gap: var(--space-4) var(--space-8); padding: var(--space-6) 0; border-top: 0; border-bottom: 1px solid var(--viiva); }
@media (min-width: 760px) { .v5-paketti { grid-template-columns: 1fr 1fr; } }
body .v5-paketti .v5-paketti__otsake { margin-top: 0; }

/* Etusivun ammattilaiskortti: ajanvaraus tekstilinkkinä (Lars 18.10.), ei painiketta. */
.v5-hlo__varaa { display: inline-flex; align-items: center; min-height: var(--kosketus-min); color: var(--vihrea-700); font-weight: 600; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.v5-hlo__varaa:hover { color: var(--vihrea-800); text-decoration-thickness: 2px; }
.v5-hlo__soita { display: inline-flex; align-items: center; min-height: var(--kosketus-min); }

/* Ammattilaiskortti: puhelin ja Varaa aika allekkain tittelin alla (Lars 18.10.). */
.v5-hlo__ala { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 0; padding-top: var(--space-3); }
.v5-hlo__soita, .v5-hlo__varaa { min-height: 36px; }
@media (pointer: coarse) { .v5-hlo__soita, .v5-hlo__varaa { min-height: var(--kosketus-min); } }

/* Yhteystiedot: kuvat talosta ja tiloista. Luonnoksessa katkoviivalla merkityt Täydennetään-paikat;
   sivustolla piilossa, kunnes asiakkaan oikeat kuvat on saatu (design systemin käytäntö). */
.v5-tilat { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: var(--space-8); }
.v5-tilat figure { margin: 0; }
.v5-taydennetaan__ala { display: grid; place-items: center; aspect-ratio: 4 / 3; border: 2px dashed var(--reuna); border-radius: var(--radius-lg); color: var(--harmaa-600); font-weight: 600; background: var(--kivi); }
.v5-taydennetaan__ala::after { content: "Täydennetään"; display: block; margin-top: 4px; font-weight: 400; font-size: 14px; }
.v5-taydennetaan__ala { grid-auto-flow: row; align-content: center; text-align: center; }
.v5-tilat figcaption { margin-top: var(--space-2); color: var(--harmaa-600); font-size: 15px; line-height: 22px; }

/* Ajankohtaista v3 (Lars 18.10.: kortit pliisuja): kivenharmaa nauha, valkoiset kortit, vihreä ajankohtasana, isommat kasvot. */
.v5-osa--ak { background: var(--kivi); padding-block: var(--space-4) var(--space-12); }
.v5-osa--ak + .v5-osa { padding-top: var(--space-8); }
.v5-ak { background: var(--pohja); box-shadow: 0 1px 2px rgba(10, 10, 10, .06); }
.v5-ak:hover { box-shadow: 0 8px 24px rgba(10, 10, 10, .08); }
.v5-ak__pieni { color: var(--vihrea-700); font-weight: 700; }
.v5-ak__ohjaaja img { width: 40px; height: 40px; }
body .v5-ak__ohjaaja { gap: var(--space-3); }
.v5-ak .v5-ak__faktat { color: var(--muste); }

/* ---------- Hoidot-kortit v50: kuva, nimi, ammattilaisten kasvot. Ei laatikkoa eikä yleistekstiä. ---------- */
.v5-hoidot .kv-hylly__rata { --kortti-leveys: 300px; }
@media (max-width: 760px) { .v5-hoidot .kv-hylly__rata { --kortti-leveys-mobiili: min(80%, 300px); } }
.v5-hoito { position: relative; display: flex; flex-direction: column; width: 100%; transition: transform .25s ease; }
.v5-hoito:hover { transform: translateY(-3px); }
.v5-hoito__kuva { margin: 0; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); overflow: hidden; background: var(--kivi); }
.v5-hoito__kuva img { width: 100%; height: 100%; object-fit: cover; display: block; }
body .v5-hoito__nimi { margin: var(--space-4) 0 var(--space-2); font: 700 21px/27px var(--font-sans); }
.v5-hoito__linkki { color: var(--muste); text-decoration: none; }
.v5-hoito__linkki::after { content: ""; position: absolute; inset: 0; }
.v5-hoito:hover .v5-hoito__linkki { text-decoration: underline; text-underline-offset: 4px; }
.v5-hoito__linkki:focus-visible { outline: none; }
.v5-hoito:has(.v5-hoito__linkki:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 4px; border-radius: var(--radius-lg); }
.v5-hoito__tekijat { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: 15px; line-height: 20px; }
.v5-hoito__tekijat li { display: flex; align-items: center; gap: var(--space-2); }
.v5-hoito__tekijat img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; object-position: center 20%; }
@media (prefers-reduced-motion: reduce) { .v5-hoito, .v5-hoito:hover { transition: none; transform: none; } }

/* Ylätunniste: kevyt varjo erottaa palkin sisällöstä (Lars 19.10.). Sama varjo kuin nykyisellä sivustolla (shadow-kortti). */
.v5-yla { box-shadow: var(--shadow-kortti); border-bottom-color: transparent; }

/* Sivuhero: hoitolan vihreä ylhäältä liukuu kivenharmaaseen (Lars 19.10.). Kuvan alaosa jää valkoiselle.
   Ylin sävy = vihrea-050 + 15 % vihrea-500 (#cdecda): harmaa-600 4,5:1, linkki 4,9:1, muste 15,7:1. */
:root { --vihrea-huntu: color-mix(in srgb, var(--vihrea-050) 85%, var(--vihrea-500)); }

.v5-osa--ak { background: var(--pohja); padding-block: var(--space-4) var(--space-8); }
.v5-ak { border: 1px solid var(--viiva); box-shadow: 0 2px 10px rgba(10, 10, 10, .05); }
.v5-ak:hover { box-shadow: 0 8px 24px rgba(10, 10, 10, .08); }
/* Ajankohtaista omana osionaan heron jälkeen: sama väli kuin alasivujen osioilla. */
.v5-osa--ak { padding-top: var(--space-12); }
@media (min-width: 1024px) { .v5-osa--ak { padding-top: var(--space-16); } }

/* Ajankohtaista-kortti: hento erotinviiva mustan 2 px viivan tilalle (Lars 19.10.). */
body .v5-ak__nimi { border-top: 1px solid var(--viiva); padding-top: var(--space-3); }

/* Uutiskortti: sama runko kuin ryhmäkortissa; ote leipätekstinä. */
body .v5-ak__ote { margin: var(--space-3) 0 0; font-size: 15px; line-height: 22px; color: var(--muste); }

/* Korttityyppi pillinä (Lars 19.10.): Ryhmä / Uutinen pienellä, vaaleanvihreällä pohjalla. */
.v5-ak .v5-ak__milloin, .v5-ak .v5-ak__milloin time { display: flex; align-items: center; gap: var(--space-2); }
.v5-ak .v5-ak__pieni { display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--vihrea-050); color: var(--vihrea-800); font: 600 13px/20px var(--font-sans); }
.v5-ak__pvm { color: var(--harmaa-600); font-size: 13px; line-height: 20px; font-variant-numeric: tabular-nums; }
/* Ajankohtaista-kortti ilman erotinviivaa: pilli erottaa tyypin, otsikko jatkuu suoraan (Lars 19.10.). */
body .v5-ak__nimi { border-top: 0; padding-top: 0; }
body .v5-ak .v5-ak__milloin { margin-bottom: var(--space-3); }

/* Ajankohtaista-kortit: vaaleanvihreä liukuväri yläreunasta, alaosa vaalea (Lars 19.10.). */
.v5-ak { background: linear-gradient(to bottom, var(--vihrea-050) 0%, var(--pohja) 70%); }
.v5-ak .v5-ak__pieni { background: var(--pohja); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vihrea-500) 35%, transparent); }
/* Ajankohtaista-kortti: ei otsikon alleviivausta hoverissa (Lars 19.10.). Nosto ja varjo kertovat, että kortti on linkki. */
.v5-ak:hover .v5-ak__linkki, .v5-ak__linkki:hover { text-decoration: none; }

/* ---------- Ajankohtaista-vaihtoehdot (vertailusivu) ---------- */
.v5-ak__kuva { display: none; }
.v5-vertailu { padding-block: var(--space-12); border-bottom: 1px solid var(--viiva); }
body .v5-vertailu__h1 { margin: var(--space-12) 0 0; font: 700 40px/1.1 var(--font-sans); }
body .v5-vertailu__otsikko { margin: 0; font: 700 24px/30px var(--font-sans); }
body .v5-vertailu__kuvaus { margin: var(--space-1) 0 0; color: var(--harmaa-600); }
.v5-vertailu .kv-hylly__otsikko { font-size: 22px; }

/* 2. Tumma */
.v5-ak-tumma .v5-ak { background: var(--taulu); border-color: var(--taulu); color: var(--valkoinen); }
.v5-ak-tumma .v5-ak__linkki, .v5-ak-tumma .v5-ak .v5-ak__faktat, .v5-ak-tumma body .v5-ak__ohjaaja { color: var(--valkoinen); }
.v5-ak-tumma .v5-ak__ohjaaja, .v5-ak-tumma .v5-ak__ote { color: var(--valkoinen) !important; }
.v5-ak-tumma .v5-ak__faktat dt, .v5-ak-tumma .v5-ak__pvm { color: var(--taulu-heikko); }
.v5-ak-tumma .v5-ak .v5-ak__pieni { background: var(--vihrea-500); color: var(--muste); box-shadow: none; }
.v5-ak-tumma .v5-ak .v5-ak__faktat { color: var(--valkoinen); }
.v5-ak-tumma .v5-ak:has(.v5-ak__linkki:focus-visible) { outline-color: var(--vihrea-500); }

/* 3. Kuvallinen */
.v5-ak-kuva .v5-ak { padding-top: 0; overflow: hidden; background: var(--pohja); }
.v5-ak-kuva .v5-ak__kuva { display: block; margin: 0 calc(-1 * var(--space-6)) var(--space-4); aspect-ratio: 16 / 9; overflow: hidden; background: var(--kivi); }
.v5-ak-kuva .v5-ak__kuva img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; }
.v5-ak-kuva .v5-ak--uutinen { padding-top: var(--space-6); }

/* Valittu (Lars 19.10.): Ajankohtaista-kortit tummina (nimitaulun metsänvihreä). */
.v5-ak-tumma .v5-ak { box-shadow: 0 2px 10px rgba(10, 10, 10, .12); }
.v5-ak-tumma .v5-ak:hover { box-shadow: 0 10px 28px rgba(10, 10, 10, .18); }
/* Tummat kortit: faktojen nimikkeet valkoisella (Lars 19.10.); lihavointi erottaa ne arvoista. */
.v5-ak-tumma .v5-ak__faktat dt { color: var(--valkoinen); font-weight: 600; }
/* Ajankohtaista-kortit: nimike arvon yläpuolelle (Lars 19.10.), arvo saa koko kortin leveyden. */
.v5-ak .v5-ak__faktat { gap: var(--space-3); }
.v5-ak .v5-ak__faktat div { grid-template-columns: 1fr; gap: 0; }
.v5-ak .v5-ak__faktat dt { font-size: 13px; line-height: 18px; font-weight: 600; }
.v5-ak .v5-ak__faktat dd { hyphens: manual; }
/* Nimike pienemmällä ja lihavana (Lars 19.10.). */
.v5-ak .v5-ak__faktat dt { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .01em; }
/* Nimikkeet haaleampina, jotta ne erottuvat arvoista (Lars 19.10.). taulu-heikko taululla 8,7:1. */
.v5-ak-tumma .v5-ak__faktat dt { color: var(--taulu-heikko); }

/* Kasvokuvat pyöristettyinä neliöinä ympyrän sijaan (19.10.): sama muoto kuin isoissa muotokuvissa ja korteissa. */
.v5-tekija__kuva { border-radius: var(--radius-md); }
.v5-ak__ohjaaja img { border-radius: 6px; }
.v5-hoito__tekijat img { border-radius: 6px; }

/* Alatunniste (Lars 19.10.): ei paksua valkoista viivaa listan yllä; alin osa omalla tummemmalla kaistalla. */
:root { --taulu-tumma: #0c1912; } /* UUSI: valkoinen 17,5:1, taulu-heikko 9,6:1 */
.v5-nimet { border-top: 0; }
.v5-taulu { padding-bottom: 0; }
.v5-taulu__pohja { margin-top: var(--space-16); background: var(--taulu-tumma); }
.v5-taulu__pohja .v5-taulu__ala { margin-top: 0; padding-block: var(--space-6); border-top: 0; }
/* Korjaus: alatunnisteen linkkisääntö (.v5-taulu a, valkoinen) ohitti painikkeen tekstivärin → 2,6:1.
   Painike: musta teksti vihreällä 7,7:1; hover valkoinen pohja, musta teksti. */
.v5-taulu .v5-btn--varaa { color: var(--muste); }
.v5-taulu .v5-btn--varaa:hover { background: var(--valkoinen); color: var(--muste); }
/* Alatunnisteen alin kaista: linkit ilman alleviivausta, alleviivaus hoverissa ja fokuksessa (Lars 19.10.).
   Sallittu WCAG 1.4.1:n mukaan, koska linkit ovat erillisessä navigaatiolistassa eivätkä leipätekstin seassa. */
.v5-taulu__pohja a { text-decoration: none; }
.v5-taulu__pohja a:hover, .v5-taulu__pohja a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Hero-vaihtoehdot (vertailusivu) ---------- */
body .v5-vertailu__otsikko--hero { margin: var(--space-12) 0 var(--space-4); }
.v5-vertailu__vali { height: var(--space-12); border-bottom: 1px solid var(--viiva); }

/* Ajankohtaista-kortit valkoisina vihreän heron jälkeen (Lars 19.10.): rohkeus heroon, kortit rauhallisina. */
.v5-ak { background: var(--pohja); }
.v5-ak .v5-ak__pieni { background: var(--vihrea-050); box-shadow: none; }
.v5-ak .v5-ak__faktat dt { color: var(--harmaa-600); }

/* Ammattilaiset samanlaisina kortteina kuin Ajankohtaista (19.10.): valkoinen pohja, reuna, varjo, kuva yläosassa. */
.v5-hlo { position: relative; background: var(--pohja); border: 1px solid var(--viiva); border-radius: var(--radius-lg); box-shadow: 0 2px 10px rgba(10, 10, 10, .05); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; padding-bottom: var(--space-4); }
.v5-hlo:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(10, 10, 10, .08); }
.v5-hlo__kuva { border-radius: 0; }
body .v5-hlo__nimi, body .v5-hlo__titteli, .v5-hlo__ala, body .v5-hlo__siru { margin-left: var(--space-6); margin-right: var(--space-6); }
body .v5-hlo__nimi { margin-top: var(--space-4); font-size: 21px; line-height: 27px; }
body .v5-hlo__siru { margin-top: var(--space-4); }
.v5-hlo__nimi a:hover { text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .v5-hlo, .v5-hlo:hover { transition: none; transform: none; } }
body .v5-hlo__nimi { font-size: 19px; line-height: 25px; } /* sama kuin Ajankohtaista-kortin otsikko (Lars 19.10.) */

/* Ammattilaiskortin alaosa v2 (19.10.): oma alue erotinviivan alla; puhelin ikoneineen vasemmalla, Varaa aika -painike oikealla. */
.v5-hlo { padding-bottom: 0; }
.v5-hlo .v5-hlo__ala { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); margin: auto 0 0; padding: var(--space-3) var(--space-6) var(--space-4); border-top: 1px solid var(--viiva); }
.v5-hlo__titteli { margin-bottom: var(--space-4) !important; }
.v5-hlo .v5-hlo__soita { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--muste); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; }
.v5-hlo .v5-hlo__soita svg { width: 16px; height: 16px; color: var(--vihrea-700); flex: none; }
.v5-hlo .v5-hlo__soita:hover span { text-decoration: underline; text-underline-offset: 3px; }
.v5-hlo__nappi { margin-left: auto; }
.v5-hlo .v5-hlo__soita:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-radius: var(--radius-sm); }
/* Puhelin ja Varaa aika samalle riville: kortti 300 px, alaosan sisennys 16 px. */
.v5-tiimi .kv-hylly__rata { --kortti-leveys: 300px; }
.v5-hlo .v5-hlo__ala { flex-wrap: nowrap; padding-inline: var(--space-4); }
/* Varaa aika vasemmalle, puhelin oikealle (Lars 19.10.). */
.v5-hlo__nappi { margin-left: 0; }
.v5-hlo .v5-hlo__soita { margin-left: auto; }

/* ================= Etusivu B: kuvahero (Larsin viitekuva 19.10.) ================= */
.v5-kh { padding: var(--space-4) var(--space-4) 0; }
.v5-kh__kehys { position: relative; min-height: clamp(560px, 82vh, 820px); border-radius: 28px; overflow: hidden; display: flex; flex-direction: column; isolation: isolate; }
.v5-kh__kuva { position: absolute; inset: 0; margin: 0; z-index: -2; }
.v5-kh__kuva img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; display: block; }
/* Metsänvihreä värikalvo: tekstin alueella vähintään 4,5:1 valkoiselle tekstille. */
.v5-kh__kehys::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(19, 38, 27, .90) 0%, rgba(19, 38, 27, .78) 32%, rgba(19, 38, 27, .35) 58%, rgba(19, 38, 27, 0) 78%); }
/* Kelluva yläpalkki */
.v5-kh__yla { display: flex; align-items: center; gap: var(--space-6); margin: var(--space-6) var(--space-6) 0; padding: 10px 14px 10px 24px; background: var(--pohja); border-radius: 999px; box-shadow: var(--shadow-kortti); }
.v5-kh__yla .v5-yla__logo { margin-right: auto; }
.v5-kh__nav a { padding: 10px 0 7px; }
.v5-kh__sisus { margin-top: auto; padding: var(--space-16) var(--space-12) var(--space-12); max-width: 680px; color: var(--valkoinen); }
body .v5-kh h1 { margin: 0; font: 700 clamp(44px, 6vw, 80px)/1.0 var(--font-sans); letter-spacing: -0.03em; color: var(--valkoinen); hyphens: manual; }
body .v5-kh__ingressi { margin: var(--space-5, 20px) 0 0; max-width: 42ch; font-size: 19px; line-height: 30px; color: rgba(255, 255, 255, .92); hyphens: manual; text-wrap: balance; }
.v5-kh__toiminnot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-top: var(--space-8); }
.v5-kh__pilli { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: 6px 6px 6px 22px; border-radius: 999px; font: 600 16px/20px var(--font-sans); text-decoration: none; transition: background-color .15s, color .15s; }
.v5-kh__nuoli { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; }
.v5-kh__nuoli svg { width: 18px; height: 18px; }
.v5-kh__pilli--paa { background: var(--pohja); color: var(--muste); }
.v5-kh__pilli--paa .v5-kh__nuoli { background: var(--vihrea-500); color: var(--muste); }
.v5-kh__pilli--paa:hover { background: var(--vihrea-500); }
.v5-kh__pilli--paa:hover .v5-kh__nuoli { background: var(--pohja); }
.v5-kh__pilli--reuna { border: 2px solid rgba(255, 255, 255, .8); color: var(--valkoinen); }
.v5-kh__pilli--reuna .v5-kh__nuoli { background: var(--pohja); color: var(--muste); }
.v5-kh__pilli--reuna:hover { background: rgba(255, 255, 255, .12); }
.v5-kh__linkki { color: var(--valkoinen); font-weight: 600; text-underline-offset: 4px; }
.v5-kh a:focus-visible { outline: 3px solid var(--vihrea-500); outline-offset: 3px; }
.v5-kh__faktat { position: absolute; right: var(--space-12); bottom: var(--space-12); display: flex; gap: var(--space-8); list-style: none; margin: 0; padding: 0; color: var(--valkoinen); font: 600 16px/22px var(--font-sans); text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
.v5-kh__faktat li { padding-left: var(--space-4); border-left: 2px solid rgba(255, 255, 255, .8); }
@media (max-width: 1023px) {
  .v5-kh__yla { margin: var(--space-3); padding-left: var(--space-4); }
  .v5-kh__sisus { padding: var(--space-12) var(--space-6) var(--space-8); }
  .v5-kh__faktat { position: static; padding: 0 var(--space-6) var(--space-8); flex-direction: column; gap: var(--space-3); text-shadow: none; }
  .v5-kh__kehys::before { background: linear-gradient(0deg, rgba(19, 38, 27, .92) 0%, rgba(19, 38, 27, .82) 55%, rgba(19, 38, 27, .2) 85%); }
  .v5-kh__kuva img { object-position: 50% 25%; }
}
@media (prefers-reduced-motion: reduce) { .v5-kh__pilli { transition: none; } }

/* ================= Etusivu B v2 (viitekuva 2, 19.10.) ================= */
.v5-kb__yla { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-6); max-width: 1600px; margin-inline: auto; }
.v5-kb__nav ul { display: flex; gap: var(--space-1); list-style: none; margin: 0; padding: 6px; border: 1px solid var(--viiva); border-radius: 999px; width: max-content; }
.v5-kb__nav a { display: block; padding: 8px 14px; border-radius: 999px; color: var(--muste); font: 600 14px/20px var(--font-sans); text-decoration: none; white-space: nowrap; }
.v5-kb__nav a:hover { background: var(--kivi); }
.v5-kb__nav a[aria-current="page"] { background: var(--vihrea-050); color: var(--vihrea-800); }
.v5-kb__logo img { height: 40px; width: auto; display: block; }
.v5-kb__yhteys { justify-self: end; }
.v5-kh__pilli--tumma { background: var(--taulu); color: var(--valkoinen); }
.v5-kh__pilli--tumma .v5-kh__nuoli { background: var(--vihrea-500); color: var(--muste); }
.v5-kh__pilli--tumma:hover { background: var(--vihrea-800); }
.v5-kb__yla .v5-mobiilinav { display: none; }
@media (max-width: 1100px) {
  .v5-kb__yla { grid-template-columns: auto 1fr; }
  .v5-kb__nav, .v5-kb__yhteys { display: none; }
  .v5-kb__yla .v5-mobiilinav { display: block; justify-self: end; }
}
.v5-kb { padding: 0 var(--space-6); max-width: 1600px; margin-inline: auto; }
.v5-kb__kehys { position: relative; min-height: clamp(540px, 76vh, 760px); border-radius: 32px; overflow: hidden; display: flex; align-items: flex-end; isolation: isolate; }
.v5-kb__kehys .v5-kh__kuva img { object-position: 55% 28%; }
/* Värikalvo vasemmasta alakulmasta: tekstin alueella vähintään 4,5:1. */
.v5-kb__kehys::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(0deg, rgba(19, 38, 27, .92) 0%, rgba(19, 38, 27, .55) 38%, rgba(19, 38, 27, 0) 70%),
    linear-gradient(90deg, rgba(19, 38, 27, .55) 0%, rgba(19, 38, 27, 0) 60%); }
.v5-kb__sisus { padding: var(--space-12); max-width: 820px; color: var(--valkoinen); }
body .v5-kb h1 { margin: 0; font: 700 clamp(48px, 7.4vw, 108px)/0.95 var(--font-sans); letter-spacing: -0.04em; color: var(--valkoinen); hyphens: manual; }
.v5-kb .v5-kh__ingressi { margin-top: var(--space-4); }
.v5-kh__pilli--valk { background: var(--pohja); color: var(--muste); }
.v5-kh__pilli--valk .v5-kh__nuoli { background: var(--taulu); color: var(--valkoinen); }
.v5-kh__pilli--valk:hover { background: var(--vihrea-050); }
.v5-kb .v5-kh__pilli--paa { background: var(--vihrea-500); }
.v5-kb .v5-kh__pilli--paa .v5-kh__nuoli { background: var(--pohja); }
.v5-kb .v5-kh__pilli--paa:hover { background: var(--pohja); }
.v5-kb .v5-kh__pilli--paa:hover .v5-kh__nuoli { background: var(--vihrea-500); }
.v5-kb__tiimi { position: absolute; right: var(--space-8); bottom: var(--space-8); display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5, 20px); background: var(--pohja); border-radius: 20px; box-shadow: 0 10px 30px rgba(10, 10, 10, .18); color: var(--muste); text-decoration: none; }
.v5-kb__tiimi-otsikko { font: 700 18px/24px var(--font-sans); }
.v5-kb__tiimi-rivi { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--vihrea-050); border-radius: 14px; font: 600 15px/20px var(--font-sans); }
.v5-kb__kasvot { display: flex; }
.v5-kb__kasvot img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: center 20%; border: 2px solid var(--pohja); margin-left: -10px; }
.v5-kb__kasvot img:first-child { margin-left: 0; }
.v5-kb__tiimi:hover { box-shadow: 0 14px 36px rgba(10, 10, 10, .24); }
.v5-kb__tiimi:focus-visible { outline: 3px solid var(--vihrea-500); outline-offset: 3px; }
@media (max-width: 1023px) {
  .v5-kb { padding: 0 var(--space-3); }
  .v5-kb__kehys { flex-direction: column; justify-content: flex-end; align-items: stretch; border-radius: 24px; }
  .v5-kb__sisus { padding: var(--space-8) var(--space-6) var(--space-4); }
  .v5-kb__tiimi { position: static; margin: 0 var(--space-6) var(--space-6); justify-self: start; width: max-content; max-width: calc(100% - 48px); }
}
/* B: ammattilaiset kehyksen oikeaan reunaan (Lars 19.10.). Kuva 150 % leveänä vasemmasta reunasta:
   kuvan keskellä olevat ihmiset osuvat noin 75 %:n kohdalle, vasemmalle jää verhoa tekstille. */
@media (min-width: 1024px) {
  .v5-kb__kehys .v5-kh__kuva img { position: absolute; left: 0; top: 0; width: 150%; max-width: none; height: 100%; object-fit: cover; object-position: 50% 22%; }
}
/* B-yläpalkki: logo vasemmalla, linkit keskellä, Yhteystiedot oikealla (Lars 19.10.). */
.v5-kb__yla { grid-template-columns: auto 1fr auto; }
.v5-kb__nav { justify-self: center; }
@media (max-width: 1100px) { .v5-kb__yla { grid-template-columns: auto 1fr; } }
/* B: herokuva sisällön levyinen; yläpalkki samalla leveydellä, jotta logo ja kehys ovat linjassa (Lars 19.10.). */
.v5-kb, .v5-kb__yla { max-width: var(--max-sisalto); margin-inline: auto; padding-inline: var(--v5-gutter); box-sizing: content-box; }
/* B: hero ja yläpalkki samaan linjaan osioiden otsikoiden kanssa (karusellien sisennys kv-gutter). */
@media (min-width: 1024px) { .v5-kb, .v5-kb__yla { max-width: calc(var(--max-sisalto) - 2 * var(--kv-gutter)); } }
/* B: tavallinen yläpalkki → väli heroon. */
.v5-kb { padding-top: var(--space-6); }
/* B: ei tummennusta oikealla (Lars 19.10.). Värikalvo vain vasemmalla tekstin takana; ammattilaiset luonnollisessa valossa. */
@media (min-width: 1024px) {
  .v5-kb__kehys::before { background: linear-gradient(90deg, rgba(19, 38, 27, .92) 0%, rgba(19, 38, 27, .82) 30%, rgba(19, 38, 27, .45) 46%, rgba(19, 38, 27, 0) 60%); }
}
/* B: teksti pysyy värikalvon päällä (≤ 50 % kehyksestä), kun oikealla ei ole tummennusta. */
@media (min-width: 1024px) {
  .v5-kb__sisus { max-width: 50%; }
  body .v5-kb h1 { font-size: clamp(48px, 5.2vw, 76px); }
}
/* B: kolme pilliä samalle riville kapeammalla tekstialueella. */
@media (min-width: 1024px) {
  .v5-kb .v5-kh__toiminnot { flex-wrap: nowrap; gap: var(--space-3); }
  .v5-kb .v5-kh__pilli { min-height: 48px; padding: 5px 5px 5px 18px; font-size: 15px; gap: var(--space-2); white-space: nowrap; }
  .v5-kb .v5-kh__nuoli { width: 36px; height: 36px; }
}

/* ================= Alasivujen hero B-idealla (19.10.) ================= */
.v5-ksh .v5-kb__kehys { min-height: clamp(300px, 40vh, 440px); }
.v5-ksh .v5-kh__kuva img { object-position: center 45%; }
.v5-ksh__kehys::before { background: linear-gradient(90deg, rgba(19, 38, 27, .88) 0%, rgba(19, 38, 27, .72) 34%, rgba(19, 38, 27, .2) 58%, rgba(19, 38, 27, 0) 72%) !important; }
.v5-ksh__sisus { padding: var(--space-12); max-width: 60%; color: var(--valkoinen); }
body .v5-ksh h1 { margin: 0; font: 700 clamp(40px, 5vw, 72px)/1.0 var(--font-sans); letter-spacing: -0.03em; color: var(--valkoinen); hyphens: manual; }
.v5-ksh__murupolku ol { margin: 0 0 var(--space-4); color: rgba(255, 255, 255, .9); }
.v5-ksh__murupolku a { color: var(--valkoinen); }
.v5-ksh__murupolku li + li::before { color: rgba(255, 255, 255, .7); }
.v5-ksh a:focus-visible { outline: 3px solid var(--vihrea-500); outline-offset: 3px; }
.v5-ksh--ei-kuvaa .v5-kb__kehys { background: var(--taulu); min-height: 240px; }
.v5-ksh--ei-kuvaa .v5-kb__kehys::before { display: none; }
@media (max-width: 1023px) {
  .v5-ksh__sisus { padding: var(--space-8) var(--space-6); max-width: none; }
  .v5-ksh__kehys::before { background: linear-gradient(0deg, rgba(19, 38, 27, .9) 0%, rgba(19, 38, 27, .6) 45%, rgba(19, 38, 27, 0) 80%) !important; }
}
.v5-ksh + .v5-hypyt { margin-top: var(--space-8); }

/* Lahjakortit-sivu (19.10.): säilyvät ohjevaiheet ja kortit uuden sivuheron alla. Vaiheet allekkain osion oikeassa palstassa. */
.v5-lahjat .kv-vaiheet { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
body .v5-lahjat .kv-vaiheet h3 { margin: 0; font: 700 19px/27px var(--font-sans); }
body .v5-lahjat .kv-vaiheet p { margin: 0; }
.v5-lahjat .kv-lahjakortit { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }

/* Laatikot Lahjakortit-sivun ohjevaiheiden tapaan (Lars 19.10.): vaaleanvihreä pyöristetty laatikko jokaiselle
   ammattilaisen hintalohkolle ja jokaiselle ryhmälle. Mustat 2 px viivat korvataan laatikon sisällä hennoilla vihreillä. */
:root { --laatikko-viiva: rgba(31, 110, 65, .18); }
.v5-hinnasto .v5-tekija { background: var(--vihrea-050); border-radius: 20px; padding: var(--space-6); }
.v5-hinnasto .v5-tekija + .v5-tekija { margin-top: var(--space-4); }
.v5-hinnasto .v5-tekija .v5-hinnat tbody tr { border-top-color: var(--laatikko-viiva); }
.v5-hinnasto .v5-tekija .v5-hinnat tbody tr:first-child { border-top: 1px solid var(--laatikko-viiva); }
.v5-hinnasto .v5-tekija .v5-hinnat tbody tr:last-child th, .v5-hinnasto .v5-tekija .v5-hinnat tbody tr:last-child td { padding-bottom: 0; }
.v5-hinnasto .v5-tekija .v5-hinnat thead th { color: var(--muste); opacity: .75; }

.v5-rk-laatikot { display: grid; gap: var(--space-4); padding-block: var(--space-12) var(--space-16); }
@media (min-width: 1024px) { .v5-rk-laatikot { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--space-6); } }
.v5-rk-laatikot .v5-osio.v5-rk { display: block; background: var(--vihrea-050); border-radius: 20px; padding: var(--space-8); border: 0; }
.v5-rk-laatikot .v5-ryhma__paa h2 { font-size: clamp(26px, 2.4vw, 30px); }
.v5-rk-laatikot .v5-rk__runko { margin-top: var(--space-4); border-top: 1px solid var(--laatikko-viiva); }
.v5-rk-laatikot .v5-rk__faktat div { border-bottom-color: var(--laatikko-viiva); }
.v5-rk-laatikot .v5-rk__lisa { border-color: var(--laatikko-viiva); }
.v5-rk-laatikot .v5-tekija__titteli, .v5-rk-laatikot .v5-ak__faktat dt { color: #4a5a50; }
@media (max-width: 520px) { .v5-hinnasto .v5-tekija, .v5-rk-laatikot .v5-osio.v5-rk { padding: var(--space-5, 20px); } }
/* Kuvakehys täsmälleen sisällön levyiseksi (sama laatikkomalli kuin .v5-leveys), jotta laatikot ja kehys osuvat samaan linjaan. */
.v5-kb, .v5-kb__yla { box-sizing: border-box; max-width: var(--max-sisalto); }
.v5-rk-laatikot .v5-rk__faktat dd { hyphens: manual; }
@media (max-width: 600px) { .v5-rk-laatikot .v5-rk__faktat div { grid-template-columns: 1fr; gap: 2px; padding-block: var(--space-2); } }

/* Ryhmäkortti selkeämmäksi (Lars 20.10. "sekava"): vain yksi henkä viiva ohjaajan alla, tiedot ilman viivoja
   pinottuina (nimike pienellä lihavoituna harmaalla kuten Ajankohtaista-korteissa), Ilmoittaudu ja Lisätietoja
   kortin alalaidassa samassa linjassa rinnakkaisissa korteissa. */
.v5-rk-laatikot { align-items: stretch; }
.v5-rk-laatikot .v5-osio.v5-rk { display: flex; flex-direction: column; }
.v5-rk-laatikot .v5-osio__sisus { display: flex; flex-direction: column; flex: 1; }
body .v5-rk-laatikot .v5-rk h2 { margin: 0 0 var(--space-4); }
.v5-rk-laatikot .v5-tekija__paa { margin: 0; gap: var(--space-3); }
.v5-rk-laatikot .v5-tekija__kuva { width: 44px; height: 44px; }
body .v5-rk-laatikot .v5-tekija__nimi { font: 600 16px/22px var(--font-sans); }
body .v5-rk-laatikot .v5-tekija__titteli { font-size: 13px; line-height: 18px; }
.v5-rk-laatikot .v5-rk__runko { margin-top: var(--space-5, 20px); padding-top: var(--space-5, 20px); border-top: 1px solid var(--laatikko-viiva); }
body .v5-rk-laatikot .v5-rk__kuvaus { margin: 0 0 var(--space-6); font-size: 19px; line-height: 28px; }
.v5-rk-laatikot .v5-rk__faktat { display: grid; gap: var(--space-4); margin: 0; padding: 0; border: 0; font-size: 16px; line-height: 24px; }
.v5-rk-laatikot .v5-rk__faktat div { display: block; padding: 0; border: 0; }
.v5-rk-laatikot .v5-rk__faktat dt { margin: 0 0 2px; font: 700 12px/16px var(--font-sans); color: #4a5a50; }
.v5-rk-laatikot .v5-rk__faktat dd { margin: 0; max-width: 46ch; }
.v5-rk-laatikot .v5-rk__ala { margin-top: auto; padding-top: var(--space-8); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
body .v5-rk-laatikot .v5-rk__ohje { margin: 0; }
.v5-rk__ohje--viesti { display: grid; gap: 2px; }
.v5-rk__ohje-nimi { font: 700 12px/16px var(--font-sans); color: #4a5a50; }
.v5-rk__ohje--viesti a { color: var(--muste); font: 700 19px/26px var(--font-sans); text-decoration: none; font-variant-numeric: tabular-nums; }
.v5-rk__ohje--viesti a:hover { text-decoration: underline; text-underline-offset: 4px; }
.v5-rk-laatikot .v5-rk__lisa { margin: 0; border: 0; }
.v5-rk-laatikot .v5-rk__lisa summary { gap: var(--space-2); justify-content: flex-start; padding: 0; font-size: 15px; }
.v5-rk-laatikot .v5-rk__lisa[open] { flex-basis: 100%; order: 2; }
.v5-rk-laatikot .v5-rk__lisa > div { padding: var(--space-3) 0 0; }
body .v5-rk-laatikot .v5-rk__lisa p:first-child, body .v5-rk-laatikot .v5-rk__lisa h3:first-child { margin-top: 0; }
.v5-rk-laatikot .v5-rk__ala { display: grid; justify-content: stretch; justify-items: start; gap: var(--space-5, 20px); }
.v5-rk-laatikot .v5-rk__lisa, .v5-rk-laatikot .v5-rk__lisa[open] { order: 0; flex-basis: auto; width: 100%; padding-top: var(--space-4); border-top: 1px solid var(--laatikko-viiva); }
.v5-rk-laatikot .v5-rk__faktat dt, .v5-rk__ohje-nimi { font-size: 13px; line-height: 18px; }

/* Ryhmäkortit v2 (Lars 20.10.): valkoiset kortit kuten etusivulla, tiedot harmaassa sisäpaneelissa, alarivi hinta + Ilmoittaudu. */
.v5-rk2-ruudukko { display: grid; gap: var(--space-6); padding-block: var(--space-12) var(--space-16); }
@media (min-width: 900px) { .v5-rk2-ruudukko { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .v5-rk2-ruudukko { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v5-rk2 { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--pohja); border: 1px solid var(--viiva); border-radius: var(--radius-lg); box-shadow: 0 2px 10px rgba(10, 10, 10, .05); scroll-margin-top: calc(var(--header-korkeus) + 24px); }
body .v5-rk2 h2 { margin: 0; font: 700 24px/30px var(--font-sans); letter-spacing: -0.01em; hyphens: manual; }
.v5-rk2__ohjaaja { display: flex; align-items: center; gap: var(--space-3); }
.v5-rk2__ohjaaja img { width: 48px; height: 48px; border-radius: var(--radius-md); object-fit: cover; object-position: center 20%; flex: none; background: var(--kivi); }
body .v5-rk2__ohjaaja p { margin: 0; display: grid; font-size: 15px; line-height: 21px; }
.v5-rk2__ohjaaja a { color: var(--muste); font-weight: 600; text-decoration: none; }
.v5-rk2__ohjaaja a:hover { text-decoration: underline; text-underline-offset: 3px; }
.v5-rk2__titteli { color: var(--harmaa-600); font-size: 13px; line-height: 18px; }
body .v5-rk2__kuvaus { margin: 0; color: var(--harmaa-600); font-size: 17px; line-height: 26px; }
.v5-rk2__faktat { margin: 0; padding: var(--space-4) var(--space-5, 20px); display: grid; gap: var(--space-3); background: var(--kivi); border-radius: var(--radius-md); font-size: 15px; line-height: 22px; }
.v5-rk2__faktat div { display: block; }
.v5-rk2__faktat dt { font: 700 13px/18px var(--font-sans); color: var(--harmaa-600); }
.v5-rk2__faktat dd { margin: 0; hyphens: manual; }
.v5-rk2__ala { margin-top: auto; padding-top: var(--space-2); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
body .v5-rk2__hinta { margin: 0; font: 700 17px/24px var(--font-sans); font-variant-numeric: tabular-nums; }
.v5-rk2__nappi { flex: none; }
.v5-rk2__lisa summary { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--kosketus-min); cursor: pointer; font-weight: 600; font-size: 15px; list-style: none; color: var(--harmaa-600); }
.v5-rk2__lisa summary::-webkit-details-marker { display: none; }
.v5-rk2__lisa summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.v5-rk2__lisa[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.v5-rk2__lisa summary:hover { color: var(--muste); }
.v5-rk2__lisa summary:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-radius: 4px; }
.v5-rk2__lisa > div { font-size: 15px; line-height: 23px; }
body .v5-rk2__lisa h3 { margin: 0 0 var(--space-2); font: 700 15px/22px var(--font-sans); }
body .v5-rk2__lisa p { margin: var(--space-3) 0 0; }
.v5-rk2__lisa ul { margin: 0; padding-left: 1.2em; }
.v5-rk2 { margin-top: 0; }
.v5-rk2__ala + .v5-rk2__lisa { margin-top: calc(-1 * var(--space-2)); border-top: 1px solid var(--viiva); padding-top: var(--space-1, 4px); }
.v5-rk2__titteli { hyphens: manual; }
/* Ryhmäkortin kuva ylhäällä (Lars 20.10.): sama kuvasuhde joka kortissa, pyöristetty sisäkuva kuten tuotekortissa.
   Tietopaneeli venyy, jotta alarivit ja paneelien alareunat ovat rinnakkaisissa korteissa samassa linjassa. */
.v5-rk2 { padding: var(--space-3) var(--space-3) var(--space-6); }
.v5-rk2 > :not(.v5-rk2__kuva) { margin-inline: var(--space-3); }
.v5-rk2__kuva { margin: 0 0 var(--space-2); aspect-ratio: 16 / 10; border-radius: calc(var(--radius-lg) - 6px); overflow: hidden; background: var(--kivi); }
.v5-rk2__kuva img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v5-rk2__faktat { flex: 1; align-content: start; }
.v5-rk2__ala { margin-top: 0; }
/* Rivit lukitaan korttien yli (subgrid): kuva, nimi, ohjaaja, johdanto, tiedot, alarivi, lisätietoja. */
@media (min-width: 900px) {
  @supports (grid-template-rows: subgrid) {
    .v5-rk2-ruudukko { row-gap: var(--space-6); }
    .v5-rk2 { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: var(--space-4); }
    .v5-rk2__kuva { margin-bottom: 0; }
  }
}
/* Ohjaaja tietopaneelissa (20.10.): nimi ja titteli allekkain, ei kuvaa. Kortissa nyt 6 riviä. */
.v5-rk2__faktat .v5-rk2__ohjaaja dd { display: grid; }
.v5-rk2__faktat .v5-rk2__ohjaaja a { color: var(--muste); font-weight: 600; text-decoration: none; }
.v5-rk2__faktat .v5-rk2__ohjaaja a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) { @supports (grid-template-rows: subgrid) { .v5-rk2 { grid-row: span 6; } } }
.v5-rk2__kuva--puuttuu { display: grid; place-items: center; border: 2px dashed var(--reuna); color: var(--harmaa-600); font-size: 14px; }
/* Aulakuva (Lars 20.10., tuotannon kuva 1024×254): leveä panoraama koko palstan levyisenä, talokuvan paikka sen yllä. */
.v5-tilat { grid-template-columns: 1fr !important; }
.v5-tilakuva { margin: 0; }
.v5-tilakuva img { width: 100%; height: auto; aspect-ratio: 1024 / 254; object-fit: cover; border-radius: var(--radius-lg); display: block; }
.v5-tilakuva figcaption { margin-top: var(--space-2); color: var(--harmaa-600); font-size: 14px; }
.v5-tilat .v5-taydennetaan__ala { aspect-ratio: auto !important; min-height: 0 !important; height: 220px; }
/* Ryhmät 2 × 2 (Lars 20.10.): aina kaksi palstaa työpöydällä, ei kolmea. */
@media (min-width: 1200px) { .v5-rk2-ruudukko { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v5-rk2__kuva { aspect-ratio: 16 / 8; }
/* Lisää tilaa (Lars 20.10.): väljemmät välit ja sisätila, tiedot kahdessa palstassa leveässä kortissa. */
@media (min-width: 900px) {
  .v5-rk2-ruudukko { gap: var(--space-8); row-gap: var(--space-8); }
  .v5-rk2 { padding: var(--space-4) var(--space-4) var(--space-8); }
  .v5-rk2 > :not(.v5-rk2__kuva) { margin-inline: var(--space-5, 20px); }
  body .v5-rk2 h2 { font-size: 28px; line-height: 34px; }
  .v5-rk2__faktat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5, 20px) var(--space-8); padding: var(--space-6); font-size: 16px; line-height: 24px; }
  .v5-rk2__faktat .v5-rk2__ohjaaja { grid-column: 1 / -1; }
}
@media (min-width: 900px) { .v5-rk2__faktat { grid-template-columns: 1fr; gap: var(--space-4); } }
.v5-rk2__faktat dd { overflow-wrap: anywhere; }
body .v5-rk2__kuvaus, body .v5-rk2 h2 { hyphens: manual; }
/* Kuvaton sivuhero brändivihreänä (Lars 20.10. "liian tumma"): vihrea-500 ja musta teksti (kontrasti n. 8:1). */
.v5-ksh--ei-kuvaa .v5-kb__kehys { background: var(--vihrea-500); }
.v5-ksh--ei-kuvaa .v5-ksh__sisus, body .v5-ksh--ei-kuvaa h1, .v5-ksh--ei-kuvaa .v5-ksh__murupolku a { color: var(--muste); }
.v5-ksh--ei-kuvaa .v5-ksh__murupolku ol { color: var(--muste); }
.v5-ksh--ei-kuvaa .v5-ksh__murupolku li + li::before { color: rgba(10, 10, 10, .6); }
.v5-ksh--ei-kuvaa a:focus-visible { outline-color: var(--muste); }
/* Kuvaton sivuhero vaaleanvihreänä (Lars 20.10. "liian vihreä"): sama sävy kuin Lahjakortit-sivun ohjelaatikoissa. */
.v5-ksh--ei-kuvaa .v5-kb__kehys { background: var(--vihrea-050); }
/* Kuvaton sivuhero pelkkänä tekstinä (Lars 20.10.): ei kehystä eikä taustaa, murupolku ja otsikko sisällön vasempaan reunaan. */
.v5-ksh--ei-kuvaa .v5-kb__kehys { background: none; min-height: 0; border-radius: 0; overflow: visible; }
.v5-ksh--ei-kuvaa .v5-ksh__sisus { padding: var(--space-12) 0 0; max-width: none; }
/* Ryhmän nimi kuvan päällä (20.10.): valkoinen nimi alavasemmalla, alaosan tummennus. Kortissa nyt 5 riviä. */
.v5-rk2__kuva { position: relative; display: block; }
.v5-rk2__kuva::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(19, 38, 27, .88) 0%, rgba(19, 38, 27, .55) 38%, rgba(19, 38, 27, 0) 70%); pointer-events: none; }
body .v5-rk2 .v5-rk2__kuva h2 { position: absolute; z-index: 1; left: var(--space-6); right: var(--space-6); bottom: var(--space-5, 20px); margin: 0; color: var(--valkoinen); font: 700 30px/36px var(--font-sans); letter-spacing: -0.01em; hyphens: manual; text-wrap: balance; }
.v5-rk2__kuva--ei { background: var(--taulu); }
.v5-rk2__kuva--ei::after { display: none; }
@media (min-width: 900px) { @supports (grid-template-rows: subgrid) { .v5-rk2 { grid-row: span 5; } } }
@media (max-width: 520px) { body .v5-rk2 .v5-rk2__kuva h2 { font-size: 24px; line-height: 30px; left: var(--space-4); bottom: var(--space-4); } }
/* Sisältö samaan reunaan kuvan kanssa (Lars 20.10.): ei erillistä sisennystä kuvan alla. */
.v5-rk2 > :not(.v5-rk2__kuva) { margin-inline: 0 !important; }
@media (min-width: 900px) { .v5-rk2 { padding: var(--space-4) var(--space-4) var(--space-6); } }
/* Nimi ja johdanto yhtenä otsakkeena kuvan alaosassa (Lars 20.10.: johdanto oli irrallinen). Kortissa 4 riviä:
   kuva+otsake, tiedot, alarivi, lisätietoja. Tummennus korkeammalle, jotta kaksi tekstiriviä erottuvat. */
.v5-rk2__kuva { aspect-ratio: 16 / 9; }
.v5-rk2__kuva::after { background: linear-gradient(to top, rgba(19, 38, 27, .92) 0%, rgba(19, 38, 27, .72) 35%, rgba(19, 38, 27, .2) 65%, rgba(19, 38, 27, 0) 82%); }
.v5-rk2__otsake { position: absolute; z-index: 1; left: var(--space-6); right: var(--space-6); bottom: var(--space-6); display: grid; gap: var(--space-2); }
body .v5-rk2 .v5-rk2__kuva h2 { position: static; }
body .v5-rk2 .v5-rk2__otsake .v5-rk2__kuvaus { margin: 0; max-width: 40ch; color: rgba(255, 255, 255, .92); font-size: 17px; line-height: 25px; }
@media (min-width: 900px) { @supports (grid-template-rows: subgrid) { .v5-rk2 { grid-row: span 4; } } }
@media (max-width: 520px) {
  .v5-rk2__kuva { aspect-ratio: 4 / 3.4; }
  .v5-rk2__otsake { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); }
  body .v5-rk2 .v5-rk2__otsake .v5-rk2__kuvaus { font-size: 15px; line-height: 22px; }
}
body .v5-rk2 .v5-rk2__otsake .v5-rk2__kuvaus { max-width: none; text-wrap: pretty; }
/* Hinta tietopaneelissa (Lars 20.10.): alarivillä vain Ilmoittaudu vasemmassa reunassa. */
.v5-rk2__ala { justify-content: flex-start; }

.v5-rk2__faktat div:last-child dd { font-weight: inherit; } .v5-rk2__faktat .v5-rk2__hintarivi dd { font-weight: 700; }
/* Hinta paneelin alareunaan, ohut viiva erottaa sen muista tiedoista; hinnat samassa linjassa korttien välillä. */
.v5-rk2__faktat { display: flex; flex-direction: column; gap: var(--space-4); }
.v5-rk2__faktat .v5-rk2__hintarivi { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--viiva); }
.v5-rk2__faktat .v5-rk2__hintarivi dd { font-size: 17px; }

/* Tietopaneeli kuvakkeilla (Lars 20.10.): kuvake + arvo, yksi tekstityyli (16 px musta). Näkyvät pienet harmaat
   nimikkeet poistettu, ne jäävät ruudunlukijalle. Ohjaajan titteli ainoa toissijainen teksti. */
.v5-rk2__faktat { gap: 14px; font-size: 16px; line-height: 24px; }
.v5-rk2__faktat > div { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: var(--space-3); align-items: start; }
.v5-rk2__ikoni { width: 20px; height: 20px; margin-top: 2px; color: var(--vihrea-700); }
.v5-rk2__faktat dd { margin: 0; color: var(--muste); }
.v5-rk2__faktat .v5-rk2__ohjaaja dd { display: grid; gap: 2px; }
.v5-rk2__faktat .v5-rk2__ohjaaja a { font-weight: 600; }
.v5-rk2__faktat .v5-rk2__ohjaaja .v5-rk2__titteli { color: var(--harmaa-600); font-size: 14px; line-height: 20px; }
.v5-rk2__faktat .v5-rk2__hintarivi dd { font-weight: 700; font-size: 17px; }
.v5-rk2 .v5-rk2__faktat div.v5-rk2__hintarivi dd { font-weight: 700; }
/* Väli Ilmoittaudu-painikkeen ja Lisätietoja-viivan välille (Lars 20.10.). */
.v5-rk2 .v5-rk2__ala + .v5-rk2__lisa { margin-top: var(--space-2); padding-top: var(--space-2); }
/* Mobiilissa Ilmoittaudu koko kortin levyisenä (Lars 20.10.). */
@media (max-width: 600px) { .v5-rk2__ala { display: block; } .v5-rk2__nappi { display: flex; width: 100%; justify-content: center; } }

/* Lisätietoja harmaan laatikon sisällä tietojen alla (Lars 20.10.): kuvake + teksti kuten muut tiedot, nuoli oikealla.
   Ilmoittaudu kortin alimpana. Kortissa 3 riviä: kuva, laatikko, painike. */
.v5-rk2__paneeli { display: flex; flex-direction: column; background: var(--kivi); border-radius: var(--radius-md); padding: var(--space-6); }
@media (max-width: 899px) { .v5-rk2__paneeli { padding: var(--space-4) var(--space-5, 20px); } }
.v5-rk2 .v5-rk2__paneeli .v5-rk2__faktat { flex: 1; padding: 0; background: none; border-radius: 0; }
.v5-rk2 .v5-rk2__paneeli .v5-rk2__lisa { margin: var(--space-4) 0 0; padding: var(--space-2) 0 0; border-top: 1px solid var(--viiva); width: auto; }
.v5-rk2 .v5-rk2__lisa summary { display: grid; grid-template-columns: 20px 1fr auto; column-gap: var(--space-3); align-items: center; width: 100%; min-height: var(--kosketus-min); padding: 0; color: var(--muste); font-size: 16px; font-weight: 600; }
.v5-rk2 .v5-rk2__lisa summary .v5-rk2__ikoni { margin-top: 0; }
.v5-rk2 .v5-rk2__lisa summary::after { margin-right: 4px; }
.v5-rk2 .v5-rk2__lisa summary:hover { color: var(--vihrea-700); }
.v5-rk2 .v5-rk2__lisa > div { padding: var(--space-1, 4px) 0 var(--space-2) calc(20px + var(--space-3)); font-size: 15px; line-height: 23px; color: var(--muste); }
@media (min-width: 900px) { @supports (grid-template-rows: subgrid) { .v5-rk2 { grid-row: span 3; } } }
.v5-rk2__ala { padding-top: 0; }
/* Lisätietoja hieman tummempana sisälaatikkona harmaan laatikon pohjalla (Lars 20.10.). */
.v5-rk2 .v5-rk2__paneeli .v5-rk2__lisa { margin-top: var(--space-4); padding: 0 var(--space-3); border-top: 0; background: rgba(19, 38, 27, .07); border-radius: calc(var(--radius-md) - 4px); }
.v5-rk2 .v5-rk2__paneeli .v5-rk2__lisa[open] { padding-bottom: var(--space-2); }
.v5-rk2 .v5-rk2__lisa summary:hover { color: var(--muste); }
.v5-rk2 .v5-rk2__lisa:has(summary:hover) { background: rgba(19, 38, 27, .11); }
.v5-rk2 .v5-rk2__lisa > div { hyphens: manual; }
/* Ohjaajan titteli leipätekstinä (Lars 20.10.): sama koko ja väri kuin muut tiedot. */
.v5-rk2 .v5-rk2__faktat .v5-rk2__ohjaaja .v5-rk2__titteli { color: var(--muste); font-size: 16px; line-height: 24px; }
/* Pyöristykset tokeneista (20.10.): kortti radius-lg, sisäosat (kuva, laatikko, painike) radius-md, laatikon sisällä radius-sm. */
.v5-rk2__kuva { border-radius: var(--radius-md); }
.v5-rk2 .v5-rk2__paneeli .v5-rk2__lisa { border-radius: var(--radius-sm); }
/* Lisätietoja-osion pyöristys sama kuin laatikolla ja painikkeella (Lars 20.10.). */
.v5-rk2 .v5-rk2__paneeli .v5-rk2__lisa { border-radius: var(--radius-md); }
/* Kaikki ryhmäkortin pinnat samalla pyöristyksellä kuin kortti (Lars 20.10.). Painike noudattaa sivuston painiketyyliä. */
.v5-rk2__kuva, .v5-rk2__paneeli, .v5-rk2 .v5-rk2__paneeli .v5-rk2__lisa { border-radius: var(--radius-lg); }

/* Kokeilu 20.10. (Lars): Ryhmät-sivun tausta hieman harmaa (kivi) ja kortit ilman varjoa; valkoinen kortti erottuu taustasta.
   Lukittu kopio lukitut/ryhmat-2026-10-20.html säilyy vertailua varten. */
body.kv-root:has(.v5-rk2-ruudukko), body.kv-root:has(.v5-rk2-ruudukko) main { background: var(--kivi); }
.v5-rk2 { box-shadow: none; border-color: transparent; }
/* Larsin näyte 20.10.: sivupohja #f5f5f7 (neutraali, hieman viileä). Uusi token, lisättävä design systemiin, jos jää. */
:root { --sivupohja: #f5f5f7; }
body.kv-root:has(.v5-rk2-ruudukko), body.kv-root:has(.v5-rk2-ruudukko) main { background: var(--sivupohja); }
.v5-rk2__paneeli { background: var(--sivupohja); }
/* Tietolaatikko taustaa vaaleampi (Lars 20.10.). */
.v5-rk2__paneeli { background: #f9f9fa; }
/* Tietolaatikko takaisin pehmeään kivi-sävyyn (Lars 20.10.). */
.v5-rk2__paneeli { background: var(--kivi); }
/* Kivi-sävyn vaaleampi versio tietolaatikkoon (Lars 20.10.). */
:root { --kivi-vaalea: #f7f8f5; }
.v5-rk2__paneeli { background: var(--kivi-vaalea); }

/* Koko sivuston tausta #f5f5f7 ja valkoiset kortit ilman varjoa ja reunaa (Lars 20.10. "tulee koko sivulle").
   Ylätunniste pysyy valkoisena varjoineen; alatunniste tumma. Korteilla ei enää nostoa hoverissa. */
body.kv-root, body.kv-root main { background: var(--sivupohja); }
.v5-osa--ak, .v5-hypyt { background: var(--sivupohja); }
.v5-ak, .v5-ak:hover, .v5-hlo, .v5-hlo:hover { border-color: transparent; box-shadow: none; transform: none; }
body .kv-lahjakortti { box-shadow: none; }

/* Ajankohtaista-hylly samalla ryhmäkortilla kuin Ryhmät-sivu (20.10.). Tunniste Ryhmä/Uutinen nimen yllä kuvan päällä. */
.v5-rk2__tyyppi { justify-self: start; margin: 0 0 2px; padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--muste); font: 700 13px/20px var(--font-sans); }
.v5-ajankohtaista .kv-hylly__rata > li { display: flex; }
.v5-ajankohtaista .v5-rk2 { width: 100%; }
body .v5-ajankohtaista .v5-rk2 .v5-rk2__kuva h3 { margin: 0; color: var(--valkoinen); font: 700 24px/30px var(--font-sans); letter-spacing: -0.01em; hyphens: manual; text-wrap: balance; }
.v5-ajankohtaista .v5-rk2__kuva { aspect-ratio: 4 / 3; }
.v5-ajankohtaista .v5-rk2__otsake { left: var(--space-5, 20px); right: var(--space-5, 20px); bottom: var(--space-5, 20px); }
.v5-ajankohtaista .v5-rk2__paneeli { flex: 1; }
.v5-rk2--uutinen .v5-rk2__kuvaus { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.v5-rk2__kuva { flex: none; }
.v5-ajankohtaista .v5-rk2 { gap: var(--space-3); }
.v5-ajankohtaista .v5-rk2__kuva { aspect-ratio: 1 / 1; }
body .v5-ajankohtaista .v5-rk2 .v5-rk2__otsake .v5-rk2__kuvaus { font-size: 15px; line-height: 22px; }
/* Hyllyssä ei Ryhmät-ruudukon subgridiä: kortti pystysuuntaisena flexinä, laatikko venyy, painike alimpana. */
.v5-ajankohtaista .v5-rk2 { display: flex !important; flex-direction: column; gap: var(--space-3); grid-row: auto; }
.v5-ajankohtaista .v5-rk2__paneeli { flex: 1 0 auto; }
.v5-ajankohtaista .v5-rk2__kuva { aspect-ratio: 4 / 3; }

/* Ryhmät-sivun korttikieli muille sivuille (Lars 20.10. "sovella tätä muihinkin sivuihin"):
   valkoinen kortti ilman varjoa (radius-lg) harmaalla pohjalla, tiedot --kivi-vaalea-laatikossa, kuvakkeet vihrea-700. */

/* Hoidot ja hinnasto: ammattilaisen hintalohko valkoisena korttina, hintataulukko vaaleassa laatikossa. */
.v5-hinnasto .v5-tekija { background: var(--pohja); border-radius: var(--radius-lg); padding: var(--space-4); }
.v5-hinnasto .v5-tekija .v5-tekija__paa { padding: var(--space-2) var(--space-2) var(--space-4); margin: 0; }
.v5-tekija__paneeli { background: var(--kivi-vaalea); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-6) var(--space-5, 20px); }
.v5-hinnasto .v5-tekija .v5-hinnat tbody tr, .v5-hinnasto .v5-tekija .v5-hinnat tbody tr:first-child { border-top: 1px solid var(--viiva); }
.v5-hinnasto .v5-tekija .v5-hinnat thead th { color: var(--harmaa-600); opacity: 1; }
.v5-hinnasto .v5-tekija__titteli { color: var(--muste) !important; font-size: 15px !important; line-height: 22px !important; }

/* Valmennukset: paketit valkoisina kortteina allekkain, Sisältää-lista vaaleassa laatikossa tarkistekuvakkeilla. */
.v5-paketit { border-top: 0 !important; gap: var(--space-4) !important; }
.v5-paketti { background: var(--pohja); border: 0 !important; border-radius: var(--radius-lg); padding: var(--space-4) !important; align-items: start; }
.v5-paketti > div:first-child { padding: var(--space-2) var(--space-2) 0; }
body .v5-paketti p { color: var(--muste); }
.v5-paketti__paneeli { background: var(--kivi-vaalea); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-6); }
body .v5-paketti .v5-paketti__otsake { margin: 0 0 var(--space-2); }
.v5-paketti ul li { display: grid; grid-template-columns: 20px 1fr; column-gap: var(--space-3); padding: 4px 0; border: 0; }
.v5-paketti ul li .v5-rk2__ikoni { margin-top: 2px; }

/* Lahjakortit: ohjevaiheet valkoisina kortteina, lahjakorttien pyöristys samaksi. */
body .v5-lahjat .kv-vaiheet li { background: var(--pohja); border-radius: var(--radius-lg); }
body .v5-lahjat .kv-lahjakortti { border-radius: var(--radius-lg); }

/* Yhteystiedot: käyntiosoite valkoisena korttina. */
.v5-hinnasto #kayntiosoite .v5-osio__sisus { background: var(--pohja); border-radius: var(--radius-lg); padding: var(--space-6); }
body .v5-paketti p, .v5-hinnasto .v5-tekija__titteli, body .v5-lahjat .kv-vaiheet p { hyphens: manual; }

/* Matalammat kuvaherot alasivuille (Lars 20.10.): noin puolet entisestä, otsikko hieman pienempi. Ryhmät ilman kuvaa ennallaan. */
.v5-ksh:not(.v5-ksh--ei-kuvaa) .v5-kb__kehys { min-height: clamp(200px, 26vh, 260px); }
.v5-ksh:not(.v5-ksh--ei-kuvaa) .v5-ksh__sisus { padding: var(--space-8) var(--space-10, 40px); }
body .v5-ksh:not(.v5-ksh--ei-kuvaa) h1 { font-size: clamp(36px, 4.2vw, 60px); }
@media (max-width: 600px) { .v5-ksh:not(.v5-ksh--ei-kuvaa) .v5-kb__kehys { min-height: 180px; } .v5-ksh:not(.v5-ksh--ei-kuvaa) .v5-ksh__sisus { padding: var(--space-5, 20px); } }

/* Lahjakortin kansi tuotekuvana (kokeilu 20.10.), Lahjakortti-merkki valkoisena pillinä kuvan päällä. */
.v5-lahjakansi { padding: 0 !important; background: var(--kivi) !important; }
.v5-lahjakansi img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v5-lahjakansi .kv-lahjakortti__merkki { position: absolute; left: var(--space-3); top: var(--space-3); padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, .92); }
body .v5-lahjat .kv-lahjakortti { grid-template-rows: 140px 1fr; }
body .v5-lahjat .kv-lahjakortti__nimi { hyphens: manual; }
body .v5-lahjat .kv-lahjakortti__nimi { hyphens: auto; overflow-wrap: normal; }

/* Lahjakortit-sivu (Lars 20.10.): osiot koko sisällön levyisinä ilman näkyviä otsikoita. */
.v5-lahjat__osa { padding-top: var(--space-8); }
.v5-lahjat__osa + .v5-lahjat__osa { padding-bottom: var(--space-16); }
body .v5-lahjat .kv-vaiheet { grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 640px) { body .v5-lahjat .kv-vaiheet { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { body .v5-lahjat .kv-vaiheet { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
body .v5-lahjat .kv-lahjakortit { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (min-width: 760px) { body .v5-lahjat .kv-lahjakortit { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { body .v5-lahjat .kv-lahjakortit { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); } }
body .v5-lahjat .kv-lahjakortti { grid-template-rows: auto 1fr; min-block-size: 0; }
body .v5-lahjat .v5-lahjakansi { aspect-ratio: 16 / 10; min-height: 0; }
@media (max-width: 520px) { body .v5-lahjat .kv-lahjakortti__runko { padding: var(--space-4); } body .v5-lahjat .kv-lahjakortti__nimi { font-size: 16px; line-height: 22px; } }
/* Lahjakortit yhtä korkeiksi (Lars 20.10.): kortti täyttää ruudun, nimelle varattu aina kaksi riviä. */
body .v5-lahjat .kv-lahjakortit > li { display: flex; }
body .v5-lahjat .kv-lahjakortti { width: 100%; }
body .v5-lahjat .kv-lahjakortti__nimi { min-height: calc(2 * 27px); }
@media (max-width: 520px) { body .v5-lahjat .kv-lahjakortti__nimi { min-height: calc(2 * 22px); } }
@media (max-width: 520px) { body .v5-lahjat .kv-lahjakortti__nimi { min-height: calc(3 * 22px); } }
/* Ohjevaiheet vaaleanvihreinä (20.10.): ohje erottuu valkoisista tuotekorteista. */
body .v5-lahjat .kv-vaiheet li { background: var(--vihrea-050); }
/* Lahjakortti ryhmäkortin tavoin (Lars 20.10.): 16 px sisätila joka puolella, kuva pyöristettynä kortin sisällä. */
body .v5-lahjat .kv-lahjakortti { padding: var(--space-4); gap: var(--space-4); overflow: visible; }
body .v5-lahjat .v5-lahjakansi { border-radius: var(--radius-lg); overflow: hidden; }
body .v5-lahjat .kv-lahjakortti__runko { padding: 0 var(--space-2) var(--space-1, 4px); }
body .v5-lahjat .kv-lahjakortti:focus-within { outline-offset: 2px; border-radius: var(--radius-lg); }

/* Ohjevaiheet ryhmäkortin rakenteella (Lars 20.10.): 16 px sisätila, numero ja otsikko ylhäällä,
   ohjeteksti vaaleammassa sisälaatikossa (kuin ryhmäkortin tietolaatikko). */
body .v5-lahjat .kv-vaiheet li { padding: var(--space-4); gap: var(--space-3); grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; align-items: center; }
body .v5-lahjat .kv-vaiheet li::before { margin-left: var(--space-2); }
body .v5-lahjat .kv-vaiheet h3 { padding-right: var(--space-2); }
body .v5-lahjat .kv-vaiheet p { grid-column: 1 / -1; align-self: stretch; padding: var(--space-4) var(--space-5, 20px); background: rgba(255, 255, 255, .7); border-radius: var(--radius-lg); }
body .v5-lahjat .kv-vaiheet h3 { font-size: 17px; line-height: 24px; hyphens: manual; text-wrap: balance; }
@media (min-width: 1024px) { body .v5-lahjat .kv-vaiheet h3 { min-height: 48px; display: flex; align-items: center; } }

/* Ohjevaihe: valkoinen kortti 16 px sisätilalla, sisällä vaaleanvihreä laatikko (numero, otsikko, teksti). Korvaa edelliset vaihesäännöt. */
body .v5-lahjat .kv-vaiheet li { display: flex; padding: var(--space-4); background: var(--pohja); border-radius: var(--radius-lg); }
body .v5-lahjat .kv-vaiheet li::before { content: none; }
.v5-vaihe { flex: 1; counter-increment: vaihe; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; gap: var(--space-3); align-items: center; align-content: start; padding: var(--space-5, 20px); background: var(--vihrea-050); border-radius: var(--radius-lg); }
.v5-vaihe::before { content: counter(vaihe); width: 36px; height: 36px; border-radius: 50%; background: var(--muste); color: var(--valkoinen); display: grid; place-items: center; font-weight: 700; }
body .v5-lahjat .kv-vaiheet li { counter-increment: none; }
body .v5-lahjat .kv-vaiheet .v5-vaihe p { grid-column: 1 / -1; align-self: start; padding: 0; background: none; border-radius: 0; }
body .v5-lahjat .kv-vaiheet .v5-vaihe h3 { padding-right: 0; }
body .v5-lahjat .kv-vaiheet li { align-items: stretch; }
/* Ohjevaiheen sisälaatikko samaa sävyä kuin Ryhmät-sivun tietolaatikko (Lars 20.10.). */
.v5-vaihe { background: var(--kivi-vaalea); }

/* Hoidot ja hinnasto (Lars 20.10.): ei hoitoryhmän otsikkopalstaa, kortit kahteen palstaan koko sisällön levyisinä.
   Hoitoryhmä tunnisteena kortin yläreunassa (h2). */
.v5-hinta-ruudukko { display: grid; gap: var(--space-6); padding-block: var(--space-8) var(--space-16); }
@media (min-width: 900px) { .v5-hinta-ruudukko { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } }
.v5-hinnasto .v5-hinta-ruudukko .v5-tekija { display: flex; flex-direction: column; margin: 0; scroll-margin-top: calc(var(--header-korkeus) + 64px); }
.v5-hinnasto .v5-hinta-ruudukko .v5-tekija + .v5-tekija { margin-top: 0; }
.v5-hinta-ruudukko .v5-tekija__paneeli { flex: 1; }
body .v5-hinnasto .v5-tekija__ryhma { align-self: flex-start; margin: var(--space-2) var(--space-2) var(--space-3); padding: 2px 12px; border-radius: 999px; background: var(--vihrea-050); color: var(--muste); font: 700 14px/22px var(--font-sans); letter-spacing: 0; }
@media (min-width: 900px) { .v5-hinta-ruudukko { align-items: start; } }
.v5-hinta-ruudukko .v5-tekija__paneeli { flex: none; }
.v5-hinta-ruudukko .v5-hinnat th, .v5-hinta-ruudukko .v5-hinnat td { hyphens: manual; }
/* Kesto-otsake ja kestosolut vasempaan reunaan (Lars 20.10.). */
.v5-hinnat .v5-hinnat__kesto, .v5-hinnat thead th.v5-hinnat__kesto { text-align: left; }

/* Valmennukset (Lars 20.10.): kuusi korttia koko sisällön levyisinä, kolme rinnakkain, ryhmäkortin rakenteella. */
.v5-vk-ruudukko { display: grid; gap: var(--space-6); padding-top: var(--space-8); }
@media (min-width: 760px) { .v5-vk-ruudukko { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .v5-vk-ruudukko { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v5-vk { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); background: var(--pohja); border-radius: var(--radius-lg); }
.v5-vk__paa { padding: var(--space-2) var(--space-2) 0; }
body .v5-vk h2 { margin: 0; font: 700 24px/30px var(--font-sans); letter-spacing: -0.01em; hyphens: manual; }
body .v5-vk__paa p { margin: var(--space-2) 0 0; color: var(--muste); font-size: 16px; line-height: 24px; hyphens: manual; }
.v5-vk .v5-rk2__paneeli { flex: 1; }
.v5-vk .v5-rk2__faktat dt:not(.v5-vh) { grid-column: 2; font-weight: 600; }
.v5-vk__sisaltaa { grid-template-rows: auto auto; }
.v5-vk__sisaltaa dd { grid-column: 2; }
.v5-vk__sisaltaa ul { margin: var(--space-1, 4px) 0 0; padding-left: 1.1em; }
.v5-vk__sisaltaa .v5-rk2__ikoni { grid-row: 1; }
.v5-vk-ruudukko + .v5-vk__hinnat { margin: var(--space-6) 0 var(--space-16); }
@media (max-width: 600px) { .v5-vk .v5-rk2__ala { display: block; } .v5-vk .v5-rk2__nappi { display: flex; width: 100%; justify-content: center; } }

/* Etusivun ammattilaiskortit ryhmäkortin tavoin (Lars 20.10.): 16 px sisätila, kuva pyöristettynä kortin sisällä,
   tekstit kuvan reunan kanssa samaan linjaan pienellä lisävälillä. */
.v5-tiimi .v5-hlo, .kv-hylly .v5-hlo { padding: var(--space-4); overflow: visible; }
.v5-hlo .v5-hlo__kuva { margin: 0; border-radius: var(--radius-lg); overflow: hidden; }
body .v5-hlo .v5-hlo__nimi, body .v5-hlo .v5-hlo__titteli, .v5-hlo .v5-hlo__ala, body .v5-hlo .v5-hlo__siru { margin-left: var(--space-2); margin-right: var(--space-2); }
.v5-hlo .v5-hlo__ala { margin-bottom: var(--space-1, 4px); }
body .v5-hlo .v5-hlo__titteli { hyphens: manual; }
/* Alarivi (Varaa aika, puhelin) kuvan reunan linjaan kuten ryhmäkortin painike (Lars 20.10.). */
.v5-hlo .v5-hlo__ala { margin-left: 0 !important; margin-right: 0 !important; }
.v5-hlo .v5-hlo__ala { padding-left: 0 !important; padding-right: 0 !important; }

/* Kaikki painikkeet samalla 16 px pyöristyksellä kuin kortit ja kuvat (Lars 20.10.). */
.v5-btn, body .kv-btn, .v5-mobiilinav button, .v5-valikko { border-radius: var(--radius-lg); }
/* Heron pikapainikkeet samalla 16 px pyöristyksellä kuin muut painikkeet (Lars 20.10.); nuolilaatikko samankeskinen (16 − 6 px). */
.v5-kh__pilli { border-radius: var(--radius-lg); }
.v5-kh__nuoli { border-radius: 10px; }
/* Osoite heron otsikon yläpuolella pienellä (Lars 20.10.). Toteutuksessa ACF:n yhteystiedoista, ei käsin. */
body .v5-kb .v5-kb__osoite { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); color: var(--valkoinen); font: 600 15px/22px var(--font-sans); }
.v5-kb__osoite .v5-rk2__ikoni { width: 18px; height: 18px; margin: 0; color: var(--valkoinen); }
/* Etusivun otsikko mahtuu mobiiliin: "kivuttomaksi" ei saa katketa (Lars 20.10.). */
@media (max-width: 600px) { body .v5-kb:not(.v5-ksh) h1 { font-size: clamp(34px, 10.5vw, 48px); overflow-wrap: normal; word-break: normal; } }

/* Painike heron pillin mallilla (Lars 20.10.): teksti vasemmalla, ikonilaatikko oikealla. 44 px korkea (kosketuskoko),
   16 px pyöristys, ikonilaatikko 32 px ja 10 px pyöristys (samankeskinen). Vihreä pohja, valkoinen ikonilaatikko. */
.v5-btn.v5-pilli { gap: var(--space-3); min-height: 44px; padding: 6px 6px 6px 18px; border: 0; border-radius: var(--radius-lg); background: var(--vihrea-500); color: var(--muste); font: 600 15px/20px var(--font-sans); justify-content: space-between; }
.v5-pilli__ikoni { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--pohja); color: var(--muste); }
.v5-pilli__ikoni svg { width: 18px; height: 18px; }
.v5-btn.v5-pilli:hover { background: var(--vihrea-800); color: var(--valkoinen); }
.v5-btn.v5-pilli:hover .v5-pilli__ikoni { color: var(--vihrea-800); }
.v5-btn.v5-pilli:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.v5-btn.v5-pilli.v5-btn--pieni { min-height: 40px; padding: 4px 4px 4px 14px; font-size: 14px; }
.v5-btn--pieni .v5-pilli__ikoni { width: 32px; height: 32px; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { .v5-btn.v5-pilli { transition: none; } }
/* Ammattilaiskortin alarivi pillipainikkeen kanssa: tiiviimpi painike, pienempi numero, rivitys jos ei mahdu. */
.v5-hlo .v5-hlo__ala { flex-wrap: wrap; gap: var(--space-2); }
.v5-hlo .v5-hlo__ala .v5-btn.v5-pilli { padding-left: 12px; gap: var(--space-2); }
.v5-hlo .v5-hlo__ala > a:not(.v5-btn) { font-size: 14px; white-space: nowrap; }
/* Ammattilaiskortti kuin ryhmäkortti: puhelinnumero tietona ylempänä, Varaa aika -painike alimpana vasemmalla. */
.v5-hlo .v5-hlo__ala { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--space-3); border-top: 0; padding-top: 0; }
.v5-hlo .v5-hlo__ala > a:not(.v5-btn) { order: -1; margin-left: var(--space-2); font-size: 15px; }

/* Valmennukset v2 (Lars 20.10.): johdanto, korteissa ikoni + nimi + kuvaus, ei sisältölaatikoita eikä Varaa aika -painikkeita. */
.v5-vk__johdanto { max-width: 68ch; padding-top: var(--space-8); }
body .v5-vk__johdanto p { margin: 0 0 var(--space-3); font-size: 19px; line-height: 30px; }
body .v5-vk__johdanto p:last-child { margin: 0; font-size: 16px; line-height: 24px; }
.v5-vk__johdanto a:not(.v5-hinnastolinkki) { color: var(--muste); font-weight: 600; }
.v5-vk-ruudukko { padding-top: var(--space-8); padding-bottom: var(--space-16); }
.v5-vk { padding: var(--space-6); gap: var(--space-3); }
.v5-vk__ikoni { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--space-2); border-radius: var(--radius-lg); background: var(--kivi-vaalea); color: var(--vihrea-700); }
.v5-vk__ikoni svg { width: 26px; height: 26px; }
body .v5-vk > p { margin: 0; font-size: 16px; line-height: 25px; hyphens: manual; }
.v5-vk .v5-rk2__ala { margin-top: auto; padding-top: var(--space-3); }
.v5-vk__ikoni { background: var(--vihrea-050); }
.v5-vk__ikoni svg path { stroke-width: 1.9; }
/* Hinnasto: Varaa aika kortin oikeaan yläkulmaan hoitoryhmätunnisteen riville (Lars 20.10.). */
.v5-hinta-ruudukko .v5-tekija { position: relative; }
.v5-hinta-ruudukko .v5-tekija .v5-tekija__varaa { position: absolute; top: var(--space-4); right: var(--space-4); margin: 0; }
body .v5-hinnasto .v5-hinta-ruudukko .v5-tekija__ryhma { min-height: 40px; display: inline-flex; align-items: center; margin-top: 0; }
/* Hintakortti ei saa levitä taulukon mukaan mobiilissa. */
.v5-hinta-ruudukko { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .v5-hinta-ruudukko { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v5-hinta-ruudukko .v5-tekija, .v5-hinta-ruudukko .v5-tekija__paneeli { min-width: 0; }
.v5-hinta-ruudukko .v5-hinnat { table-layout: auto; width: 100%; }
.v5-hinta-ruudukko .v5-hinnat tbody th { overflow-wrap: anywhere; }
@media (max-width: 600px) { .v5-hinta-ruudukko .v5-tekija__paneeli { padding-inline: var(--space-4); } }
.v5-hinta-ruudukko .v5-hinnat tbody th { overflow-wrap: normal; hyphens: auto; }

/* Hinnasto: Varaa aika hintataulukon alla (Lars 20.10.), mobiilissa koko levyinen. Pistejohde pois kapealla näytöllä. */
.v5-hinta-ruudukko .v5-tekija .v5-tekija__varaa { position: static; }
.v5-tekija__ala { padding: var(--space-4) 0 0; }
@media (max-width: 600px) {
  .v5-tekija__ala .v5-btn.v5-pilli { display: flex; width: 100%; }
  .v5-hinta-ruudukko .v5-hinnat__palvelu::after { display: none; }
}
@media (max-width: 600px) { .v5-hinta-ruudukko .v5-hinnat tbody th { hyphens: manual; } }
/* Valmennusten johdanto kahden korttipalstan levyiseksi, linkki tekstin sisällä (Lars 20.10.). */
.v5-vk__johdanto { max-width: none; }
@media (min-width: 1100px) { .v5-vk__johdanto { width: calc((100% - 2 * var(--space-6)) * 2 / 3 + var(--space-6)); } }
@media (min-width: 760px) and (max-width: 1099px) { .v5-vk__johdanto { width: 100%; } }
body .v5-vk__johdanto p:last-child { margin: 0; font-size: 19px; line-height: 30px; }
.v5-vk__johdanto a { color: var(--muste); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Etusivun hero mobiilissa (Lars 20.10.: tiimin kasvot katosivat tekstin alle): kuva ylhäällä omana alueenaan,
   teksti ja painikkeet sen alla tummanvihreällä; kuvan alareuna liukuu samaan sävyyn. */
@media (max-width: 700px) {
  .v5-kb:not(.v5-ksh) .v5-kb__kehys { display: flex; flex-direction: column; justify-content: flex-start; min-height: 0; background: var(--taulu); }
  .v5-kb:not(.v5-ksh) .v5-kb__kehys::before { display: none; }
  .v5-kb:not(.v5-ksh) .v5-kh__kuva { position: relative; inset: auto; z-index: 0; aspect-ratio: 4 / 3.3; flex: none; }
  .v5-kb:not(.v5-ksh) .v5-kh__kuva img { position: static; width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; }
  .v5-kb:not(.v5-ksh) .v5-kh__kuva::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(19, 38, 27, 0) 55%, var(--taulu) 100%); }
  .v5-kb:not(.v5-ksh) .v5-kb__sisus { position: relative; z-index: 1; max-width: none; margin-top: calc(-1 * var(--space-6)); padding: 0 var(--space-5, 20px) var(--space-6); }
}
/* Etusivun heron painikkeet mobiilissa koko levyisinä (Lars 20.10.). */
@media (max-width: 700px) { .v5-kb:not(.v5-ksh) .v5-kh__toiminnot { display: grid; grid-template-columns: 1fr; gap: var(--space-3); } .v5-kb:not(.v5-ksh) .v5-kh__pilli { width: 100%; justify-content: space-between; } }
@media (max-width: 700px) { .v5-kb:not(.v5-ksh) .v5-kh__kuva img { object-position: 50% 30%; } }

/* Mobiilivalikko hampurilaiskuvakkeena ilman reunaa (Lars 20.10.). Avattuna kolme viivaa muuttuu ruksiksi.
   Saavutettava nimi "Valikko" (aria-label), kosketusalue 44 × 44 px. */
.v5-mobiilinav summary { justify-content: center; width: 44px; min-height: 44px; padding: 0; border: 0 !important; border-radius: var(--radius-lg); }
.v5-mobiilinav summary:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.v5-hampurilainen { display: grid; gap: 5px; width: 24px; }
.v5-hampurilainen span { display: block; height: 2px; border-radius: 2px; background: var(--muste); transition: transform .2s ease, opacity .2s ease; }
.v5-mobiilinav[open] .v5-hampurilainen span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.v5-mobiilinav[open] .v5-hampurilainen span:nth-child(2) { opacity: 0; }
.v5-mobiilinav[open] .v5-hampurilainen span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .v5-hampurilainen span { transition: none; } }
/* Valmennusten johdanto koko sisällön levyiseksi (Lars 20.10.). */
@media (min-width: 1100px) { .v5-vk__johdanto { width: 100%; } }
body .v5-vk__johdanto p { max-width: none; }

/* Tekstilinkit hiiren alla tummanvihreinä (Lars 20.10.): vihrea-700 #1f6e41, kontrasti ~6,4:1 valkoisella ja ~6:1
   #f5f5f7-pohjalla (WCAG AA). Alleviivaus hoverissa, joten tunnistettavuus ei ole värin varassa.
   Ei painikkeita, herokuvan päällä olevia linkkejä eikä tumman alatunnisteen linkkejä. */
main a:not(.v5-btn):not(.v5-kh__pilli):not(.kv-btn):hover,
.v5-yla nav a:hover {
  color: var(--vihrea-700) !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
main .v5-kb:not(.v5-ksh--ei-kuvaa) a:not(.v5-btn):not(.v5-kh__pilli):hover,
main .v5-rk2__kuva a:hover { color: var(--valkoinen) !important; }
/* Päänavissa hover vain vihreä väri, ei alleviivausta (Lars 20.10.). */
.v5-yla nav a:hover, .v5-kb__nav a:hover, .v5-mobiilinav a:hover { text-decoration: none !important; }

/* Ryhmäkortin vaihtoehdot A ja B (20.10.): yläosa valmennuskortin tapaan. */
.v5-rk2__paa { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-2) var(--space-2) 0; }
.v5-rk2__paa .v5-vk__ikoni { margin-bottom: var(--space-1, 4px); }
body .v5-rk2__paa h3 { margin: 0; font: 700 24px/30px var(--font-sans); letter-spacing: -0.01em; color: var(--muste); hyphens: manual; }
body .v5-rk2__paa .v5-rk2__tyyppi { display: none; }
body .v5-rk2__paa .v5-rk2__kuvaus { margin: 0; color: var(--muste); font-size: 16px; line-height: 25px; hyphens: manual; }
.v5-rk2__pikkukuva { display: block; width: 80px; height: 80px; margin-bottom: var(--space-1, 4px); border-radius: var(--radius-lg); overflow: hidden; background: var(--vihrea-050); }
.v5-rk2__pikkukuva img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v5-vertailu { padding-block: var(--space-8); }
body .v5-vertailu__otsikko { margin: 0 0 var(--space-2); font: 700 28px/34px var(--font-sans); }
.v5-vertailu .v5-rk2-ruudukko { padding-top: var(--space-4); }
body .v5-rk2__paa h2 { margin: 0; font: 700 24px/30px var(--font-sans); letter-spacing: -0.01em; color: var(--muste); hyphens: manual; }
/* Ryhmäkortin tietolaatikko valkoiseksi (Lars 20.10.): ei omaa taustaa, tiedot samaan linjaan nimen ja johdannon kanssa. Lisätietoja-nauha pitää sävynsä. */
.v5-rk2__paneeli, .v5-rk2 .v5-rk2__paneeli { background: transparent; padding: var(--space-2) var(--space-2) 0; }
/* Ryhmäkortti (Lars 20.10.): viiva johdannon alle tietojen yläpuolelle, ei viivaa hinnan yllä,
   Ilmoittaudu samaan linjaan Lisätietoja-nauhan kanssa. */
.v5-rk2 .v5-rk2__faktat { padding-top: var(--space-4); border-top: 1px solid var(--viiva); }
.v5-rk2 .v5-rk2__faktat .v5-rk2__hintarivi { border-top: 0; padding-top: 0; }
.v5-rk2 .v5-rk2__ala { padding-inline: var(--space-2); }
.v5-rk2 .v5-rk2__paneeli .v5-rk2__faktat { padding-top: var(--space-5, 20px); }

/* Etusivun Ajankohtaista samalla ikonikortilla kuin Ryhmät (A, Lars 20.10.). Tunniste Ryhmä/Uutinen ikonin vieressä. */
.v5-ajankohtaista .v5-rk2__paa { grid-template-columns: auto 1fr; align-items: center; column-gap: var(--space-3); }
.v5-ajankohtaista .v5-rk2__paa > :not(.v5-vk__ikoni):not(.v5-rk2__tyyppi) { grid-column: 1 / -1; }
body .v5-ajankohtaista .v5-rk2__paa .v5-rk2__tyyppi { display: inline-block; justify-self: start; margin: 0 0 var(--space-1, 4px); background: var(--vihrea-050); color: var(--muste); }
body .v5-ajankohtaista .v5-rk2__paa h3 { font-size: 21px; line-height: 27px; }

/* Etusivun minimaalinen ryhmäkortti (Lars 20.10.): painikkeet alareunassa vierekkäin, toissijainen vaalea. */
.v5-ajankohtaista .v5-rk2__ala { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; }
.v5-ajankohtaista .v5-rk2__paa { flex: 1; }
.v5-btn.v5-pilli.v5-btn--toissijainen { background: var(--kivi-vaalea); color: var(--muste); box-shadow: inset 0 0 0 1px var(--viiva); }
.v5-btn--toissijainen .v5-pilli__ikoni { background: var(--taulu); color: var(--valkoinen); }
.v5-btn.v5-pilli.v5-btn--toissijainen:hover { background: var(--vihrea-050); color: var(--muste); box-shadow: inset 0 0 0 1px var(--vihrea-700); }
.v5-btn.v5-pilli.v5-btn--toissijainen:hover .v5-pilli__ikoni { color: var(--valkoinen); }
body .v5-rk2__pvm { margin: var(--space-1, 4px) 0 0; color: var(--harmaa-600); font-size: 14px; line-height: 20px; }
.v5-ajankohtaista .v5-rk2__ala { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
.v5-ajankohtaista .v5-rk2__ala .v5-btn.v5-pilli { width: 100%; }
/* Ei Ryhmä/Uutinen-tunnisteita (Lars 20.10.): ikoni yksin otsikon yläpuolella. */
.v5-ajankohtaista .v5-rk2__paa { grid-template-columns: 1fr; }

/* Etusivun korttikarusellien pystyvälit vakioiksi (Lars 20.10.): 56 px herosta otsikkoon, korteista seuraavaan
   otsikkoon ja korteista alatunnisteeseen; otsikosta kortteihin 24 px. Radan 8 px alatila jää kohdistuskehykselle. */
main .v5-osa { padding: 0; }
main .v5-osa .kv-hylly { padding: 0; margin: 0; }
main .v5-osa .kv-hylly__rata { padding-bottom: 8px; }
main .v5-osa--ak { padding-top: 56px; }
main .v5-osa:not(.v5-osa--ak) { padding-top: 48px; }
main .v5-osa:last-child { padding-bottom: 48px; }
/* Ammattilaiskortin Varaa aika koko kortin levyisenä (Lars 20.10.). */
.v5-hlo .v5-hlo__ala .v5-btn.v5-pilli { align-self: stretch; width: 100%; }
/* Heron ingressi tasaisesti rivittyväksi (Lars 20.10.). */
body .v5-kb .v5-kh__ingressi, body .v5-kb h1 { text-wrap: balance; }
/* Etusivun otsikko ei saa katketa keskeltä sanaa leveimmilläkään näytöillä (Lars 20.10.): kehys on rajattu
   sisällön levyiseksi, joten koko ei saa kasvaa yli 64 px. */
@media (min-width: 1024px) { body .v5-kb:not(.v5-ksh) h1 { font-size: clamp(44px, 4.6vw, 64px); } }
body .v5-kb h1 { overflow-wrap: normal; word-break: normal; }

/* Lahjakortti ikonikorttina (Lars 20.10.): ikoni, nimi, kesto ja hinta, koko levyinen Tilaa lahjakortti -painike. */
.v5-lk { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; padding: var(--space-6) var(--space-4) var(--space-4); background: var(--pohja); border-radius: var(--radius-lg); }
.v5-lk > :not(.v5-rk2__ala) { margin-inline: var(--space-2); }
.v5-lk .v5-vk__ikoni { margin-bottom: var(--space-1, 4px); }
body .v5-lk h3 { margin: 0; font: 700 19px/25px var(--font-sans); color: var(--muste); hyphens: auto; }
body .v5-lk .v5-lk__tiedot { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--viiva); color: var(--harmaa-600); font-size: 15px; line-height: 22px; font-variant-numeric: tabular-nums; }
.v5-lk__hinta { color: var(--muste); font-weight: 700; font-size: 17px; }
.v5-lk .v5-rk2__ala { padding: var(--space-1, 4px) 0 0; }
.v5-lk .v5-rk2__ala .v5-btn.v5-pilli { display: flex; width: 100%; }
body .v5-lahjat .kv-lahjakortit > li { display: flex; }
/* Lahjakortin nimelle aina kahden rivin tila, jotta kortit ovat yhtä korkeita (20.10.). */
body .v5-lk h3 { min-height: calc(2 * 25px); }
/* Ohjevaiheet: numero omalla rivillään, otsikko sen alla (Lars 20.10.). */
.v5-vaihe { grid-template-columns: 1fr; align-items: start; }
.v5-vaihe::before { justify-self: start; margin-bottom: var(--space-1, 4px); }
body .v5-lahjat .kv-vaiheet .v5-vaihe h3 { min-height: 0; display: block; }
@media (min-width: 1024px) { body .v5-lahjat .kv-vaiheet .v5-vaihe h3 { min-height: 48px; } }
.v5-vaihe { grid-template-rows: none; align-content: start; gap: var(--space-2); }
body .v5-lahjat .kv-vaiheet .v5-vaihe h3, body .v5-lahjat .kv-vaiheet .v5-vaihe h3:only-of-type { min-height: 0 !important; }
@media (min-width: 1100px) { body .v5-lk h3 { min-height: calc(3 * 25px); } }

/* Hinnaston kortti ikonimallilla (Lars 20.10.): hoitoryhmän ikoni ja nimi otsikkona, ei pilleriä. */
.v5-hinnasto .v5-hinta-ruudukko .v5-tekija > .v5-vk__ikoni { margin: var(--space-2) var(--space-2) var(--space-2); }
body .v5-hinnasto .v5-hinta-ruudukko .v5-tekija__ryhma { display: block; min-height: 0; margin: 0 var(--space-2) var(--space-4); padding: 0; border-radius: 0; background: none; font: 700 24px/30px var(--font-sans); letter-spacing: -0.01em; }
/* Hinnasto: ammattilainen hintataulukon alla ennen Varaa aika -painiketta (Lars 20.10.). */
.v5-hinta-ruudukko .v5-tekija .v5-tekija__paa { padding: var(--space-4) var(--space-2) 0; }
.v5-hinta-ruudukko .v5-tekija .v5-tekija__paneeli { margin-top: 0; }
/* Ammattilainen omassa vaaleassa laatikossaan samaan tapaan kuin hintataulukko (Lars 20.10.). */
.v5-hinta-ruudukko .v5-tekija .v5-tekija__paa { margin: var(--space-3) 0 0; padding: var(--space-4) var(--space-6); background: var(--kivi-vaalea); border-radius: var(--radius-lg); }
@media (max-width: 600px) { .v5-hinta-ruudukko .v5-tekija .v5-tekija__paa { padding-inline: var(--space-4); } }
/* Ammattilaisen laatikko hieman tummempi kuin hintataulukko (Lars 20.10.): sama sävy kuin Lisätietoja-nauhassa. */
.v5-hinta-ruudukko .v5-tekija .v5-tekija__paa { background: rgba(19, 38, 27, .07); }
/* Hinnaston ammattilaislaatikosta kasvokuva pois (Lars 20.10.). */
.v5-hinta-ruudukko .v5-tekija .v5-tekija__kuva { display: none; }
/* Hinnaston ammattilaisen nimi pienemmäksi (20.10.): kortin otsikko on hoitoryhmä, ammattilainen on tieto. */
body .v5-hinta-ruudukko .v5-tekija .v5-tekija__nimi { font: 600 17px/24px var(--font-sans); }
body .v5-hinta-ruudukko .v5-tekija .v5-tekija__titteli { font-size: 15px !important; line-height: 22px !important; }
/* Ammattilainen ennen hinnastoa (Lars 20.10.): laatikko otsikon alla, hintataulukko sen jälkeen. */
.v5-hinta-ruudukko .v5-tekija .v5-tekija__paa { margin: 0 0 var(--space-3); }
/* Ammattilaisen laatikko hieman vaaleammaksi (Lars 20.10.): --kivi #f2f3f0, yhä tummempi kuin hintataulukon #f7f8f5. */
.v5-hinta-ruudukko .v5-tekija .v5-tekija__paa { background: var(--kivi); }
.v5-hinta-ruudukko .v5-tekija .v5-tekija__paa { background: #f4f5f2; }
/* Ammattilaisen laatikko samaa sävyä kuin hintataulukko (Lars 20.10.). */
.v5-hinta-ruudukko .v5-tekija .v5-tekija__paa { background: var(--kivi-vaalea); }
/* Ammattilaisen laatikko melkein valkoiseksi (Lars 20.10.). */
.v5-hinta-ruudukko .v5-tekija .v5-tekija__paa { background: #fbfbfa; }
/* Hyppylinkeissä vain alareunan viiva hoverissa, ei tekstin alleviivausta (Lars 20.10.). */
main .v5-hypyt a:hover { text-decoration: none !important; border-bottom-color: var(--vihrea-700); }
/* Kokeilu (Lars 20.10.): ammattilaisen laatikko samalla vaaleanvihreällä kuin ikonilaatikko. */
.v5-hinta-ruudukko .v5-tekija .v5-tekija__paa { background: var(--vihrea-050); }
/* Kokeilu (Lars 20.10.): hintataulukko melkein valkoisella. */
.v5-tekija__paneeli { background: #fbfbfa; }
/* Painikkeisiin enemmän sisätilaa (Lars 20.10.): kaikki samankokoisia, 48 px korkeita; ikonilaatikko 32 px,
   pyöristys samankeskinen (16 − 8 = 8 px). Pieni-versio poistuu käytöstä. */
.v5-btn.v5-pilli, .v5-btn.v5-pilli.v5-btn--pieni { min-height: 48px; padding: 8px 8px 8px 20px; gap: var(--space-4); font-size: 15px; }
.v5-pilli__ikoni, .v5-btn--pieni .v5-pilli__ikoni { width: 32px; height: 32px; border-radius: 8px; }
/* Hinnasto (Lars 20.10.): hintataulukko suoraan valkoiseen korttiin ilman omaa taustaa, linjassa otsikon kanssa;
   ammattilaisen laatikko melkein valkoinen #fbfbfa. */
.v5-hinta-ruudukko .v5-tekija .v5-tekija__paneeli { background: transparent; padding: var(--space-2) var(--space-2) 0; }
.v5-hinta-ruudukko .v5-tekija .v5-tekija__paa { background: #fbfbfa; }
/* Ammattilaiskortin napin alle sama tila kuin kuvan yläpuolelle ja sivuille (Lars 20.10.). */
.v5-hlo .v5-hlo__ala { padding-bottom: 0 !important; margin-bottom: 0 !important; }

/* Ammattilaisen profiilisivu (luonnos 20.10.). */
.v5-pr__murupolku { padding-top: var(--space-8); }
.v5-pr { display: grid; gap: var(--space-6); margin-top: var(--space-4); padding: var(--space-4); background: var(--pohja); border-radius: var(--radius-lg); }
@media (min-width: 860px) { .v5-pr { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; } }
.v5-pr__kuva { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; background: var(--kivi); }
.v5-pr__kuva img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.v5-pr__teksti { padding: var(--space-4) var(--space-4) var(--space-6); }
body .v5-pr h1 { margin: 0; font: 700 clamp(36px, 4vw, 52px)/1.05 var(--font-sans); letter-spacing: -0.02em; color: var(--muste); }
body .v5-pr__titteli { margin: var(--space-3) 0 0; font-size: 17px; line-height: 26px; color: var(--muste); hyphens: manual; }
body .v5-pr__esittely { margin: var(--space-6) 0 0; padding-top: var(--space-6); border-top: 1px solid var(--viiva); max-width: 60ch; font-size: 18px; line-height: 29px; hyphens: manual; }
.v5-pr__toiminnot { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
@media (max-width: 600px) { .v5-pr__toiminnot { display: grid; } .v5-pr__toiminnot .v5-btn.v5-pilli { width: 100%; } }
.v5-pr__osa { padding-top: var(--space-12); }
.v5-pr__osa:last-child { padding-bottom: var(--space-16); }
body .v5-pr__osa > h2 { margin: 0; font: 700 clamp(28px, 3vw, 36px)/1.15 var(--font-sans); letter-spacing: -0.015em; }
.v5-pr__osa .v5-hinta-ruudukko, .v5-pr__osa .v5-rk2-ruudukko { padding-top: var(--space-6); padding-bottom: 0; }
body .v5-pr__osa .v5-tekija__ryhma { font: 700 24px/30px var(--font-sans); }
body .v5-pr__esittelyt .v5-pr__esittely + .v5-pr__esittely { margin-top: var(--space-4); padding-top: 0; border-top: 0; }
/* Hinnaston ammattilaislaatikko samalla sävyllä kuin Lahjakortit-sivun ohjevaiheet (Lars 20.10.). */
.v5-hinta-ruudukko .v5-tekija .v5-tekija__paa { background: var(--kivi-vaalea); }
/* Lisätietoja-nauha samalla sävyllä kuin ohjevaiheet ja ammattilaislaatikko (Lars 20.10.); hoverissa --kivi. */
.v5-rk2 .v5-rk2__paneeli .v5-rk2__lisa { background: var(--kivi-vaalea); }
.v5-rk2 .v5-rk2__lisa:has(summary:hover) { background: var(--kivi); }

/* Yhteystiedot korttikielellä (Lars 20.10.). */
.v5-yt2-ruudukko { display: grid; gap: var(--space-6); padding-block: var(--space-8) var(--space-16); }
@media (min-width: 860px) { .v5-yt2-ruudukko { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v5-yt2--levea { grid-column: 1 / -1; } }
.v5-yt2 { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--pohja); border-radius: var(--radius-lg); }
body .v5-yt2 h2 { margin: 0; font: 700 24px/30px var(--font-sans); letter-spacing: -0.01em; }
body .v5-yt2 p { margin: 0; font-size: 17px; line-height: 27px; max-width: 60ch; }
body .v5-yt2 .v5-yt2__osoite { font: 600 21px/30px var(--font-sans); }
.v5-yt2 .v5-rk2__ala { margin-top: auto; padding-top: var(--space-3); }
@media (max-width: 600px) { .v5-yt2 .v5-rk2__ala .v5-btn.v5-pilli { display: flex; width: 100%; } }
.v5-yt2__kuvat { display: grid; gap: var(--space-4); }
@media (min-width: 860px) { .v5-yt2__kuvat { grid-template-columns: 1fr 2fr; align-items: start; } }
.v5-yt2__kuva { margin: 0; }
.v5-yt2__kuva img { display: block; width: 100%; height: 220px; object-fit: cover; border-radius: var(--radius-lg); }
.v5-yt2__kuva--puuttuu > div { display: grid; place-items: center; height: 220px; border: 2px dashed var(--reuna); border-radius: var(--radius-lg); color: var(--harmaa-600); font-size: 15px; }
.v5-yt2__kuva figcaption { margin-top: var(--space-2); color: var(--harmaa-600); font-size: 14px; line-height: 20px; }
body .v5-yt2 p { hyphens: manual; }
.v5-yt2__kuvat--yksi { grid-template-columns: 1fr !important; }
.v5-yt2__kuvat--yksi .v5-yt2__kuva--puuttuu > div { height: 280px; }
/* Yhteystietojen aulahero: kuva oikean levyisenä (ei etusivun 150 % -rajausta), keskeltä. */
body:has(#yt-osoite) .v5-ksh .v5-kh__kuva img { position: static; width: 100%; max-width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
/* Mobiilin hintataulukko ei saa levitä (20.10.): pitkät yhdyssanat tavuttuvat vain, jos kummallekin puolelle jää
   vähintään 4 kirjainta; "alkaen" saa rivittyä hinnan yläpuolelle. */
@media (max-width: 600px) {
  .v5-hinta-ruudukko .v5-hinnat tbody th { hyphens: auto; hyphenate-limit-chars: 10 4 4; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; }
  .v5-hinta-ruudukko .v5-hinnat .v5-hinnat__hinta { white-space: normal; text-align: right; min-width: 3.5em; }
  .v5-hinta-ruudukko .v5-hinnat { table-layout: fixed; }
  .v5-hinta-ruudukko .v5-hinnat thead th:first-child, .v5-hinta-ruudukko .v5-hinnat tbody th { width: auto; }
  .v5-hinta-ruudukko .v5-hinnat .v5-hinnat__kesto { width: 4.6em; }
  .v5-hinta-ruudukko .v5-hinnat thead th:last-child, .v5-hinta-ruudukko .v5-hinnat .v5-hinnat__hinta { width: 4.4em; }
}
@media (max-width: 600px) {
  .v5-hinta-ruudukko .v5-hinnat thead th:last-child, .v5-hinta-ruudukko .v5-hinnat .v5-hinnat__hinta { width: 5.4em; overflow-wrap: normal; word-break: normal; }
  .v5-hinta-ruudukko .v5-hinnat .v5-hinnat__kesto { width: 4.4em; }
}
/* Lahjakortit mobiilissa (20.10.): kaksi palstaa, lyhyt painikenimi "Tilaa", nimi 17 px ilman tavutusta. */
@media (max-width: 520px) {
  .v5-lk__pitka { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .v5-lk { padding: var(--space-4) var(--space-3) var(--space-3); }
  .v5-lk > :not(.v5-rk2__ala) { margin-inline: var(--space-1, 4px); }
  body .v5-lk h3, body .v5-lahjat .v5-lk h3 { font-size: 17px; line-height: 23px; hyphens: manual; overflow-wrap: normal; min-height: calc(2 * 23px); }
  .v5-lk .v5-btn.v5-pilli { padding-left: 14px; }
  body .v5-lk .v5-lk__tiedot { font-size: 14px; }
}
@media (max-width: 520px) { body .v5-lk h3, body .v5-lahjat .v5-lk h3 { min-height: calc(3 * 23px); } }

/* Lahjakortin tilaus, kassa ja kiitos (luonnos 20.10.). */
.v5-tilaus { display: grid; gap: var(--space-6); margin: var(--space-4) 0 var(--space-16); padding: var(--space-4); background: var(--pohja); border-radius: var(--radius-lg); }
@media (min-width: 900px) { .v5-tilaus { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } }
.v5-tilaus__vasen { display: grid; gap: var(--space-6); }
.v5-lkk { position: relative; display: grid; align-content: start; gap: var(--space-1, 4px); aspect-ratio: 1.6; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--vihrea-500); color: var(--muste); overflow: hidden; }
.v5-lkk::after { content: ""; position: absolute; right: -15%; bottom: -35%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.v5-lkk__logo { width: 96px; height: auto; margin-bottom: var(--space-4); }
body .v5-lkk p { margin: 0; position: relative; z-index: 1; }
body .v5-lkk .v5-lkk__tyyppi { font: 600 14px/20px var(--font-sans); }
body .v5-lkk .v5-lkk__palvelu { font: 700 clamp(24px, 3vw, 32px)/1.15 var(--font-sans); letter-spacing: -0.01em; }
body .v5-lkk .v5-lkk__tiedot { display: flex; gap: var(--space-4); font: 600 16px/24px var(--font-sans); font-variant-numeric: tabular-nums; }
body .v5-lkk .v5-lkk__voimassa { margin-top: auto; padding-top: var(--space-4); font-size: 13px; }
.v5-tilaus__tiedot { display: grid; gap: var(--space-3); margin: 0; padding: var(--space-4) var(--space-2); list-style: none; }
.v5-tilaus__tiedot li { display: grid; grid-template-columns: 20px 1fr; column-gap: var(--space-3); font-size: 15px; line-height: 23px; }
.v5-tilaus__tiedot .v5-rk2__ikoni { margin-top: 2px; }
.v5-tilaus__lomake { display: grid; gap: var(--space-5, 20px); padding: var(--space-4) var(--space-4) var(--space-2); }
body .v5-tilaus h1, body .v5-kassa__otsikko { margin: 0; font: 700 clamp(30px, 3.4vw, 42px)/1.1 var(--font-sans); letter-spacing: -0.02em; }
body .v5-kassa__otsikko { margin: var(--space-4) 0 var(--space-6); }
body .v5-tilaus__hinta { display: flex; align-items: baseline; gap: var(--space-4); margin: calc(-1 * var(--space-2)) 0 0; padding-bottom: var(--space-4); border-bottom: 1px solid var(--viiva); color: var(--harmaa-600); font-size: 17px; }
.v5-tilaus__summa { color: var(--muste); font: 700 24px/30px var(--font-sans); }
.v5-kentta { display: grid; gap: 4px; }
.v5-kentta label { font: 600 16px/22px var(--font-sans); }
.v5-kentta__valinnainen { color: var(--harmaa-600); font-weight: 400; }
body .v5-kentta__apu { margin: 0; color: var(--harmaa-600); font-size: 14px; line-height: 20px; }
.v5-kentta input, .v5-kentta textarea { width: 100%; box-sizing: border-box; min-height: 48px; padding: 12px 14px; border: 1px solid var(--reuna); border-radius: var(--radius-md); background: var(--pohja); color: var(--muste); font: 400 16px/24px var(--font-sans); }
.v5-kentta textarea { min-height: 112px; resize: vertical; }
.v5-kentta input:focus-visible, .v5-kentta textarea:focus-visible { outline: 3px solid var(--fokus); outline-offset: 1px; border-color: var(--muste); }
.v5-tilaus__lomake .v5-rk2__ala .v5-btn.v5-pilli, .v5-kassa__lomake .v5-rk2__ala .v5-btn.v5-pilli { display: flex; width: 100%; }
.v5-kassa { display: grid; gap: var(--space-6); padding-bottom: var(--space-16); }
@media (min-width: 900px) { .v5-kassa { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.v5-kassa__lomake { gap: var(--space-5, 20px) !important; }
.v5-kentat-rinnakkain { display: grid; gap: var(--space-5, 20px); }
@media (min-width: 600px) { .v5-kentat-rinnakkain { grid-template-columns: 1fr 1fr; } }
.v5-kassa__yhteenveto .v5-lkk { aspect-ratio: auto; min-height: 180px; }
.v5-kassa__rivit { padding: 0 !important; background: none !important; }
.v5-kassa__heikko { color: var(--harmaa-600); font-size: 14px; }
body .v5-kassa__huom { color: var(--harmaa-600); font-size: 14px !important; line-height: 21px !important; }
.v5-kiitos { max-width: 720px; margin: var(--space-12) auto var(--space-16); padding: var(--space-8) !important; }
.v5-kiitos__ikoni { width: 56px; height: 56px; }
body .v5-kiitos h1 { margin: 0; font: 700 clamp(30px, 3.4vw, 40px)/1.1 var(--font-sans); }
.v5-kiitos__vaiheet { margin: 0; padding-left: 1.3em; font-size: 17px; line-height: 27px; }
.v5-kiitos__toiminnot { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.v5-taydennetaan-teksti { color: #b42318; }

/* Uutisen sivu, 404 ja tietosuojaseloste (20.10.): valkoinen kortti sivupohjalla, leipäteksti lukuleveydessä. */
.v5-art { display: flex; flex-direction: column; gap: var(--space-6); margin-bottom: var(--space-16); padding: clamp(var(--space-6), 4vw, var(--space-12)); background: var(--valkoinen); border-radius: var(--radius-lg); }
.v5-art__paa, .v5-art__kuva, .v5-art__runko, .v5-art__toiminnot { width: 100%; max-width: 68ch; margin-inline: auto; }
.v5-art__paa { display: flex; flex-direction: column; gap: var(--space-3); }
body .v5-art h1 { margin: 0; font: 700 clamp(30px, 4vw, 48px)/1.1 var(--font-sans); letter-spacing: -0.02em; text-wrap: balance; }
body .v5-art .v5-art__pvm { margin: 0; font-size: 14px; line-height: 20px; color: var(--harmaa-600); }
body .v5-art .v5-art__ingressi { margin: 0; font-size: 21px; line-height: 32px; color: var(--harmaa-700, #3d3d3d); }
.v5-art__kuva { margin-block: 0; }
.v5-art__kuva img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; border-radius: var(--radius-md, 12px); }
.v5-art__kuva figcaption { margin-top: var(--space-2); font-size: 14px; line-height: 20px; color: var(--harmaa-600); }
body .v5-art__runko > * { margin: 0 0 var(--space-4); }
body .v5-art__runko > :last-child { margin-bottom: 0; }
body .v5-art__runko p, body .v5-art__runko li { font-size: 17px; line-height: 28px; }
body .v5-art__runko h2 { margin: var(--space-8) 0 var(--space-3); font: 700 24px/30px var(--font-sans); letter-spacing: -0.01em; }
body .v5-art__runko ul { padding-left: 1.3em; }
body .v5-art__runko li + li { margin-top: var(--space-1, 4px); }
body .v5-art__runko a { color: var(--vihrea-700); text-decoration: underline; text-underline-offset: 3px; }
body .v5-art__runko blockquote { padding-left: var(--space-5, 20px); border-left: 3px solid var(--vihrea-500); }
body .v5-art__runko blockquote p { font-size: 19px; line-height: 30px; }
.v5-art__toiminnot { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-6); border-top: 1px solid var(--reuna); }
.v5-art--seloste .v5-art__runko > h2:first-child { margin-top: 0; }
.v5-404__linkit { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.v5-404__linkit a { font-size: 17px; line-height: 27px; color: var(--vihrea-700); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) { .v5-art__toiminnot .v5-btn, .v5-kiitos__toiminnot .v5-btn { display: flex; width: 100%; } }

/* =====================================================================
   WordPress- ja Breakdance-sovitukset (toteutus 20.10.2026)
   ===================================================================== */
/* Breakdancen kääreet eivät saa rajata leveyttä eivätkä lisätä välejä: v5-leveys hoitaa sisällön levyn. */
.bde-code-block:has(> .v5-yla, > .v5-taulu, > .v5-kb, > .v5-leveys, > .v5-sisalto, > .v5-osa),
.bde-code-block:has(.v5-yla, .v5-taulu) { display: block; width: 100%; max-width: none; margin: 0; padding: 0; }
.kv-root #bde-main { background: var(--sivupohja); }
/* Ylätunniste pysyy sivun yläreunassa myös Breakdancen header-kääreen sisällä. */
.bde-code-block:has(.v5-yla) { position: sticky; top: 0; z-index: 20; }
.bde-code-block:has(.v5-yla) .v5-yla { position: static; }
/* Gutenberg-sisältö sivun leveydellä; lyhytkoodit tuovat oman v5-leveys-kääreensä. */
.v5-sisalto > :not(.v5-leveys):not(.v5-hypyt):not(.v5-taysi) { box-sizing: border-box; max-width: var(--max-sisalto); margin-inline: auto; padding-inline: var(--v5-gutter); }
.v5-sisalto > .v5-leveys:last-child, .v5-sisalto > :last-child { margin-bottom: var(--space-16); }
.v5-sisalto > p, .v5-sisalto > h2, .v5-sisalto > h3, .v5-sisalto > ul, .v5-sisalto > ol { max-width: calc(68ch + 2 * var(--v5-gutter)); margin-inline: auto; }
.v5-sisalto .wp-block-group.is-layout-flow > * { margin-block: 0; }
/* Valmennuskortit Gutenbergin ryhmälohkoina: lohkon omat välit pois, kortin oma rytmi. */
.v5-vk-ruudukko.wp-block-group, .v5-vk.wp-block-group { margin-block-start: 0; }
.v5-vk.wp-block-group > * + * { margin-block-start: 0; }
/* Tekstisivun (esim. tietosuojaseloste) Gutenberg-sisältö samoin kuin uutisessa. */
.v5-art__runko > .wp-block-heading { margin: var(--space-8) 0 var(--space-3); }
/* WooCommerce: tilaussivun lomake-elementit samaan tyyliin kuin luonnoksen kentät. */
.v5-tilaus__lomake form.cart { display: flex; flex-direction: column; gap: var(--space-5, 20px); margin: 0; }
.v5-tilaus__lomake .quantity { display: none; }
/* Kaikki Code Blockit, joissa on v50-tuloste, ovat tavallisia lohkoja koko leveydellä. */
.kv-root .bde-code-block { display: block; width: 100%; }
/* Kassa: kentät allekkain kuten luonnoksessa; WooCommercen omat kenttätyylit pois. */
.v5-kassa__kentat { display: flex; flex-direction: column; gap: var(--space-5, 20px); }
.v5-kassa .v5-kentta.form-row { float: none; width: auto; margin: 0; padding: 0; }
/* Gutenberg-editori: valmennuskortit ja lahjakortin vaiheet ruudukkona, jotta Kaisu näkee saman rakenteen kuin sivulla. */
.editor-styles-wrapper .v5-vk-ruudukko { display: block; }
.editor-styles-wrapper .v5-vk-ruudukko > .wp-block-group__inner-container, .editor-styles-wrapper .v5-vk-ruudukko > .block-editor-inner-blocks > .block-editor-block-list__layout { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-6); }
.editor-styles-wrapper .v5-vk { padding: var(--space-6); background: var(--valkoinen); border: 1px solid var(--viiva); border-radius: var(--radius-lg); }
/* Lomakkeen lähetyspainike (button) samaksi kuin linkkipillit: Breakdancen WooCommerce-tyylit ohitetaan. */
.kv-root button.v5-btn.v5-pilli { justify-content: space-between !important; min-height: var(--kosketus-min); padding: 8px 8px 8px 20px !important; border: 0 !important; border-radius: var(--radius-lg) !important; background: var(--vihrea-500) !important; color: var(--muste) !important; font: 600 15px/20px var(--font-sans) !important; letter-spacing: normal !important; text-transform: none !important; cursor: pointer; box-shadow: none !important; }
.kv-root button.v5-btn.v5-pilli:hover { background: var(--vihrea-800) !important; color: var(--valkoinen) !important; }
.kv-root button.v5-btn.v5-pilli:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
/* Uutisarkiston sivutus. */
.v5-sivutus { margin: var(--space-8) 0 var(--space-16); }
.v5-sivutus ul { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.v5-sivutus a, .v5-sivutus span.current { display: inline-flex; align-items: center; justify-content: center; min-width: var(--kosketus-min); min-height: var(--kosketus-min); padding: 0 var(--space-3); border-radius: var(--radius-lg); background: var(--valkoinen); color: var(--muste); font-weight: 600; text-decoration: none; }
.v5-sivutus span.current { background: var(--muste); color: var(--valkoinen); }
.v5-sivutus a:hover { background: var(--vihrea-050); }
.v5-osa--arkisto .v5-tyhja, .v5-leveys > .v5-tyhja { margin-bottom: var(--space-16); }
/* Lahjakortin keston valinta (yksi kortti, useampi kesto). */
.v5-kesto { margin: 0; padding: 0; border: 0; }
.v5-kesto legend { margin-bottom: var(--space-2); padding: 0; font: 600 15px/20px var(--font-sans); }
.v5-kesto__vaihdot { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-2); }
.v5-kesto__vaihto { position: relative; display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); border: 2px solid var(--viiva); border-radius: var(--radius-lg); background: var(--valkoinen); cursor: pointer; }
.v5-kesto__vaihto input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.v5-kesto__aika { font: 600 17px/24px var(--font-sans); }
.v5-kesto__hinta { color: var(--harmaa-600); font-size: 15px; line-height: 20px; font-variant-numeric: tabular-nums; }
.v5-kesto__vaihto:has(input:checked) { border-color: var(--vihrea-700); background: var(--kivi-vaalea); }
.v5-kesto__vaihto:has(input:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 2px; }

.editor-styles-wrapper .v5-vk-ruudukko > .wp-block-group__inner-container > * { margin: 0 !important; }