/* =================================================================
   STYLY STRANEK KURZU
   =================================================================
   Vzniklo slouceim puvodnich souboru style-produkty.css a
   style-kurzy.css. style-produkty.css uz se nikde nelinkuje a
   da se smazat.

   Obsah:
     (1. Prehledova stranka maserske-kurzy - odstraneno se strankou)
     2. Zaklad stranek kurzu  (drive style-produkty.css)
     3. Komponenty stranek kurzu  (znacky, panel s udaji, lektori)

   Vyzva k akci .cta-box je ve style.css - pouziva se i na
   kategorijnich strankach.
   ================================================================= */


/* =================================================================
   2. ZAKLAD STRANEK KURZU   (drive style-produkty.css)
   ================================================================= */

/* ---------------- OBECNA NASTAVENI ---------------*/

.produkty {
	padding: 0 10px 4% 10px;
}

.produkty h2{

    font-family: inherit;
    font-size: 1.2em;
    line-height: 1.3;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.2px;
    margin: 40px 0 16px 0;
    padding-bottom: 0;
    text-align: left;
    color: color-mix(in srgb, var(--color1) 85%, black);
    scroll-margin-top: 24px;
}

/* uprava nadpisu u stranky produktu.
   max-width drzi misto pro breadcrumb vpravo, aby dlouhy nadpis
   breadcrumb neshodil pod sebe. 320px = nejdelsi breadcrumb + rezerva. */
.produkty h1{
    font-size: 2.1em;
    line-height: 1.2em;
    font-weight: 300;
    float: left;
    display: block;
    text-align: left;
    padding: 0;
    margin: 32px 0 32px 0;
    max-width: calc(100% - 320px);
}

.produkty h1:after{
    content: none;
    line-height: 1em;
    margin-top: 0;
}

.produkty p, .produkty li{
        font-size: 0.9em;
        line-height: 1.6em;
        font-weight: 300; 
}


/* Tlacitka: <a class="tlacitko"> je nahrada za <a><button> (tlacitko
   uvnitr odkazu je neplatne HTML). ".produkty button" zustava, dokud
   nebudou prevedene vsechny stranky - pak se da smazat. */
.produkty button,
.produkty .tlacitko{
        display: inline-block;
        box-sizing: border-box;
        cursor: pointer;
        margin: 1em 4px auto auto;
        background-color: var(--color1);
        border: 1px solid var(--color1);
        color: white;
        padding: 0.9em 2.2em 1em 1.5em;
        text-align: center;
        text-decoration: none;
        font-size: 1em; 
        letter-spacing: 0.5px;
        font-weight: 400;
        border-radius: 10px;
}

.produkty button:hover,
.produkty .tlacitko:hover,
.produkty .tlacitko:focus-visible{
        background: #FFFFFF;
        color: var(--color1);
}

/* Podnadpis uvnitr textu (uroven pod .produkty h2).
   Ma vlastni tridu, protoze .main-link uvnitr .produkty pouziva h3
   take - obecne ".produkty h3" by prebarvilo i nadpis na obrazku. */
.produkty h3.podnadpis {
    font-family: inherit;
    font-size: .95em;
    line-height: 1.35;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--color5);
    text-align: left;
    margin: 28px 0 10px;
    padding: 0;
    scroll-margin-top: 24px;
}


.produkty h3.podnadpis:first-of-type {
    margin-top: 20px;
}

.masaz {
    display: flow-root;
    min-height: 100px;
    margin-top: 0.8em;
    margin-bottom: 1.4em;
}

.masaz .breadcrumb {
    padding-right: 0.4em;
}

.produkty li{
    padding-bottom: 0.5em;  
    padding-left: 0.4em;
}
.odrazky {
    padding-left: 30px;
}

@media (min-width: 981px) {
    .masaz {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 2em;
    }
    .produkty h1 {
        float: none;
        max-width: none;
        margin: 32px 0 0 0;      /* spodni mezeru resi .masaz nize */
    }
    .masaz .breadcrumb {
        padding-top: 0;
        margin-bottom: .2em;     /* dorovnani uctnove linky k nadpisu */
        white-space: nowrap;
    }
}


@media (max-width: 980px){
    .produkty h1 {
        float: none;
        max-width: none;
        text-align: center;
        line-height: 1.2em;
        margin-bottom: 0.2em;
    }
    .masaz .breadcrumb {
        float: none;
        text-align: center;
        padding-top: 0;
        padding-right: 0;
        margin-bottom: 0;
    }
    .masaz { min-height: 0; }
    .produkty { padding-bottom: 6%; }
}

