/* ==========================================================================
   1. ZÁKLADNÍ NASTAVENÍ (Base)
   ========================================================================== */
body {
    font-family: 'OS-WWBregular', Arial, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: 'Dosis-WWBmedium', sans-serif;
    margin: 0;
}

/* ==========================================================================
   2. HLAVNÍ TYPOGRAFIE (Zacíleno i na <p> z Responsive Textu)
   ========================================================================== */
.jk_title,
.jk_title p {
    font-family: 'Dosis-WWBregular', sans-serif !important;
    font-weight: normal !important;
    font-size: 1.75rem !important; /* cca 28px */
    letter-spacing: 2px;
    color: #000000 !important;
    background-color: transparent;
    margin: 0;
    padding: 0 1.0rem;
    text-align: left;
}

.jk_heading,
.jk_heading p {
    font-family: 'OS-WWBSemibold', sans-serif !important;
    font-weight: normal;
    font-size: 1.25rem !important; /* cca 20px */
    letter-spacing: 0.25px;
    color: #000000 !important;
    background-color: transparent;
    text-align: left;
}

.jk_heading {
    padding: 0 1rem 0 !important;
    margin: 0 !important; /* <--- PŘEBÍJE jakýkoliv margin nastavený v panelu WWB! */
}
/* 3. U odstavců padding vynulujeme a nastavíme přesnou mezeru pod řádkem */
.jk_heading p {
    padding: 0 !important;
    margin: 0 !important; /* Toto zajistí všude naprosto stejný rozpal */
}

/* 1. Formátování písma (platí pro obal i odstavec) */
.jk_text,
.jk_text p {
    font-family: 'OS-WWBregular', sans-serif !important;
    font-size: 1.25rem !important;
    line-height: 1.4 !important;
    color: #000000 !important;
    text-align: left;
}
/* 2. Odsazení na obalu: ZDE JE TA OPRAVA */
.jk_text {
    padding: 0 1.125rem !important;
    margin: 0 !important; /* <--- PŘEBÍJE jakýkoliv margin nastavený v panelu WWB! */
}
/* 3. U odstavců padding vynulujeme a nastavíme přesnou mezeru pod řádkem */
.jk_text p {
    padding: 0 !important;
    margin: 0 !important; /* Toto zajistí všude naprosto stejný rozpal */
}

