/*
 * TYÖNJAKO BREAKDANCEN KANSSA (ks. ohjeet/10-wordpress-breakdance.md, kohta Periaate)
 * - Tämä tiedosto: lyhytkoodien markup (.kp-nav*, .kp-alanavi*, .kp-footer*, .kp-osion-sivut),
 *   Gutenberg-sisältö (.kp-sisalto, .editor-styles-wrapper, .is-style-*) ja saavutettavuussäännöt.
 * - REFERENSSI (toteutetaan Breakdancen Selectors-luokkina ja poistetaan täältä, kun valmis):
 *   Header rivi 1 ja painikkeet (.kp-header__*, .kp-haku-nappi, .kp-valikko-nappi, .kp-hakupaneeli),
 *   sivupohjien rakenneosat (.kp-hero, .kp-osio, .kp-kontti, .kp-kortti, .kp-pikalinkki, .kp-tapahtuma,
 *   .kp-laatta, .kp-cta, .kp-henkilo, .kp-murupolku, .kp-sisasivu, .kp-yhteystieto, .kp-taulukko).
 * - :root-muuttujat kytketään Breakdancen Variables-muuttujiin varmistusarvolla:
 *     --kp-oranssi: var(<Breakdancen muuttujan CSS-nimi>, #ea6620);
 *   Nimen muoto selvitetään Breakdancen Variables-paneelin Copy CSS name -toiminnolla.
 */

/*
 * Kankaanpää – sivuston perustyylit (Gutenberg-sisältö + header/footer-referenssi)
 * Lähde: design system "Kankaanpää" (tokens.json). Ladataan etusivulla ja lohkoeditorissa
 * (ks. kankaanpaa-editor.php). Ei riipu theme.jsonin muuttujista, jotta toimii myös
 * Breakdancen sivupohjissa.
 */

:root {
  /* Värit */
  --kp-oranssi: #ea6620;
  --kp-ruskea: #88370d;
  --kp-vihrea: #91c848;
  --kp-vihrea-tumma: #74a03a;            /* johdettu (vihreä + 20 % mustaa), vain viivoihin: 3,07:1 valkoisella */
  --kp-oranssi-20: #fbe0d2;
  --kp-oranssi-10: #fdf0e9;
  --kp-ruskea-10: #f3ebe7;
  --kp-vihrea-60: #bdde91;
  --kp-vihrea-20: #e9f4da;
  --kp-vihrea-10: #f4faed;
  --kp-musta: #000000;
  --kp-valkoinen: #ffffff;

  /* Sivustokohtaiset roolit (oletus: kaupunki). Ks. [data-sivusto] alempana. */
  --kp-paa: var(--kp-oranssi);            /* pääväri: painikkeet, korostuspinnat */
  --kp-paa-teksti: var(--kp-musta);       /* teksti pääväripinnalla */
  --kp-paa-hover: var(--kp-ruskea);
  --kp-paa-hover-teksti: var(--kp-valkoinen);
  --kp-otsikko: var(--kp-oranssi);        /* H1 */
  --kp-merkki: var(--kp-oranssi);         /* korostusviiva: nykyinen osio, avoin paneeli, hover (sivuston pääväri) */
  --kp-savy: var(--kp-oranssi-10);        /* vaalea sävypinta */
  --kp-savy-2: var(--kp-oranssi-20);
  --kp-haara: #f7c2a6;                    /* oranssi-40: osion valikon haaraviiva */

  /* Kirjasinperheet */
  --kp-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --kp-serif: "Adobe Garamond Pro", Garamond, Georgia, serif;

  /* Verkon tekstikoot (min–max, 360–1280 px näkymä) */
  --kp-fs-kainalo: clamp(15px, 14.61px + 0.109vw, 16px);
  --kp-fs-leipa: clamp(18px, 17.22px + 0.217vw, 20px);
  --kp-fs-ingressi: clamp(20px, 18.43px + 0.435vw, 24px);
  --kp-fs-h3: clamp(20px, 18.43px + 0.435vw, 24px);
  --kp-fs-h2: clamp(26px, 22.87px + 0.87vw, 34px);
  --kp-fs-h1: clamp(32px, 24px + 2.2vw, 48px);           /* palvelusivun H1: 32 → 48 px */
  --kp-fs-nosto: clamp(34px, 19.13px + 4.13vw, 72px);

  /* Välit */
  --kp-space-1: 4px;
  --kp-space-2: 8px;
  --kp-space-3: 16px;
  --kp-space-4: 24px;
  --kp-space-5: 32px;
  --kp-space-6: 48px;
  --kp-space-7: 64px;
  --kp-space-8: 96px;

  /* Pyöristykset */
  --kp-radius-0: 0;
  --kp-radius-sm: 4px;
  --kp-radius-md: 8px;
  --kp-radius-lg: 16px;

  /* Pintaroolit: sama sisältö voi muodostaa eri painoisia kokonaisuuksia
     ilman uusia värejä. Arvot ovat design systemin olemassa olevia tokeneita. */
  --kp-sivu-pohja: var(--kp-valkoinen);
  --kp-pinta: var(--kp-valkoinen);
  --kp-pinta-korostettu: var(--kp-savy);
  --kp-reuna: var(--kp-ruskea-10);

  /* Asettelu */
  --kp-content: 720px;
  --kp-wide: 1200px;
  --kp-gutter: 16px;

  /* Graafinen elementti 1 : 1 : 2 */
  --kp-varipalkki: linear-gradient(90deg,
      var(--kp-oranssi) 0 25%,
      var(--kp-ruskea) 25% 50%,
      var(--kp-vihrea) 50% 100%);
}

@media (min-width: 768px) {
  :root { --kp-gutter: 32px; }
}

/* Sivustoteemat. WordPressissä <html data-sivusto="…"> (kankaanpaa-editor.php),
   design systemin esikatseluissa myös [data-theme="…"]. */
[data-sivusto="business"], [data-theme="business"] {
  --kp-paa: var(--kp-ruskea);
  --kp-paa-teksti: var(--kp-valkoinen);
  --kp-paa-hover: var(--kp-musta);
  --kp-paa-hover-teksti: var(--kp-valkoinen);
  --kp-otsikko: var(--kp-ruskea);
  --kp-merkki: var(--kp-ruskea);
  --kp-savy: var(--kp-ruskea-10);
  --kp-savy-2: #e7d7cf;             /* ruskea-20 */
  --kp-haara: #cfaf9e;              /* ruskea-40 */
}
[data-sivusto="visit"], [data-theme="visit"] {
  --kp-paa: var(--kp-vihrea);
  --kp-paa-teksti: var(--kp-musta);
  --kp-paa-hover: var(--kp-ruskea);
  --kp-paa-hover-teksti: var(--kp-valkoinen);
  --kp-otsikko: var(--kp-musta);          /* vihreä ei käy tekstiksi valkoisella (1,99:1) */
  --kp-merkki: var(--kp-vihrea-tumma);    /* 3,07:1 valkoisella (vihreä olisi 1,99:1) */
  --kp-savy: var(--kp-vihrea-10);
  --kp-savy-2: var(--kp-vihrea-20);
  --kp-haara: var(--kp-vihrea-60);
}
/* data-sivusto="kaupunki" ja "koulu" käyttävät oletuksia. */

/* ---------- Sisältöalue: Breakdancen Post Content -elementti saa luokan .kp-sisalto ---------- */

.kp-sisalto,
.editor-styles-wrapper {
  font-family: var(--kp-sans);
  font-size: var(--kp-fs-leipa);
  line-height: 1.55;
  color: var(--kp-musta);
}

.kp-sisalto :where(h1, h2, h3, h4, h5, h6),
.editor-styles-wrapper :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--kp-sans);
  font-weight: 700;
  color: var(--kp-musta);
  margin: 1.6em 0 0.5em;
}
.kp-sisalto h1, .editor-styles-wrapper h1 { font-size: var(--kp-fs-h1); line-height: 1.12; letter-spacing: -0.01em; color: var(--kp-otsikko); text-wrap: balance; }
.kp-sisalto h2, .editor-styles-wrapper h2 {
  font-size: var(--kp-fs-h2);
  line-height: 1.2;
  margin: var(--kp-space-6) 0 var(--kp-space-3);
}
.kp-sisalto h3, .editor-styles-wrapper h3 {
  font-size: var(--kp-fs-h3);
  line-height: 1.25;
  margin: var(--kp-space-5) 0 var(--kp-space-2);
}
@media (max-width: 767px) {
  .kp-sisalto h2, .editor-styles-wrapper h2 { margin-top: var(--kp-space-5); }
  .kp-sisalto h3, .editor-styles-wrapper h3 { margin-top: var(--kp-space-4); }
}
.kp-sisalto :where(h4, h5, h6), .editor-styles-wrapper :where(h4, h5, h6) { font-size: var(--kp-fs-leipa); line-height: 1.3; }
/* Alisivun sivupohjan H1 tulee Breakdance-elementistä, jonka oletusmarginaali on 0.
   Säilytetään otsikon ja ingressin välissä sama pystyrhythmityksen väli kuin muualla. */
.kp-sisalto > h1 { margin-bottom: var(--kp-space-4) !important; }
@media (max-width: 767px) { .kp-sisalto > h1 { margin-bottom: var(--kp-space-3) !important; } }

.kp-sisalto a:where(:not([class])), .editor-styles-wrapper a:where(:not([class])) {
  color: var(--kp-ruskea);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.kp-sisalto a:where(:not([class])):hover, .editor-styles-wrapper a:where(:not([class])):hover { color: var(--kp-musta); }

:where(.kp-sisalto, .kp-header, .kp-footer, .wp-block-button) :focus-visible {
  outline: 2px solid var(--kp-musta);
  outline-offset: 2px;
}

.kp-sisalto img, .editor-styles-wrapper img { border-radius: var(--kp-radius-md); }

/* ---------- Lohkotyylit (register_block_style) ---------- */

/* Kappale: Ingressi */
.is-style-ingressi {
  font-family: var(--kp-sans);
  font-weight: 300;
  font-size: var(--kp-fs-ingressi);
  line-height: 1.4;
  max-width: 60ch;
}

/* Kappale: Vinjetti (otsikon yläpuolelle) */
.is-style-vinjetti {
  font-family: var(--kp-sans);
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  text-transform: uppercase;
  margin-bottom: 0;
}
.is-style-vinjetti + :is(h1, h2, h3) { margin-top: var(--kp-space-1); }

/* Ryhmä: Nostolaatikko (vihreä kainalo) */
.wp-block-group.is-style-nostolaatikko {
  background: var(--kp-vihrea);
  color: var(--kp-musta);
  border-radius: var(--kp-radius-md);
  padding: var(--kp-space-5);
  font-family: var(--kp-sans);
  font-size: var(--kp-fs-kainalo);
  line-height: 1.5;
}
.wp-block-group.is-style-nostolaatikko :is(h2, h3) {
  font-size: clamp(20px, 18.43px + 0.435vw, 24px);
  line-height: 1.25;
  color: var(--kp-musta);
  margin-top: 0;
}
.wp-block-group.is-style-nostolaatikko a { color: var(--kp-musta); }

/* Ryhmä: Vaalea sävypinta */
.wp-block-group.is-style-savy {
  background: var(--kp-savy);
  color: var(--kp-musta);
  border-radius: var(--kp-radius-md);
  padding: var(--kp-space-5);
}

/* Erotin: Väripalkki (graafinen elementti, aina suorakulmainen) */
.wp-block-separator.is-style-varipalkki {
  border: 0;
  height: 8px;
  max-width: 480px;
  margin: var(--kp-space-6) 0;
  background: var(--kp-varipalkki);
  border-radius: var(--kp-radius-0);
  opacity: 1;
}

/* Sitaatti: Nosto */
.wp-block-quote.is-style-nosto {
  border: 0;
  padding: 0;
  margin: var(--kp-space-6) 0;
  font-family: var(--kp-serif);
  font-weight: 700;
  font-size: var(--kp-fs-h2);
  line-height: 1.2;
  color: var(--kp-ruskea);
}
.wp-block-quote.is-style-nosto cite {
  display: block;
  margin-top: var(--kp-space-3);
  font-family: var(--kp-sans);
  font-weight: 400;
  font-style: normal;
  font-size: var(--kp-fs-kainalo);
  color: var(--kp-musta);
}

/* Painikkeet: oletus = ensisijainen, is-style-toissijainen = toissijainen */
.wp-block-button__link,
.kp-painike {
  display: inline-block;
  font-family: var(--kp-sans);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  padding: 12px 24px;
  border-radius: var(--kp-radius-sm);
  border: 2px solid var(--kp-paa);
  background: var(--kp-paa);
  color: var(--kp-paa-teksti);
  text-decoration: none;
}
.wp-block-button__link:hover,
.kp-painike:hover {
  background: var(--kp-paa-hover);
  border-color: var(--kp-paa-hover);
  color: var(--kp-paa-hover-teksti);
}
.wp-block-button.is-style-toissijainen .wp-block-button__link,
.kp-painike--toissijainen {
  background: transparent;
  border-color: var(--kp-ruskea);
  color: var(--kp-ruskea);
}
.wp-block-button.is-style-toissijainen .wp-block-button__link:hover,
.kp-painike--toissijainen:hover {
  background: var(--kp-ruskea);
  color: var(--kp-valkoinen);
}

/* ---------- Header (referenssitoteutus Breakdancen Header Builderille) ----------
   Rivi 1 (.kp-header__sisus): tunnus (+ sivustotunniste) | työkalut (oikopolut, kielet, haku, Valikko).
   Rivi 2 (.kp-header__navirivi): päänavigaatio koko leveydellä (≥ 1024 px). */

.kp-header {
  background: var(--kp-valkoinen);
  font-family: var(--kp-sans);
  position: relative;
  border-bottom: 1px solid var(--kp-ruskea-10);
}
.kp-header::before { content: ""; display: block; height: 6px; background: var(--kp-varipalkki); }
.kp-header__sisus {
  max-width: var(--kp-wide);
  margin: 0 auto;
  padding: 0 var(--kp-gutter);
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kp-space-4);
}
.kp-header__brandi { display: flex; align-items: center; gap: var(--kp-space-3); text-decoration: none; color: var(--kp-musta); }
.kp-header__logo img, .kp-header__brandi img { height: 36px; width: auto; display: block; border-radius: 0; }
/* Sivustotunniste tunnuksen vieressä (koulut; Business/Visit kunnes viralliset tunnukset ovat vektoreina).
   Erillinen elementti, ei osa tunnusta: väli ≥ suoja-alue. */
.kp-header__sivusto {
  border-left: 2px solid var(--kp-musta);
  padding-left: var(--kp-space-3);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  color: var(--kp-musta);
}
/* Visit käyttää omaa, kokonaista Visit Kankaanpää -tunnustaan. */
[data-sivusto="visit"] .kp-header__sivusto { display: none; }
.kp-header__tyokalut { display: flex; align-items: center; gap: var(--kp-space-4); font-size: 15px; line-height: 20px; }
.kp-header__tyokalut a { color: var(--kp-musta); text-decoration: none; font-weight: 700; }
.kp-header__tyokalut a:hover { text-decoration: underline; }
.kp-kielet { display: flex; gap: var(--kp-space-2); }
.kp-kielet a[aria-current="true"] { text-decoration: underline; text-decoration-color: var(--kp-merkki); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.kp-haku-nappi {
  display: inline-flex; align-items: center; gap: var(--kp-space-2); white-space: nowrap;
  min-height: 44px; padding: 0 var(--kp-space-3);
  font: 700 16px/24px var(--kp-sans);
  color: var(--kp-paa-teksti); background: var(--kp-paa);
  border: 0; border-radius: var(--kp-radius-sm);
}
/* Päävalikon oma, footeria vaaleampi vihreä pinta erottaa navigoinnin
   headerin valkoisesta brändirivistä ilman että mustan tekstin kontrasti heikkenee. */
.kp-header__navirivi {
  border-top: 1px solid var(--kp-ruskea-10);
  background: var(--kp-vihrea-20);
}
/* Visit: päävalikkorivi on muuta sivustoperhettä kevyempi. Musta teksti säilyttää
   vahvan kontrastin, ja valittu/hover-tila käyttää edelleen tummempaa korostusviivaa. */
[data-sivusto="visit"] .kp-header__navirivi { background: var(--kp-vihrea-10); }
html[data-sivusto="visit"] body:not(.page-id-86) .kp-header { border-bottom: 0; }
html[data-sivusto="visit"] body:not(.page-id-86) .kp-header__navirivi { border-top: 0; }
.kp-header__navirivi .kp-nav { max-width: var(--kp-wide); margin: 0 auto; padding: 0 var(--kp-gutter); }
.kp-nav { display: flex; flex-wrap: wrap; column-gap: var(--kp-space-5); list-style: none; margin: 0; padding: 0; }
.kp-nav a {
  display: block;
  padding: var(--kp-space-3) 0 13px;
  font-weight: 700;
  font-size: 15px;
  line-height: 24px;
  color: var(--kp-musta);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.kp-nav a:hover, .kp-nav a[aria-current="page"] { border-bottom-color: var(--kp-merkki); }
/* Monta pitkää pääosiota (kaupunki): tasataan koko leveydelle */
@media (min-width: 1024px) { .kp-nav--tasaa { justify-content: space-between; column-gap: var(--kp-space-3); } }
@media (min-width: 1024px) {
  .kp-header__sisus { min-height: 88px; }
  .kp-header__logo img, .kp-header__brandi img { height: 48px; }
  .kp-header__sivusto { font-size: 22px; line-height: 28px; }
}

/* ---------- Footer ---------- */

.kp-footer { font-family: var(--kp-sans); color: var(--kp-musta); background: var(--kp-savy); } /* pääosa sivuston vaalealla sävyllä, alapalkki päävärillä */
.kp-footer::before { content: ""; display: block; height: 8px; background: var(--kp-varipalkki); }
.kp-footer__sisus {
  max-width: var(--kp-wide);
  margin: 0 auto;
  padding: var(--kp-space-7) var(--kp-gutter) var(--kp-space-6);
  display: grid;
  gap: var(--kp-space-5);
  grid-template-columns: 1fr;
  font-size: var(--kp-fs-kainalo);
  line-height: 1.5;
}
@media (min-width: 768px) { .kp-footer__sisus { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.kp-footer h2 { font-size: 16px; line-height: 24px; font-weight: 700; margin: 0 0 var(--kp-space-2); }
.kp-footer a { color: var(--kp-ruskea); }
.kp-footer a:hover,
.kp-footer a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}
.kp-footer__logo img { height: 40px; width: auto; display: block; }
.kp-footer address { font-style: normal; }
.kp-footer__lista { list-style: none; margin: 0; padding: 0; }
.kp-footer__lista li { padding: 2px 0; }
.kp-footer__slogan { font-weight: 700; margin: var(--kp-space-3) 0 0; }
.kp-footer__ala {
  /* Sivuston pääväri: kaupunki ja koulut oranssi + musta teksti, Business ruskea + valkoinen, Visit vihreä + musta */
  background: var(--kp-paa);
  color: var(--kp-paa-teksti);
  font-size: 14px;
  line-height: 20px;
}
.kp-footer__ala-sisus {
  max-width: var(--kp-wide);
  margin: 0 auto;
  padding: var(--kp-space-3) var(--kp-gutter);
  display: flex;
  flex-wrap: wrap;
  gap: var(--kp-space-4);
}
.kp-footer__ala a { color: var(--kp-paa-teksti); }

/* Linkit täysvärisillä taustoilla: ruskea ei erotu oranssilla eikä vihreällä */
:is(.has-oranssi-background-color, .has-vihrea-background-color) a { color: var(--kp-musta); }

/* Header: mobiilivalikko (< 1024 px). Painike: <button class="kp-valikko-nappi" aria-expanded="false" aria-controls="kp-nav">Valikko</button> */
.kp-valikko-nappi {
  display: none;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--kp-space-3);
  font: 700 16px/24px var(--kp-sans);
  color: var(--kp-musta);
  background: transparent;
  border: 2px solid var(--kp-musta);
  border-radius: var(--kp-radius-sm);
}
.kp-navi-lisat { display: none; }
@media (max-width: 1023px) {
  .kp-navi-lisat { display: flex; flex-wrap: wrap; gap: var(--kp-space-4); max-width: var(--kp-wide); margin: 0 auto; padding: var(--kp-space-3) var(--kp-gutter) var(--kp-space-5); border-top: 1px solid var(--kp-ruskea-10); }
  .kp-navi-lisat a { font: 700 16px/24px var(--kp-sans); color: var(--kp-musta); }
  .kp-valikko-nappi { display: inline-flex; align-items: center; gap: var(--kp-space-2); }
  .kp-header__tyokalut .kp-oikopolut, .kp-header__tyokalut .kp-kielet { display: none; }
  .kp-header__navirivi { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--kp-valkoinen); z-index: 50; border-top: 0; }
  .kp-header__navirivi::before { content: ""; display: block; height: 6px; background: var(--kp-varipalkki); }
  .kp-header.is-open .kp-header__navirivi { display: block; }
  .kp-nav { flex-direction: column; gap: 0; padding-bottom: var(--kp-space-4); }
  .kp-nav li + li { border-top: 1px solid var(--kp-ruskea-10); }
  .kp-nav a { font-size: 20px; line-height: 28px; border-bottom: 0; }
  .kp-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--kp-merkki); text-decoration-thickness: 3px; }
}

