/* ============================================================
   Mobiilin hakuelementin A/B-testi, uusi versio (alle 768 px):
   paikkakuntakategoriat, palveluhaku, palvelukategoriat,
   tarkennussivut ja palvelut-paikkakunnittain-alasivut.
   Ks. inc/Search/HakuAbTesti.php ja assets/js/haku-ab.js.
   html.ab-haku-uusi asetetaan <head>-skriptissä ennen piirtoa,
   joten vanha hakupaneeli ei välähdä uudelle ryhmälle.
   ============================================================ */

.ab-hakurivi,
.ab-kelluva,
.ab-hakupaneeli,
.ab-esikatselu,
.ab-tulosotsikko,
.ab-lue-lisaa,
.ab-kuvaus__piilota {
    display: none;
}

@media (max-width: 767px) {

    /* Hakuelementti siirtyy alapaneeliin; alkuperäinen paikka piiloon.
       ab-haku-lahde tulee hakuehdot-block-templatesta testisivuilla. */
    html.ab-haku-uusi .hakuehdot-block.ab-haku-lahde {
        display: none;
    }

    html.ab-haku-uusi .ab-hakupaneeli .hakuehdot-block.ab-haku-lahde {
        display: block;
    }

    /* Paikkakuntakategoriasivulla koko paneeli wrappereineen piiloon */
    html.ab-haku-uusi body.paikkakuntakategoria-template .paikkakuntakategoria-search-panel {
        display: none;
    }

    /* Vanha alareunan kiinnitys (Uusi haku + Alkuun) väistyy kelluvan
       painikkeen tieltä; muuten ne ovat päällekkäin */
    html.ab-haku-uusi .newsearchElement {
        display: none;
    }

    /* ─── Kuvausteksti kahteen riviin, Lue lisää heti tekstin perässä ───
       haku-ab.js lisää esikatselukappaleen (.ab-esikatselu), johon teksti
       on katkaistu niin, että "… Lue lisää" mahtuu toiselle riville.
       Alkuperäinen kuvaus näkyy vasta avattaessa. */

    html.ab-haku-uusi .ab-esikatselu:not([hidden]) {
        display: block;
        margin: 0;
    }

    html.ab-haku-uusi .ab-esikatselu .ab-lue-lisaa {
        display: inline;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        color: #0d819c;
        font: inherit;
        font-size: 14px;
        font-weight: 300;
        line-height: inherit;
        white-space: nowrap;
        text-decoration: underline;
        cursor: pointer;
    }

    /* Paikkakuntakategoria + alakategoria: sivun oma lyhennelmä ja
       Lue lisää piiloon (Piilota jää näkyviin avattuna) */
    html.ab-haku-uusi .content-excerpt.ab-tiivis-ok > .short-content,
    html.ab-haku-uusi .content-excerpt.ab-tiivis-ok > .read-more {
        display: none;
    }

    /* Pääkategoria: kappaleet näkyviin vasta avattaessa */
    html.ab-haku-uusi .ab-kuvaus:not(.is-auki) {
        display: none;
    }

    html.ab-haku-uusi .ab-kuvaus.is-auki .ab-kuvaus__piilota {
        display: inline-block;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        color: #0d819c;
        font-family: inherit;
        font-size: 14px;
        font-weight: 300;
        text-decoration: underline;
        cursor: pointer;
    }

    /* ─── Yläosan asettelu: yhtenäiset reunat ja välit ───
       Laatikot (Hakuehdot-rivi, kortit) 5 px:n päässä ruudun reunasta,
       tekstit 21 px:n päässä eli samalla linjalla kuin laatikoiden sisältö.
       Pystyvälit: hero → rivi 20 px, rivi → tulosotsikko 24 px,
       suodattimet → tulokset 24 px. */

    /* Murupolku: 8 px headerista ja 8 px seuraavaan elementtiin (otsikko
       tai pääkategorian kuva). Heron murupolku on heron taustakuvan päällä
       (absoluuttinen), joten heron yläreunaan jätetään murupolun korkeus
       + 2 × 8 px. haku-ab.js päivittää korkeuden (--ab-murupolku-h), jos
       murupolku rivittyy. */
    html.ab-haku-uusi .paikkakuntakategoria-hero-wrap .paikkakuntakategoria-breadcrumb,
    html.ab-haku-uusi .kategoria-hero-wrap .kategoria-breadcrumb {
        top: 8px;
        margin: 0;
        padding: 0 21px;
    }

    html.ab-haku-uusi body.paikkakuntakategoria-template .block-wide-content,
    html.ab-haku-uusi body.tax-product_cat .block-wide-content {
        padding-top: calc(16px + var(--ab-murupolku-h, 22.4px));
    }

    html.ab-haku-uusi body.tax-product_cat .page-container > .tarjoomo-breadcrumb {
        padding: 8px 0;
    }

    html.ab-haku-uusi body.tax-product_cat .service-category-list-item-col-image img {
        margin-top: 0;
    }

    /* Palvelut paikkakunnittain -alasivu: paluulinkki murupolun paikalla */
    html.ab-haku-uusi .page-container > .location-directory__back {
        margin: 7px 0 8px 16px;
    }

    html.ab-haku-uusi .page-container > .location-directory__back + h1 {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Otsikko → kuvausteksti 8 px */
    html.ab-haku-uusi body.paikkakuntakategoria-template .block-wide-content h1,
    html.ab-haku-uusi body.tax-product_cat .block-wide-content h1 {
        margin-bottom: 8px;
    }

    html.ab-haku-uusi body.paikkakuntakategoria-template .block-wide-content > .container > .row > [class*="col"],
    html.ab-haku-uusi body.tax-product_cat .block-wide-content > .container > .row > [class*="col"] {
        margin-left: 0 !important;
        padding-left: 31px;
        padding-right: 31px;
    }

    /* Alakategorian hakupaneeli ei nouse heron päälle */
    html.ab-haku-uusi .kategoria-search-panel {
        margin-top: 0;
    }

    /* Pääkategoria (kuva + otsikko + kuvaus) */
    html.ab-haku-uusi body.tax-product_cat .service-category-list-item {
        margin-bottom: 0;
    }

    html.ab-haku-uusi body.tax-product_cat .service-category-list-item-col-details {
        padding-left: 31px;
        padding-right: 31px;
    }

    html.ab-haku-uusi body.tax-product_cat .service-category-list-item-col-details h1 {
        margin-bottom: 8px;
    }

    /* Palveluhaku: otsikko tekstilinjalle, rivi korttien levyiseksi */
    html.ab-haku-uusi .palveluhaku-banner__inner > .palveluhaku-title {
        padding-left: 6px;
    }

    html.ab-haku-uusi .palveluhaku-banner .ab-hakurivi {
        margin: 0 -10px;
    }

    /* Rivi → suodattimet 20 px kuten muillakin sivuilla */
    html.ab-haku-uusi .palveluhaku-banner {
        padding-bottom: 0;
    }

    /* Tulosotsikko, suodattimet ja osioiden otsikot tekstilinjalle */
    /* Alkuperäinen tulosotsikko piiloon: lyhyt versio (.ab-tulosotsikko)
       on Hakuehdot-rivin (okran laatikon) yläosassa */
    html.ab-haku-uusi .search-results-container > .results-header {
        display: none;
    }

    html.ab-haku-uusi .ab-tulosotsikko:not([hidden]) {
        display: block;
        margin: 0 0 10px;
        color: #212529;
        font-family: sofia-pro, "Helvetica Neue", Arial, sans-serif;
        font-size: 20px;
        font-weight: 600;
        line-height: 24px;
    }

    html.ab-haku-uusi .search-results-container > .results-filters-panel {
        margin: 0 16px;
        padding: 20px 0 0;
    }

    /* Järjestys-otsikko samalle riville alasvetovalikon kanssa */
    html.ab-haku-uusi .search-results-container .results-filters-row .filter-sort {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        width: 100%;
        margin-left: 0;
    }

    html.ab-haku-uusi .search-results-container .filter-sort > .filter-label {
        flex: 0 0 auto;
        margin: 0;
    }

    html.ab-haku-uusi .search-results-container .filter-sort > .select-wrapper {
        flex: 1 1 auto;
        min-width: 0;
    }

    html.ab-haku-uusi .search-results-container .filter-sort .sort-select {
        width: 100%;
    }

    html.ab-haku-uusi .search-results-container .results-filters-row {
        padding-left: 0;
    }

    html.ab-haku-uusi .search-results-container > [data-results-content] {
        margin-top: 24px;
    }

    html.ab-haku-uusi .search-results-container .section-title {
        margin-left: 16px;
    }

    /* ─── Hakuehdot-rivi ─── */

    /* Muilla sivuilla rivi on hakuelementin paikalla samassa wrapperissa */
    html.ab-haku-uusi .ab-hakurivi {
        display: block;
        position: relative;
        z-index: 3;
        margin: 0;
        padding: 14px 16px;
        background: #f7e5c0; /* Tarjoomon okra */
        border-radius: 15px;
    }


    /* Otsikko ja ehdot samalle riville; ehdot rivittyvät tarvittaessa
       otsikon perään tai kokonaan seuraavalle riville */
    .ab-hakurivi__ylarivi {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 10px;
    }

    /* Navy: turkoosi jäisi okralla liian heikoksi (kontrasti ~3,6:1) */
    .ab-hakurivi__otsikko {
        color: #31336f;
        font-weight: 700;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    /* Muokkaa hakua -painike rivin alaosassa koko leveydeltä */
    .ab-hakurivi__muuta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        margin-top: 12px;
        min-height: 46px;
        padding: 0 18px;
        border: 2px solid #31336f;
        border-radius: 9999px;
        background: #ffffff;
        color: #31336f;
        font-family: inherit;
        font-weight: 700;
        font-size: 15px;
        white-space: nowrap;
        cursor: pointer;
        transition: all 250ms ease-in-out;
    }

    .ab-hakurivi__muuta:hover,
    .ab-hakurivi__muuta:focus-visible {
        border-color: #0d819c;
        color: #0d819c;
    }

    .ab-hakurivi__ehdot {
        display: flex;
        flex: 1 1 auto;
        flex-wrap: wrap;
        gap: 6px;
        min-width: 0;
    }

    .ab-ehto {
        display: inline-flex;
        align-items: center;
        padding: 6px 12px;
        border-radius: 9999px;
        background: #ceeef3;
        color: #31336f;
        font-weight: 700;
        font-size: 14px;
        line-height: 1.2;
    }

    /* ─── Kelluva painike (näkyy, kun Hakuehdot-rivi on vieritetty ohi) ─── */

    html.ab-haku-uusi .ab-kelluva:not([hidden]) {
        display: flex;
        align-items: center;
        gap: 10px;
        position: fixed;
        left: 16px;
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        z-index: 1000;
        min-height: 56px;
        padding: 0 8px 0 18px;
        border: 0;
        border-radius: 9999px;
        background: #31336f;
        color: #ffffff;
        font-family: inherit;
        font-weight: 700;
        font-size: 15px;
        text-align: left;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
        cursor: pointer;
        transition: background-color 250ms ease-in-out;
    }

    html.ab-haku-uusi .ab-kelluva:hover,
    html.ab-haku-uusi .ab-kelluva:focus-visible {
        background: #0d819c;
    }

    .ab-kelluva__teksti {
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ab-kelluva__cta {
        flex: none;
        display: inline-flex;
        align-items: center;
        height: 40px;
        padding: 0 14px;
        border-radius: 9999px;
        background: #ffffff;
        color: #31336f;
    }

    /* ─── Alapaneeli ─── */

    html.ab-haku-uusi .ab-hakupaneeli:not([hidden]) {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1001;
    }

    .ab-hakupaneeli__tausta {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(49, 51, 111, 0.45);
    }

    .ab-hakupaneeli__ikkuna {
        position: absolute;
        top: 56px;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        background: #ffffff;
        border-radius: 15px 15px 0 0;
        outline: none;
    }

    .ab-hakupaneeli__yla {
        padding: 10px 20px 8px;
        border-bottom: 2px solid #f2f0f1;
    }

    .ab-hakupaneeli__kahva {
        display: block;
        width: 44px;
        height: 5px;
        margin: 0 auto 8px;
        border-radius: 9999px;
        background: #d6d3d4;
    }

    .ab-hakupaneeli__otsikkorivi {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .ab-hakupaneeli__otsikko {
        margin: 0;
        font-size: 22px;
        color: #31336f;
    }

    .ab-hakupaneeli__sulje {
        flex: none;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 9999px;
        background: #f2f0f1;
        color: #31336f;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .ab-hakupaneeli__sisalto {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .ab-hakupaneeli__sisalto .hakuehdot-block {
        background: transparent;
        border-radius: 0;
        padding: 16px 20px 24px;
    }

    .ab-hakupaneeli__ala {
        padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px));
        border-top: 2px solid #f2f0f1;
    }

    .ab-hakupaneeli__nayta {
        width: 100%;
        min-height: 52px;
        border: 0;
        border-radius: 9999px;
        background: #31336f;
        color: #ffffff;
        font-family: inherit;
        font-weight: 700;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 250ms ease-in-out;
    }

    .ab-hakupaneeli__nayta:hover,
    .ab-hakupaneeli__nayta:focus-visible {
        background: #0d819c;
    }

    /* Sivu ei vieritä paneelin takana */
    html.ab-paneeli-auki,
    html.ab-paneeli-auki body {
        overflow: hidden;
    }
}