/* Zvláštní titulek přímo do karet (vycentrovaný, roztažený) */
.jk_title_card,
.jk_title_card p {
    font-family: 'Dosis-WWBregular', sans-serif !important;
    font-weight: normal !important;
    font-size: 1.5rem !important; /* cca 24px */
    letter-spacing: 3px;
    color: #4F4F4F !important;
    margin: 0 auto !important;
    padding: 0 1.0rem;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

/* ==========================================================================
   3. DOPLŇKOVÉ TŘÍDY (Utility classes pro skládání např. "jk_title center white")
   ========================================================================== */
/* Odsazení */
.margin_title { margin: 10px 0 0 0 !important; padding: 0 1.125rem; }
.margin_text { margin: 0 0 0.5rem 0 !important; }
.mb-0, .mb-0 p { margin-bottom: 0 !important; }
.mb_40, mb_40 p { margin: 0 0 2.5rem 0 !important; }
.mb_16, mb_16 p { margin: 0 0 1.0rem 0 !important; }
.mt__8, mt__8 p { margin: -0.5rem 0 0 0 !important; }
.mb_40mt__8, mb_40mt__8 p { margin: -0.5rem 0 2.5rem 0 !important; }

/* Formátování */
.small, .small p { font-size: 1.0rem !important; }
.small13, .small13 p { font-size: 0.875rem !important; }
.italic p { font-family: 'OS-WWBSemiboldItalic', sans-serif !important; }
.size24_0, .size24_0, p { letter-spacing: 0 !important; font-size: 24px !important; }
.size14_1, .size14_1 p { letter-spacing: 1px !important; font-size: 0.875rem !important; }

/* Barvy */
.red, .red p { color: #ff003b !important; }
.white, .white p { color: #ffffff !important; }

/* Zarovnání (s 100% šířkou proti fixním divům WWB) */
.center, .center p { text-align: center !important; display: block; width: 100%; }
.left, .left p { text-align: left !important; display: block; }
.right, .right p { text-align: right !important; display: block; }


/* ==========================================================================
   4. KOMPONENTY A ODKAZY (Karty a bannery)
   ========================================================================== */
/* Styl pro poloprůhlednou černou kartu v banneru */
.karta_banner {
    background-color: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    max-width: 600px;
    width: 100% !important; /* přebije šířku WWB */
}

/* Donutí všechny vnitřní divy v kartě respektovat 100% a zalamovat se na mobilu */
.karta_banner > div {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    padding: 20px 10px 10px !important;
}

/* Odkazy uvnitř karet s animací */
.banner-karta a,
.banner-karta a:visited {
    color: #AFEEEE !important; /* Světle modrá */
    text-decoration: none !important;
    transition: color 0.3s ease;
}
.banner-karta a:hover,
.banner-karta a:active {
    color: #FF0000 !important;
    text-decoration: underline !important;
}

/* Velké odkazy s blokovým rozložením */
.txt-odkazy {
    font-family: 'OS-WWBregular', sans-serif;
    font-size: 22px;
    line-height: 2;
    display: inline-block;
    padding: 0.5rem 0;
}
.txt-odkazy a,
.txt-odkazy a:link,
.txt-odkazy a:visited {
    color: #AFEEEE !important;
    text-decoration: none;
    text-align: center !important;
    display: block;
    width: 100%;
    transition: color 0.5s ease;
}
.txt-odkazy a:hover,
.txt-odkazy a:active {
    color: #ff4444 !important;
}

/* Kotevní odkaz */
.kotevni-odkaz-sv-modra {
    font-family: 'OS-WWBregular', sans-serif;
    font-size: 18px;
    text-decoration: none;
    color: #AFEEEE;
}

/* Tlačítka */
.produkt-button {
    font-family: 'OS-WWBregular', sans-serif;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    color: #000000 !important;
    background-color: #FAB915;
    border: 1px solid #000000;
    padding: 2px 4px;
    border-radius: 4px;
}

.button-bila-linka {
    font-family: 'OS-WWBregular', sans-serif;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    color: #FFFFFF !important;
    background-color: transparent;
    background-color: #FAB915;
    border: 2px solid #FFFFFF;
    border-radius: 5px;
}

/* --- OBAL KARTY (Layout Grid) --- */
.card-product {
    max-width: 800px !important;         /* Omezí šířku na cca 800px */
    margin: 15px auto 40px auto !important; /* auto = vycentruje na střed, 40px = mezera dole */
    border: 1px solid #000000 !important; /* Šedý okraj 10px dokola */
    border-radius: 12px !important;
    box-sizing: border-box !important;   /* Zabrání tomu, aby rámeček zvětšil celkovou šířku */
}

/* --- LEVÝ SLOUPEC (poměr 8) --- */
.card-product .col-1 {
    background-color: #ffffff !important; /* Bílý vnitřek */
    padding: 50px !important;             /* Vnitřní odsazení, aby text nebyl nalepený na hraně */
    border-radius: 12px !important;
}

/* --- PRAVÝ SLOUPEC (poměr 4) --- */
.card-product .col-2 {
    background-color: #F0FFF0 !important; /* Zelený vnitřek (kód barvy si případně upravte) */
    padding: 20px !important;             /* Vnitřní odsazení od okrajů */
    display: flex;                        /* Volitelné: pomůže hezky zarovnat logo uvnitř */
    align-items: center;
    justify-content: center;
    border-radius: 0px 12px 12px 0px !important;
}

/* Tlačítka */
.product_button {
    font-family: 'OS-WWBregular', sans-serif !important;
    font-size: 14px !important;
    text-align: center !important;
    text-decoration: none !important;
    color: #000000 !important;
    background-color: #FAB915 !important;
    border: 1px solid #000000 !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    width: auto !important;
    height: auto !important;
    white-space: nowrap !important;
    margin-left: 6px !important; /* Odstrčí vedlejší tlačítko o 10px doleva */
    margin-bottom: 6px !important; /* Vytvoří mezeru, pokud se na mobilu zalamují pod sebe */
    min-width: 80px !important; /* Sjednotí šířku všech kratších tlačítek */
    /* PŘIDAT TENTO ŘÁDEK PRO PLYNULÝ PŘECHOD: */
    transition: background-color 0.3s ease, color 0.3s ease !important;
}

.product_button:hover {
    background-color: #074e22 !important; /* Nová barva pozadí (např. černá) */
    color: #FAB915 !important; /* Nová barva textu (např. žlutá) */
    cursor: pointer !important; /* Změní kurzor na "ručičku" */
}

/*    !* ZDE JSOU ZÁCHRANNÉ PŘÍKAZY PRO VELIKOST: *!
    padding: 4px 8px !important;   !* Vytvoří hezký a bezpečný prostor kolem textu *!
    width: auto !important;         !* Zruší nesmyslných fixních 102px z editoru *!
    height: auto !important;        !* Zruší fixních 36px z editoru *!
    white-space: nowrap !important; !* ZAKÁŽE textu, aby se kdykoliv zalomil na druhý řádek *!*/

/* Zarovnání BLOKŮ a TLAČÍTEK napravo */
.block_right {
    margin-left: auto !important;
    margin-right: 0 !important;
    display: block !important;
    width: max-content !important; /* Důležité: tlačítko bude velké jen tak, jak potřebuje, neroztáhne se na 100 %! */
}



/* ==========================================================================
   5. ZÁCHRANNÉ PŘEPISY (Fixy chování WWB21)
   ========================================================================== */
/* Pokud WWB vytvoří span, aby obarvil kousek textu, zdědí to barvu a zarovnání z obalu */
[class*="red"] span,
[class*="bila"] span,
[class*="white"] span {
    color: inherit !important;
}
[class*="center"] span,
[class*="left"] span,
[class*="right"] span {
    text-align: inherit !important;
}