.kp-skip {
  position: absolute; left: var(--kp-space-3); top: -100px;
  padding: var(--kp-space-2) var(--kp-space-3);
  background: var(--kp-valkoinen); color: var(--kp-musta);
  font: 700 16px/24px var(--kp-sans);
  z-index: 100;
}
.kp-skip:focus { top: var(--kp-space-3); }

/* ---------- Sivupohjien rakenneosat (Breakdance-sivupohjat) ---------- */

.kp-sivu { font-family: var(--kp-sans); color: var(--kp-musta); background: var(--kp-valkoinen); }
.kp-kontti { max-width: var(--kp-wide); margin: 0 auto; padding: 0 var(--kp-gutter); }
.kp-osio { padding: var(--kp-space-7) 0; }
.kp-osio--savy { background: var(--kp-savy); }
@media (min-width: 1024px) { .kp-osio { padding: var(--kp-space-8) 0; } }
.kp-osio__otsikko { display: flex; align-items: baseline; justify-content: space-between; gap: var(--kp-space-4); margin-bottom: var(--kp-space-5); }
.kp-osio__otsikko h2 { font-size: var(--kp-fs-h2); line-height: 1.2; margin: 0; }
.kp-osio__otsikko a { font-weight: 700; color: var(--kp-musta); }
/* Etusivun Gutenberg-osioiden toimintolinkit ovat käyttöliittymälinkkejä,
 * joten ne käyttävät otsikoiden tavoin sans-fonttia, eivät sisältötekstin serif-fonttia. */
.kp-osio__toimintolinkki,
.kp-osio__toimintolinkki a {
  font-family: var(--kp-sans);
}

/* Kuvapaikka (korvataan aidolla valokuvalla) */
.kp-kuva {
  position: relative;
  background: var(--kp-savy-2);
  border-radius: var(--kp-radius-md);
  aspect-ratio: 16 / 9;
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.kp-kuva::after {
  content: attr(data-kuva);
  font: 400 13px/18px var(--kp-sans);
  color: var(--kp-musta);
  background: var(--kp-valkoinen);
  padding: 2px 8px;
  margin: var(--kp-space-3);
  border-radius: var(--kp-radius-sm);
}
.kp-kuva--laaja { aspect-ratio: 21 / 9; }
.kp-kuva--nelio { aspect-ratio: 4 / 3; }
.kp-kuva--muotokuva { aspect-ratio: 1; }

/* Fiiliskuva: sivun artikkelikuva. Mu-plugin lisää sen sisältöön ingressin jälkeen (kaikki sivustot,
   sisäsivut ja osioiden etusivut). Asia tulee ensin, kuva tukee. Valinnainen, ei tekstiä kuvan päällä. */
.kp-fiilis { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--kp-radius-md); overflow: hidden; margin: 0 0 var(--kp-space-6); }
img.kp-fiilis, .kp-fiilis img { display: block; width: 100%; height: 100%; object-fit: cover; }
img.kp-fiilis { height: auto; }

/* Hero */
.kp-hero { padding: var(--kp-space-6) 0 0; }
.kp-hero__ruudukko { display: grid; gap: var(--kp-space-5); align-items: center; }
@media (min-width: 1024px) { .kp-hero__ruudukko { grid-template-columns: 5fr 6fr; gap: var(--kp-space-6); } }
.kp-hero h1 {
  font-family: var(--kp-serif);
  font-weight: 700;
  font-size: var(--kp-fs-nosto);
  line-height: 1.05;
  color: var(--kp-musta);
  margin: var(--kp-space-2) 0 var(--kp-space-4);
}
.kp-hero__palkki { height: 8px; background: var(--kp-varipalkki); margin-top: var(--kp-space-6); }
/* Täysvärinen hero-paneeli (Business) */
.kp-hero__paneeli {
  background: var(--kp-paa);
  color: var(--kp-paa-teksti);
  border-radius: var(--kp-radius-md);
  padding: var(--kp-space-6) var(--kp-space-5);
}
.kp-hero__paneeli h1, .kp-hero__paneeli .kp-vinjetti, .kp-hero__paneeli .kp-ingressi { color: var(--kp-paa-teksti); }
/* Kuvahero (Visit, Business; hyväksytty 26.9.2026, versio A1):
   artikkelikuva koko leveydellä, valkoinen kortti kuvan päällä vasemmassa alakulmassa,
   kortin vasemmassa reunassa 8 px sivuston pääväri. Teksti on aina valkoisella pohjalla,
   ei suoraan kuvan päällä. Kuva ja kortti ovat samassa grid-solussa: jos otsikko on pitkä,
   hero kasvaa eikä kortti valu kuvan yli. Toimii sekä rakenteella
   section > .kp-kuva + .kp-hero__kortti + .kp-hero__palkki (Breakdance)
   että mallien .kp-kontti-kääreillä. */
.kp-hero--kuva {
  display: grid;
  grid-template-columns: 100%;
  grid-template-areas: "pino" "palkki";
  /* Breakdancen selector-cache voi latautua tämän tiedoston jälkeen.
     Kuvahero alkaa aina suoraan päävalikon alta. */
  padding: 0 !important;
  position: relative;
}
.kp-hero--kuva > .kp-kuva {
  grid-area: pino;
  position: relative;
  height: auto;
  min-height: var(--kp-hero-korkeus, clamp(480px, 30vw + 80px, 560px));
  aspect-ratio: auto;
  border-radius: 0;
  align-items: flex-start; justify-content: flex-end;   /* mallin kuvateksti oikeaan yläkulmaan */
}
.kp-hero--kuva > .kp-kuva img,
.kp-hero--kuva > .kp-kuva figure,
.kp-hero--kuva > .kp-kuva .breakdance-image-container,
.kp-hero--kuva > .kp-kuva .breakdance-image-clip {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
}
.kp-hero--kuva > .kp-kuva img { object-fit: cover; object-position: center; }
.kp-hero--kuva > .kp-kontti:has(.kp-hero__kortti),
.kp-hero--kuva > .kp-hero__kortti { grid-area: pino; align-self: end; z-index: 1; }
.kp-hero--kuva > .kp-kontti:has(.kp-hero__kortti) { width: 100%; }
.kp-hero--kuva .kp-hero__kortti {
  position: static;
  box-sizing: border-box;
  width: min(520px, 100% - 2 * var(--kp-gutter));
  margin: var(--kp-space-8) var(--kp-gutter) var(--kp-space-4);
  padding: var(--kp-space-5) var(--kp-space-5) var(--kp-space-5) calc(var(--kp-space-5) - 8px);
  background: var(--kp-valkoinen);
  border: 0;
  border-left: 8px solid var(--kp-paa);
  border-radius: 0 var(--kp-radius-md) var(--kp-radius-md) 0;
}
/* Mallien .kp-kontti-kääre: kortti alkaa sisällön reunasta ilman omaa lisämarginaalia */
.kp-hero--kuva > .kp-kontti .kp-hero__kortti { margin-left: 0; margin-right: 0; }
/* Leveä näyttö: kortin vasen reuna = sisältöalueen reuna, jolloin kortin teksti
   (8 px viiva + 24 px sisennys = 32 px) linjautuu logon ja osioiden tekstin kanssa. */
@media (min-width: 1200px) {
  .kp-hero--kuva > .kp-hero__kortti { margin-left: calc((100% - var(--kp-wide)) / 2); }
}
.kp-hero--kuva .kp-vinjetti { display: none; }            /* logo kertoo jo sivuston nimen */
.kp-hero--kuva h1 {
  font-family: var(--kp-sans);
  font-size: min(var(--kp-fs-h1), calc(7vw + 6px));         /* 28 (320 px) → 48 px; pitkä sana ei katkea kapealla */
  line-height: 1.1;
  letter-spacing: -0.025em;
  overflow-wrap: normal;
  hyphens: manual;
  text-wrap: balance;
  margin: 0 0 var(--kp-space-3);
  color: var(--kp-musta);
}
.kp-hero--kuva .kp-ingressi,
.kp-hero--kuva .kp-hero__kortti > p:not(.kp-vinjetti) {
  font: 400 clamp(18px, 16px + .5vw, 21px)/1.5 var(--kp-sans);
  color: var(--kp-musta);
  max-width: 38ch;
  margin: 0;
}
.kp-hero--kuva > .kp-hero__palkki,
.kp-hero--kuva > .kp-kontti:has(.kp-hero__palkki) { grid-area: palkki; margin-top: 0; }
.kp-hero--kuva .kp-hero__palkki { margin-top: 0 !important; }
.kp-hero--kuva > .kp-kontti:has(.kp-hero__palkki) { max-width: none; padding: 0; }
@media (max-width: 767px) {
  .kp-hero--kuva > .kp-kuva { min-height: var(--kp-hero-korkeus-mobiili, 440px); }
  .kp-hero--kuva .kp-hero__kortti {
    margin: var(--kp-space-7) var(--kp-gutter) var(--kp-gutter);
    padding: var(--kp-space-4) var(--kp-space-4) var(--kp-space-4) calc(var(--kp-space-4) - 6px);
    border-left-width: 6px;
  }
  .kp-hero--kuva > .kp-kontti .kp-hero__kortti { margin-left: 0; margin-right: 0; }
}
@media (forced-colors: active) {
  .kp-hero--kuva .kp-hero__kortti { border: 1px solid CanvasText; border-left: 8px solid CanvasText; }
}

.kp-vinjetti { font: 700 14px/20px var(--kp-sans); text-transform: uppercase; margin: 0; }
.kp-ingressi { font: 300 var(--kp-fs-ingressi)/1.4 var(--kp-sans); margin: 0; }

/* Hakukenttä */
.kp-haku { display: flex; gap: var(--kp-space-2); margin-top: var(--kp-space-5); max-width: 560px; }
.kp-haku input {
  flex: 1; min-width: 0; min-height: 52px; padding: 0 var(--kp-space-3);
  font: 400 18px/24px var(--kp-sans);
  border: 2px solid var(--kp-musta); border-radius: var(--kp-radius-sm);
  background: var(--kp-valkoinen); color: var(--kp-musta);
}
.kp-haku .kp-painike { min-height: 52px; }

/* Ruudukot */
.kp-ruudukko { display: grid; gap: var(--kp-space-4); grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .kp-ruudukko--2, .kp-ruudukko--3, .kp-ruudukko--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .kp-ruudukko--3 { grid-template-columns: repeat(3, 1fr); }
  .kp-ruudukko--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Pikalinkki */
.kp-pikalinkki {
  display: flex; align-items: center; justify-content: space-between; gap: var(--kp-space-3);
  min-height: 72px; padding: var(--kp-space-3) var(--kp-space-4);
  background: var(--kp-valkoinen);
  border: 1px solid var(--kp-ruskea-10);
  border-radius: var(--kp-radius-md);
  font: 700 17px/24px var(--kp-sans);
  color: var(--kp-musta); text-decoration: none;
}
.kp-pikalinkki::after { content: "→" / ""; font-weight: 400; }
.kp-pikalinkki:hover { border-color: var(--kp-musta); }

/* Kortti (uutinen, aktiviteetti, palvelu) */
.kp-kortti {
  display: flex; flex-direction: column;
  background: var(--kp-valkoinen);
  border: 1px solid var(--kp-ruskea-10);
  border-radius: var(--kp-radius-md);
  overflow: hidden;
  color: var(--kp-musta); text-decoration: none;
  font-family: var(--kp-sans);
}
.kp-kortti .kp-kuva { border-radius: 0; }
.kp-kortti__sisus { padding: var(--kp-space-4); display: flex; flex-direction: column; gap: var(--kp-space-2); }
.kp-kortti h3 { font: 700 var(--kp-fs-h3)/1.25 var(--kp-sans); margin: 0; }
.kp-kortti p { font-size: 16px; line-height: 24px; margin: 0; }
.kp-kortti__pvm { font-size: 15px; line-height: 20px; }
.kp-kortti:hover h3 { text-decoration: underline; }
.kp-sisalto .kp-kortti h3, .editor-styles-wrapper .kp-kortti h3 { margin: 0; }
/* Media ja teksti -lohko (esim. Visitin Matkailuneuvonta etusivulla) */
.wp-block-media-text { gap: var(--kp-space-5); }
.wp-block-media-text .wp-block-media-text__media img { border-radius: var(--kp-radius-md); }
/* Kortin kuva (artikkelikuva): [kankaanpaa_nostot] ja Post Loop -kortit */
.kp-kortti__kuva { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
/* Korostusasettelu: ensimmäinen nosto isona, muut kompakteina vaakakortteina (≥ 1024 px) */
@media (min-width: 1024px) {
  .kp-nostot--korostus { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-auto-rows: auto; gap: var(--kp-space-4) var(--kp-space-5); }
  .kp-nostot--korostus > li:first-child { grid-row: 1 / span 3; }
  .kp-nostot--korostus > li:first-child .kp-kortti > :first-child { aspect-ratio: 3 / 2; }
  .kp-nostot--korostus > li:first-child h3 { font-size: calc(var(--kp-fs-h3) * 1.2); }
  .kp-nostot--korostus > li:not(:first-child) .kp-kortti { flex-direction: row; align-items: stretch; }
  .kp-nostot--korostus > li:not(:first-child) .kp-kortti > :first-child { flex: 0 0 32%; aspect-ratio: 4 / 3; height: auto; }
  .kp-nostot--korostus > li:not(:first-child) h3 { font-size: 20px; line-height: 1.25; hyphens: auto; }
  .kp-nostot--korostus > li:not(:first-child) .kp-kortti__sisus { justify-content: center; padding: var(--kp-space-3) var(--kp-space-4); }
}
/* Etusivun nostot [kankaanpaa_nostot]: lista, jonka kohteet ovat kortteja */
.kp-nostot { list-style: none; margin: 0; padding: 0; }
.kp-nostot > li { display: flex; margin: 0; }
.kp-nostot > li > .kp-kortti { flex: 1; }

/* Pikalinkit Gutenbergissä: Lista-lohko, tyyli "Pikalinkit (ruudukko)" */
.wp-block-list.is-style-pikalinkit, ul.is-style-pikalinkit {
  list-style: none; margin: var(--kp-space-5) 0; padding: 0;
  display: grid; gap: var(--kp-space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}
ul.is-style-pikalinkit > li { margin: 0; display: flex; }
/* Leveällä etusivulla (ei sisäsivun sisältösarakkeessa) sarakemäärä valitaan linkkien määrän mukaan: 5 → 5, 6 → 3, muuten 4 */
@media (min-width: 1024px) {
  ul.is-style-pikalinkit:not(.kp-sisasivu *):has(> li:nth-child(5):last-child) { grid-template-columns: repeat(5, 1fr); gap: var(--kp-space-3); }
  ul.is-style-pikalinkit:not(.kp-sisasivu *):has(> li:nth-child(5):last-child) > li > a { padding-inline: var(--kp-space-3); gap: var(--kp-space-2); font-size: 16px; }
  ul.is-style-pikalinkit:not(.kp-sisasivu *):has(> li:nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr); }
}
ul.is-style-pikalinkit > li > a {
  flex: 1; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: var(--kp-space-3);
  min-height: 72px; padding: var(--kp-space-3) var(--kp-space-4);
  background: var(--kp-valkoinen);
  border: 1px solid var(--kp-ruskea-10);
  border-radius: var(--kp-radius-md);
  font: 700 17px/24px var(--kp-sans);
  color: var(--kp-musta); text-decoration: none;
}
ul.is-style-pikalinkit > li > a::after { content: "→" / ""; font-weight: 400; }
ul.is-style-pikalinkit > li > a:hover { border-color: var(--kp-musta); }

/* Oikopolut-osio (hyväksytty 26.9.2026): etusivun oma osio heron alla, [kankaanpaa_oikopolut].
   Huom. .kp-oikopolut (ilman -osio) on headerin kankaanpaa.fi-linkki.
   Tausta sivuston pääväri, valkoiset pillerit, vasemmalle tasattu. 8 px valkoinen rako
   erottaa osion heron väripalkista, jottei palkin vihreä osa sulaudu taustaan.
   Lyhytkoodin elementti sijoitetaan sivupohjassa koko leveydelle (ei kontin sisään). */
.kp-oikopolut-osio {
  margin-top: 8px;
  padding: var(--kp-space-6) 0 var(--kp-space-6);
  background: var(--kp-paa);
  color: var(--kp-paa-teksti);
}
.kp-oikopolut-osio h2 {
  font: 700 var(--kp-fs-h2)/1.2 var(--kp-sans);
  color: inherit;
  margin: 0 0 20px;
}
.kp-oikopolut-osio__lista {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 12px;
}
.kp-oikopolut-osio__lista li { margin: 0; }
.kp-oikopolut-osio__lista a {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 0 24px 0 26px; box-sizing: border-box;
  background: var(--kp-valkoinen); color: var(--kp-musta);
  border-radius: 999px;
  font: 700 19px/1.2 var(--kp-sans);
  text-decoration: none;
  transition: background-color .15s, color .15s;
}
.kp-oikopolut-osio__nuoli { font-weight: 400; }
.kp-oikopolut-osio__lista a:hover { background: var(--kp-musta); color: var(--kp-valkoinen); }
.kp-oikopolut-osio__lista a:focus-visible { outline: 3px solid var(--kp-musta); outline-offset: 3px; }
[data-sivusto="business"] .kp-oikopolut-osio__lista a:focus-visible { outline-color: var(--kp-valkoinen); }
@media (max-width: 767px) {
  .kp-oikopolut-osio { padding: var(--kp-space-5) 0 36px; }
  .kp-oikopolut-osio h2 { margin-bottom: var(--kp-space-3); }
  .kp-oikopolut-osio__lista { gap: 10px; }
  .kp-oikopolut-osio__lista a { min-height: 46px; padding: 0 18px; gap: 10px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .kp-oikopolut-osio__lista a { transition: none; } }
@media (forced-colors: active) { .kp-oikopolut-osio__lista a { border: 1px solid LinkText; } }

/* Tapahtumalista */
.kp-tapahtumat { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kp-space-3); }
@media (min-width: 768px) { .kp-tapahtumat { grid-template-columns: repeat(2, 1fr); gap: var(--kp-space-4); } }
.kp-tapahtuma { display: flex; gap: var(--kp-space-4); align-items: center; padding: var(--kp-space-3); background: var(--kp-valkoinen); border-radius: var(--kp-radius-md); border: 1px solid var(--kp-ruskea-10); }
.kp-tapahtuma__pvm {
  flex: 0 0 72px; min-height: 72px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--kp-paa); color: var(--kp-paa-teksti);
  border-radius: var(--kp-radius-sm);
  font-weight: 700; line-height: 1;
}
.kp-tapahtuma__pvm b { font-size: 28px; }
.kp-tapahtuma__pvm span { font-size: 13px; margin-top: 4px; text-transform: uppercase; }
.kp-tapahtuma h3 { font: 700 18px/24px var(--kp-sans); margin: 0; }
.kp-tapahtuma p { font-size: 15px; line-height: 20px; margin: 4px 0 0; }

/* Sivustonostot: täysväriset laatat (kaupungin sivustoperhe) */
.kp-laatta {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--kp-space-5);
  min-height: 200px; padding: var(--kp-space-5);
  border-radius: var(--kp-radius-md);
  text-decoration: none;
}
.kp-laatta h3 { font: 700 var(--kp-fs-h2)/1.15 var(--kp-serif); margin: 0; }
.kp-laatta p { font-size: 16px; line-height: 24px; margin: 0; }
.kp-laatta span { font-weight: 700; }
.kp-laatta--oranssi { background: var(--kp-oranssi); color: var(--kp-musta); }
.kp-laatta--ruskea { background: var(--kp-ruskea); color: var(--kp-valkoinen); }
.kp-laatta--vihrea { background: var(--kp-vihrea); color: var(--kp-musta); }
/* Vaalea laatta: rauhallisempi, sivuston värit ohuena yläviivana (esim. etusivun "muut sivustot") */
.kp-laatta--vaalea { color: var(--kp-musta); min-height: 0; gap: var(--kp-space-3); padding: var(--kp-space-5) var(--kp-space-5) var(--kp-space-4); }
.kp-laatta--vaalea h3 { font: 700 22px/1.25 var(--kp-sans); }
.kp-laatta--vaalea.kp-laatta--oranssi { background: var(--kp-oranssi-10); box-shadow: inset 0 4px 0 var(--kp-oranssi); }
.kp-laatta--vaalea.kp-laatta--ruskea { background: var(--kp-ruskea-10); box-shadow: inset 0 4px 0 var(--kp-ruskea); color: var(--kp-musta); }
.kp-laatta--vaalea.kp-laatta--vihrea { background: var(--kp-vihrea-10); box-shadow: inset 0 4px 0 var(--kp-vihrea-tumma); }
.kp-laatta--vaalea:hover h3 { text-decoration: underline; }
.kp-laatta--vaalea:focus-visible { outline-color: var(--kp-musta); }
/* Yhteystietolista (esim. matkailuneuvonta) */
.kp-tiedot { display: grid; grid-template-columns: max-content 1fr; gap: var(--kp-space-2) var(--kp-space-4); margin: var(--kp-space-4) 0 0; font: 400 16px/24px var(--kp-sans); }
.kp-tiedot dt { font-weight: 700; }
.kp-tiedot dd { margin: 0; }

