@import url('https://fonts.cdnfonts.com/css/lufga');



body {

    font-family: 'Lufga', sans-serif !important;

    color:#4D4B4B;

}



.small2 {

    font-size: 0.8rem;

}



.pruh {

    background-color: #EDF8FD;

    padding: 50px 15px;

}



.container-pruh {

    max-width: 1000px;

    margin: 0 auto;

}

.container-pruh img {

    width: 500px;

    float: right;

    margin-top: -126px; /* posun nahoru */

    margin-left: 30px;

}



.pruh .btn.btn-primary   {

    background: none;

    border-color: #009fe3;

    border-width: 2px;

    color:#009fe3;

    padding: 5px 15px;

}



@media (max-width: 768px) {

    .container-pruh img {

        float: none;        /* vypne obtékání */

        margin: 20px 0 0 0; /* reset marginů */

        width: 100%;        /* obrázek přes celou šířku */

        max-width: 400px;   /* nebo jiná velikost */

        display: block;

    }

}





.logo-img {

    width: 80px;

    height: auto;

}



h1, h2, h3, h4, h5, h6 {

    font-family: 'Lufga', sans-serif !important;

    font-weight:400;

    color:black

}



h5 {

    font-size: 16px;

}



h5.red {

    color:#D2232B;

        font-size: 17px;

}



h5.blue {

    color:#009FE3;

    font-size: 17px;

}



.nav-link {

    font-weight: 400;

}



.t4-header {

    background: none;

    border-bottom: 0px;

}



.t4-footnav, .t4-footnav-mobil {

    background-color: #edf8fd;

    border-color: none;

    color: #4d4b4b;

    font-size: 0.9rem;

}

