/* Samostatné styly pro microsite Průzkumná štola Luka.
   Typografie, barvy a grid (l-wrapper/l-row/l-gr-*, heading-*, box-article-news,
   contact-box, list-service...) se přebírají z default.css hlavního webu SG Geotechnika. */

.luka-header {
    background: #ffffff;
    border-bottom: 1px solid #e1e1e1;
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* od stejného breakpointu, kde hlavní web SG Geotechnika mění svůj header
   z fixed na relative (viz .header v _header.scss), vypínáme sticky i tady -
   na desktopu/tabletu naležato se má hlavička chovat normálně, ne sticky */
@media only screen and (min-width: 768px) and (orientation: landscape),
    screen and (min-width: 800px) and (max-width: 1219px) and (orientation: landscape) {
    .luka-header {
        position: static;
    }
}

.luka-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    min-height: 24px;
}

.luka-header__partners {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.luka-header__partners img {
    max-height: 32px;
    max-width: 130px;
    width: auto;
    height: auto;
}

.luka-header__nav-group {
    display: flex;
    align-items: center;
}

/* mobil / tablet na výšku - stejný "not-tl" stav, kdy se menu schovává do
   hamburgeru (viz .navigation a .l-hide@tl v default.css). Tři loga vedle
   sebe v plné velikosti se sem nevejdou, tak spadnou na vlastní řádek pod
   hamburger, zarovnaná doleva a výrazně zmenšená. */
@media only screen and (orientation: portrait), only screen and (max-width: 767px) {
    .luka-header__inner {
        justify-content: flex-end;
    }

    .luka-header__partners {
        order: 2;
        flex-basis: 100%;
        justify-content: flex-start;
        gap: 16px;
        margin-top: 10px;
    }

    .luka-header__partners img {
        max-height: 22px;
        max-width: 90px;
    }
}

/* .navigation a hamburger tlačítko jsou převzaty z hlavního webu SG Geotechnika
   (stejné třídy/JS chování - schování menu do hamburgeru na mobilu). Skutečná
   hodnota "top" rozbalené mobilní nabídky se dopočítává v JS podle reálné
   výšky proužku Luka (viz @lukaLayout.latte), aby mezi nimi nevznikala mezera. */
.luka-header .navigation {
    z-index: 10;
}

.luka-hero {
    position: relative;
    padding: 60px 0;
    background-image: url("../images/luka-background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.luka-hero h1 {
    text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}

.luka-section {
    padding: 50px 0;
    /* .l-row/.l-row--smaller uvnitř používají záporné okraje (gutter kompenzace
       gridu), které normálně "sní" padding rodičovského .l-wrapper - tady jsou
       ale o úroveň hlouběji (.l-wrapper > section > .l-row), takže na některých
       šířkách přetékaly přes okraj obrazovky a dělaly horizontální posuvník. */
    overflow-x: hidden;
}

.luka-section--white {
    background: #ffffff;
}

.luka-section--grey {
    background: #f4f5f6;
}

.luka-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    background: repeating-linear-gradient(45deg, #f2f2f2, #f2f2f2 10px, #e8e8e8 10px, #e8e8e8 20px);
    border: 1px dashed #b3b3b3;
    color: #797f84;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 13px;
    height: 260px;
    margin-bottom: 20px;
}

.luka-placeholder--news {
    height: 100%;
    min-height: 150px;
    margin-bottom: 0;
}

.luka-map {
    margin: 0 0 30px;
    text-align: center;
}

.luka-map img {
    max-width: 100%;
    height: auto;
    display: inline-block;
    border: 1px solid #e1e1e1;
    box-shadow: 0 2px 12px rgba(5, 5, 5, .1);
}

.luka-map figcaption {
    margin-top: 12px;
    font-size: 13px;
    color: #797f84;
}

/* luka-orto.jpg je na výšku - na mobilu ať se přirozeně roztáhne na celou
   šířku, na větších obrazovkách jí ale omezíme výšku, ať nedominuje stránce,
   a necháme ji vycentrovanou jako menší "kartu" */
@media only screen and (min-width: 768px) and (orientation: landscape),
    screen and (min-width: 800px) and (max-width: 1219px) and (orientation: landscape) {
    .luka-map--ortho img {
        max-height: 620px;
        width: auto;
    }
}

/* podkladová fotka jen za první (úzkou, na výšku) mapou - vizuálně kompenzuje
   její portrétní formát tak, že za ní vyplní celou šířku sekce. Pozadí je přes
   samostatný ::before rozmazané (filter:blur) a mírně "probarvené" gradientem
   ve stejné barvě jako pozadí sekce, ať se ostrý obrázek/popisek nad ním čitelně
   odliší. overflow:hidden + přesah pseudoelementu přes okraj o 20px zamezí
   světlému lemu po okrajích, který blur jinak vytváří. */
.luka-map--ortho {
    position: relative;
    overflow: hidden;
    padding: 40px 0;
}

.luka-map--ortho:before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background-image: linear-gradient(rgba(244, 245, 246, .5), rgba(244, 245, 246, .5)), url("../images/luka-map-bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(6px);
}

.luka-map--ortho img,
.luka-map--ortho figcaption {
    position: relative;
    z-index: 1;
}

/* popisek sedí na proměnlivém tónu rozmazané fotky, šedý text tam splýval -
   bílá + stín zajistí čitelnost i nad světlejšími místy fotky */
.luka-map--ortho figcaption {
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .65);
}

/* luka-profil.jpg je široký podélný profil - necháváme přes celou šířku */
.luka-map--profile img {
    width: 100%;
}

.luka-faq-item {
    margin-bottom: 25px;
}

.luka-faq-item h3 {
    margin-bottom: 5px;
}

.luka-footer {
    background: #797f84;
    color: #ffffff;
    padding: 30px 0;
    margin-top: 20px;
}

.luka-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.luka-footer__logo img {
    height: 30px;
}

.luka-footer p {
    margin: 0;
    font-size: 14px;
}

.luka-footer a {
    color: #ffffff;
    text-decoration: underline;
}