/* Toimintakehotekaista */
.kp-cta { background: var(--kp-paa); color: var(--kp-paa-teksti); border-radius: var(--kp-radius-md); padding: var(--kp-space-6) var(--kp-space-5); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--kp-space-4); }
.kp-cta h2 { font: 700 var(--kp-fs-h2)/1.2 var(--kp-sans); margin: 0; color: inherit; }
.kp-cta p { margin: var(--kp-space-2) 0 0; font-size: 18px; line-height: 26px; }
.kp-cta .kp-painike { background: var(--kp-valkoinen); border-color: var(--kp-valkoinen); color: var(--kp-musta); }
.kp-cta .kp-painike:hover { background: var(--kp-musta); border-color: var(--kp-musta); color: var(--kp-valkoinen); }

/* Henkilökortti */
.kp-henkilo { display: flex; gap: var(--kp-space-4); align-items: center; }
.kp-henkilo .kp-kuva { flex: 0 0 96px; width: 96px; border-radius: 50%; }
.kp-henkilo .kp-kuva::after { display: none; }
.kp-henkilo h3 { font: 700 18px/24px var(--kp-sans); margin: 0; }
.kp-henkilo p { font-size: 15px; line-height: 22px; margin: 2px 0 0; }

/* Sisäsivu */
.kp-murupolku {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  box-sizing: border-box;
  min-height: 44px;
  margin: 0 0 var(--kp-space-2);
  padding: var(--kp-space-2) 0 var(--kp-space-3);
  font: 500 15px/20px var(--kp-sans);
  color: var(--kp-musta);
}
.kp-murupolku li { display: inline-flex; align-items: center; white-space: nowrap; } /* erotin pysyy kohteensa edellä, ei rivin alussa yksin */
.kp-murupolku li:last-child { white-space: normal; font-weight: 600; }
.kp-murupolku li + li::before { content: "›" / ""; display: inline-flex; align-items: center; margin-inline: var(--kp-space-2); color: var(--kp-ruskea); } /* ruudunlukija ei lue erotinta */
.kp-murupolku a { color: var(--kp-ruskea); text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* Vanha Breakdance-sivupohja antaa kaikille ol-elementeille lohkoasettelun
   ja numeroinnin. Murupolku säilyttää oman vaakasuuntaisen listarakenteensa. */
#bde-main nav.kp-murupolku {
  display: block;
  box-sizing: content-box;
  min-height: 0;
  margin: var(--kp-space-2) 0 0;
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
}
/* Uudempi murupolkurakenne on nav > ol.kp-murupolku. Sen nav-kääre ei saa
   periä nollaväliä suoraan päävalikon alta. */
#bde-main nav[aria-label="Murupolku"] { padding-top: var(--kp-space-3); }
#bde-main nav[aria-label="Murupolku"] > .kp-murupolku,
#bde-main nav.kp-murupolku > ol {
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0;
  list-style: none !important;
  box-sizing: border-box;
  min-height: 44px;
  margin: 0 0 var(--kp-space-2);
  padding: var(--kp-space-2) 0 var(--kp-space-3);
  font: 500 15px/20px var(--kp-sans);
  color: var(--kp-musta);
}
#bde-main nav[aria-label="Murupolku"] > .kp-murupolku > li,
#bde-main nav.kp-murupolku > ol > li { list-style: none !important; }
.kp-sisasivu { display: grid; gap: var(--kp-space-6); padding-bottom: var(--kp-space-8); }
/* Osioiden aloituskuva tulee Gutenbergistä, vain sisältöpalstan levyisenä.
   Kuvan jälkeen tuleva H1 on niin ikään editorin lohko: sama järjestys säilyy
   sisällöntuottajalle näkyvänä eikä vaadi sivukohtaista Breakdance-rakennetta. */
.vu-main--section-index .kp-sisalto:has(.kp-osiohero) .vu-title-slot { display: none; }
.vu-main--section-index .kp-osiohero {
  margin: 0;
}
.vu-main--section-index .kp-osiohero img {
  display: block;
  width: 100%;
  height: clamp(13rem, 28vw, 24rem);
  object-fit: cover;
  border-radius: var(--kp-radius-md);
}
.vu-main--section-index .kp-osiohero__otsikko {
  margin: 0 0 var(--kp-space-4);
}
@media (max-width: 767px) {
  .vu-main--section-index .kp-osiohero img { height: clamp(12rem, 58vw, 18rem); }
}
/* DOM-järjestys: murupolku → osion valikko (mobiilissa suljettu paneeli) → sisältö. Desktopissa valikko vasemmalla. */
@media (min-width: 1024px) {
  .kp-sisasivu { grid-template-columns: 280px minmax(0, 720px); grid-template-areas: "alanavi sisalto"; gap: var(--kp-space-7); align-items: start; }
  .kp-sisasivu > .kp-sisalto { grid-area: sisalto; }
  .kp-sisasivu > .kp-alanavi { grid-area: alanavi; }
}
/* Osion valikko ([kankaanpaa_alanavi]). Mobiilissa suljettava paneeli sisällön yläpuolella. */
.kp-alanavi { font-family: var(--kp-sans); }
.kp-alanavi__nappi {
  display: none;
  width: 100%;
  min-height: 48px;
  padding: 0 var(--kp-space-3);
  font: 700 16px/24px var(--kp-sans);
  text-align: left;
  color: var(--kp-musta);
  background: var(--kp-savy);
  border: 2px solid var(--kp-musta);
  border-radius: var(--kp-radius-sm);
}
.kp-alanavi__nappi::after, .kp-alanavi__avaa span[aria-hidden]::before {
  content: ""; display: block; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s cubic-bezier(.2, .8, .2, 1);
} /* piirretty nuoli, ei tekstimerkkiä */
@media (prefers-reduced-motion: reduce) { .kp-alanavi__nappi::after, .kp-alanavi__avaa span[aria-hidden]::before { transition: none; } }
.kp-alanavi__nappi::after { float: right; margin-top: 8px; }
.kp-alanavi__nappi[aria-expanded="true"]::after, .kp-alanavi__avaa[aria-expanded="true"] span[aria-hidden]::before { transform: translateY(2px) rotate(-135deg); }
/* Tasot erotetaan sisennyksellä (ei pystyviivoja). Rivi on aina koko levyinen, jotta korostus kattaa myös +/–-painikkeen. */
.kp-alanavi__otsikko { font: 700 16px/22px var(--kp-sans); margin: 0; padding: 0 var(--kp-space-3) var(--kp-space-3); border-bottom: 2px solid var(--kp-merkki); }
.kp-alanavi__otsikko a { color: var(--kp-musta); text-decoration: none; }
.kp-alanavi__otsikko a:hover { text-decoration: underline; }
.kp-alanavi ul { list-style: none; margin: 0; padding: 0; }
.kp-alanavi__lista--1 > li { border-bottom: 1px solid var(--kp-ruskea-10); }
.kp-alanavi__lista--2 { padding-bottom: var(--kp-space-2); }
.kp-alanavi__rivi { display: flex; align-items: stretch; min-height: 44px; }
.kp-alanavi__rivi > a { display: block; flex: 1; min-width: 0; padding: 11px var(--kp-space-2) 11px var(--kp-space-3); font-size: 16px; line-height: 22px; color: var(--kp-musta); text-decoration: none; }
.kp-alanavi__lista--2 .kp-alanavi__rivi > a { padding-top: 9px; padding-bottom: 9px; padding-left: calc(var(--kp-space-3) + 16px); font-size: 15px; }
.kp-alanavi__lista--3 .kp-alanavi__rivi > a { padding-left: calc(var(--kp-space-3) + 32px); }
.kp-alanavi__rivi > a:hover { text-decoration: underline; }
.kp-alanavi__polulla > .kp-alanavi__rivi > a { font-weight: 700; }
/* Avoin ryhmä: yläsivu ja sen alasivut samalla sävypinnalla, jotta ne näkyvät yhtenä kokonaisuutena */
.kp-alanavi__lista--1 > li:has(> .kp-alanavi__lista:not([hidden])) { background: var(--kp-savy); border-radius: var(--kp-radius-sm); border-bottom-color: transparent; }
.kp-alanavi__lista--1 > li:has(+ li > .kp-alanavi__lista:not([hidden])) { border-bottom-color: transparent; }
.kp-alanavi__lista--1 > li:has(> .kp-alanavi__lista:not([hidden])) > .kp-alanavi__rivi { border-radius: var(--kp-radius-sm) var(--kp-radius-sm) 0 0; }
/* Nykyinen sivu: koko rivi tummemmalla sävyllä + 3 px merkki-viiva vasemmalla */
.kp-alanavi__rivi.is-nykyinen { background: var(--kp-savy-2); } /* sävy + lihavointi; ei paksua reunaviivaa */
.kp-alanavi__lista--1 > li:has(> .kp-alanavi__lista:not([hidden])) .kp-alanavi__rivi.is-nykyinen { background: var(--kp-savy-2); }
.kp-alanavi__rivi.is-nykyinen > a { font-weight: 700; }
.kp-alanavi__avaa {
  flex: 0 0 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: var(--kp-radius-sm);
  color: var(--kp-musta); cursor: pointer;
}
.kp-alanavi__avaa:hover { background: var(--kp-savy-2); }
/* Desktopissa valikko pysyy näkyvissä vieritettäessä, jos se mahtuu näkymään (luokka kankaanpaa.js:stä) */
@media (min-width: 1024px) and (min-height: 600px) {
  .kp-alanavi--tarttuva { position: sticky; top: var(--kp-alanavi-top, 120px); }
}
@media (forced-colors: active) {
  .kp-alanavi__rivi.is-nykyinen { border-left: 3px solid CanvasText; }
}

/* Visitin osiohakemisto ----------------------------------------------------
   Sisäsivuilla päävalikko, murupolku ja sivuhierarkia ovat eri asioita.
   Tämä korvaa pitkän sivupalkin sisältöalueen yläpuolelle sijoittuvalla,
   perinteisellä hakemistolla: näkyvissä on vain nykyinen haara ja sen
   sisarukset. Linkit ovat tekstilinkkejä, eivät nostokortteja. */
