/* Koulusivustojen hyväksytyt poikkeukset (koulu-ehdotus/PAATOKSET.md, 21.10.2026).
   Ladataan kankaanpaa.css:n jälkeen vain, kun KANKAANPAA_SIVUSTO = 'koulu'. */

/* Päävalikkorivi: ruskea pohja, valkoinen teksti, oranssi alleviivaus. Vain leveällä näytöllä;
   mobiilissa valikko on valkoinen paneeli kuten design-järjestelmässä. */
@media (min-width: 1024px) {
  [data-sivusto="koulu"] .kp-header__navirivi { background: var(--kp-ruskea); border-top: 0; }
  [data-sivusto="koulu"] .kp-header__navirivi .kp-nav > li > a,
  [data-sivusto="koulu"] .kp-header__navirivi .kp-nav__osio { color: var(--kp-valkoinen); }
  [data-sivusto="koulu"] .kp-header__navirivi .kp-nav > li > a:hover,
  [data-sivusto="koulu"] .kp-header__navirivi .kp-nav > li > a[aria-current="page"],
  [data-sivusto="koulu"] .kp-header__navirivi .kp-nav__osio:hover,
  [data-sivusto="koulu"] .kp-header__navirivi .kp-nav__osio[aria-expanded="true"] { border-bottom-color: var(--kp-oranssi); color: var(--kp-valkoinen); }
  [data-sivusto="koulu"] .kp-header__navirivi .kp-nav > li > :focus-visible { outline: 2px solid var(--kp-valkoinen); outline-offset: 2px; }
  /* Alavalikko on valkoinen paneeli: musta teksti ja musta kohdistus kuten design-järjestelmässä. */
  [data-sivusto="koulu"] .kp-header__navirivi .kp-nav__paneeli a { color: var(--kp-musta); }
}

/* Etusivun hero: otsikkoa ja esittelyä ei tavuteta. */
[data-sivusto="koulu"] .kp-hero__kortti,
[data-sivusto="koulu"] .kp-hero__kortti * { hyphens: manual; }
[data-sivusto="koulu"] .kp-hero__kortti h1 { font-size: clamp(32px, 5vw, 48px); }
[data-sivusto="koulu"] .kp-hero__kortti .kp-ingressi p { margin: 0; }

/* Pikalinkit: ikoni vasemmalla, nuoli oikeassa reunassa. */
[data-sivusto="koulu"] ul.is-style-pikalinkit > li > a { justify-content: flex-start; }
[data-sivusto="koulu"] ul.is-style-pikalinkit > li > a::after { margin-left: auto; }
.kp-pikalinkki__ikoni {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 4px;
  background: var(--kp-ruskea); color: var(--kp-valkoinen);
}
.kp-pikalinkki__ikoni svg { display: block; }
ul.is-style-pikalinkit > li > a:hover .kp-pikalinkki__ikoni { background: var(--kp-oranssi); color: var(--kp-musta); }

/* Kapea näyttö: koulun nimi tunnuksen alle, jotta pitkä nimi ei mene haun päälle. */
@media (max-width: 767px) {
  [data-sivusto="koulu"] .kp-header__brandi { flex-flow: column; align-items: flex-start; gap: 4px; min-width: 0; }
  [data-sivusto="koulu"] .kp-header__sivusto { white-space: normal; border-left: 0; padding-left: 0; margin-left: 0; font-size: 15px; line-height: 18px; }
  [data-sivusto="koulu"] .kp-header__tyokalut { align-self: center; align-items: center; }
}

/* Pikalinkkien teksti ei tavuunnu: kortti on niin leveä, että pisinkin sana
   (Kouluterveydenhuolto) mahtuu riville ikonin ja nuolen väliin. Leveällä näytöllä 3 saraketta. */