@media (max-width: 600px){
    .produkty {
	padding-bottom: 14%;
}
}

@media (max-width: 560px) {
    .produkty h3.podnadpis {
        font-size: .88em;
        letter-spacing: 1px;
        margin: 22px 0 8px;
    }
    .produkty ul,
    .produkty ol {
        padding-left: 1.8em;
    }
    .produkty li {
        padding-left: .2em;
        padding-bottom: .7em;
        line-height: 1.55em;
    }
    .produkty h1{
        margin-top: 14px;
    }
    .produkty button,
    .produkty .tlacitko{
        text-align: left;
        width: 260px;
    }
}


@media (max-width: 304px){
.produkty button,
.produkty .tlacitko{
        padding-left: 0.8em;        
        padding-right: 0.8em;        
        width: 100%;
}
}

@media (max-width: 249px){
.produkty button,
.produkty .tlacitko{
        width: 100%;
}
}

/* ---------------------  FAQ sekce ------------------- */

.faq-item button {
    background-color: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    font-weight: 400;
    color: var(--color4);
    letter-spacing: normal;
    border-radius: 0;
    font-size: 1.2em;
}

/* --------------------- DOCUMENTS ------------------- */

.documents p{
    letter-spacing: 0.45px;
}
.documents p, .documents li {
  font-size: 0.9em;
  line-height: 1.6em;
  font-weight: 300;
}


/* =================================================================
   3. KOMPONENTY STRANEK KURZU
   ================================================================= */

/*  Psano mobile first: zakladni pravidla plati pro uzke displeje,
    sirsi rozvrzeni se pridava pres min-width.

    Zamerne se tu neprestyluji nadpisy, odstavce ani tlacitka -
    ty si ridi sekce 2 vyse. Resi se jen rozvrzeni. */

/* ---------------- Obrazek v zahlavi kurzu ---------------- */

.kurz-obrazek {
    height: 240px;
    margin-bottom: 2em;
}
/* <picture> je inline prvek - bez tohoto by img nemel z ceho brat
   vysku 100 % a object-fit by nefungoval */
.kurz-obrazek picture {
    display: block;
    height: 100%;
}
.kurz-obrazek img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
@media (min-width: 401px) { .kurz-obrazek { height: 300px; } }
@media (min-width: 501px) { .kurz-obrazek { height: 400px; margin-bottom: 2.4em; } }


/* ---------------- Graficke znacky kurzu ----------------
   Ovalna pilulka s ikonou primo uvnitr (bez vlastniho kolecka -
   na barevnem podkladu by se dve zaoblene plochy tloukly).

   Varianty:
     .kurz-znacka--svetla  svetla pilulka pro druhoradou znacku
     .kurz-znacka--drobna  broskvova pilulka */

.kurz-znacky {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .6em;
    margin: 0 0 1.6em;
}

.kurz-znacka {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    background: #8a6a52;
    border-radius: 999px;
    padding: .5em 1.3em;
    font-size: .88em;
    font-weight: 400;
    line-height: 1.3;
    color: #fff;
}


.kurz-znacka .znacka-ikona {
    display: inline-flex;
    align-items: center;
    color: var(--color1);
    font-size: 1.2em;
    flex-shrink: 0;
}
.kurz-znacka .znacka-ikona i { padding: 0; }

/* --- varianty --- */