[data-sivusto="visit"] .kp-sisasivu:has(.kp-alanavi--hakemisto) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "alanavi"
    "sisalto";
  gap: var(--kp-space-6);
}
[data-sivusto="visit"] .kp-sisasivu:has(.kp-alanavi--hakemisto) > .kp-sisalto {
  width: min(100%, 720px);
}
[data-sivusto="visit"] .kp-alanavi--hakemisto {
  position: static;
  width: 100%;
  border-top: 3px solid var(--kp-merkki);
  background: var(--kp-pinta);
  font-family: var(--kp-sans);
}
[data-sivusto="visit"] .kp-alanavi--hakemisto .kp-alanavi__sisus {
  display: grid;
  grid-template-columns: minmax(14rem, 280px) minmax(0, 1fr);
}
[data-sivusto="visit"] .kp-alanavi--hakemisto .kp-alanavi__konteksti {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kp-space-2);
  min-height: 12rem;
  padding: var(--kp-space-5);
  background: var(--kp-vihrea-10);
  border-left: 8px solid var(--kp-merkki);
}
[data-sivusto="visit"] .kp-alanavi--hakemisto .kp-alanavi__juuri {
  color: var(--kp-ruskea);
  font-size: 14px;
  line-height: 20px;
}
[data-sivusto="visit"] .kp-alanavi--hakemisto .kp-alanavi__otsikko {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--kp-musta);
  font: 700 28px/34px var(--kp-sans);
  text-decoration: none;
}
[data-sivusto="visit"] .kp-alanavi--hakemisto .kp-alanavi__otsikko:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
[data-sivusto="visit"] .kp-alanavi--hakemisto .kp-alanavi__konteksti.is-juuri .kp-alanavi__juuri {
  display: none;
}
[data-sivusto="visit"] .kp-alanavi--hakemisto .kp-alanavi__takaisin {
  margin-top: auto;
  color: var(--kp-ruskea);
  font-size: 15px;
  line-height: 22px;
  text-underline-offset: 3px;
}
[data-sivusto="visit"] .kp-alanavi--hakemisto .kp-alanavi__kohteet {
  padding: var(--kp-space-4) var(--kp-space-5) var(--kp-space-3);
}
[data-sivusto="visit"] .kp-alanavi--hakemisto .kp-alanavi__tasomerkinta {
  display: block;
  margin-bottom: var(--kp-space-2);
  color: var(--kp-ruskea);
  font-size: 14px;
  line-height: 20px;
}
[data-sivusto="visit"] .kp-alanavi--hakemisto .kp-alanavi__lista--hakemisto {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--kp-ruskea-10);
  border-bottom: 1px solid var(--kp-ruskea-10);
  list-style: none;
}
[data-sivusto="visit"] .kp-alanavi--hakemisto .kp-alanavi__lista--hakemisto > li {
  min-width: 0;
  border: 0;
  border-left: 1px solid var(--kp-ruskea-10);
}
[data-sivusto="visit"] .kp-alanavi--hakemisto .kp-alanavi__lista--hakemisto > li:first-child {
  border-left: 0;
}
[data-sivusto="visit"] .kp-alanavi--hakemisto .kp-alanavi__lista--hakemisto a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: var(--kp-space-2) var(--kp-space-3);
  color: var(--kp-musta);
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  text-decoration: none;
}
[data-sivusto="visit"] .kp-alanavi--hakemisto .kp-alanavi__lista--hakemisto a:hover {
  background: var(--kp-vihrea-10);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
[data-sivusto="visit"] .kp-alanavi--hakemisto .kp-alanavi__lista--hakemisto a[aria-current="page"] {
  padding-left: calc(var(--kp-space-3) + 5px);
  background: var(--kp-vihrea-20);
  box-shadow: inset 5px 0 0 var(--kp-merkki);
  font-weight: 700;
}
[data-sivusto="visit"] .kp-alanavi--hakemisto .kp-alanavi__nappi {
  display: none;
}
@media (min-width: 1024px) and (max-width: 1199px) {
  [data-sivusto="visit"] .kp-alanavi--hakemisto .kp-alanavi__lista--hakemisto {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  [data-sivusto="visit"] .kp-alanavi--hakemisto .kp-alanavi__lista--hakemisto > li:nth-child(4) {
    border-left: 0;
  }
}
@media (max-width: 1023px) {
  [data-sivusto="visit"] .kp-sisasivu:has(.kp-alanavi--hakemisto) {
    gap: var(--kp-space-5);
  }
  [data-sivusto="visit"] .kp-sisasivu:has(.kp-alanavi--hakemisto) > .kp-sisalto {
    width: 100%;
  }
  [data-sivusto="visit"] .kp-alanavi--hakemisto .kp-alanavi__nappi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: var(--kp-space-2) var(--kp-space-3);
    background: var(--kp-valkoinen);
    border: 1px solid var(--kp-ruskea-10);
    border-left: 8px solid var(--kp-merkki);
    border-radius: 0 0 var(--kp-radius-md) 0;
  }
  [data-sivusto="visit"] .kp-alanavi--hakemisto .kp-alanavi__nappi::after {
    float: none;
    margin: 0 var(--kp-space-2) 0 var(--kp-space-3);
  }
  [data-sivusto="visit"] .kp-alanavi--hakemisto:not(.is-open) .kp-alanavi__sisus {
    display: none;
  }
  [data-sivusto="visit"] .kp-alanavi--hakemisto.is-open .kp-alanavi__sisus {
    display: block;
    padding: 0;
    border: 1px solid var(--kp-ruskea-10);
    border-top: 0;
  }
  [data-sivusto="visit"] .kp-alanavi--hakemisto .kp-alanavi__konteksti {
    min-height: auto;
    padding: var(--kp-space-4);
  }
  [data-sivusto="visit"] .kp-alanavi--hakemisto .kp-alanavi__otsikko {
    font-size: 24px;
    line-height: 30px;
  }
  [data-sivusto="visit"] .kp-alanavi--hakemisto .kp-alanavi__kohteet {
    padding: var(--kp-space-3) var(--kp-space-4) var(--kp-space-4);
  }
  [data-sivusto="visit"] .kp-alanavi--hakemisto .kp-alanavi__lista--hakemisto {
    grid-template-columns: 1fr;
  }
  [data-sivusto="visit"] .kp-alanavi--hakemisto .kp-alanavi__lista--hakemisto > li,
  [data-sivusto="visit"] .kp-alanavi--hakemisto .kp-alanavi__lista--hakemisto > li:nth-child(4) {
    border-top: 1px solid var(--kp-ruskea-10);
    border-left: 0;
  }
  [data-sivusto="visit"] .kp-alanavi--hakemisto .kp-alanavi__lista--hakemisto > li:first-child {
    border-top: 0;
  }
}

/* ---------- Etusivun Gutenberg-osiot ----------
   Gutenbergissä säilyvät otsikot, kuvat, linkit ja integraatiot. Tämä kerros
   antaa niille erilaiset rytmit: tapahtumat ovat toimitettu nosto, aktiviteetit
   kuvallinen pääsisältö ja kulttuuri rauhallinen kuvaryhmä. Näin etusivu ei ole
   yhden korttimallin toisto. */
.vu-main--home .vu-content-slot {
  max-width: none;
  padding-right: 0;
  padding-left: 0;
}
.vu-main--home .kp-osio {
  padding: var(--kp-space-8) 0 calc(var(--kp-space-8) + var(--kp-space-2));
}
.vu-main--home .kp-osio__otsikko {
  margin-bottom: var(--kp-space-4);
  border-bottom: 1px solid var(--kp-reuna);
  padding-bottom: var(--kp-space-3);
}
.vu-main--home .kp-osio__toimintolinkki {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
}
.vu-main--home .kp-osio__toimintolinkki a {
  color: var(--kp-musta);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}
.vu-main--home .kp-osio__kuvaus {
  max-width: 62ch;
  margin: 0 0 var(--kp-space-5);
}

/* Oikopolut: yhteinen vihreä pinta ja valkoiset kohteet säilyvät, mutta pilvi
   vaihtuu selkeäksi palveluruudukoksi. Nuoli ei tuo lisäinformaatiota. */
.kp-oikopolut-osio .kp-kontti {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 3fr);
  gap: var(--kp-space-5);
  align-items: start;
}
.kp-oikopolut-osio h2 { margin: var(--kp-space-2) 0 0; }
.kp-oikopolut-osio__lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--kp-space-3);
}
.kp-oikopolut-osio__lista li { min-width: 0; }
.kp-oikopolut-osio__lista a {
  width: 100%;
  justify-content: space-between;
  min-height: 64px;
  padding: var(--kp-space-3) var(--kp-space-4);
  border-radius: var(--kp-radius-sm);
  font-size: 18px;
  line-height: 1.25;
}
.kp-oikopolut-osio__nuoli { display: none; }
.kp-oikopolut-osio__lista a:hover,
.kp-oikopolut-osio__lista a:active { background: var(--kp-paa-hover); color: var(--kp-paa-hover-teksti); }

/* Tapahtumat: yksi painava nosto ja kaksi pienempää riviä, ei kolmea laatikkoa. */
.vu-main--home .kp-osio:has(.se-grid) { background: var(--kp-pinta-korostettu); }
.vu-main--home .se-grid {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  grid-auto-rows: auto;
  gap: var(--kp-space-4) var(--kp-space-6);
}
.vu-main--home .se-card {
  overflow: visible;
  background: transparent;
  border: 0;
  border-top: 2px solid var(--kp-musta);
  border-radius: 0;
}
.vu-main--home .se-card:first-child { grid-row: span 2; }
.vu-main--home .se-link { display: flex; flex-direction: column; gap: var(--kp-space-3); }
.vu-main--home .se-img { background: var(--kp-savy-2); }
.vu-main--home .se-img img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
}
.vu-main--home .se-body { padding: 0 0 var(--kp-space-2); }
.vu-main--home .se-title {
  margin: 0 0 var(--kp-space-2);
  font: 700 var(--kp-fs-h3)/1.2 var(--kp-sans);
}
.vu-main--home .se-meta {
  gap: var(--kp-space-1) var(--kp-space-2);
  color: var(--kp-musta);
  font: 400 15px/1.35 var(--kp-sans);
}
.vu-main--home .se-card:not(:first-child) .se-link {
  display: grid;
  grid-template-columns: minmax(120px, 2fr) minmax(0, 3fr);
  gap: var(--kp-space-3);
  align-items: start;
}
.vu-main--home .se-card:not(:first-child) .se-img img { aspect-ratio: 4 / 3; }
.vu-main--home .se-card:not(:first-child) .se-title { font-size: 20px; }
.vu-main--home .se-all-wrap { margin-top: var(--kp-space-5); }
.vu-main--home .se-btn {
  min-height: 44px;
  padding: var(--kp-space-2) 0;
  border: 0;
  border-bottom: 2px solid currentColor;
  border-radius: 0;
  color: var(--kp-musta);
  background: transparent;
  font: 700 16px/24px var(--kp-sans);
}

/* Tapahtumat ovat ajallisia nostoja, eivät pysyvä aihehakemisto. Siksi osio
   näyttää kolme samanarvoista tapahtumaa: kalenterin omat kuvat, päivämäärä
   ja otsikko ovat heti vertailtavissa ilman erillistä avauskuvaa. */
.vu-main--home .kp-osio--tapahtumat {
  background: var(--kp-pinta-korostettu);
}
.vu-main--home .kp-osio--tapahtumat .se-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--kp-space-4);
}
.vu-main--home .kp-osio--tapahtumat .se-card,
.vu-main--home .kp-osio--tapahtumat .se-card:first-child {
  grid-column: auto;
  grid-row: auto;
  overflow: hidden;
  background: var(--kp-pinta);
  border: 1px solid var(--kp-reuna);
  border-radius: var(--kp-radius-md);
}
.vu-main--home .kp-osio--tapahtumat .se-link,
.vu-main--home .kp-osio--tapahtumat .se-card:not(:first-child) .se-link {
  display: flex;
  height: 100%;
  flex-direction: column;
  gap: 0;
}
.vu-main--home .kp-osio--tapahtumat .se-img img,
.vu-main--home .kp-osio--tapahtumat .se-card:not(:first-child) .se-img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.vu-main--home .kp-osio--tapahtumat .se-body,
.vu-main--home .kp-osio--tapahtumat .se-card:not(:first-child) .se-body {
  padding: var(--kp-space-3) var(--kp-space-3) var(--kp-space-4);
}
.vu-main--home .kp-osio--tapahtumat .se-date {
  display: block;
  margin-bottom: var(--kp-space-2);
  font: 700 15px/1.35 var(--kp-sans);
}
.vu-main--home .kp-osio--tapahtumat .se-title,
.vu-main--home .kp-osio--tapahtumat .se-card:not(:first-child) .se-title {
  font-size: 20px;
}
.vu-main--home .kp-osio--tapahtumat .se-card:hover { background: var(--kp-savy-2); }
.vu-main--home .kp-osio--tapahtumat .se-link:focus-visible {
  outline: 3px solid var(--kp-musta);
  outline-offset: -3px;
}
.vu-main--home .kp-osio--tapahtumat .se-all-wrap { margin-top: var(--kp-space-5); }
.vu-main--home .kp-osio--tapahtumat .se-btn {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  padding: var(--kp-space-2) var(--kp-space-4);
  border: 0;
  border-radius: var(--kp-radius-sm);
  background: var(--kp-paa);
  color: var(--kp-paa-teksti);
  text-decoration: none;
}
.vu-main--home .kp-osio--tapahtumat .se-btn:hover,
.vu-main--home .kp-osio--tapahtumat .se-btn:focus-visible {
  background: var(--kp-paa-hover);
  color: var(--kp-paa-hover-teksti);
}
@media (min-width: 768px) and (max-width: 1023px) {
  .vu-main--home .kp-osio--tapahtumat .se-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .vu-main--home .kp-osio--tapahtumat .se-grid { grid-template-columns: 1fr; }
}

/* Aktiviteetit: ensimmäinen kuva saa pääroolin, muut täydentävät sitä. */
.vu-main--home .kp-osio--neutraali .kp-nostot {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--kp-space-5) var(--kp-space-4);
}
.vu-main--home .kp-osio--neutraali .kp-nostot > li:first-child { grid-column: span 2; }
.vu-main--home .kp-osio--neutraali .kp-kortti,
.vu-main--home .kp-osio--savy.kp-osio--kuvallinen:has(.kp-nostot) .kp-kortti {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.vu-main--home .kp-osio--neutraali .kp-kortti__kuva,
.vu-main--home .kp-osio--savy.kp-osio--kuvallinen:has(.kp-nostot) .kp-kortti__kuva {
  aspect-ratio: 4 / 3;
  border-radius: 0;
}
.vu-main--home .kp-osio--neutraali .kp-nostot > li:first-child .kp-kortti__kuva { aspect-ratio: 16 / 10; }
.vu-main--home .kp-osio--neutraali .kp-kortti__sisus,
.vu-main--home .kp-osio--savy.kp-osio--kuvallinen:has(.kp-nostot) .kp-kortti__sisus {
  gap: 0;
  margin-top: var(--kp-space-3);
  padding: var(--kp-space-3) 0 0;
  border-top: 2px solid var(--kp-musta);
}
.vu-main--home .kp-osio--neutraali .kp-kortti h3,
.vu-main--home .kp-osio--savy.kp-osio--kuvallinen:has(.kp-nostot) .kp-kortti h3 { font-size: 22px; }
.vu-main--home .kp-osio--neutraali .kp-kortti p,
.vu-main--home .kp-osio--savy.kp-osio--kuvallinen:has(.kp-nostot) .kp-kortti p {
  max-width: 34ch;
  margin: var(--kp-space-2) 0 0;
  font: 400 16px/1.5 var(--kp-sans);
}
.vu-main--home .kp-osio--neutraali .kp-nostot > li:first-child .kp-kortti p { max-width: 42ch; font-size: 18px; }

/* Kulttuuri: jos kaikille nostoille on lisätty toimivat kuvat, Gutenbergin
   ryhmä saa lisäluokan .kp-osio--kuvallinen. Ilman sitä sisältö pysyy tiiviinä
   linkkiryhmänä eikä rikkoutunut media muodosta tyhjiä kuvapaikkoja. */
.vu-main--home .kp-osio--savy:has(.kp-nostot):not(.kp-osio--kuvallinen) .kp-nostot {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--kp-space-4);
}
.vu-main--home .kp-osio--savy:has(.kp-nostot):not(.kp-osio--kuvallinen) .kp-kortti {
  min-height: 100%;
  background: transparent;
  border: 0;
  border-top: 2px solid var(--kp-musta);
  border-radius: 0;
  overflow: visible;
}
.vu-main--home .kp-osio--savy:has(.kp-nostot):not(.kp-osio--kuvallinen) .kp-kortti__kuva { display: none; }
.vu-main--home .kp-osio--savy:has(.kp-nostot):not(.kp-osio--kuvallinen) .kp-kortti__sisus { padding: var(--kp-space-3) 0 0; }
.vu-main--home .kp-osio--savy:has(.kp-nostot):not(.kp-osio--kuvallinen) .kp-kortti h3 { font-size: 22px; }
.vu-main--home .kp-osio--savy.kp-osio--kuvallinen:has(.kp-nostot) .kp-nostot {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--kp-space-5) var(--kp-space-4);
}
.vu-main--home .kp-osio--savy.kp-osio--kuvallinen:has(.kp-nostot) .kp-nostot > li { grid-column: span 2; }
.vu-main--home .kp-osio--savy.kp-osio--kuvallinen:has(.kp-nostot) .kp-nostot > li:first-child { grid-column: span 3; }
.vu-main--home .kp-osio--savy.kp-osio--kuvallinen:has(.kp-nostot) .kp-nostot > li:last-child { margin-top: var(--kp-space-6); }
.vu-main--home .kp-osio--savy.kp-osio--kuvallinen:has(.kp-nostot) .kp-nostot > li:first-child .kp-kortti__kuva { aspect-ratio: 3 / 2; }

/* Yhtenäinen teemakortisto: osion kohdemäärä määrittää vain sarakemäärän.
   Kolme kohdetta täyttää kolme saraketta ja neljä neljä; mikään kohde ei saa
   korostettua kokoa pelkän järjestyksensä vuoksi. */
.vu-main--home .kp-osio--tasainen.kp-osio--neutraali .kp-nostot,
.vu-main--home .kp-osio--tasainen.kp-osio--savy.kp-osio--kuvallinen:has(.kp-nostot) .kp-nostot {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--kp-space-5) var(--kp-space-4);
}
.vu-main--home .kp-osio--tasainen.kp-osio--neutraali .kp-nostot:has(> li:nth-child(4)),
.vu-main--home .kp-osio--tasainen.kp-osio--savy.kp-osio--kuvallinen:has(.kp-nostot) .kp-nostot:has(> li:nth-child(4)) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.vu-main--home .kp-osio--tasainen.kp-osio--neutraali .kp-nostot > li,
.vu-main--home .kp-osio--tasainen.kp-osio--savy.kp-osio--kuvallinen:has(.kp-nostot) .kp-nostot > li {
  grid-column: auto;
}
.vu-main--home .kp-osio--tasainen.kp-osio--savy.kp-osio--kuvallinen:has(.kp-nostot) .kp-nostot > li:last-child { margin-top: 0; }
.vu-main--home .kp-osio--tasainen .kp-kortti__kuva,
.vu-main--home .kp-osio--tasainen .kp-nostot > li:first-child .kp-kortti__kuva { aspect-ratio: 4 / 3; }
.vu-main--home .kp-osio--tasainen .kp-nostot > li:first-child .kp-kortti p { max-width: 34ch; font-size: 16px; }