[data-sivusto="koulu"] ul.is-style-pikalinkit { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
[data-sivusto="koulu"] ul.is-style-pikalinkit > li > a { hyphens: manual; overflow-wrap: normal; text-wrap: balance; }
/* Hyvin kapealla näytöllä pitkä sana saa vielä tavuuntua, ettei se valu kortin yli. */
@media (max-width: 379px) {
  [data-sivusto="koulu"] ul.is-style-pikalinkit > li > a { padding-inline: var(--kp-space-3); gap: var(--kp-space-3); font-size: 15px; hyphens: auto; }
}

/* Gutenbergin ryhmälohko lisää tällä teemalla sisäkääreen (.wp-block-group__inner-container).
   Ilman tätä ruudukon ja otsikkorivin lapsina olisi vain kääre, ja kortit menisivät allekkain. */
:is(.kp-ruudukko, .kp-osio__otsikko, .kp-henkilo, .kp-cta) > .wp-block-group__inner-container { display: contents; }
/* Ilman muotokuvaa korttien tekstit alkavat samalta korkeudelta. */
[data-sivusto="koulu"] .kp-henkilo { align-items: flex-start; }
[data-sivusto="koulu"] .kp-henkilo h3 { margin: 0 0 2px; }

/* Alasivun leipäteksti (Gutenbergin sisältö Breakdancen Post Content -elementissä).
   Modern Normalize nollaa marginaalit, joten kappaleille ja luetteloille annetaan rytmi
   ja luettelomerkit pysyvät tekstipalstan sisällä. */
[data-sivusto="koulu"] .kp-sisalto .breakdance-rich-text-styles > :where(p, ul, ol, figure, table, .wp-block-buttons, .wp-block-image) { margin: 0 0 var(--kp-space-4); }
[data-sivusto="koulu"] .kp-sisalto .breakdance-rich-text-styles :where(ul, ol):not(.is-style-pikalinkit) { padding-left: 1.4em; }
[data-sivusto="koulu"] .kp-sisalto .breakdance-rich-text-styles :where(ul, ol):not(.is-style-pikalinkit) > li { margin: 0 0 var(--kp-space-2); padding-left: 0.2em; }
[data-sivusto="koulu"] .kp-sisalto .breakdance-rich-text-styles :where(ul, ol) > li:last-child { margin-bottom: 0; }
[data-sivusto="koulu"] .kp-sisalto .breakdance-rich-text-styles > :last-child { margin-bottom: 0; }

/* Sivu ilman alasivuja: ei tyhjää valikkosaraketta, sisältö alkaa sivun vasemmasta reunasta. */
[data-sivusto="koulu"] .kp-sisasivu:not(:has(.kp-alanavi)) { display: block; }
[data-sivusto="koulu"] .kp-sisasivu:not(:has(.kp-alanavi)) > .vu-side-nav-slot { display: none; }
[data-sivusto="koulu"] .kp-sisasivu:not(:has(.kp-alanavi)) > .kp-sisalto { max-width: 760px; }

/* Etusivun osiorytmi: valkoinen ja sävy vuorottelevat. Koulumme on oletuksena sävyllä;
   kun Tiedotteet-osio näkyy (se on sävyllä), Koulumme muuttuu valkoiseksi, jottei kaksi
   sävyosiota ole peräkkäin. Koulu ei tee tähän mitään. */
[data-sivusto="koulu"] .kp-osio--tiedotteet ~ .kp-osio--esittely { background: transparent; }

/* Kehotuspalkki (design-järjestelmän .kp-cta) Gutenbergin painikkeella. */
[data-sivusto="koulu"] .kp-osio--kehotus { padding-top: 0; }
/* Jos palkin yllä on sävyosio (esim. yhteystiedot sävyllä), palkki ei saa olla kiinni siinä. */
[data-sivusto="koulu"] :is(.kp-osio--savy, .kp-osio--tiedotteet) + .kp-osio--kehotus { padding-top: var(--kp-space-8); }
[data-sivusto="koulu"] .kp-cta .wp-block-buttons { margin: 0; }
[data-sivusto="koulu"] .kp-cta .wp-block-button__link { background: var(--kp-valkoinen); border-color: var(--kp-valkoinen); color: var(--kp-musta); }
[data-sivusto="koulu"] .kp-cta .wp-block-button__link:hover { background: var(--kp-musta); border-color: var(--kp-musta); color: var(--kp-valkoinen); }
/* Gutenbergin flow-asettelu lisää peräkkäisille lohkoille ylämarginaalin; ruudukossa ja
   palkissa se siirtäisi muut kuin ensimmäisen kortin alemmas. */
:is(.kp-ruudukko, .kp-osio__otsikko, .kp-cta) > .wp-block-group__inner-container > * { margin-block: 0; }
[data-sivusto="koulu"] .kp-cta > .wp-block-group__inner-container > .wp-block-group { flex: 1 1 320px; }
[data-sivusto="koulu"] .kp-cta > .wp-block-group__inner-container > .wp-block-buttons { flex: 0 1 auto; max-width: 100%; }
/* Kapealla näytöllä painikkeen teksti saa rivittyä, jottei painike työnny palkin yli. */
[data-sivusto="koulu"] .kp-cta .wp-block-button { max-width: 100%; }
[data-sivusto="koulu"] .kp-cta .wp-block-button__link { white-space: normal; text-align: center; overflow-wrap: anywhere; }

/* Mobiilin hero: koulun kuva näkyy kokonaan kortin yläpuolella, kortti nousee vain hieman
   kuvan päälle. Leveällä näytöllä kortti on kuvan päällä kuten ennenkin. */
@media (max-width: 767px) {
  [data-sivusto="koulu"] .kp-hero--kuva { grid-template-areas: "kuva" "kortti" "palkki"; }
  [data-sivusto="koulu"] .kp-hero--kuva > .kp-kuva { grid-area: kuva; min-height: 0; aspect-ratio: 16 / 10; }
  [data-sivusto="koulu"] .kp-hero--kuva > .kp-hero__kortti { grid-area: kortti; align-self: start; width: auto; margin: -40px var(--kp-gutter) var(--kp-space-5); }
}

/* Tiedotteen oma sivu (Breakdance-pohja "Koulu – tiedotepohja"): murupolku, otsikko,
   päivämäärä, artikkelikuva, teksti lukupalstalla ja paluulinkki kaikkiin tiedotteisiin. */
[data-sivusto="koulu"] .vu-main--article { padding: var(--kp-space-4) 0 var(--kp-space-8); }
[data-sivusto="koulu"] .vu-article { max-width: calc(760px + 2 * var(--kp-gutter)); }
[data-sivusto="koulu"] .vu-article .vu-title-slot h1 { margin: var(--kp-space-4) 0 var(--kp-space-2); }
[data-sivusto="koulu"] .vu-article .vu-meta-slot ul { list-style: none; margin: 0 0 var(--kp-space-5); padding: 0; }
[data-sivusto="koulu"] .vu-article .vu-meta-slot li { margin: 0; padding: 0; }
[data-sivusto="koulu"] .vu-article .ee-postmeta-date { color: var(--kp-ruskea); font: 700 15px/20px var(--kp-sans); }
[data-sivusto="koulu"] .vu-article .bde-image { margin: 0 0 var(--kp-space-5); }
[data-sivusto="koulu"] .vu-article .bde-image img { display: block; width: 100%; height: auto; border-radius: var(--kp-radius-md); }
[data-sivusto="koulu"] .vu-article > .bde-f-text-link {
  display: inline-flex; align-items: center; gap: var(--kp-space-2);
  margin-top: var(--kp-space-6); padding-top: var(--kp-space-4); border-top: 1px solid var(--kp-reuna);
  font: 700 17px/24px var(--kp-sans); color: var(--kp-musta);
}
[data-sivusto="koulu"] .vu-article > .bde-f-text-link::before { content: "←" / ""; font-weight: 400; }
/* Tiedotteen omalla sivulla ei paikkakuvaa: jos artikkelikuvaa ei ole, Breakdancen
   harmaa oletuskuva piilotetaan ja sivulla on pelkkä teksti. */
[data-sivusto="koulu"] .vu-article .bde-image:has(img[src^="data:image/svg"]) { display: none; }

/* Upotetut videot ja muut iframet mukautuvat palstan leveyteen (myös 320 px). */
[data-sivusto="koulu"] .kp-sisalto iframe { max-width: 100%; }
[data-sivusto="koulu"] .kp-sisalto iframe[src*="youtube"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }