/* HUOM (20.8.2026): teemapohjan sääntö `.wp-block-heading.has-x-large-font-size`
   (3.2rem !important + keskitys + word-break, mobiilissa 2rem) on POISTETTU tästä
   projektista tarkoituksella — älä kopioi sitä takaisin teemapohjasta.
   Teemapohjassa `x-large` on iso otsikkokoko (2.2rem / juurifontti 18px = 39,6px),
   mutta Farizonin asteikko kirjoitettiin uusiksi 6.8.2026 ja siinä `x-large` on
   **23px** = pieni väliotsikko. Sääntö olisi siis pakottanut saman nimisen koon
   54,4px:ään eli 2,4-kertaiseksi asteikkoon nähden. Isot otsikot tehdään
   `display` (50px) ja `hero` (60px) -kokoluokilla. */

@media (min-width: 768px) {
    .wp-block-cover.is-style-fullheight {
        min-height: 100vh;
    }
}

@media (min-width: 768px) {
    .wp-block-cover.is-style-smallheight {
        min-height: 250px;
    }
}

.wp-block-cover .wp-block-heading.is-style-small-caption {
    margin-bottom: 1.5rem;
}

.dg-hero {
    padding-left: max(25px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
    padding-right: max(25px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
}

/* Yläkuvan tummennus on ALAREUNAAN SIDOTTU LIUKUVÄRI, ei tasainen peitto
   (Tiksin visuaalit 6.8.2026: linear-gradient(180deg, transparent, #000)).
   Kuvan yläosa jää kirkkaaksi ja teksti saa kontrastin vasta alalaidassa,
   jossa otsikko ja ingressi ovat.

   Toteutus WP:n oman himmennyskerroksen päälle: core/cover tuottaa
   `.has-background-dim`-elementin tasaisella värillä. Vaihdetaan sen tausta
   liukuväriksi ja nollataan opacity-porras, jotta liuku näkyy sellaisenaan.
   Näin sivujen lohkomarkupia ei tarvitse muuttaa — sama sääntö korjaa kaikki
   heroparit kerralla (ks. teeman README: "koko sivuston kerralla päivittävät
   levyt"). Ilman `!important`ia WP:n inline-`background-color` voittaa.

   ⚠️ Sääntö on rajattu MUSTAAN peittoon (`.has-black-background-color`), ei
   kaikkiin `.dg-hero`-covereihin: samaa `.dg-hero`-luokkaa käyttävät myös
   mallisivun vaaleat kuvaosiot (`light-gray`, dimRatio 100), jotka ovat
   paikkamerkkejä kunnes kuvat saadaan. Ilman rajausta nekin olisivat
   muuttuneet mustaksi liu'uksi. */
.dg-hero > .wp-block-cover__background.has-black-background-color.has-background-dim {
    background: var(--wp--preset--gradient--hero-scrim) !important;
    opacity: 0.85 !important;
}

/* Tummempi liuku yläkuvalle jonka kuvassa on vaalea kohde tekstin takana
   (Yritys, 21.10.2026: valkoinen U-logo otsikon alla). Liuku alkaa 35 %:n
   peitosta läpinäkyvän sijaan.
   Vain modifierilla — muiden yläkuvien tummennus ei muutu. */
.dg-hero--tumma > .wp-block-cover__background.has-black-background-color.has-background-dim {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 1) 100%) !important;
    opacity: 0.9 !important;
}

/* Kortin kuvapeitto on sama kuvio sinisenä (visuaalin CTA-kortit mallisivulla
   ja autosivulla): läpinäkyvä ylhäällä → #000F9F alhaalla. */
.dg-cta-card > .wp-block-cover__background.has-background-dim {
    background: var(--wp--preset--gradient--card-scrim-blue) !important;
    opacity: 0.9 !important;
}

/* WP:n oma .wp-block-cover { padding: 1em } tuottaa 18px pystypehmusteen, joka ei
   ole spacing-asteikolla ja tulee coverin oman sisäpehmusteen PÄÄLLE. Pystysuunnan
   välit omistaa sisältösäiliö (.wp-block-cover__inner-container / .dg-hero-slide__inner). */
.dg-hero,
.dg-hero-slide,
.dg-cta-cover {
    padding-block: 0;
}

/* Sama lopputulos Yläkuva-lohkon slidelle, mutta ILMAN prosenttiperusteista
   pehmustetta: Slickin radalla slide on radan lapsi, jolloin prosentit
   laskettaisiin koko radan leveydestä (3 slidea → padding 1892px, sisältö
   puristuu olemattomiin). Siksi kiinteä 25px reunapehmuste + sisältölaatikko
   keskitettynä wide-leveyteen → vasen reuna osuu samaan linjaan muiden
   osioiden kanssa. */
.dg-hero-slide {
    padding-inline: 25px;
}

.dg-hero-slide .dg-hero-slide__inner {
    inline-size: 100%;
    max-inline-size: var(--wp--style--global--wide-size);
    margin-inline: auto;
}

.dg-hero .wp-block-cover__inner-container,
.dg-hero-slide .dg-hero-slide__inner {
    padding-top: 85px;
}

/* Sisällön rivimitta (valinta 11.8.2026): teeman sisältöleveys eli
   `contentSize` = 1200px. Ilman rajausta otsikko venyy koko 1640px:n
   wide-leveydelle yhdelle riville — mitattu latausratkaisut-sivulla: h1 oli
   1371px yhtenä rivinä.
   - Arvo tulee teeman tokenista eikä kovakoodattuna: `contentSize` ON WP:n
     lukuleveys, ja heron tekstin rivimitta on sama asia. Jos leveys halutaan
     irrottaa siitä (esim. 800px), korvaa muuttuja kiinteällä arvolla.
   - Rajaus on tekstielementeissä, ei sisältösäiliössä: säiliön leveys määrää
     myös alas asemoidun sisällön asemoinnin, ja nappirivi (`wp-block-buttons`)
     saa jäädä leveämmäksi.
   - Koskee kaikkia `.dg-hero`-covereita, siis myös Kuvaosio-kaistoja — sama
     rivimitta on tarkoituksellinen kaikissa täysleveissä kuvaosioissa.
   ⚠️ Yläkuva-sliderin slide käyttää yhä 1000px:ää (`common.css`,
   `.dg-hero-slide__inner`) — se on toisen instanssin hallussa juuri nyt.
   Yhtenäistä arvot ja yhdistä säännöt yhdeksi selektorilistaksi kun
   `common.css` vapautuu, jottei mitta ole kahdessa paikassa eri arvona. */
.dg-hero .wp-block-cover__inner-container :where(h1, h2, h3, h4, p) {
    max-inline-size: var(--wp--style--global--content-size);
}

/* Kappaleille kapeampi rivimitta (21.10.2026): 1200px:n leveydellä 17px:n
   ingressi on ~150 merkkiä rivillä, mikä näytti pitkillä ingresseillä
   (Yritys-sivun kaksi kappaletta) liian venyneeltä. 760px ≈ 90 merkkiä.
   Otsikot jäävät 1200px:iin: 1000px katkaisisi esim. "Sähköpakettiauton huolto
   ja varaosat" (1002px) kahdelle riville. */
.dg-hero .wp-block-cover__inner-container :where(p) {
    max-inline-size: 760px;
}

/* Alas asemoitu sisältö (is-position-bottom-*) ei saa mennä kiinni alareunaan. */
.dg-hero[class*="is-position-bottom"] .wp-block-cover__inner-container,
.dg-hero-slide[class*="is-position-bottom"] .dg-hero-slide__inner {
    padding-bottom: var(--wp--preset--spacing--50);
}

/* Sliderissa alalaidassa on lisäksi pistenavigaatio (50px alareunasta, 9px
   korkea = varaa 50–59px). 50px:n pehmusteella nappi meni pisteiden päälle
   mobiilissa — mitattu 390px:n iframe-harnessilla. 75px jätti pisteiden
   yläpuolelle vain 16px ilmaa → 100px (26.10.2026): 41px, sama kuin
   desktopilla. Koskee vain sliderin slidea, ei tavallista heroa.
   ⚠️ Media query on PAKOLLINEN: ilman sitä tämä (0,4,0) voittaisi alla olevan
   ≥782px:n 100px-säännön (0,3,0) myös desktopilla. */
@media (max-width: 781px) {
    .dg-hero-slides .dg-hero-slide[class*="is-position-bottom"] .dg-hero-slide__inner {
        padding-bottom: calc(var(--wp--preset--spacing--100) + var(--dg-chat-kaista-hero, 0px));
    }
}

@media (min-width: 782px) {
    .dg-hero[class*="is-position-bottom"] .wp-block-cover__inner-container,
    .dg-hero-slide[class*="is-position-bottom"] .dg-hero-slide__inner {
        padding-bottom: var(--wp--preset--spacing--100);
    }
}

/* Chatin kaista varataan VAIN sliderin slidelta (27.8.2026), koska vain siinä
   on alalaidan pistenavigaatio joka jäi chatin alle. Tavallinen `.dg-hero` ei
   tarvitse tätä: sen sisällön alapehmuste on 100px ja chatin kaista 58px,
   joten sisällön ja chatin väliin jää 42px eikä mikään peity.

   Pisteet nousevat saman verran (`common.css` → `.dg-hero-slides__dots-wrap`),
   joten sisällön ja pisteiden väli säilyy: desktop ja mobiili 41px.

   ⚠️ Sama media query -jako kuin yllä on pakollinen: tämä (0,4,0) voittaisi
   muuten ≥782px:n 100px-säännön (0,3,0) myös mobiilissa. */
@media (min-width: 782px) {
    .dg-hero-slides .dg-hero-slide[class*="is-position-bottom"] .dg-hero-slide__inner {
        padding-bottom: calc(var(--wp--preset--spacing--100) + var(--dg-chat-kaista-hero, 0px));
    }
}

/* Heron viimeinen lapsi ei kasvata alaväliä omalla marginaalillaan.
   🔑 Teeman globaali `.wp-block-heading, p { margin-bottom: 25px !important }`
   (common.css) lisäsi 25px alapehmusteen PÄÄLLE aina kun heron viimeinen
   elementti on kappale — mitattu 21.8.2026: `dg-hero--tall` -heroissa tekstin
   alareuna oli 125px heron pohjasta (26,2 % korkeudesta), kun mallisivun
   `dg-hero--full` -herossa se on 100px (14,7 %). Ero ei ollut pehmusteessa
   vaan siinä, että full-heron viimeinen lapsi on nappilohko (ei marginaalia).
   Nyt alaväli tulee yhdestä paikasta eli pehmusteesta, kaikissa heroissa.
   `!important` on pakko: globaali sääntö on myös !important. */
.dg-hero .wp-block-cover__inner-container > :last-child,
.dg-hero-slide .dg-hero-slide__inner > :last-child {
    margin-bottom: 0 !important;
}

@media (min-width: 1600px) {
    .dg-hero,
    .dg-hero-slides .dg-hero-slide {
        min-height: 650px;
    }
}

/* ==========================================================================
   Tiivistys kun heron sisalto ei mahdu ruudulle (14.8.2026)
   --------------------------------------------------------------------------
   Luokat asettaa js/javascripts.js -> dg_sync_hero_offset(), joka vertaa
   sisallon korkeutta heron ylapuolisen tilan JALKEEN jaavaan tilaan ja lisaa
   portaita vain niin monta kuin tarvitaan.

   ⚠️ Tila otetaan YLAPEHMUSTEESTA, ei alapehmusteesta: alapehmuste (50/75/100px)
   pitaa napin ja sliderin pisteet irti taitteesta, ja se on se mika saa
   alareunan nayttamaan jarkevalta myos silloin kun nappia ei ole — pehmuste on
   sisaltosailiossa, ei napin alla, joten se patee myos kun viimeinen elementti
   on kappale.

   Nama saannot ovat no-op silloin kun sisalto mahtuu: sisalto on ankkuroitu
   alas, joten ylapehmusteen pienentaminen ei siirra nappia eika pisteita —
   se vain lyhentaa laatikkoa siina tapauksessa etta laatikko on sisallon
   mitoittama. Mitattu: 1366x768 ei muutu lainkaan.
   ========================================================================== */
.dg-hero--tiivis .wp-block-cover__inner-container,
.dg-hero--tiivis .dg-hero-slide__inner,
.dg-hero-slides.dg-hero--tiivis .dg-hero-slide .dg-hero-slide__inner {
    padding-top: var(--wp--preset--spacing--25);
}

/* Porras 2: otsikko display-kokoon (3.75rem -> 3.125rem, molemmat teeman
   tokeneita). Vain jos porras 1 ei riittanyt. */
.dg-hero--tiivis-2 .dg-hero-slide__inner .has-hero-font-size,
.dg-hero--tiivis-2 .wp-block-cover__inner-container .has-hero-font-size {
    font-size: var(--wp--preset--font-size--display);
}

/* Dynamic hero (archive, 404, search, single) */
.dg-hero--dynamic {
    min-height: 350px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.dg-hero--dynamic .wp-block-cover__image-background {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.dg-hero--dynamic .wp-block-cover__inner-container {
    position: relative;
    z-index: 1;
}

@media (min-width: 768px) {
    .dg-hero--dynamic {
        min-height: 450px;
    }
}


/* ==========================================================================
   Yläkuvan kolme korkeusporrasta (Farizon, 31.7.2026)
   Mitattu Tiksin rautalangoista suhteessa siihen tilaan, joka jää kiinteän
   headerin alapuolelle. Rautalanka porrastaa heron sivutyypin mukaan:
     ~100 %  etusivu ja mallisivut          → .dg-hero--full
     ~70 %   latausratkaisut (otsikko herossa) → .dg-hero--tall
     ~50 %   yhteystiedot, varustelu, henkilöhaku (otsikko heron ALLA) → .dg-hero--band
     ei heroa yksittäinen auto ja toimipiste
   Sivukohtainen min-height poistetaan lohkosta, jotta nämä luokat ohjaavat
   korkeutta yhdestä paikasta.

   ⚠️ YKSIKKÖ ON dvh, EI vh. Mobiiliselaimen osoitepalkki muuttaa vh:n arvoa →
   100vh-hero hyppii vieritettäessä ja alareuna leikkautuu. dvh seuraa
   todellista näkyvää aluetta.
   ⚠️ Kiinteä header (135px / 85px mobiili) vähennetään, muuten heron alareuna
   jää ruudun ulkopuolelle juuri headerin verran.
   ⚠️ Prosentit lasketaan HEADERIN ALAPUOLISESTA tilasta, ei koko ikkunasta:
   pelkkä 70dvh olisi 70 % koko ikkunasta ja siis liikaa (mitattu 78 % kun
   tavoite oli 70 %). Siksi calc((100dvh - <heron ylapuolinen tila>) * 0.7).
   ⚠️ Vahennettava on --dg-above-hero, EI --dg-header-h: heron ylapuolella voi olla
   myos kampanjapalkki, jolloin pelkan headerin vahentaminen jattaa heron alareunan
   (ja sen mukana napin seka sliderin pisteet) palkin korkeuden verran taitteen alle.
   js/javascripts.js -> dg_sync_hero_offset() mittaa todellisen tilan; --dg-header-h
   jaa varasijaksi jos JS ei aja.
   ⚠️ Selektorissa on KAKSI luokkaa (.wp-block-cover.dg-hero--*), koska WP:n oma
   .wp-block-cover { min-height: 430px } on samaa spesifisyyttä ja voittaa
   latausjärjestyksellä. Yhdellä luokalla portaat eivät purreet lainkaan.
   ⚠️ Näitä EI voi verifioida iframe-harnessilla: dvh ei vastaa oikeaa puhelinta
   iframen sisällä (ks. wp-kehitysopit). Mobiilikorkeus tarkistetaan laitteella.
   ========================================================================== */
/* Samat portaat koskevat Yläkuva-lohkoa (digitaali/ylakuva). Korkeus annetaan
   sliderissa SLIDELLE, ei kääreelle: Slickin rata mittautuu slidien mukaan, joten
   pelkkä kääreen min-height jättäisi slidet mataliksi. */
.wp-block-cover.dg-hero--full,
.dg-hero-slides.dg-hero--full .dg-hero-slide {
    min-height: calc(100dvh - var(--dg-above-hero, var(--dg-header-h)));
}

/* ⚠️ `--band` EI OLE KÄYTÖSSÄ (13.8.2026): porras jäi leiskaa matalammaksi
   kaikilla sivuilla joilla sitä käytettiin (Ota yhteyttä, Varustelu, Henkilöhaku)
   → ne siirrettiin `--tall`-portaaseen, ja uusi yläkuva tehdään aina `--tall`- tai
   `--full`-portaalla. Sääntö jää tänne, koska poistaminen rikkoisi vanhat sivut
   joita ei ole vielä käyty läpi; älä ota sitä uudelleen käyttöön ilman että leiska
   nimenomaan vaatii matalampaa kaistaa. */
/* HUOM 7.8.2026: aiemmin tässä oli lisävähennys mallisivun KIINTEÄLLE
   ankkuripalkille (`body:has(.dg-anchor-nav--bottom)` → −60px). Tiksin
   visuaaleissa palkki on normaalissa virrassa heron alla, joten se ei enää vie
   tilaa herolta eikä vähennystä tarvita. */

.wp-block-cover.dg-hero--tall,
.dg-hero-slides.dg-hero--tall .dg-hero-slide {
    min-height: clamp(360px, calc((100dvh - var(--dg-above-hero, var(--dg-header-h))) * 0.7), 700px);
}

.wp-block-cover.dg-hero--band,
.dg-hero-slides.dg-hero--band .dg-hero-slide {
    min-height: clamp(280px, calc((100dvh - var(--dg-above-hero, var(--dg-header-h))) * 0.5), 520px);
}

/* Yli 1600px:n näytöillä .dg-hero saa min-height: 650px (ks. yllä). Se ei saa
   nostaa matalampia portaita yli niiden tarkoitetun korkeuden. */
@media (min-width: 1600px) {
    .wp-block-cover.dg-hero--tall,
    .dg-hero-slides.dg-hero--tall .dg-hero-slide {
        min-height: clamp(360px, calc((100dvh - var(--dg-above-hero, var(--dg-header-h))) * 0.7), 700px);
    }
    .wp-block-cover.dg-hero--band,
    .dg-hero-slides.dg-hero--band .dg-hero-slide {
        min-height: clamp(280px, calc((100dvh - var(--dg-above-hero, var(--dg-header-h))) * 0.5), 520px);
    }
}