.kurz-znacka--svetla {
    background: #faf5f1;
    color: var(--color5);
}
.kurz-znacka--svetla .znacka-ikona { color: #c98a63; }

.kurz-znacka--drobna {
    background: #f7e3d5;
    color: var(--color4);
}
.kurz-znacka--drobna .znacka-ikona { color: #8a5a3b; }

@media (max-width: 560px) {
    .kurz-znacka  {
        font-size: .71em;
    }

}

/* ---------------- Panel se zakladnimi udaji ----------------
   Polozky odpovidaji budoucim sloupcum v databazi terminu. */

.kurz-info {
    display: grid;
    grid-template-columns: 1fr;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .05);
    margin: 0 0 2em;
}
.kurz-info-polozka {
    padding: .7em 1.2em;
    border-bottom: 1px solid #f0ece8;
    display: flex;
    align-items: baseline;
    gap: .8em;
}
.kurz-info-polozka:last-child { border-bottom: 0; }

.kurz-info .popisek {
    flex: 0 0 5.2em;
    font-size: .78em;
    color: var(--color6);
    font-weight: 300;
}
.kurz-info .hodnota {
    font-size: .92em;
    font-weight: 400;
    line-height: 1.35;
    color: var(--color5);
}
.kurz-info .hodnota small {
    display: block;
    font-size: .86em;
    font-weight: 300;
    color: var(--color6);
    line-height: 1.3;
}
.kurz-info-polozka--cena { background: #faf5f1; }
.kurz-info-polozka--cena .hodnota { font-size: 1.05em; font-weight: 500; }

@media (min-width: 720px) {
    .kurz-info { grid-template-columns: 1fr 1fr; }
    .kurz-info-polozka {
        display: block;
        padding: 1em 1.4em;
        border-right: 1px solid #f0ece8;
    }
    .kurz-info-polozka:nth-child(2n) { border-right: 0; }
    .kurz-info-polozka:nth-last-child(-n+2) { border-bottom: 0; }
    .kurz-info .popisek { display: block; margin-bottom: .15em; }
}
@media (min-width: 1000px) {
    .kurz-info { grid-template-columns: repeat(4, 1fr); }
    .kurz-info-polozka { border-bottom: 0; border-right: 1px solid #f0ece8; }
    .kurz-info-polozka:last-child { border-right: 0; }
}


/* ---------------- Medailonek lektora ----------------
   Fotka je kulata; u dvojice je prvni vlevo, druha vpravo.*/

.lektori {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2em;
    margin: 0 0 2em;
}
.lektor {
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .05);
    padding: 1.4em 1.3em;
    display: flex;
    gap: 1.1em;
    align-items: flex-start;
}
.lektor img {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.lektor-jmeno {
    display: block;
    font-size: 1em;
    font-weight: 500;
    color: var(--color5);
}
.lektor-role {
    display: block;
    font-size: .82em;
    color: var(--color1);
    margin: .1em 0 .5em;
}

@media (min-width: 480px) {
    .lektor { padding: 1.6em 1.5em; gap: 1.3em; }
    .lektor img { width: 80px; height: 80px; }
}

@media (min-width: 900px) {
    .lektori--dva {
        grid-template-columns: 1fr 1fr;
        gap: 0;
        background: #fff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, .05);
    }
    .lektori--dva .lektor {
        box-shadow: none;
        padding: 1.9em 1.9em;
    }
    .lektori--dva .lektor img { width: 84px; height: 84px; }

    /* druhy lektor zrcadlove - fotka vpravo, text doprava */
    .lektori--dva .lektor:last-child {
        flex-direction: row-reverse;
        text-align: right;
        padding-left: 2.4em;
    }
}


/* ---------------- Behy kurzu s vypisem vyukovych dnu ----------------
   Pouziva pripravny kurz, kde ma kazdy beh nekolik vikendu.
   Mobile first: pod sebou, od 780 px dva sloupce. */

.behy {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2em;
    margin: 0 0 2em;
}
.beh {
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .05);
    padding: 1.4em 1.3em;
}
.beh-hlavicka {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .2em .7em;
    margin-bottom: .9em;
    padding-bottom: .8em;
    border-bottom: 1px solid #f0ece8;
}
.beh-zacatek {
    font-size: 1.05em;
    font-weight: 500;
    color: var(--color5);
}
.beh-stitek {
    font-size: .75em;
    letter-spacing: .5px;
    color: var(--color6);
}
.beh-dny {
    list-style: none;
    padding: 0;
    margin: 0;
}
.beh-dny li {
    display: flex;
    align-items: baseline;
    gap: .8em;
    padding: .3em 0;
    font-size: .92em;
    line-height: 1.4;
    color: var(--color5);
}
.beh-dny li .poradi {
    flex: 0 0 1.4em;
    font-size: .8em;
    font-weight: 500;
    color: var(--color1);
}
.beh-misto {
    margin: .9em 0 0;
    padding-top: .8em;
    border-top: 1px solid #f0ece8;
    font-size: .85em;
    line-height: 1.5;
    color: var(--color6);
}

@media (min-width: 780px) {
    .behy { grid-template-columns: 1fr 1fr; gap: 1.6em; }
    .beh { padding: 1.7em 1.6em; }
}


/* ---------------- Vyukove materialy ----------------
   Jeden prouzek: vlevo ctyri miniatury (dve skripta, dva screenshoty
   aplikace), vpravo popis. Mobile first - na uzkem displeji je text
   pod obrazky, od 620 px vedle nich.

   Miniatury nejsou klikaci a nemaji lightbox; jsou ilustracni. */

.materialy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2em;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .05);
    padding: 1.2em 1.3em;
    margin: 0 0 2em;
}

