/* pod 480px: schovej vyhledavaci pole, necha jen bilou lupu v headeru.
   klik na lupu vysune vyhledavaci pole jako panel pres celou sirku pod header,
   lupa sama zustava na miste v headeru (slouzi i jako zaviraci tlacitko). */
@media (max-width: 480px) {
    #shortcode-173-583793,
    #ajaxsearchlite1.asl_w {
        width: 56px;
    }

    /* header ma gradient natazeny "cover" na svou vlastni vysku (background-size: cover,
       scroll) - aby vysunuty panel pod nim navazoval na stejny gradient bez sevu, musi
       oba cist stejnou "nekonecnou" vrstvu ukotvenou k viewportu (background-attachment:
       fixed + stejny pevny background-size), ne kazdy svuj vlastni cover. */
    #header_nav.ct-section {
        background-attachment: fixed;
        background-size: 100vw 400px;
        background-position: 0 0;
    }

    #ajaxsearchlite1 .probox.probox {
        position: relative;
        width: auto;
        /* base ASL CSS drzi .probox na height:28px + overflow:hidden - bez prepsani
           by se zvetsena lupa (viz nize) oriznuta o spodni cast (typicky rukojet). */
        height: 32px;
        overflow: visible;
        background: transparent;
    }

    #ajaxsearchlite1 .promagnifier svg path,
    #ajaxsearchlite1 .promagnifier svg circle {
        fill: #fff;
    }

    #ajaxsearchlite1 .promagnifier {
        /* absolutne ukotvit vpravo v .probox - jinak kdyz .proinput zmeni sirku
           (0 <-> auto, viz nize), flex tok posune lupu vodorovne a "odskoci". */
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 28px;
        height: 28px;
    }

    #ajaxsearchlite1 .promagnifier svg {
        display: block;
        overflow: visible;
        width: 28px;
        height: 28px;
    }

    #ajaxsearchlite1 .promagnifier .innericon {
        overflow: visible;
    }

    #ajaxsearchlite1 .probox .proinput {
        width: 0;
        min-width: 0;
        overflow: hidden;
        opacity: 0;
    }

    /* rozbaleny stav: input se vysune pod header pres celou sirku obrazovky (fullbleed) */
    #ajaxsearchlite1.tsh-search-expanded .probox .proinput.proinput {
        position: fixed;
        top: var(--tsh-header-height, 80px);
        left: 0;
        width: 100vw;
        min-width: 0;
        height: 48px;
        margin: 0;
        padding: 0 15px;
        box-sizing: border-box;
        background-image: linear-gradient(45deg, #000, #383838);
        background-attachment: fixed;
        background-size: 100vw 400px;
        background-position: 0 0;
        opacity: 1;
        overflow: visible;
        z-index: 20;
    }

    /* display:flex musi zustat !important - base ASL CSS ma na tomhle
       selektoru "display: block !important" (vyssi specifita ho neporazi). */
    #ajaxsearchlite1.tsh-search-expanded .probox .proinput form {
        height: 100%;
        display: flex !important;
        align-items: center;
    }

    /* background/border(-bottom)/padding/color musi zustat !important - ASL base
       i curvy-black theme CSS maji na .proinput input tytez vlastnosti taky jako
       !important (curvy-black natvrdo vynucuje color: #000, jinak by psany text
       v tmavem rozbalenem panelu byl cerny na cerne/tmave a nečitelný). */
    #ajaxsearchlite1.tsh-search-expanded .probox .proinput input.orig {
        background: transparent !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
        padding: 0 4px !important;
        color: #fff !important;
        border-radius: 0;
        height: 36px;
    }

    #ajaxsearchlite1.tsh-search-expanded .probox .proinput input.orig::placeholder {
        color: rgba(255, 255, 255, 0.7);
    }

    /* POZOR: .asl_w_container je RODIC #ajaxsearchlite1 (obaluje input i results),
       ne jen sourozenec/wrapper vysledku, jak se puvodne predpokladalo - kdyz se
       .asl_w_container natvrdo posadi na position:fixed, uleti cely widget (i lupa
       v collapsed stavu) mimo header. #ajaxsearchliteres1 (obsahuje .results) je
       navic SOUROZENEC #ajaxsearchlite1 (oba primi potomci .asl_w_container), ne
       jeho potomek - JS proto prida tsh-search-expanded i na .asl_w_container, aby
       tenhle selektor mohl cilit spravne. Fixed pozice plati jen pro samotny
       vysledkovy box (.results), ne pro cely container. */
    /* ASL vlastni fade-in animace (trida asl_an_fadeInDrop na #ajaxsearchliteres1,
       primem rodici .results) pouziva keyframes s transform. I kdyz po dobehnuti
       animace computed transform skonci na "none", containing block pro potomky
       s position:fixed se v prohlizeci urcuje behem PRUBEHU animace (kdy transform
       jeste neni none) a zustava "zamrzly" na #ajaxsearchliteres1 - .results pak
       neni fixed relativne k viewportu, ale k tomuto rodici (jeho offset v headeru),
       vysledek "odjede" doprava o sirku headeru misto aby zacinal na x:0.
       animation:none rovnou blokuje spusteni te animace, takze transform se
       behem cele doby nikdy neaplikuje a containing block zustane spravne (viewport). */
    .asl_w_container.tsh-search-expanded #ajaxsearchliteres1.asl_an_fadeInDrop {
        animation: none;
        transform: none;
    }

    .asl_w_container.tsh-search-expanded .results.results {
        position: fixed;
        top: calc(var(--tsh-header-height, 80px) + 48px);
        left: 0;
        width: 100vw;
        max-width: 100vw;
        box-sizing: border-box;
        z-index: 20;
    }
}