.t4-footnav-mobil .container {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.module-title {

    border-bottom: 0;

    margin: 0 0 1rem 0;

    padding: 0;

    text-transform: none;

    text-align: center;

    font-size: 2rem;

    font-weight: 400;

}



.module-title span {

    border-bottom: 0;

}



ul.homepage {

    padding: 0 !important;

    margin-top: 15px !important;

    list-style: none;

}



ul.homepage li {

    padding: 5px 0;

    margin: 0;

    border-bottom: dashed 1px #009fe3;

}



.btn.btn-primary   {

    background: none;

    border-color: #009fe3;

    border-width: 2px;

    color:#009fe3;

    padding: 5px 15px;

}



.pruh .btn.btn-primary   {

    background: none;

    border-color: black;

    border-width: 2px;

    color: black;

    padding: 5px 15px;

}



.vzornik {

    max-width: 850px;

    margin: 0 auto;

}





/* Tooltip: pseudo-elementy nelze použít přímo na <img> (replaced element).

     Použijeme rodiče (moderní prohlížeče s :has()) nebo fallback wrapper .tooltip-parent.

*/



/* Fallback: pokud obalíte obrázek v elementu s třídou .tooltip-parent */

.uk-text-center .tooltip-parent {

    position: relative;

    display: inline-flex;

    align-items: center; /* vertically center the tooltip relative to the image */

    line-height: 0;

}

.uk-text-center .tooltip-parent > img {

    display: block;

    vertical-align: middle;

}

/* Tooltip obsah jako vnořený element (umožňuje různé obsahy pro každý obrázek) */

/* Tooltip overlay centered over the image */

.uk-text-center .tooltip-parent .tooltip-content {

    position: absolute;

    left: 50%;

    top: 50%;

    width: 300px; /* pevná šířka požadovaná uživatelem */

    max-width: 90vw;

    max-height: 500px; /* pevná max výška */

    transform: translate(-50%, -50%);

    border-radius: 6px;

    box-shadow: 0 6px 18px rgba(0,0,0,0.35);

    background: rgba(255,255,255,0.96);

    color: #222;

    border: 1px solid rgba(0,0,0,0.08);

    backdrop-filter: blur(4px);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition: opacity .15s ease, transform .15s ease;

    z-index: 30;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    overflow: hidden;

}



/* reduce spacing between headings and paragraphs only inside tooltip */

.uk-text-center .tooltip-parent .tooltip-content .tooltip-text h4 {

    margin: 0 0 0.35rem; /* small space below h4 */

    line-height: 1.15;

}

.uk-text-center .tooltip-parent .tooltip-content .tooltip-text p {

    margin: 0 0 0.5rem; /* tighten top/bottom for paragraphs */

}

.uk-text-center .tooltip-parent .tooltip-content img {

    width: 100%;

    height: auto;

    max-height: 60%;

    object-fit: cover;

    display: block;

    flex: 0 0 auto;

}

.uk-text-center .tooltip-parent .tooltip-content .tooltip-html,

.uk-text-center .tooltip-parent .tooltip-content .tooltip-text {

    padding: 8px;

    color: #4D4B4B;

    font-size: 0.9rem;

    line-height: 1.3;

    text-align: left;

    white-space: normal;

}

/* zabránit přetékání textu a umožnit scroll pokud je příliš dlouhý */

.uk-text-center .tooltip-parent .tooltip-content .tooltip-text {

    box-sizing: border-box;

    overflow: auto;

    max-height: calc(100% - 120px);

    word-break: break-word;

    padding: 10px 15px;

}

.uk-text-center .tooltip-parent .tooltip-arrow {

    position: absolute;

    left: 100%;

    top: 50%;

    transform: translateY(-50%);

    width: 0;

    height: 0;

    border-width: 6px;

    border-style: solid;

    border-color: transparent rgba(0,0,0,0.8) transparent transparent;

    opacity: 0;

    visibility: hidden;

    transition: opacity .15s ease;

    z-index: 19;

}

@media (hover: hover) and (pointer: fine) {

    .uk-text-center .tooltip-parent:not(.tooltip-manual):not(.tooltip-suppress):hover .tooltip-content,

    .uk-text-center .tooltip-parent:not(.tooltip-manual):not(.tooltip-suppress):hover .tooltip-arrow {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

    }

}



/* allow JS to toggle tooltip via class when clicking info buttons */

.uk-text-center .tooltip-parent.tooltip-open .tooltip-content,

.uk-text-center .tooltip-parent.tooltip-open .tooltip-arrow {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}



/* close button in top-right corner (shown when tooltip opened via click) */

.uk-text-center .tooltip-parent .tooltip-content .tooltip-close {

    display: none;

    position: absolute;

    top: 8px;

    right: 8px;

    width: 28px;

    height: 28px;

    line-height: 26px;

    border-radius: 50%;

    background: #fff;

    border: 1px solid rgba(0,0,0,0.08);

    color: #333;

    text-align: center;

    font-size: 16px;

    cursor: pointer;

    z-index: 40;

    box-shadow: 0 1px 4px rgba(0,0,0,0.08);

    padding: 0;

}

.uk-text-center .tooltip-parent.tooltip-open .tooltip-content .tooltip-close {

    display: block;

}

.uk-text-center .tooltip-parent .tooltip-content .tooltip-close:focus {

    outline: 2px solid rgba(0,159,227,0.25);

}



/* skryjeme šipku pro overlay */

.uk-text-center .tooltip-parent .tooltip-arrow { display: none; }



/* Removed legacy :has() rules — tooltip now uses wrapper .tooltip-parent */



/* Poznámka: Pokud se tooltip stále nezobrazuje, obalte <img alt="KC0728"> do

     <span class="tooltip-parent">...</span> nebo dejte vědět a já přidám JS,

     který to obalí automaticky při načtení stránky.

*/



/* Responzivní úpravy: na mobilu umístit tooltip nad obrázek a centrovat */

@media (max-width: 768px) {

    .uk-text-center .tooltip-parent {

        /* zajistí, že tooltip může přesahovat blok */

        display: inline-block;

    }

    .uk-text-center .tooltip-parent .tooltip-content {

        position: absolute;

        left: 50%;

        right: auto;

        bottom: calc(0% + 8px);

        top: auto;

        transform: translateX(-50%);

        width: calc(50vw - 40px);

        max-width: none;

        box-shadow: 0 6px 18px rgba(0,0,0,0.15);

        border-radius: 6px;

        pointer-events: auto;

        text-align: left;

    }

    .uk-text-center .tooltip-parent .tooltip-content img {

        height: 140px;

        object-fit: cover;

    }

    .uk-text-center .tooltip-parent .tooltip-arrow {

        /* šipka pod tooltipem směřuje dolů k obrázku */

        left: 50%;

        top: auto;

        bottom: -6px;

        transform: translateX(-50%);

        border-color: transparent transparent rgba(0,0,0,0.8) transparent;

    }

}



.tooltip-text h4{

    font-size: 14px !important;

    font-weight: 600 !important;

}



.tooltip-text p{

    font-size: 12px;

}



.popisek {

    border-left: 2px solid #DCD7CD;

    display: block;

    width: 100%;

    padding: 0 10px;

    margin-left: 15px;

    font-size: 12px;

}

.popisek h4 {

    margin: 0 !important;

    font-size: 16px !important;

    font-weight: 500 !important;

}



.popisek a{

    background: #009FE3;

    color:white !important;

    font-size: 180%;

    border-radius: 4px;

    display: block;

    width: 36px;

    height: 36px;

    text-align: center;

    line-height: 36px;

    float: right;

    position: relative;

    margin-right: 5px;

    top:4px;

}



.vzornik .uk-margin {

    margin: 0 !important;

}



.vzornik .uk-scope *+.uk-margin {

    margin-top: 0px !important;

}



.vzornik .uk-scope .uk-margin {

    margin-bottom: 0px !important;

}



/* --- ZÁKLAD PRO MOBILY (Mobile First) --- */
#slide-content {
    width: 90%; /* Na mobilu dáme elementu dýchat, nenecháme ho jít od kraje ke kraji */
    max-width: 320px;
    
    /* Změna z fixed na absolute – bude se držet uvnitř banneru */
    position: absolute; 
    top: 50%;
    left: 10%;
    
    /* Na mobilu obsah pěkně vycentrujeme doprostřed */
    transform: translate(-50%, -50%); 
    z-index: 999;
    
    /* Zarovnání textu na střed vypadá na mobilu většinou lépe */
    text-align: left; 
}

