/* ------------------ PART 1:  --------------------*/

/* PART-1 (text nad navigací)
   Homepage nema drobeckovou navigaci, takze si nad prvnim nadpisem drzi
   puvodni odsazeni 4 %. Selektor je zdvojeny na (0,2,0), aby nezalezelo
   na poradi nacteni style.css a style-index.css. Hodnoty odpovidaji
   breakpointum v style.css (802 px a 400 px). */
.part-1.part-1 {
    padding-top: 4%;
}
@media (max-width: 802px) {
    .part-1.part-1 {
        padding-top: 6%;
    }
}
@media (max-width: 400px) {
    .part-1.part-1 {
        padding-top: 8%;
    }
}

/* Mensi mezera mezi uvodnim textem a prvni kartou navigace na mobilu
   (style.css: .main-nav padding-top 65px). */
@media (max-width: 802px) {
    .main-nav.main-nav {
        padding-top: 30px;
    }
}


/* ------------------ Benefity --------------------*/

.benefit{
    margin-top: 100px;
    margin-left: 10%;
    margin-right: 10%;
}
.benefit p{
    margin-top: 5px;
    line-height: 1.6em;
}

/* ---------------- ROZDELOVNIK - VYZKOUSEJTE Z NABIDKY -----------------*/

.druhy-rozdelovnik{
    width: 100%;
    min-height: 500px;
    margin-top: 90px;
}

.druhy-rozdelovnik::after {
    content: "";
    display: table;
    clear: both;
}

.obrazek{
    min-height: 500px;
    width: 55%;
    background: url(/img/02.webp) center center no-repeat;
    background-size: cover;
    padding:0;
    margin:0;
    float: left;
}
.panely{
    float:left;
    width: 45%;
    min-height: 500px;
    background: white;
}
.panely section{    
    min-height: 250px;
    width: 50%;
    float: left;
    overflow: hidden;
}
.panely section:nth-child(1), .panely section:nth-child(3){
    border-right: 1px solid #f8f8f8;
}
.panely section:nth-child(1), .panely section:nth-child(2){
    border-bottom: 1px solid #f8f8f8;
}
.panely section:nth-child(3), .panely section:nth-child(4){
    border-bottom: 1px solid #f8f8f8;
}

.panely a{
    color: #332D24;
}
.panely i{
    text-align: center;
}
.panely section:hover{
    background-color: var(--color1);
    border-right: 1px solid var(--color1);
    border-bottom: 1px solid var(--color1);
}
.panely h4{
    text-align: center;
    font-weight: 300;
    text-transform: uppercase;
    font-size: 1.6em; 
    padding-left: 10%;
    padding-right: 10%;
    margin-top: 0.6em;
    margin-bottom: 6%;
    
}

.panely .fa{
    display: block;
    font-size: 2.2em;
    padding-top: 2em;
}

@media (max-width: 1000px) {
    .obrazek{
        width: 100%;
        background-size: 170%, auto;
    }
    .panely{
        width: 100%;
        min-height: 500px;
    }       
    .druhy-rozdelovnik{
        height: auto;
    }
}
@media (max-width: 500px) {
        .obrazek{
            min-height: 300px;
            background-size: 170%, auto;
           /* margin-top:15%;*/
        }
    .panely section{
        width: 100%;
        min-height: 200px;
    }
    .panely section:nth-child(1), .panely section:nth-child(3){
        border-right: none;
    }
    .panely section:nth-child(1), .panely section:nth-child(2), .panely section:nth-child(3){
        border-bottom: 1px solid #f8f8f8;
    }
    .panely .fa{
        padding-top: 11%;
    }
    .panely{
        min-height: 800px;    
    }
    .druhy-rozdelovnik{
        height: auto;
    }

}
@media (max-width: 376px) {
    .obrazek{
        margin-top:0;
    }
    .panely .fa{
        padding-top: 14%;
    }
    .druhy-rozdelovnik{
        margin-top: 100px;
    }
}
@media (max-width: 300px) {
    .obrazek{
        background-size: 180%, auto;
    }
    .panely .fa{
        padding-top: 16%;
    }
}
@media (max-width: 260px) {
    .obrazek{
        background-size: 220%, auto;
    }
}