@media (max-width: 767px) {
  .vu-main--home .kp-osio--tasainen.kp-osio--neutraali .kp-nostot,
  .vu-main--home .kp-osio--tasainen.kp-osio--neutraali .kp-nostot:has(> li:nth-child(4)),
  .vu-main--home .kp-osio--tasainen.kp-osio--savy.kp-osio--kuvallinen:has(.kp-nostot) .kp-nostot { grid-template-columns: 1fr; }
  .vu-main--home .kp-osio { padding: var(--kp-space-7) 0 var(--kp-space-7); }
  .vu-main--home .kp-osio__otsikko { align-items: flex-start; flex-direction: column; gap: var(--kp-space-2); }
  .kp-oikopolut-osio .kp-kontti { display: block; }
  .kp-oikopolut-osio h2 { margin: 0 0 var(--kp-space-3); }
  .kp-oikopolut-osio__lista { gap: var(--kp-space-2); }
  .kp-oikopolut-osio__lista a { min-height: 56px; padding: var(--kp-space-2) var(--kp-space-3); font-size: 16px; }
  .vu-main--home .se-grid,
  .vu-main--home .kp-osio--neutraali .kp-nostot,
  .vu-main--home .kp-osio--savy:has(.kp-nostot) .kp-nostot { grid-template-columns: 1fr; }
  .vu-main--home .se-card:first-child,
  .vu-main--home .kp-osio--neutraali .kp-nostot > li:first-child,
  .vu-main--home .kp-osio--savy.kp-osio--kuvallinen:has(.kp-nostot) .kp-nostot > li { grid-column: auto; }
  .vu-main--home .se-card:not(:first-child) .se-link { display: flex; }
  .vu-main--home .se-card:not(:first-child) .se-img img { aspect-ratio: 16 / 9; }
  .vu-main--home .kp-osio--savy.kp-osio--kuvallinen:has(.kp-nostot) .kp-nostot > li:last-child { margin-top: 0; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .vu-main--home .kp-osio--tasainen.kp-osio--neutraali .kp-nostot,
  .vu-main--home .kp-osio--tasainen.kp-osio--neutraali .kp-nostot:has(> li:nth-child(4)),
  .vu-main--home .kp-osio--tasainen.kp-osio--savy.kp-osio--kuvallinen:has(.kp-nostot) .kp-nostot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .kp-alanavi__nappi { display: block; }
  .kp-alanavi__otsikko { display: none; }
  .kp-alanavi:not(.is-open) .kp-alanavi__sisus { display: none; }
  .kp-alanavi.is-open .kp-alanavi__sisus { padding-top: var(--kp-space-2); }
}

/* Osion etusivu: alasivut ruudukkona */
.kp-osion-sivut { display: grid; gap: var(--kp-space-3); grid-template-columns: 1fr; list-style: none; margin: var(--kp-space-5) 0; padding: 0; }
@media (min-width: 768px) { .kp-osion-sivut { grid-template-columns: repeat(2, 1fr); } }
.kp-osion-sivut a { display: block; height: 100%; padding: var(--kp-space-4); border: 1px solid var(--kp-ruskea-10); border-radius: var(--kp-radius-md); color: var(--kp-musta); text-decoration: none; font-family: var(--kp-sans); }
.kp-osion-sivut a:hover { border-color: var(--kp-musta); }
.kp-osion-sivut strong { display: block; font-size: 18px; line-height: 24px; }
.kp-osion-sivut a:hover strong { text-decoration: underline; }
.kp-osion-sivut span { display: block; margin-top: 4px; font-size: 15px; line-height: 22px; }
.kp-sisalto > :first-child { margin-top: 0; }
.kp-paivitetty { font: 400 14px/20px var(--kp-sans); margin-top: var(--kp-space-7); padding-top: var(--kp-space-4); border-top: 1px solid var(--kp-ruskea-10); }
.kp-yhteystieto { background: var(--kp-savy); border-radius: var(--kp-radius-md); padding: var(--kp-space-5); font: 400 16px/24px var(--kp-sans); margin: var(--kp-space-6) 0; }
.kp-yhteystieto h2 { margin-top: 0 !important; font-size: 22px !important; }
.kp-yhteystieto p { margin: 0; }
.kp-yhteystieto a { color: var(--kp-musta); }
.kp-taulukko { width: 100%; border-collapse: collapse; font: 400 16px/24px var(--kp-sans); margin: var(--kp-space-4) 0; }
.kp-taulukko th, .kp-taulukko td { text-align: left; padding: 12px var(--kp-space-3); border-bottom: 1px solid var(--kp-ruskea-10); }
.kp-taulukko thead th { background: var(--kp-savy); font-weight: 700; }


/* ---------- Saavutettavuus ---------- */

/* Näkymätön mutta ruudunlukijalle luettava (älä käytä hidden-attribuuttia labeleihin) */
.kp-piilo {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* Kohdistus näkyy kaikkialla; ruskealla ja muilla tummilla pinnoilla valkoinen */
:focus-visible { outline: 2px solid var(--kp-musta); outline-offset: 2px; }
.kp-footer__ala :focus-visible { outline-color: var(--kp-paa-teksti); }
.kp-laatta--ruskea:focus-visible,
[data-sivusto="business"] .kp-cta :focus-visible, [data-sivusto="business"] .kp-hero__paneeli :focus-visible { outline-color: var(--kp-valkoinen); }

/* Kohdistettu elementti ei jää kiinteän headerin alle (WCAG 2.4.11) */
html { scroll-padding-top: 96px; }
main:focus { outline: none; }

/* 400 % zoom / matala näkymä: header ei ole kiinteä, jotta sisällölle jää tilaa (WCAG 1.4.10) */
@media (max-height: 500px), (max-width: 400px) {
  .kp-header { position: relative !important; top: auto !important; } /* ei sticky, mutta paneelien sijoittelu säilyy */
  html { scroll-padding-top: 0; }
}

/* Pitkät sanat ja osoitteet eivät aiheuta vaakavieritystä 320 px leveydellä */
.kp-sivu, .kp-sisalto { overflow-wrap: anywhere; hyphens: auto; }
.kp-sisalto table, .kp-taulukko { display: block; overflow-x: auto; }
@media (min-width: 768px) { .kp-taulukko { display: table; } }

/* Windowsin suurikontrastitila: rajat näkyviin pinnoille, joilla ei muuten ole reunaa */
@media (forced-colors: active) {
  .kp-painike, .wp-block-button__link, .kp-haku-nappi, .kp-laatta, .kp-cta, .wp-block-group.is-style-nostolaatikko, .kp-tapahtuma__pvm { border: 2px solid CanvasText; }
  .kp-header::before, .kp-footer::before, .kp-hero__palkki, .wp-block-separator.is-style-varipalkki { forced-color-adjust: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Kapea näkymä (320–479 px, myös 400 % zoom): headerin rivi 1 saa rivittyä */
.kp-hero__ruudukko > *, .kp-ruudukko > *, .kp-sisasivu > * { min-width: 0; }


/* ---------- Header: painikkeiden sisältö, hakupaneeli ja mobiili (v1.3) ----------
   <button class="kp-haku-nappi" aria-expanded="false" aria-controls="kp-hakupaneeli"><span class="kp-ikoni" aria-hidden="true"></span><span class="kp-nappi-teksti">Haku</span></button>
   <button class="kp-valikko-nappi" aria-expanded="false" aria-controls="kp-nav"><span class="kp-ikoni" aria-hidden="true"></span><span class="kp-piilo">Valikko</span></button>
   Valikko-painike on pelkkä kuvake (hampurilainen / rasti) sivuston päävärillä; nimi "Valikko" on ruudunlukijalle, tila aria-expanded. */

/* Suurennuslasi CSS:llä */
.kp-haku-nappi .kp-ikoni { position: relative; width: 20px; height: 20px; font-size: 0; }
.kp-haku-nappi .kp-ikoni::before { content: ""; position: absolute; left: 2px; top: 2px; width: 11px; height: 11px; border: 2px solid currentColor; border-radius: 50%; }
.kp-haku-nappi .kp-ikoni::after { content: ""; position: absolute; left: 13px; top: 13px; width: 2px; height: 7px; background: currentColor; transform: rotate(-45deg); transform-origin: top left; }
.kp-ikoni { display: inline-block; width: 20px; text-align: center; font-size: 18px; line-height: 20px; }
.kp-nav > li.is-polulla > a { border-bottom-color: var(--kp-merkki); }

/* Hakupaneeli: <div class="kp-hakupaneeli" id="kp-hakupaneeli" hidden><div class="kp-kontti"><form class="kp-haku" role="search">…</form></div></div> headerin sisällä */
.kp-hakupaneeli {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 55;
  background: var(--kp-savy);
  border-bottom: 1px solid var(--kp-ruskea-10);
  padding: var(--kp-space-4) 0;
}
.kp-hakupaneeli[hidden] { display: none; }
.kp-hakupaneeli .kp-haku { margin-top: 0; max-width: 720px; }
.kp-hakupaneeli label { display: block; font: 700 16px/24px var(--kp-sans); margin-bottom: var(--kp-space-2); }

@media (max-width: 1023px) {
  /* Mobiiliheader jatkaa desktopin ulkomuotoa: vain valkoisen
     header-rivin alakulmat pyöristyvät. */
  [data-sivusto="visit"] .home .kp-header {
    /* Breakdancen selector-tyyli ladataan tämän yhteisen CSS:n jälkeen. */
    background: var(--kp-pinta) !important;
    border-bottom: 0 !important;
    border-radius: 0 0 var(--kp-radius-lg) var(--kp-radius-lg) !important;
  }
  [data-sivusto="visit"] .home .kp-header__sisus {
    /* Pintaa ei piirretä lapselle, jotta Breakdancen tausta ei täytä
       headerin pyöristettyjä ulkokulmia. */
    background: transparent !important;
    border-radius: 0 !important;
  }
  .kp-header.is-open .kp-header__navirivi { max-height: calc(100dvh - 80px); overflow-y: auto; overscroll-behavior: contain; }
  .kp-nav > li { border-top: 1px solid var(--kp-ruskea-10); }
  .kp-nav > li:first-child { border-top: 0; }
  .kp-nav > li + li { border-top: 1px solid var(--kp-ruskea-10); }
  /* Alasvetovalikko on tarkoituksella suorakulmainen: pyöristys kuuluu
     headerin ulkoreunaan, ei itse navigaatiolistan pinnalle. */
  [data-sivusto="visit"] .kp-header.is-open .kp-header__navirivi {
    border-radius: 0;
  }
}

/* Alle 480 px: kaikki yhdelle riville 320 px:stä alkaen.
   Tunnus 24 px, sivustotunniste tunnuksen alla pienenä, Haku ja Valikko kompakteina (kuvake + teksti). */
@media (max-width: 479px) {
  .kp-header__sisus { flex-wrap: nowrap; min-height: 64px; gap: var(--kp-space-2); padding-top: var(--kp-space-2); padding-bottom: var(--kp-space-2); }
  .kp-header__brandi { flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; flex: 1 1 auto; }
  .kp-header__logo img, .kp-header__brandi img { height: 24px; }
  .kp-header__sivusto { border-left: 0; padding-left: 0; font-size: 13px; line-height: 16px; overflow-wrap: normal; hyphens: manual; }
  .kp-header__tyokalut { flex: 0 0 auto; gap: 4px; margin-left: 0; }
  .kp-haku-nappi, .kp-valikko-nappi {
    flex-direction: column; justify-content: center; gap: 2px;
    min-width: 56px; min-height: 48px; padding: 2px 4px;
    font-size: 12px; line-height: 16px;
  }
  .kp-valikko-nappi { display: inline-flex; }
}


/* ---------- Päävalikko (v1.3): osio = disclosure-painike, paneelissa osion etusivu + alasivut ----------
   <li><button class="kp-nav__osio" data-kp-alavalikko aria-expanded="false" aria-controls="p1">Osio</button>
       <ul class="kp-nav__paneeli" id="p1" hidden><li class="kp-nav__osion-etusivu"><a>Osio</a></li>…</ul></li>
   Osio ilman alasivuja on tavallinen linkki. Markupin tuottaa [kankaanpaa_paavalikko]. */
.kp-header__sisus { box-sizing: border-box; }
.kp-nav > li { position: relative; }
.kp-nav__osio {
  display: flex; align-items: center; gap: 6px;
  padding: var(--kp-space-3) 0 13px;
  font: 700 15px/24px var(--kp-sans); color: var(--kp-musta);
  background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0;
  cursor: pointer; text-align: left;
}
.kp-nav__osio::after {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin: 0 0 4px 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.kp-nav__osio[aria-expanded="true"]::after {
  margin: 4px 0 0 8px;
  transform: rotate(225deg);
}
.kp-nav__osio:hover, .kp-nav > li.is-polulla > .kp-nav__osio, .kp-nav__osio[aria-expanded="true"] { border-bottom-color: var(--kp-merkki); }
.kp-nav__paneeli {
  position: absolute; top: 100%; left: 0; z-index: 60;
  min-width: 300px; margin: 0; padding: var(--kp-space-2) var(--kp-space-4) var(--kp-space-3);
  list-style: none;
  background: var(--kp-valkoinen);
  border: 1px solid var(--kp-ruskea-10);
  border-radius: var(--kp-radius-md);
}
.kp-nav > li:last-child .kp-nav__paneeli { left: auto; right: 0; }
.kp-nav__paneeli[hidden] { display: none; }
.kp-nav .kp-nav__paneeli a { font: 400 16px/22px var(--kp-sans); border-bottom: 0; padding: 10px 0; }
.kp-nav .kp-nav__paneeli a:hover { text-decoration: underline; }
.kp-nav__osion-etusivu { border-bottom: 1px solid var(--kp-ruskea-10); margin-bottom: 4px; }
.kp-nav .kp-nav__osion-etusivu a { font-weight: 700; }
.kp-nav .kp-nav__paneeli a[aria-current="page"] { font-weight: 700; box-shadow: inset 3px 0 0 var(--kp-merkki); padding-left: var(--kp-space-3); }
@media (min-width: 1024px) {
  .kp-nav--tasaa .kp-nav__osio, .kp-nav--tasaa > li > a { font-size: 14px; }
}

/* Visitin työpöytävalikko: linkin sisäpainotus muodostaa myös hover- ja
   klikkausalueen. Näin kohtien väliin ei jää reagoimatonta tyhjää gap-tilaa. */
@media (min-width: 1024px) {
  [data-sivusto="visit"] .kp-nav {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    column-gap: 0;
  }
  [data-sivusto="visit"] .kp-nav > li {
    flex: 1 0 auto;
    min-width: max-content;
  }
  [data-sivusto="visit"] .kp-nav > li > a,
  [data-sivusto="visit"] .kp-nav > li > .kp-nav__osio {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 76px;
    padding: 0 var(--kp-space-3);
    width: 100%;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
  }
  [data-sivusto="visit"] .kp-nav > li > .kp-nav__osio {
    position: relative;
  }
  [data-sivusto="visit"] .kp-nav > li > .kp-nav__osio::after,
  [data-sivusto="visit"] .kp-nav > li > .kp-nav__osio[aria-expanded="true"]::after {
    position: absolute;
    top: 50%;
    right: var(--kp-space-3);
    margin: 0;
  }
  [data-sivusto="visit"] .kp-nav > li > .kp-nav__osio::after {
    transform: translateY(-65%) rotate(45deg);
  }
  [data-sivusto="visit"] .kp-nav > li > .kp-nav__osio[aria-expanded="true"]::after {
    transform: translateY(-35%) rotate(225deg);
  }
  [data-sivusto="visit"] .kp-nav > li > a:hover,
  [data-sivusto="visit"] .kp-nav > li > .kp-nav__osio:hover {
    background: var(--kp-paa);
    border-bottom-color: var(--kp-merkki);
  }
  [data-sivusto="visit"] .kp-nav > li > a:focus-visible,
  [data-sivusto="visit"] .kp-nav > li > .kp-nav__osio:focus-visible {
    outline: 3px solid var(--kp-musta);
    outline-offset: -3px;
  }
}
@media (max-width: 1023px) {
  .kp-nav > li { display: block; }
  .kp-nav__osio { width: 100%; justify-content: space-between; min-height: 52px; padding: 12px 0; font-size: 20px; line-height: 28px; border-bottom: 0; }
  .kp-nav__osio::after { width: 10px; height: 10px; }
  .kp-nav > li.is-polulla > .kp-nav__osio { text-decoration: underline; text-decoration-color: var(--kp-merkki); text-decoration-thickness: 3px; text-underline-offset: 6px; }
  .kp-nav__paneeli { position: static; min-width: 0; border: 0; border-left: 2px solid var(--kp-ruskea-10); border-radius: 0; margin: 0 0 var(--kp-space-3) var(--kp-space-2); padding: 0 var(--kp-space-3); }
  .kp-nav .kp-nav__paneeli a { font-size: 17px; }
}

/* Sivustotunniste tunnuksen alle, kun tilaa ei ole vierekkäin (alle 768 px) */
@media (max-width: 767px) {
  .kp-header__brandi { flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; flex: 1 1 auto; }
  .kp-header__sivusto { border-left: 0; padding-left: 0; font-size: 14px; line-height: 18px; }
}

/* Monta pitkää pääosiota (.kp-nav--tasaa, kaupunki): vaakavalikko vasta ≥ 1200 px, sitä kapeammalla Valikko-painike. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .kp-header:has(.kp-nav--tasaa) .kp-valikko-nappi { display: inline-flex; align-items: center; gap: var(--kp-space-2); }
  .kp-header:has(.kp-nav--tasaa) .kp-header__navirivi { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 50; background: var(--kp-valkoinen); border-top: 0; max-height: calc(100dvh - 96px); overflow-y: auto; }
  .kp-header:has(.kp-nav--tasaa) .kp-header__navirivi::before { content: ""; display: block; height: 6px; background: var(--kp-varipalkki); }
  .kp-header.is-open:has(.kp-nav--tasaa) .kp-header__navirivi { display: block; }
  .kp-nav--tasaa { flex-direction: column; gap: 0; padding-bottom: var(--kp-space-4); }
  .kp-nav--tasaa > li { display: block; }
  .kp-nav--tasaa > li + li { border-top: 1px solid var(--kp-ruskea-10); }
  .kp-nav--tasaa .kp-nav__osio { width: 100%; justify-content: space-between; min-height: 52px; padding: 12px 0; font-size: 20px; line-height: 28px; border-bottom: 0; }
  .kp-nav--tasaa > li > a { font-size: 20px; line-height: 28px; border-bottom: 0; }
  .kp-nav--tasaa .kp-nav__paneeli { position: static; min-width: 0; border: 0; border-left: 2px solid var(--kp-ruskea-10); border-radius: 0; margin: 0 0 var(--kp-space-3) var(--kp-space-2); padding: 0 var(--kp-space-3); }
}
.kp-nav__paneeli li + li { border-top: 0 !important; }


/* ---------- v1.4: Valikko-painike kuvakkeena sivuston päävärillä, Haku kevyempänä ----------
   Kaupunki ja koulut oranssi + musta kuvake, Business ruskea + valkoinen, Visit vihreä + musta.
   Kuvake piirretään CSS:llä (ei fonttimerkkiä), jotta se näyttää samalta kaikilla laitteilla. */
.kp-valikko-nappi {
  min-width: 48px; min-height: 48px; padding: 0;
  justify-content: center;
  background: var(--kp-paa);
  color: var(--kp-paa-teksti);
  border: 0;
  border-radius: var(--kp-radius-sm);
}
.kp-valikko-nappi:hover { background: var(--kp-paa-hover); color: var(--kp-paa-hover-teksti); }
.kp-valikko-nappi .kp-ikoni {
  position: relative; display: block;
  width: 22px; height: 2px;
  background: currentColor;
  font-size: 0; line-height: 0;
}
.kp-valikko-nappi .kp-ikoni::before, .kp-valikko-nappi .kp-ikoni::after {
  content: ""; position: absolute; left: 0;
  width: 22px; height: 2px; background: currentColor;
}
.kp-valikko-nappi .kp-ikoni::before { top: -7px; }
.kp-valikko-nappi .kp-ikoni::after { top: 7px; }
.kp-valikko-nappi[aria-expanded="true"] .kp-ikoni { background: transparent; }
.kp-valikko-nappi[aria-expanded="true"] .kp-ikoni::before { top: 0; transform: rotate(45deg); }
.kp-valikko-nappi[aria-expanded="true"] .kp-ikoni::after { top: 0; transform: rotate(-45deg); }

/* Mobiilissa (kun Valikko-painike näkyy) Haku on kevyt: kuvake + teksti ilman taustaa,
   jotta vierekkäin ei ole kahta samanväristä laatikkoa. */
@media (max-width: 1023px) {
  .kp-haku-nappi { background: transparent; color: var(--kp-musta); border: 0; }
  .kp-haku-nappi:hover { background: var(--kp-savy); }
  .kp-haku-nappi[aria-expanded="true"] { background: var(--kp-savy); }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .kp-header:has(.kp-nav--tasaa) .kp-haku-nappi { background: transparent; color: var(--kp-musta); }
}
@media (max-width: 479px) {
  .kp-valikko-nappi { min-width: 48px; }
}
@media (forced-colors: active) {
  .kp-valikko-nappi { border: 2px solid ButtonText; }
  .kp-valikko-nappi .kp-ikoni, .kp-valikko-nappi .kp-ikoni::before, .kp-valikko-nappi .kp-ikoni::after { background: ButtonText; forced-color-adjust: none; }
  .kp-valikko-nappi[aria-expanded="true"] .kp-ikoni { background: transparent; }
}

/* ---------- Murupolku mobiilissa (< 768 px): vain yläsivu ----------
   "‹ Liikunta". Ruudunlukija kuulee "Takaisin: Liikunta". Koko polku näkyy ≥ 768 px ja on rakenteisena datana aina. */
@media (max-width: 767px) {
  #bde-main nav[aria-label="Murupolku"] > .kp-murupolku li,
  #bde-main nav.kp-murupolku > ol li { display: none !important; }
  #bde-main nav[aria-label="Murupolku"] > .kp-murupolku li:nth-last-child(2),
  #bde-main nav.kp-murupolku > ol li:nth-last-child(2) { display: block !important; }
  .kp-murupolku li:nth-last-child(2)::before { content: none; }
  .kp-murupolku li:nth-last-child(2) a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
  .kp-murupolku li:nth-last-child(2) a::before { content: "‹" / "Takaisin: "; display: inline-block; margin-right: 6px; font-size: 22px; line-height: 1; text-decoration: none; }
  #bde-main nav[aria-label="Murupolku"] > .kp-murupolku,
  #bde-main nav.kp-murupolku > ol { padding: var(--kp-space-2) 0; }
}

/* ---------- Megamenu (v1.5) ----------
   [kankaanpaa_paavalikko] lisää paneelille luokan .kp-nav__paneeli--mega, kun osion toisen tason sivuilla on omia alasivuja.
   Desktop: koko leveyden paneeli sarakkeina. Mobiili (ja kaupungilla 1024–1199 px): tavallinen haitari, taso 3 piilossa. */
@media (min-width: 1024px) {
  /* Tavalliset alasvetovalikot kohdistuvat edelleen omaan li-elementtiinsä.
     Megamenu taas ohittaa sen (ks. seuraava sääntö), jolloin sen left/right
     täyttää .kp-headerin eikä vain keskimmäistä päävalikkoriviä. */
  .kp-header__navirivi { position: static; }
  .kp-nav > li:has(> .kp-nav__paneeli--mega) { position: static; }
  .kp-nav__paneeli--mega {
    left: 0; right: 0; top: 100%;
    min-width: 0;
    /* Paneeli jatkuu headerin reunasta reunaan, mutta linkit kohdistuvat
       samaan sisältölinjaan kuin logo ja päävalikko. Valkoinen pinta erotetaan
       taustasta vain hienovaraisella reunalla, pyöristyksellä ja varjolla. */
    border: 1px solid var(--kp-ruskea-10);
    border-top: 0;
    border-radius: 0 0 var(--kp-radius-md) var(--kp-radius-md);
    padding: var(--kp-space-4) max(var(--kp-gutter), calc((100% - var(--kp-wide)) / 2 + var(--kp-gutter))) var(--kp-space-5);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    column-gap: var(--kp-space-6);
    row-gap: var(--kp-space-5);
    align-items: start;
    box-shadow: 0 12px 24px rgb(0 0 0 / 12%);
  }
  .kp-nav__paneeli--mega[hidden] { display: none; }
  .kp-nav__paneeli--mega > .kp-nav__osion-etusivu {
    grid-column: 1 / -1;
    margin-bottom: 0;
    padding-bottom: var(--kp-space-3);
    border-bottom: 1px solid var(--kp-ruskea-10);
  }
  .kp-nav__paneeli--mega > .kp-nav__osion-etusivu a { font-size: 20px; line-height: 28px; }
  .kp-nav__paneeli--mega > .kp-nav__osion-etusivu a::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 0 1px var(--kp-space-2);
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
  }
  .kp-mega__ryhma { min-width: 0; }
  .kp-nav .kp-nav__paneeli .kp-mega__otsikko {
    font-weight: 700;
    font-size: 17px;
    line-height: 24px;
    padding: var(--kp-space-1) 0 var(--kp-space-2);
    border-bottom: 3px solid var(--kp-merkki);
    margin-bottom: var(--kp-space-2);
  }
  .kp-mega__lista { list-style: none; margin: 0; padding: 0; }
  .kp-nav .kp-nav__paneeli .kp-mega__lista a {
    font-size: 16px;
    line-height: 22px;
    padding: var(--kp-space-2);
    margin: 0 calc(-1 * var(--kp-space-2));
    border-radius: var(--kp-radius-sm);
  }
  .kp-nav .kp-nav__paneeli .kp-mega__lista a:hover {
    background: var(--kp-savy);
    text-decoration: none;
  }
  .kp-nav .kp-nav__paneeli--mega > .kp-nav__osion-etusivu a[aria-current="page"],
  .kp-nav .kp-nav__paneeli--mega .kp-mega__otsikko[aria-current="page"],
  .kp-nav .kp-nav__paneeli--mega .kp-mega__lista a[aria-current="page"] {
    background: var(--kp-savy);
    box-shadow: inset 3px 0 0 var(--kp-merkki);
    border-radius: var(--kp-radius-sm);
    font-weight: 700;
  }
  .kp-nav .kp-nav__paneeli .kp-mega__kaikki { font-weight: 700; }
}
@media (max-width: 1023px) {
  .kp-mega__lista { display: none; }
  .kp-nav .kp-nav__paneeli .kp-mega__otsikko { font-weight: 400; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .kp-header:has(.kp-nav--tasaa) .kp-nav__paneeli--mega { display: block; position: static; padding: 0 var(--kp-space-3); border: 0; border-left: 2px solid var(--kp-ruskea-10); margin: 0 0 var(--kp-space-3) var(--kp-space-2); }
  .kp-header:has(.kp-nav--tasaa) .kp-nav__paneeli--mega[hidden] { display: none; }
  .kp-header:has(.kp-nav--tasaa) .kp-mega__lista { display: none; }
  .kp-header:has(.kp-nav--tasaa) .kp-mega__otsikko { font-weight: 400; border: 0; }
  .kp-header:has(.kp-nav--tasaa) .kp-nav > li:has(> .kp-nav__paneeli--mega) { position: relative; }
}

/* ---------- Visitin konsepti: kuvallinen osioalku ----------
   Kukin etusivun pääteema alkaa yhdellä suurella, sisällöstä erotetulla kuvalla.
   Otsikko, kuvaus ja toimintolinkki ovat aina peittävällä valkoisella pinnalla;
   kuvan sävy ei siis koskaan ratkaise tekstin kontrastia. */
.vu-main--home .kp-osio--kuva-avaus {
  padding: 0 0 clamp(var(--kp-space-7), 8vw, calc(var(--kp-space-8) + var(--kp-space-3)));
  background: var(--kp-pinta);
}
/* Ensimmäisen teeman (Tapahtumat) taustapinta liittyy oikopolkuihin, mutta
   sen kuva ja sisältö alkavat rauhallisesti pinnan sisältä. */
.vu-main--home .vu-content-slot > .breakdance-rich-text-styles > .kp-osio--kuva-avaus:first-child {
  margin-top: 0;
  padding-top: clamp(var(--kp-space-5), 5vw, var(--kp-space-7));
}
.vu-main--home .kp-osio--kuva-avaus:has(.se-grid) { background: var(--kp-pinta-korostettu); }
.vu-main--home .kp-osio--kuva-avaus .kp-osio__avaus,
.vu-main--home .kp-osio--kuva-avaus .kp-osio__avaus > .wp-block-group__inner-container {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Etusivun teema-avaus on suuri kuva, mutta se kuuluu sivun sisältöön,
     ei selainikkunan reunasta reunaan. Leveys vastaa muuta kp-konttia. */
  width: min(var(--kp-wide), calc(100% - 2 * var(--kp-gutter)));
  margin-inline: auto;
  height: clamp(34rem, 72svh, 52rem);
  overflow: hidden;
  border-radius: 0 var(--kp-radius-md) var(--kp-radius-md) 0;
}
/* Gutenberg lisää ryhmälohkolle sisäisen kääreen. Alle leveän sisältörajan
   se täyttää avauskuvan leveyden; muuten sama sivukouru kertautuu. */
@media (max-width: 1199px) {
  .vu-main--home .kp-osio--kuva-avaus .kp-osio__avaus > .wp-block-group__inner-container {
    width: 100%;
    max-width: none;
    height: 100%;
    margin-inline: 0;
  }
}
/* Tabletissa Gutenbergin sisällön yhteinen kouru on 16 px. Avauskuva käyttää
   samaa kourua kuin sen alla oleva nostoryhmä. */
@media (min-width: 768px) and (max-width: 1023px) {
  .vu-main--home .kp-osio--kuva-avaus .kp-osio__avaus {
    width: calc(100% - 2 * var(--kp-space-3));
  }
}
.vu-main--home .kp-osio--kuva-avaus .kp-osio__avauskuva {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
}
.vu-main--home .kp-osio--kuva-avaus .kp-osio__avauskuva img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  object-position: center;
}
.vu-main--home .kp-osio--kuva-avaus .kp-osio__avaus > .kp-kontti,
.vu-main--home .kp-osio--kuva-avaus .kp-osio__avaus > .wp-block-group__inner-container > .kp-kontti {
  grid-area: 1 / 1;
  z-index: 1;
  display: flex;
  box-sizing: border-box;
  align-items: flex-end;
  width: 100%;
  padding: 32px;
  pointer-events: none;
}
.vu-main--home .kp-osio--kuva-avaus .kp-osio__avaus .kp-kontti > .wp-block-group__inner-container { width: 100%; }
.vu-main--home .kp-osio--kuva-avaus .kp-osio__avaus__pinta {
  box-sizing: border-box;
  width: min(34rem, 100% - 2 * var(--kp-gutter));
  margin-bottom: 0;
  padding: 32px;
  background: var(--kp-pinta);
  border-left: 8px solid var(--kp-paa);
  border-radius: 0 var(--kp-radius-md) var(--kp-radius-md) 0;
  pointer-events: auto;
}
.vu-main--home .kp-osio--kuva-avaus .kp-osio__avaus__pinta h2 {
  margin: 0;
  color: var(--kp-musta);
  font: 700 clamp(36px, 3.6vw, 56px) / 1.04 var(--kp-sans);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.vu-main--home .kp-osio--kuva-avaus .kp-osio__avaus__kuvaus {
  max-width: 38ch;
  margin: var(--kp-space-3) 0 0;
  font: 400 clamp(18px, 1.25vw, 21px) / 1.5 var(--kp-sans);
}
.vu-main--home .kp-osio--kuva-avaus .kp-osio__avaus__pinta .kp-osio__toimintolinkki { margin: var(--kp-space-4) 0 0; }
.vu-main--home .kp-osio--kuva-avaus .kp-osio__avaus__pinta .kp-osio__toimintolinkki a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--kp-space-2) var(--kp-space-3);
  border-radius: var(--kp-radius-sm);
  background: var(--kp-paa);
  color: var(--kp-paa-teksti);
  font-weight: 700;
  text-decoration: none;
}
.vu-main--home .kp-osio--kuva-avaus .kp-osio__avaus__pinta .kp-osio__toimintolinkki a:hover,
.vu-main--home .kp-osio--kuva-avaus .kp-osio__avaus__pinta .kp-osio__toimintolinkki a:active {
  background: var(--kp-paa-hover);
  color: var(--kp-paa-hover-teksti);
}
.vu-main--home .kp-osio--kuva-avaus > .kp-kontti,
.vu-main--home .kp-osio--kuva-avaus > .wp-block-group__inner-container > .kp-kontti {
  margin-top: 0;
  /* Avauskuva ja sen omat nostot kuuluvat samaan teemaan. Tiiviimpi väli
     erottaa ne seuraavasta osiosta, jonka ulompi alaväli jää ennalleen. */
  padding-top: var(--kp-space-5);
}
.vu-main--home .kp-osio--kuva-avaus .kp-nostot,
.vu-main--home .kp-osio--kuva-avaus .se-grid { margin-top: 0; }
/* Kuvallisen luvun jälkeiset kohteet ovat omia, kevyesti rajattuja pintojaan.
   Näin pyöristys kertoo vuorovaikutteisesta nostosta eikä toistu osion otsikkopinnassa. */
.vu-main--home .kp-osio--kuva-avaus .kp-nostot > li > .kp-kortti {
  background: var(--kp-pinta);
  border: 1px solid var(--kp-reuna);
  border-radius: var(--kp-radius-md);
  overflow: hidden;
}
.vu-main--home .kp-osio--kuva-avaus .kp-nostot > li > .kp-kortti .kp-kortti__kuva {
  border-radius: 0;
}
.vu-main--home .kp-osio--kuva-avaus .kp-nostot > li > .kp-kortti .kp-kortti__sisus {
  margin-top: 0;
  padding: var(--kp-space-3) var(--kp-space-3) var(--kp-space-4);
  border-top: 0;
}
.vu-main--home .kp-osio--kuva-avaus .kp-nostot > li > .kp-kortti:hover { background: var(--kp-pinta-korostettu); }
/* Tapahtumat käyttävät samaa kevyttä pintaa, mutta ensimmäinen tapahtuma säilyy
   suurempana toimituksellisena nostona kuin sitä seuraavat kaksi kohdetta. */
.vu-main--home .kp-osio--kuva-avaus .se-card {
  background: var(--kp-pinta);
  border: 1px solid var(--kp-reuna);
  border-radius: var(--kp-radius-md);
  overflow: hidden;
}
.vu-main--home .kp-osio--kuva-avaus .se-link { height: 100%; gap: 0; }
.vu-main--home .kp-osio--kuva-avaus .se-body { padding: var(--kp-space-3) var(--kp-space-3) var(--kp-space-4); }
.vu-main--home .kp-osio--kuva-avaus .se-card:not(:first-child) .se-link { gap: 0; }
.vu-main--home .kp-osio--kuva-avaus .se-card:not(:first-child) .se-body { padding: var(--kp-space-3) var(--kp-space-3) var(--kp-space-3) 0; }
.vu-main--home .kp-osio--kuva-avaus .se-card:hover { background: var(--kp-pinta-korostettu); }
@media (max-width: 767px) {
  .vu-main--home .kp-osio--kuva-avaus > .kp-kontti,
  .vu-main--home .kp-osio--kuva-avaus > .wp-block-group__inner-container > .kp-kontti { padding-top: var(--kp-space-3); }
  .vu-main--home .kp-osio--kuva-avaus .kp-osio__avaus,
  .vu-main--home .kp-osio--kuva-avaus .kp-osio__avaus > .wp-block-group__inner-container { height: clamp(30rem, 76svh, 42rem); }
  .vu-main--home .kp-osio--kuva-avaus .kp-osio__avaus__pinta {
    width: calc(100% - 2 * var(--kp-gutter));
    margin-bottom: var(--kp-space-4);
    padding: var(--kp-space-4);
    border-left-width: 6px;
  }
  .vu-main--home .kp-osio--kuva-avaus .kp-osio__avaus__pinta h2 { font-size: clamp(34px, 10vw, 44px); }
  .vu-main--home .kp-osio--kuva-avaus .se-card:not(:first-child) .se-body { padding: var(--kp-space-3); }
}
@media (forced-colors: active) {
  .vu-main--home .kp-osio--kuva-avaus .kp-osio__avaus__pinta { border: 1px solid CanvasText; border-left: 8px solid CanvasText; }
  .vu-main--home .kp-osio--kuva-avaus .kp-osio__avaus__pinta .kp-osio__toimintolinkki a { border: 2px solid ButtonText; }
}

/* ---------- Visitin etusivun hero ja ylävalikko ----------
   Hero on työpöydällä kokonainen näkymä. Header on kuvan päällä, mutta kaikki
   luettava ja käytettävä sisältö on omalla peittävällä pinnallaan: kontrasti ei
   koskaan riipu herokuvan kohdasta. Sisäsivut säilyttävät tavallisen headerin. */
@media (min-width: 1024px) {
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-header {
    position: absolute;
    inset: 0 0 auto;
    /* Header kelluu maltillisesti herokuvan sisällä; myös väripalkki siirtyy
       mukana. WordPressin hallintapalkin korkeus huomioidaan ensin. */
    top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--kp-space-4));
    z-index: 80;
    background: transparent;
    border-bottom: 0;
  }
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-header__sisus {
    min-height: 96px;
  }
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-header__brandi {
    margin-top: var(--kp-space-2);
    padding: var(--kp-space-2) var(--kp-space-3);
    background: var(--kp-pinta);
    border-radius: 0 0 var(--kp-radius-md) 0;
  }
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-header__tyokalut {
    margin-top: var(--kp-space-2);
  }
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-header__tyokalut > a:not(.kp-haku-nappi) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--kp-space-3);
    background: var(--kp-pinta);
    border-radius: var(--kp-radius-sm);
  }
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-header__navirivi {
    background: transparent;
    border-top: 0;
  }
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-header__navirivi .kp-nav {
    width: fit-content;
    max-width: calc(100% - 2 * var(--kp-gutter));
    margin: 0 0 0 max(var(--kp-gutter), calc((100% - var(--kp-wide)) / 2));
    padding: 0 var(--kp-space-4);
    background: var(--kp-pinta);
    border-radius: 0 0 var(--kp-radius-md) var(--kp-radius-md);
  }
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-nav > li > a,
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-nav__osio {
    padding-inline: var(--kp-space-2);
  }
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-nav > li > a:hover,
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-nav > li > a:focus-visible,
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-nav__osio:hover,
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-nav__osio:focus-visible,
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-nav__osio[aria-expanded="true"] {
    background: var(--kp-paa);
    color: var(--kp-paa-teksti);
    border-bottom-color: var(--kp-paa);
  }
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-nav__paneeli {
    background: var(--kp-pinta);
    border-top: 4px solid var(--kp-paa);
    border-radius: 0 0 var(--kp-radius-md) var(--kp-radius-md);
    box-shadow: none;
  }
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-nav__paneeli--mega {
    box-shadow: none;
  }
  [data-sivusto="visit"] .home .kp-hero--kuva {
    min-height: 100dvh;
    grid-template-rows: minmax(calc(100dvh - 8px), 1fr) 8px;
  }
  [data-sivusto="visit"] .home .kp-hero--kuva > .kp-kuva {
    min-height: calc(100dvh - 8px);
  }
  [data-sivusto="visit"] .home .kp-hero--kuva .kp-hero__kortti {
    width: min(35rem, 100% - 2 * var(--kp-gutter));
    margin-bottom: clamp(var(--kp-space-5), 8svh, var(--kp-space-8));
    padding: var(--kp-space-6) var(--kp-space-6) var(--kp-space-6) calc(var(--kp-space-6) - 8px);
  }
  [data-sivusto="visit"] .home .kp-hero--kuva h1 {
    font-size: clamp(56px, 5vw, 76px);
    font-weight: 700;
    text-shadow: 0 2px 10px color-mix(in srgb, var(--kp-musta) 65%, transparent);
  }
}
@media (max-width: 1023px) {
  [data-sivusto="visit"] .home .kp-hero--kuva > .kp-kuva {
    min-height: max(30rem, 76svh);
  }
}