.slide-title {
    color: rgb(98, 98, 98);
    font-size: 12px;
}

.slide-image {
    max-width: 100%; /* Lepší responzivita obrázku uvnitř obsahu */
    height: auto;
    position: relative;
    display: inline-block;
}

.slide-text {
    color: black;
    font-size: 16px;
}

.slide-link a {
    color: #B18675 !important;
    font-size: 14px;
    border: 1px solid #B18675; /* Zjednodušený zápis rámečku */
    border-radius: 4px;
    padding: 8px 30px; /* Na mobilu trochu zmenšíme obrovský padding */
    display: inline-block; /* DŮLEŽITÉ: Aby fungoval padding a margin správně */
    text-decoration: none;
}


/* --- ZOBRAZENÍ PRO POČÍTAČE A VĚTŠÍ TABLETY --- */
@media (min-width: 960px) {
    #slide-content {
        /* Návrat k designu pro velký monitor */
        width: min(32vw, 320px);
        
        /* Místo složitého transformu ho napozicujeme jednoduše na pravou stranu */
        left: auto;
        right: 600%; /* Uprav si toto procento podle toho, jak moc vpravo to chceš mít */
        
        /* Posun už řešíme jen vertikálně */
        transform: translateY(-20%); 
        
        text-align: left; /* Vrácení textu doleva */
    }

    .slide-link a {
        padding: 8px 75px; /* Návrat k širokému tlačítku na počítači */
    }
}