/* ------------- JAK SE PRIHLASIT: nejblizsi terminy + kontakt -------------
   includes/nejblizsi-terminy.php. Seznam a kontakt tvori jednu kartu
   se spolecnym stinem (jako .prihlaska-karta na strankach kurzu).
   Pod 860 px jde kontakt pod seznam. */

.terminy-sekce {
    padding-top: 100px;
}

.terminy-karta {
    display: flex;
    align-items: stretch;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .05);
    margin-top: 2.2em;
}

/* --- Seznam terminu --- */
.terminy-seznam {
    flex: 1 1 auto;
    min-width: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
}
.terminy-list {
    list-style: none;
    margin: 0;
    padding: 6px 32px 0;
}
.terminy-list li + li {
    border-top: 1px solid #efe8e2;
}
.terminy-polozka {
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr) auto 18px;
    align-items: center;
    gap: 18px;
    padding: 14px 4px;
    color: var(--color5);
    transition: background .2s;
}
.terminy-polozka:hover,
.terminy-polozka:focus-visible {
    background: #fcf4ef;
}
.terminy-datum {
    width: 66px;
    height: 62px;
    background: #fbede5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.05;
    color: #8a5038;
}
.terminy-den {
    font-size: 22px;
    font-weight: 500;
}
.terminy-mesic {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.terminy-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.terminy-kategorie {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #a3654a;
}
.terminy-nazev {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
}
.terminy-info {
    font-size: 14px;
    color: #6b625a;
}
.terminy-info b {
    font-weight: 500;
    color: #a3654a;
}
.terminy-cena {
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
}
.terminy-cena-m {
    display: none;            /* cena v radku jen na mobilu */
}
.terminy-chev {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--color1);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.terminy-prazdne {
    margin: 0;
    padding: 2em 32px 0;
    line-height: 1.6em;
}

/* Pata seznamu: veta o prihlasce + kalendar */
.terminy-pata {
    margin-top: auto;
    padding: 20px 36px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.terminy-pata p {
    margin: 0;
    max-width: 340px;
    font-size: 14px;
    line-height: 1.6;
    color: #6b625a;
}
.terminy-kalendar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    padding: 0 24px;
    border: 1px solid var(--color1);
    background: #fff;
    color: #a3654a;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    transition: background .2s, color .2s;
}
.terminy-kalendar:hover {
    background: var(--color1);
    color: #fff;
}
.terminy-kalendar svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Kontakt s fotkou --- */
.terminy-kontakt {
    flex: 0 0 360px;
    background: var(--color1);
    color: var(--color5);
    padding: 36px 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.terminy-foto {
    display: block;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
}
.terminy-kontakt p {
    margin: 0;
    letter-spacing: normal;
}
.terminy-motto.terminy-motto {
    margin-top: 14px;
    font-family: Allura, 'Lucida Handwriting', cursive;
    font-size: 40px;
    line-height: 1;
    color: #fff;
}
.terminy-kontakt-text.terminy-kontakt-text {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.5;
}
.terminy-telefon {
    margin-top: 12px;
    font-size: 40px;
    font-weight: 300;
    letter-spacing: 2px;
    color: #fff;
    white-space: nowrap;
}
.terminy-telefon::after {
    content: '';
    display: block;
    width: 160px;
    height: 13px;
    margin: 6px auto 0;
    background: url('/img/podtrzeni-bile.svg') center/contain no-repeat;
}
.terminy-tlacitka {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-top: 20px;
}
.terminy-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border: 1px solid #fff;
    color: var(--color5);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    transition: background .2s, color .2s;
}
.terminy-btn--bily,
.terminy-btn:hover {
    background: #fff;
}
.terminy-btn--bily:hover {
    background: transparent;
}

/* Tablet: uzsi kontakt, cena jen v radku */
@media (max-width: 1000px) {
    .terminy-kontakt { flex-basis: 300px; padding: 30px 24px; }
    .terminy-telefon { font-size: 34px; }
    .terminy-cena { display: none; }
    .terminy-cena-m { display: inline; }
    .terminy-polozka { grid-template-columns: 66px minmax(0, 1fr) 18px; }
    .terminy-pata { flex-direction: column; align-items: flex-start; }
}

/* Mobil: kontakt pod seznamem */
@media (max-width: 860px) {
    .terminy-sekce { padding-top: 110px; padding-bottom: 40px; }   /* vic vzduchu nad nadpisem a pred Castymi dotazy */
    .terminy-karta { flex-direction: column; margin-top: 1.6em; }
    .terminy-list { padding: 4px 16px 0; }
    .terminy-polozka { gap: 14px; padding: 14px 0; }
    .terminy-nazev { font-size: 16px; }
    .terminy-info { font-size: 13px; }
    .terminy-pata { padding: 16px 16px 24px; gap: 12px; align-items: stretch; }
    .terminy-pata p { max-width: none; font-size: 13px; text-align: center; }
    .terminy-kalendar { order: -1; width: 100%; }

    .terminy-kontakt {
        flex-basis: auto;
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 16px;
        align-items: center;
        text-align: left;
        padding: 30px 22px 32px;
    }
    .terminy-foto { width: 78px; height: 78px; border-width: 3px; }
    /* Motto vyplni radek vedle fotky: mezera vpravo = mezera vlevo od fotky
       (padding 22 px). Sirka textu = 6,1 x velikost pisma (Allura ma jen jeden rez).
       100vw - 30 (container) - 44 (padding) - 78 (fotka) - 16 (mezera) = 100vw - 168. */
    .terminy-motto.terminy-motto { margin: 0; font-size: clamp(24px, calc((100vw - 168px) / 6.15), 52px); white-space: nowrap; }
    .terminy-kontakt-text.terminy-kontakt-text,
    .terminy-telefon,
    .terminy-tlacitka { grid-column: 1 / -1; }
    .terminy-kontakt-text.terminy-kontakt-text { margin-top: 16px; }
    .terminy-telefon { margin-top: 10px; font-size: 38px; justify-self: start; }
    .terminy-telefon::after { margin-left: 0; width: 150px; }
}

@media (max-width: 400px) {
    .terminy-kalendar { padding: 0 12px; font-size: 13px; letter-spacing: .6px; white-space: nowrap; }
    .terminy-kontakt { column-gap: 14px; }
    .terminy-foto { width: 70px; height: 70px; }
    .terminy-motto.terminy-motto { font-size: clamp(24px, calc((100vw - 158px) / 6.15), 52px); }   /* fotka 70 + mezera 14 */
}
@media (max-width: 340px) {
    .terminy-telefon { font-size: 32px; letter-spacing: 1px; }
    .terminy-kalendar svg { display: none; }
}


/* ------ MASSAGE-MENU ------*/

.massage-menu {
    padding: 30px 10px 30px 10px;
    margin: 20px auto;
    margin: 20px 20px 20px 20px;
    text-align: center;
}
.massage-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}
.massage-menu h1 {
    padding-top:20px;
}
.massage-menu li {
    background-color: #fff;
    padding: 20px;
    text-align: center;
}
.massage-menu li:hover {
    background-color: #f0f0f0;
}
.massage-menu .icon {
    font-size: 40px;
    margin-bottom: 15px;
    display: block;
    color: #666;
}
.massage-menu .title {
    font-weight: 400;
    margin-bottom: 8px;
    color: #333;
 }


/* --- Vzhled puvodniho H1 pro prejmenovane nadpisy (viz .nadpis-h1 v kriticke CSS) --- */
.massage-menu .nadpis-h1.nadpis-h1 { padding-top: 20px; }