@media (min-width: 1024px) {
  [data-sivusto="visit"] .home .kp-hero--kuva > .kp-kontti:has(.kp-hero__kortti) {
    align-self: stretch;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  [data-sivusto="visit"] .home .kp-hero--kuva > .kp-hero__kortti {
    align-self: center;
    justify-self: center;
    z-index: 3;
  }
  [data-sivusto="visit"] .home .kp-hero--kuva .kp-hero__kortti {
    width: min(76rem, 100% - 2 * var(--kp-gutter));
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    text-align: center;
  }
  [data-sivusto="visit"] .home .kp-hero--kuva .kp-hero__kortti > h1:only-child { margin: 0; }
  [data-sivusto="visit"] .home .kp-hero--kuva h1,
  [data-sivusto="visit"] .home .kp-hero--kuva .kp-ingressi,
  [data-sivusto="visit"] .home .kp-hero--kuva .kp-hero__kortti > p:not(.kp-vinjetti) {
    color: var(--kp-valkoinen);
  }
  [data-sivusto="visit"] .home .kp-hero--kuva .kp-ingressi,
  [data-sivusto="visit"] .home .kp-hero--kuva .kp-hero__kortti > p:not(.kp-vinjetti) {
    margin-inline: auto;
    max-width: 46ch;
  }
}

@media (max-width: 1023px) {
  [data-sivusto="visit"] .home .kp-hero--kuva > .kp-kontti:has(.kp-hero__kortti) {
    align-self: stretch;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  [data-sivusto="visit"] .home .kp-hero--kuva > .kp-hero__kortti {
    align-self: center;
    justify-self: center;
    z-index: 3;
  }
  [data-sivusto="visit"] .home .kp-hero--kuva .kp-hero__kortti {
    width: min(34rem, calc(100% - 2 * var(--kp-gutter)));
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    text-align: center;
  }
  [data-sivusto="visit"] .home .kp-hero--kuva .kp-hero__kortti > h1:only-child { margin: 0; }
  [data-sivusto="visit"] .home .kp-hero--kuva h1,
  [data-sivusto="visit"] .home .kp-hero--kuva .kp-ingressi,
  [data-sivusto="visit"] .home .kp-hero--kuva .kp-hero__kortti > p:not(.kp-vinjetti) {
    color: var(--kp-valkoinen);
  }
  [data-sivusto="visit"] .home .kp-hero--kuva h1 {
    font-size: clamp(44px, 11vw, 56px);
    font-weight: 700;
    line-height: 1.06;
    text-shadow: 0 2px 10px color-mix(in srgb, var(--kp-musta) 65%, transparent);
  }
  [data-sivusto="visit"] .home .kp-hero--kuva .kp-ingressi,
  [data-sivusto="visit"] .home .kp-hero--kuva .kp-hero__kortti > p:not(.kp-vinjetti) {
    margin-inline: auto;
    max-width: 32ch;
  }
}

/* Työpöydällä kaikki headerin olennaiset toiminnot ovat samalla rivillä.
   Sama rakenne alkaa 1024 px:stä; vasta sitä kapeampi näkymä siirtyy
   mobiilivalikkoon. */
@media (min-width: 1024px) {
  /* Yläpalkki on oma peittävä, valkoinen pintansa: kuvan sävy ei vaikuta
     navigoinnin kontrastiin. Alavalikot pysyvät samalla pinnalla. */
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-header__brandi,
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-header__navirivi .kp-nav,
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-header__tyokalut > a:not(.kp-haku-nappi) {
    background: var(--kp-pinta);
  }
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: 6px auto;
    column-gap: 0;
    align-items: start;
    padding: 0 max(var(--kp-gutter), calc((100% - var(--kp-wide) - var(--kp-space-8)) / 2));
  }
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-header::before {
    grid-column: 1 / -1;
    grid-row: 1;
    border-radius: 0;
  }
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-header__sisus {
    display: contents;
  }
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-header__brandi,
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-header__tyokalut,
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-header__navirivi {
    grid-row: 2;
  }
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-header__brandi {
    grid-column: 1;
    box-sizing: border-box;
    height: 76px;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    align-items: center;
    border-radius: 0 0 0 var(--kp-radius-lg);
  }
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-header__brandi img {
    height: 30px;
    /* Tunnuksen piirros on SVG:n omassa laatikossa hieman alhaalla. */
    transform: translateY(-3px);
  }
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-header__sivusto {
    font-size: 18px;
    line-height: 24px;
  }
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-header__navirivi {
    grid-column: 2;
    align-self: start;
    border-left: 1px solid var(--kp-reuna);
  }
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-header__navirivi .kp-nav {
    width: 100%;
    max-width: none;
    height: 76px;
    margin: 0;
    /* Ensimmäisen ja viimeisen kohdan hover yltää erotusviivaan asti. */
    padding: 0;
    align-items: stretch;
    justify-content: flex-start;
    column-gap: 0;
    border-radius: 0;
  }
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-nav > li > a,
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-nav__osio {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-height: 76px;
    padding: 0 var(--kp-space-3);
    font-size: 14px;
  }
  /* Nuolen oma alapainotus nosti painikkeen tekstin optisesti liian ylös.
     Tässä yhtenäisessä header-rivissä myös nuoli pysyy täsmälleen keskellä. */
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-nav__osio::after,
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-nav__osio[aria-expanded="true"]::after {
    margin: 0 0 0 8px;
    position: relative;
    top: 0;
  }
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-nav > li > a:hover,
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-nav > li > .kp-nav__osio:hover {
    background: var(--kp-paa);
  }
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-header__tyokalut {
    grid-column: 3;
    height: 76px;
    margin-top: 0;
    gap: 0;
  }
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-header__tyokalut > a:not(.kp-haku-nappi) {
    box-sizing: border-box;
    min-height: 76px;
    border-left: 1px solid var(--kp-reuna);
    border-radius: 0;
    font-size: 14px;
    font-weight: 400;
  }
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-header__tyokalut .kp-haku-nappi {
    min-height: 76px;
    /* Päädyn yläreuna jatkaa kolmiväripalkkia suorana. Vain alakulma
       pyöristyy, jotta 6 px korkea palkki ei tee loivempaa yläkaarta. */
    border-radius: 0 0 var(--kp-radius-lg) 0;
  }
  /* Varjo kuuluu kokonaiselle headerille, ei sen yksittäisille linkeille.
     drop-shadow käyttää yhtenäistä muotomaskia eikä jätä päävalikon sisään
     pystysuuntaisia varjosaumoja. */
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-header {
    filter: drop-shadow(0 10px 20px color-mix(in srgb, var(--kp-musta) 18%, transparent));
  }
}

/* Etusivun päävalikossa jokainen kohta jakaa aidosti käytettävissä olevan
   keskialueen. Aiempi min-content-leveys puristi tekstin ja nuolen toistensa
   päälle, kun työpöytä oli leveä mutta ei erittäin leveä. */
@media (min-width: 1024px) {
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-nav > li {
    flex: 1.2 1 0;
    min-width: 0;
  }
  /* Hover-alueet täyttävät edelleen koko keskialueen, mutta niiden leveys
     seuraa otsikon todellista pituutta. Näin pitkä osionimi ei rivity heti. */
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-nav > li:nth-child(2) { flex-grow: 2.3; }
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-nav > li:nth-child(3) { flex-grow: 1.1; }
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-nav > li:nth-child(4) { flex-grow: 1.3; }
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-nav > li:nth-child(5) { flex-grow: .8; }
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-nav > li > a,
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-nav > li > .kp-nav__osio {
    justify-content: center;
    min-width: 0;
    padding-inline: clamp(6px, 1vw, var(--kp-space-3));
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
  }
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-nav > li > .kp-nav__osio::after,
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-nav > li > .kp-nav__osio[aria-expanded="true"]::after {
    position: static;
    margin: 0 0 0 7px;
  }
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-nav > li > .kp-nav__osio::after {
    transform: translateY(-18%) rotate(45deg);
  }
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-nav > li > .kp-nav__osio[aria-expanded="true"]::after {
    transform: translateY(18%) rotate(225deg);
  }
}

/* Osion valikon polkumalli (Asetukset → Kankaanpää → Osion valikon malli).
   Ensimmäinen taso pitää koko osion näkyvissä; toinen taso näyttää vain
   nykyisen haaran. Värit tulevat sivuston rooleista (--kp-merkki, --kp-savy,
   --kp-savy-2, --kp-haara, --kp-reuna), joten malli käy kaikille sivustoille. */
.kp-sisasivu:has(.kp-alanavi--polku) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "alanavi"
    "sisalto";
  gap: var(--kp-space-5);
  align-items: start;
}
.kp-sisasivu:has(.kp-alanavi--polku) > .kp-sisalto { width: min(100%, 720px); }
.kp-alanavi--polku {
  position: static;
  width: 100%;
  border-top: 3px solid var(--kp-merkki);
  border-bottom: 0;
  background: var(--kp-pinta);
}
.kp-alanavi--polku .kp-alanavi__sisus { display: block; }
.kp-alanavi--polku .kp-alanavi__paataso {
  display: block;
  padding: var(--kp-space-2) 0 0;
}
.kp-alanavi--polku .kp-alanavi__juuri {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--kp-musta);
  font: 700 28px/34px var(--kp-sans);
  text-decoration: none;
}
.kp-alanavi--polku .kp-alanavi__juuri:hover { text-decoration: underline; text-underline-offset: 4px; }
.kp-alanavi--polku .kp-alanavi__lista { list-style: none; margin: 0; padding: 0; }
.kp-alanavi--polku .kp-alanavi__lista--paataso,
.kp-alanavi--polku .kp-alanavi__lista--alataso {
  display: block;
}
.kp-alanavi--polku .kp-alanavi__lista--paataso > li,
.kp-alanavi--polku .kp-alanavi__lista--alataso > li { border-bottom: 1px solid var(--kp-reuna); }
.kp-alanavi--polku .kp-alanavi__lista a {
  display: flex;
  align-items: center;
  min-height: 48px;
  width: 100%;
  padding: 12px var(--kp-space-3);
  color: var(--kp-musta);
  font-size: 16px;
  line-height: 22px;
  text-decoration: none;
}
.kp-alanavi--polku .kp-alanavi__lista a:hover {
  background: var(--kp-savy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.kp-alanavi--polku .kp-alanavi__lista a:focus-visible,
.kp-alanavi--polku .kp-alanavi__nappi:focus-visible {
  position: relative;
  z-index: 1;
  outline: 3px solid var(--kp-musta);
  outline-offset: 3px;
}
/* Yksi korostusväri: polulla oleva yläsivu lihavoidaan, ja vain nykyinen
   sivu saa vihreän pinnan ja merkkiviivan kummallakin tasolla. */
.kp-alanavi--polku .kp-alanavi__lista--paataso > li.is-polulla > a { font-weight: 700; }
.kp-alanavi--polku .kp-alanavi__lista a[aria-current="page"] {
  background: var(--kp-savy-2);
  box-shadow: inset 4px 0 0 var(--kp-merkki);
  font-weight: 700;
}
/* Alataso sisennetään yläotsikon tekstin kohdalle; vaalea viiva kertoo haaran. */
.kp-alanavi--polku .kp-alanavi__lista--paataso > li.is-polulla > .kp-alanavi__lista--alataso {
  margin: var(--kp-space-1) 0 var(--kp-space-2) var(--kp-space-3);
  border-left: 2px solid var(--kp-haara);
}
.kp-alanavi--polku .kp-alanavi__lista--alataso > li:last-child { border-bottom: 0; }
.kp-alanavi--polku .kp-alanavi__lista--alataso a {
  min-height: 44px;
  margin-left: -2px;
  padding: 10px var(--kp-space-3);
  font-size: 15px;
}
.kp-alanavi--polku .kp-alanavi__nappi { display: none; }

/* Alasivun kuvanauha: header kelluu kuvan päällä kuten etusivulla ja
   valkoinen sisältöpinta nousee kuvan alareunan päälle. Murupolku ja
   otsikko ovat aina valkoisella pinnalla, eivät kuvan päällä. */
.kp-kuvanauha { display: none; }
@media (min-width: 1024px) {
  .kp-on-kuvanauha .kp-kuvanauha {
    display: block;
    height: 360px;
    background: var(--kp-savy-2);
  }
  .kp-kuvanauha img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
  }
  .kp-on-kuvanauha .vu-main--page > .kp-kontti {
    position: relative;
    max-width: calc(var(--kp-wide) + 2 * var(--kp-gutter));
    margin-top: -130px;
    padding-top: var(--kp-space-5);
    background: var(--kp-pinta);
    border-radius: var(--kp-radius-lg) var(--kp-radius-lg) 0 0;
  }

  /* Osion valikko korttina; osion nimi on kortin otsikko. */
  .kp-alanavi--polku {
    border: 1px solid var(--kp-reuna);
    border-radius: var(--kp-radius-md);
    overflow: hidden;
  }
  .kp-alanavi--polku .kp-alanavi__paataso { padding: 0 0 var(--kp-space-2); }
  .kp-alanavi--polku .kp-alanavi__juuri {
    display: block;
    padding: var(--kp-space-3);
    border-bottom: 1px solid var(--kp-reuna);
    font-size: 18px;
    line-height: 24px;
  }
  .kp-alanavi--polku .kp-alanavi__lista--paataso > li:last-child { border-bottom: 0; }
}
@media (min-width: 1024px) {
  .kp-sisasivu:has(.kp-alanavi--polku) {
    grid-template-columns: 280px minmax(0, 720px);
    grid-template-areas: "alanavi sisalto";
    gap: var(--kp-space-7);
  }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .kp-sisasivu:has(.kp-alanavi--polku) {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--kp-space-5);
  }
}
@media (max-width: 1023px) {
  .kp-sisasivu:has(.kp-alanavi--polku) { gap: var(--kp-space-5); }
  .kp-sisasivu:has(.kp-alanavi--polku) > .kp-sisalto { width: 100%; }
  .kp-alanavi--polku .kp-alanavi__nappi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: var(--kp-space-2) var(--kp-space-3);
    background: var(--kp-valkoinen);
    border: 1px solid var(--kp-reuna);
    border-left: 8px solid var(--kp-merkki);
    border-radius: 0 0 var(--kp-radius-md) 0;
  }
  .kp-alanavi--polku .kp-alanavi__nappi::after { float: none; margin: 0 var(--kp-space-2) 0 var(--kp-space-3); }
  .kp-alanavi--polku:not(.is-open) .kp-alanavi__sisus { display: none; }
  .kp-alanavi--polku.is-open .kp-alanavi__sisus { display: block; padding: 0; }
  .kp-alanavi--polku .kp-alanavi__paataso,
  .kp-alanavi--polku .kp-alanavi__alataso {
    display: block;
    padding: var(--kp-space-3);
  }
  /* Mobiilin avauspainike nimeää jo osion. */
  .kp-alanavi--polku .kp-alanavi__juuri { display: none; }
  .kp-alanavi--polku .kp-alanavi__lista--paataso,
  .kp-alanavi--polku .kp-alanavi__lista--alataso { display: block; }
  .kp-alanavi--polku .kp-alanavi__lista a { display: flex; width: 100%; }
  .kp-alanavi--polku .kp-alanavi__lista--paataso > li,
  .kp-alanavi--polku .kp-alanavi__lista--alataso > li { border-top: 1px solid var(--kp-reuna); }
  .kp-alanavi--polku .kp-alanavi__lista--paataso > li:first-child,
  .kp-alanavi--polku .kp-alanavi__lista--alataso > li:first-child { border-top: 0; }
}
@media (forced-colors: active) {
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-header__brandi,
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-header__tyokalut > a:not(.kp-haku-nappi),
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-header__navirivi .kp-nav,
  [data-sivusto="visit"] :is(.home, .kp-on-kuvanauha) .kp-nav__paneeli {
    border: 1px solid CanvasText;
  }
}