.materialy-nahledy {
    display: flex;
    gap: .55em;
    flex-shrink: 0;
}
.materialy-nahledy img {
    display: block;
    width: auto;
    height: 88px;
    max-width: 100%;
}

.materialy-popis {
    flex: 1 1 220px;
    min-width: 0;
}
.materialy-popis .materialy-nazev {
    display: block;
    margin-bottom: .3em;
    font-size: 1.02em;
    font-weight: 500;
    color: var(--color5);
}
.materialy-popis p {
    margin: 0;
    padding: 0;
    font-size: .9em;
    line-height: 1.55;
    color: var(--color6);
    text-align: left;
}

@media (min-width: 620px) {
    .materialy { padding: 1.4em 1.6em; gap: 1.6em; }
    .materialy-nahledy img { height: 104px; }
}


/* Mensi odstup mezi CTA a FAQ na strankach kurzu */
.produkty ~ .faq-section,
.produkty .faq-section {
    padding-top: 1.5em;
}


/* ---------------- Dokumenty ke stazeni ----------------
   Dvojice odkazu na PDF s ikonou. Mobile first: pod sebou,
   od 620 px vedle sebe. Ikona je inline SVG v pozadi, takze
   nezalezi na ikonovem fontu a neni co donacitat. */

.dokumenty {
    display: grid;
    grid-template-columns: 1fr;
    gap: .9em;
    margin: 0 0 2em;
}

.dokument {
    display: flex;
    align-items: center;
    gap: 1em;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .05);
    padding: 1.1em 1.2em;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s ease, transform .2s ease;
}

.dokument-ikona {
    flex: 0 0 auto;
    width: 38px;
    height: 46px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 46'%3E%3Cpath fill='%23f3ece6' d='M2 2h22l12 12v30H2z'/%3E%3Cpath fill='%23ddd0c4' d='M24 2l12 12H24z'/%3E%3Crect x='0' y='24' width='30' height='14' rx='3' fill='%238a6a52'/%3E%3Ctext x='15' y='34.4' font-family='Arial,Helvetica,sans-serif' font-size='9.5' font-weight='bold' fill='%23fff' text-anchor='middle'%3EPDF%3C/text%3E%3C/svg%3E");
}

.dokument-nazev {
    display: block;
    font-weight: 500;
    line-height: 1.35;
    color: var(--color5);
    margin-bottom: .2em;
}
.dokument-popis {
    display: block;
    font-size: .88em;
    line-height: 1.5;
    color: var(--color6);
}

/* Zvyrazneni jen tam, kde je mys - na dotyku by stav ulpel */
@media (hover: hover) and (pointer: fine) {
    .dokument:hover {
        box-shadow: 0 6px 14px rgba(0, 0, 0, .09);
        transform: translateY(-2px);
    }
    .dokument:hover .dokument-nazev { color: var(--color1); }
}

@media (min-width: 620px) {
    .dokumenty { grid-template-columns: 1fr 1fr; gap: 1.4em; }
    .dokument { padding: 1.3em 1.4em; }
}

@media (min-width: 900px) {
    .dokumenty { grid-template-columns: repeat(3, 1fr); gap: 1.2em; }
}

/* ---------------- Kde kurz probiha (includes/misto-kurzu.php) ----------------
   Karta ve stejnem stylu jako medailonek lektora. Fotky jsou nahledy
   z galerie na Kontaktu, v karte orezane na jednotny pomer 4:3,
   bez zakulacenych rohu. */

.misto-kurzu {
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .05);
    padding: 1.4em 1.3em;
    margin: 0 0 2em;
}
.misto-kurzu p {
    margin: 0 0 1em;
}
.misto-kurzu-fotky {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5em;
    margin: 0;
    line-height: 0;
}
.misto-kurzu-fotky img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: opacity .2s ease;
}
/* Fotky jsou odkaz na galerii na Kontaktu - jemna zmena pri najeti mysi */
@media (hover: hover) and (pointer: fine) {
    .misto-kurzu-fotky:hover img { opacity: .85; }
}
.misto-kurzu-fotky:focus-visible {
    outline: 2px solid var(--color1);
    outline-offset: 3px;
}

@media (min-width: 480px) {
    .misto-kurzu { padding: 1.6em 1.5em; }
    .misto-kurzu-fotky { gap: .8em; }
}