/* Etusivun heron pikalinkit (pillerit) */
/* Visit ja Business, hyväksytty 30.9.2026 */
[data-sivusto="visit"] .home .kp-hero--kuva::before {
  content: "";
  grid-area: pino;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(0 0 0 / 55%) 0%, rgb(0 0 0 / 55%) 60%, rgb(0 0 0 / 18%) 80%, rgb(0 0 0 / 0%) 100%),
    radial-gradient(ellipse 60% 45% at 50% 58%, rgb(0 0 0 / 12%), rgb(0 0 0 / 0%) 70%);
}
.kp-hero .kp-oikopolut-osio {
  margin: var(--kp-space-5) 0 0;
  padding: 0;
  background: none;
  color: inherit;
}
.kp-hero .kp-oikopolut-osio .kp-kontti {
  display: block;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}
.kp-hero .kp-oikopolut-osio h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.kp-hero .kp-oikopolut-osio__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kp-hero .kp-oikopolut-osio__lista li {
  display: flex;
  min-width: 0;
  margin: 0;
}
.kp-hero .kp-oikopolut-osio__ikoni {
  display: inline-grid;
  flex: 0 0 1.1rem;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--kp-ruskea);
}
.kp-hero .kp-oikopolut-osio__ikoni svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.kp-hero .kp-oikopolut-osio__lista a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: auto;
  min-height: 52px;
  padding: 0 22px 0 26px;
  color: var(--kp-musta);
  background: var(--kp-valkoinen);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgb(0 0 0 / 18%);
  font: 700 17px/1.2 var(--kp-sans);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.kp-hero .kp-oikopolut-osio__lista a:hover {
  color: var(--kp-musta);
  background: var(--kp-paa);
}
.kp-hero .kp-oikopolut-osio__lista a:hover .kp-oikopolut-osio__ikoni {
  color: var(--kp-musta);
}
.kp-hero .kp-oikopolut-osio__lista a:focus-visible {
  outline: 3px solid var(--kp-valkoinen);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--kp-musta);
}
@media (max-width: 1023px) {
  [data-sivusto="visit"] .home .kp-hero--kuva h1 {
    font-size: clamp(34px, 11vw, 56px);
  }
  .kp-hero .kp-oikopolut-osio { margin-top: var(--kp-space-4); }
  .kp-hero .kp-oikopolut-osio__lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .kp-hero .kp-oikopolut-osio__lista a {
    flex: 1;
    justify-content: center;
    min-height: 48px;
    padding: 0 16px 0 18px;
    font-size: 16px;
  }
}
@media (max-width: 359px) {
  .kp-hero .kp-oikopolut-osio__lista { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .kp-hero .kp-oikopolut-osio__lista a,
}
@media (forced-colors: active) {
  .kp-hero .kp-oikopolut-osio__lista a { border: 1px solid linktext; }
}

/* Osion etusivu (Aktiviteetit) */
[data-sivusto="visit"] .kp-sisasivu:has(.ak) {
  display: block;
  padding-bottom: var(--kp-space-8);
}
[data-sivusto="visit"] .kp-sisasivu:has(.ak) .kp-alanavi,
[data-sivusto="visit"] .kp-sisasivu:has(.ak) .vu-child-pages,
[data-sivusto="visit"] .kp-sisasivu:has(.ak) .vu-title-slot { display: none; }
[data-sivusto="visit"] .kp-sisasivu:has(.ak) > .kp-sisalto { width: 100%; max-width: none; }

/* Info on sivuvalikkovetoinen koontisivu: yhteisen sivupohjan korttilista
   toistaisi samat neljä kohdetta kolmannen kerran. */
html[data-sivusto="visit"] body.page-id-90 .vu-child-pages { display: none; }

[data-sivusto="visit"] .ak {
  width: min(100%, var(--kp-wide));
  margin-inline: auto;
  color: var(--kp-musta);
  font-family: var(--kp-sans);
}
[data-sivusto="visit"] .ak-hero {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  column-gap: var(--kp-space-4);
  margin-bottom: 0;
  padding-bottom: 0;
  isolation: isolate;
}
[data-sivusto="visit"] .ak-hero__sisalto {
  grid-column: 1 / span 5;
  grid-row: 1;
  z-index: 1;
  max-width: none;
  margin-bottom: 0;
  padding: clamp(var(--kp-space-4), 3vw, var(--kp-space-6));
  background: #ffffffab;
  border-left: 8px solid var(--kp-merkki);
}
[data-sivusto="visit"] .ak-hero h1 {
  margin: 0;
  color: var(--kp-musta);
  font: 700 clamp(42px, 4vw, 60px)/0.98 var(--kp-sans);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
[data-sivusto="visit"] .ak-hero__ingressi {
  max-width: 30rem;
  margin: var(--kp-space-4) 0 0;
  font: 400 var(--kp-fs-ingressi)/1.4 var(--kp-sans);
}
[data-sivusto="visit"] .ak-hero__kuva,
[data-sivusto="visit"] .ak-ryhma__kuva {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0 0 var(--kp-radius-lg) 0;
}
[data-sivusto="visit"] .ak-hero__kuva {
  grid-column: 1 / -1;
  grid-row: 1;
  aspect-ratio: 16 / 7;
  min-height: 26rem;
}

[data-sivusto="visit"] .ak-tabit {
  position: sticky;
  top: var(--kp-space-3);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--kp-space-4);
  margin: 0;
  padding: var(--kp-space-3) var(--kp-space-4);
  background: var(--kp-pinta);
  border-block: 1px solid var(--kp-reuna);
}
[data-sivusto="visit"] .ak-tabit ul {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: var(--kp-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
[data-sivusto="visit"] .ak-tabit a {
  display: inline-flex;
  align-items: center;
  gap: var(--kp-space-2);
  min-height: 44px;
  padding: 0 var(--kp-space-3);
  color: var(--kp-musta);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  border-radius: var(--kp-radius-sm);
}
[data-sivusto="visit"] .ak-tabit a:hover { background: var(--kp-savy); }
[data-sivusto="visit"] .ak-tabit__maara {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding-inline: var(--kp-space-1);
  font-size: 14px;
  font-weight: 400;
  border-radius: 99px;
  background: var(--kp-savy-2);
}

[data-sivusto="visit"] .ak-ryhma {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(var(--kp-space-5), 5vw, var(--kp-space-7));
  align-items: start;
  scroll-margin-top: var(--kp-space-8);
}
[data-sivusto="visit"] .ak-ryhma:first-of-type {
  margin-top: 0;
  padding-top: var(--kp-space-7);
}
[data-sivusto="visit"] .ak-ryhma + .ak-ryhma {
  margin-top: var(--kp-space-7);
  padding-top: var(--kp-space-7);
  border-top: 1px solid var(--kp-reuna);
}
[data-sivusto="visit"] .ak-ryhma__media { margin: 0; }
[data-sivusto="visit"] .ak-ryhma__sisalto { min-width: 0; }
[data-sivusto="visit"] .ak-ryhma h2 {
  margin: 0;
  font: 700 var(--kp-fs-h2)/1.13 var(--kp-sans);
  letter-spacing: -0.02em;
}
[data-sivusto="visit"] .ak-ryhma h2 a {
  color: var(--kp-musta);
  text-decoration: none;
}
[data-sivusto="visit"] .ak-ryhma h2 a:hover { text-decoration: underline; text-underline-offset: 0.15em; }
[data-sivusto="visit"] .ak-ryhma__ote {
  margin: var(--kp-space-3) 0 0;
  font: 400 var(--kp-fs-leipa)/1.5 var(--kp-sans);
}
[data-sivusto="visit"] .ak-linkit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
  margin: var(--kp-space-4) 0 var(--kp-space-5);
  padding: 0;
  list-style: none;
  background: none;
  border-top: 1px solid var(--kp-ruskea-10);
}
[data-sivusto="visit"] .ak-linkit li {
  display: flex;
  margin: 0;
  border-bottom: 1px solid var(--kp-ruskea-10);
}
[data-sivusto="visit"] .ak-linkit a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 12px 4px 12px 0;
  color: var(--kp-musta);
  font: 700 17px/24px var(--kp-sans);
  text-decoration: none;
  background: none;
}
[data-sivusto="visit"] .ak-linkit a::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  opacity: .45;
  transform: rotate(45deg);
  transition: transform .15s, opacity .15s;
}
[data-sivusto="visit"] .ak-linkit a:hover { text-decoration: underline; text-underline-offset: 4px; }
[data-sivusto="visit"] .ak-linkit a:hover::after { opacity: 1; transform: translateX(3px) rotate(45deg); }
@media (prefers-reduced-motion: reduce) { [data-sivusto="visit"] .ak-linkit a::after { transition: none; } }
[data-sivusto="visit"] .ak-ryhma__kaikki {
  display: inline-flex;
  align-items: center;
  gap: var(--kp-space-2);
  min-height: 52px;
  margin-top: var(--kp-space-4);
  padding: 0 var(--kp-space-4);
  color: var(--kp-musta);
  font: 700 16px/1.25 var(--kp-sans);
  text-decoration: none;
  background: var(--kp-paa);
  border-radius: 0 0 var(--kp-radius-md) 0;
}
[data-sivusto="visit"] .ak-ryhma__kaikki:hover { background: var(--kp-paa-hover); color: var(--kp-paa-hover-teksti); }
[data-sivusto="visit"] .ak a:focus-visible { outline: 3px solid var(--kp-musta); outline-offset: 3px; }

@media (max-width: 1023px) {
  [data-sivusto="visit"] .ak-hero,
  [data-sivusto="visit"] .ak-ryhma { grid-template-columns: minmax(0, 1fr); }
  [data-sivusto="visit"] .ak-hero {
    display: grid;
    padding-bottom: 0;
  }
  [data-sivusto="visit"] .ak-hero__sisalto {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
  }
  [data-sivusto="visit"] .ak-hero__kuva {
    min-height: 0;
    aspect-ratio: 3 / 2;
  }
  [data-sivusto="visit"] .ak-tabit { position: static; }
}
@media (max-width: 767px) {
  [data-sivusto="visit"] .ak-hero { margin-bottom: 0; }
  [data-sivusto="visit"] .ak-hero h1 { font-size: clamp(38px, 11vw, 48px); }
  [data-sivusto="visit"] .ak-tabit { display: block; margin-bottom: 0; padding: var(--kp-space-3); }
  [data-sivusto="visit"] .ak-tabit ul { gap: var(--kp-space-1); }
  [data-sivusto="visit"] .ak-tabit a { min-height: 44px; padding-inline: var(--kp-space-2); font-size: 15px; }
  [data-sivusto="visit"] .ak-ryhma:first-of-type { margin-top: 0; padding-top: var(--kp-space-6); }
  [data-sivusto="visit"] .ak-ryhma + .ak-ryhma { margin-top: var(--kp-space-6); padding-top: var(--kp-space-6); }
  [data-sivusto="visit"] .ak-linkit { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Ajankohtaista-arkisto (Breakdance) ---------- */

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-arkisto {
  box-sizing: border-box;
  max-width: var(--kp-wide);
  margin: 0 auto;
  padding: var(--kp-space-7) var(--kp-gutter) var(--kp-space-8);
  color: var(--kp-musta);
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-arkisto__otsake {
  max-width: 46rem;
  padding-bottom: var(--kp-space-5);
  border-bottom: 4px solid var(--kp-paa);
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-arkisto h1 {
  margin: 0;
  color: var(--kp-musta);
  font-family: var(--kp-sans);
  font-size: clamp(40px, 4vw, 64px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-arkisto__ruudukko {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--kp-space-5) var(--kp-space-4);
  margin-top: var(--kp-space-6);
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-arkisto__kortti {
  display: flex;
  min-width: 0;
  flex-direction: column;
  border-top: 1px solid var(--kp-reuna);
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-arkisto__kuvalinkki {
  display: block;
  order: -1;
  margin-top: var(--kp-space-3);
  overflow: hidden;
  border-radius: 0 0 var(--kp-radius-md) 0;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-arkisto__kuvalinkki:has(img[src=""]),
:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-arkisto__kuvalinkki:has(img:not([src])) {
  display: none;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-arkisto__kuva {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-arkisto__korttisisalto {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--kp-space-2);
  padding: var(--kp-space-3) 0 var(--kp-space-4);
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-arkisto__aika {
  color: var(--kp-ruskea);
  font-family: var(--kp-sans);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-arkisto__otsikko {
  margin: 0;
  font-family: var(--kp-sans);
  font-size: var(--kp-fs-h3);
  font-weight: 700;
  line-height: 1.18;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-arkisto__otsikko a {
  color: inherit;
  text-decoration: none;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-arkisto__kortti:hover .kp-ajankohtaista-arkisto__otsikko a {
  text-decoration: underline;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-arkisto__ote {
  margin: 0;
  font-family: var(--kp-sans);
  font-size: 16px;
  line-height: 1.5;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-arkisto a:focus-visible {
  outline: 3px solid var(--kp-musta);
  outline-offset: 4px;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-arkisto .bde-posts-pagination {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: var(--kp-space-2);
  margin-top: var(--kp-space-2);
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-arkisto .bde-posts-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kp-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-arkisto .bde-posts-pagination li {
  display: flex;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-arkisto .bde-posts-pagination a,
:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-arkisto .bde-posts-pagination span {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 var(--kp-space-2);
  border: 1px solid var(--kp-reuna);
  color: var(--kp-musta);
  font-family: var(--kp-sans);
  font-weight: 700;
  text-decoration: none;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-arkisto .bde-posts-pagination .current {
  border-color: var(--kp-paa);
  background: var(--kp-paa);
  color: var(--kp-paa-teksti);
}

@media (max-width: 1023px) {
  :is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-arkisto__ruudukko {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  :is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-arkisto {
    padding-top: var(--kp-space-6);
    padding-bottom: var(--kp-space-7);
  }

  :is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-arkisto__otsake {
    padding-bottom: var(--kp-space-4);
  }

  :is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-arkisto__ruudukko {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kp-space-5);
    margin-top: var(--kp-space-5);
  }

  :is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-arkisto__kuva {
    aspect-ratio: 16 / 9;
  }
}

/* ---------- Etusivun Ajankohtaista-nosto (Gutenberg) ---------- */

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-osio--ajankohtaista {
  padding-block: var(--kp-space-7);
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-nosto {
  max-width: var(--kp-wide);
  margin: 0 auto;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-nosto__otsake {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--kp-space-4);
  padding-bottom: var(--kp-space-4);
  border-bottom: 4px solid var(--kp-paa);
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-nosto h2 {
  margin: 0;
  color: var(--kp-musta);
  font-family: var(--kp-sans);
  font-size: var(--kp-fs-h2);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-nosto__kaikki {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 var(--kp-space-3);
  border-radius: var(--kp-radius-md);
  background: var(--kp-paa);
  color: var(--kp-paa-teksti);
  font-family: var(--kp-sans);
  font-weight: 700;
  text-decoration: none;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-nosto__kaikki:hover {
  background: var(--kp-paa-hover);
  color: var(--kp-paa-hover-teksti);
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-nosto__kaikki:focus-visible,
:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-nosto h3 a:focus-visible {
  outline: 3px solid var(--kp-musta);
  outline-offset: 4px;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-nosto__ruudukko {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--kp-space-4);
  margin-top: var(--kp-space-5);
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-nosto__kortti {
  min-width: 0;
  border-top: 1px solid var(--kp-reuna);
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-nosto__kuva {
  display: block;
  width: 100%;
  margin-top: var(--kp-space-3);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0 0 var(--kp-radius-md) 0;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-nosto__korttisisalto {
  display: grid;
  gap: var(--kp-space-2);
  padding: var(--kp-space-3) 0 var(--kp-space-1);
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-nosto__aika {
  color: var(--kp-ruskea);
  font-family: var(--kp-sans);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-nosto h3,
:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-nosto p {
  margin: 0;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-nosto h3 {
  font-family: var(--kp-sans);
  font-size: var(--kp-fs-h3);
  font-weight: 700;
  line-height: 1.18;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-nosto h3 a {
  color: var(--kp-musta);
  text-decoration: none;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-nosto__kortti:hover h3 a {
  text-decoration: underline;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-nosto p {
  font-family: var(--kp-sans);
  font-size: 16px;
  line-height: 1.5;
}

@media (max-width: 1023px) {
  :is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-nosto__ruudukko {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  :is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-osio--ajankohtaista {
    padding-block: var(--kp-space-6);
  }

  :is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-nosto__otsake {
    align-items: start;
    flex-direction: column;
  }

  :is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-nosto__ruudukko {
    grid-template-columns: minmax(0, 1fr);
  }

  :is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-ajankohtaista-nosto__kuva {
    aspect-ratio: 16 / 9;
  }
}

/* ---------- Haku ja 404 (Breakdance) ---------- */

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-haku {
  display: block;
  max-width: 42rem;
  margin-top: var(--kp-space-5);
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-haku label {
  display: block;
  margin-bottom: var(--kp-space-2);
  color: var(--kp-musta);
  font-family: var(--kp-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-haku__rivi {
  display: flex;
  gap: var(--kp-space-2);
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-haku input {
  min-width: 0;
  min-height: 52px;
  flex: 1;
  border: 1px solid var(--kp-reuna);
  border-radius: 0;
  color: var(--kp-musta);
  font-family: var(--kp-sans);
  font-size: 18px;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-haku button {
  min-height: 52px;
  padding: 0 var(--kp-space-3);
  border: 0;
  border-radius: var(--kp-radius-md);
  background: var(--kp-paa);
  color: var(--kp-paa-teksti);
  font-family: var(--kp-sans);
  font-size: 16px;
  font-weight: 700;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-haku button:hover {
  background: var(--kp-paa-hover);
  color: var(--kp-paa-hover-teksti);
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-haku input:focus-visible,
:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-haku button:focus-visible {
  outline: 3px solid var(--kp-musta);
  outline-offset: 3px;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-hakutulokset {
  box-sizing: border-box;
  max-width: var(--kp-wide);
  margin: 0 auto;
  padding: var(--kp-space-7) var(--kp-gutter) var(--kp-space-8);
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-hakutulokset__alku {
  max-width: 52rem;
  padding-bottom: var(--kp-space-6);
  border-bottom: 4px solid var(--kp-paa);
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-hakutulokset h1,
:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-virhe404 h1 {
  margin: 0;
  color: var(--kp-musta);
  font-family: var(--kp-sans);
  font-size: clamp(40px, 4vw, 64px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-hakutulokset__alku > p {
	margin: var(--kp-space-3) 0 0;
	font-family: var(--kp-sans);
	font-size: 18px;
	line-height: 1.5;
}

/* Tulosotsikko saa ohjelmallisen fokuksen ruudunlukijaa varten. Se ei ole
   näppäimistöllä käytettävä toiminto, joten yleistä fokusääriviivaa ei piirretä. */
:is([data-sivusto="visit"], [data-sivusto="koulu"]) #visit-hakutulokset-otsikko:focus {
	outline: none;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-hakuryhma,
:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-hakutulokset__tyhja {
  max-width: 52rem;
  margin-top: var(--kp-space-6);
}

/* Tyhjän haun ohje ja jatkolinkit ovat hakukäyttöliittymää, eivät
   Gutenberg-sisältöä: ne käyttävät samaa sans-fonttia kuin tuloslista. */
:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-hakutulokset__tyhja,
:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-hakutulokset__tyhja :where(p, li, a) {
	font-family: var(--kp-sans);
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-hakuryhma h2,
:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-hakutulokset__tyhja h2 {
  margin: 0 0 var(--kp-space-3);
  font-family: var(--kp-sans);
  font-size: var(--kp-fs-h2);
  font-weight: 700;
  line-height: 1.1;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-hakutulos {
  padding: var(--kp-space-4) 0;
  border-top: 1px solid var(--kp-reuna);
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-hakutulos h3,
:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-hakutulos p {
  margin: 0;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-hakutulos h3 {
  font-family: var(--kp-sans);
  font-size: var(--kp-fs-h3);
  line-height: 1.18;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-hakutulos h3 a,
:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-hakutulokset__tyhja a {
  color: var(--kp-musta);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-hakutulos__kainalo,
:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-hakutulos time {
  display: inline-block;
  margin-top: var(--kp-space-2);
  color: var(--kp-ruskea);
  font-family: var(--kp-sans);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-hakutulos__ote {
	margin-top: var(--kp-space-2);
	font-family: var(--kp-sans);
	font-size: 16px;
	line-height: 1.5;
}

/* Relevanssi merkitsee haun osumat semanttisella mark-elementillä. */
:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-hakutulos mark {
	background: var(--kp-vihrea-20);
	color: inherit;
	padding-inline: 0.08em;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-hakutulokset__sivutus {
  margin-top: var(--kp-space-5);
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-hakutulokset__sivutus ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kp-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-hakutulokset__sivutus a,
:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-hakutulokset__sivutus .current {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 var(--kp-space-2);
  border: 1px solid var(--kp-reuna);
  color: var(--kp-musta);
  font-family: var(--kp-sans);
  font-weight: 700;
  text-decoration: none;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-hakutulokset__sivutus .current {
  border-color: var(--kp-paa);
  background: var(--kp-paa);
  color: var(--kp-paa-teksti);
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-virhe404 {
  box-sizing: border-box;
  min-height: min(48rem, 70vh);
  padding: var(--kp-space-7) var(--kp-gutter);
  background: var(--kp-pinta);
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-virhe404__sisalto {
  max-width: var(--kp-wide);
  margin: 0 auto;
  padding: 0;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-virhe404__tunnus {
  margin: 0 0 var(--kp-space-2);
  color: var(--kp-ruskea);
  font-family: var(--kp-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-virhe404__kuvaus {
  max-width: 40rem;
  margin: var(--kp-space-3) 0 0;
  font-family: var(--kp-sans);
  font-size: 18px;
  line-height: 1.5;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-virhe404__etusivu {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  padding: 0 var(--kp-space-3);
  border-radius: var(--kp-radius-md);
  background: var(--kp-paa);
  color: var(--kp-paa-teksti);
  font-family: var(--kp-sans);
  font-weight: 700;
  text-decoration: none;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-virhe404__etusivu:hover {
  background: var(--kp-paa-hover);
  color: var(--kp-paa-hover-teksti);
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-virhe404__suositukset {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kp-space-2);
  margin-top: var(--kp-space-5);
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-virhe404__suositukset a {
  min-height: 44px;
  padding: 0 var(--kp-space-2);
  border-bottom: 2px solid var(--kp-paa);
  color: var(--kp-musta);
  font-family: var(--kp-sans);
  font-weight: 700;
  line-height: 44px;
  text-decoration: none;
}

:is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-virhe404 a:focus-visible {
  outline: 3px solid var(--kp-musta);
  outline-offset: 4px;
}

@media (max-width: 767px) {
  :is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-haku__rivi {
    align-items: stretch;
    flex-direction: column;
  }

  :is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-haku button {
    width: 100%;
  }

  :is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-hakutulokset,
  :is([data-sivusto="visit"], [data-sivusto="koulu"]) .kp-virhe404 {
    padding-top: var(--kp-space-6);
    padding-bottom: var(--kp-space-6);
  }

}