/* =================================================================
   STRANKA KALENDAR  (/kalendar/)
   =================================================================
   Psano mobile first: zakladni pravidla plati pro uzke displeje,
   sirsi rozvrzeni se pridava pres min-width.

   Struktura markupu:
     .stranky-content > .kalendar > .container
        h2.obdobi           nadpis obdobi
        .kalendar-season    sedy pruh s kurzy daneho obdobi
           .kalendar-element      jeden radek kurzu
              .kalendar-container   flex: obrazek + popis
        .cta-box

   Vzhled seznamu je zamerne stejny jako drive - zmenilo se jen
   poradi a organizace pravidel.
   ================================================================= */


/* ---------------------------- HLAVICKA ---------------------------- */

.header-kalendar {
    background: linear-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .2)),
                url("/img/skola-masazi.jpg") center no-repeat;
    background-size: auto 323px;
    height: 323px;
}

@media (min-width: 481px) {
    .header-kalendar { background-size: 100%, 100%; }
}

.textkal {
    text-align: center;
    font-size: .9em;
}


/* -------------------------- OBSAH STRANKY ------------------------- */

.stranky-content {
    padding-top: 8%;
    padding-bottom: 16%;
    margin-bottom: 0;
}
.stranky-content h1 {
    padding-bottom: 4%;
}
.stranky-content-NM {
    padding-top: 8%;
}

@media (min-width: 701px) {
    .stranky-content {
        padding-top: 4%;
        padding-bottom: 6%;
    }
}


/* ------------------------ SEZNAM TERMINU -------------------------- */

.obdobi {
    text-align: center;
    padding-bottom: 20px;
}

/* Sedy pruh jednoho obdobi. Pozadi je zamerne poloprusvitne -
   na svetlem pozadi stranky dava odstin, ktery tu byl vzdycky. */
.kalendar-season {
    width: 100%;
    float: left;
    padding-top: 20px;
    padding-bottom: 10px;
    margin-bottom: 2.7em;
    background-color: #e4e4e4bb;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .05);
}

/* Jeden radek kurzu. Sirka i okraje se meni na ctyrech urovnich,
   hodnoty odpovidaji puvodnimu rozvrzeni. */
.kalendar-element {
    width: 98%;
    float: right;
    margin-left: 1%;
    margin-right: 1%;
    border-bottom: 1px solid #f8f8f8;
}
.kalendar-element:last-child {
    border-bottom: none;
}

@media (min-width: 291px) {
    .kalendar-element { width: 90%; margin-left: 5%; margin-right: 5%; }
}
@media (min-width: 411px) {
    .kalendar-element { width: 80%; margin-left: 9%; margin-right: 9%; }
}
@media (min-width: 731px) {
    .kalendar-element { width: 90%; margin-left: 3%; margin-right: 3%; }
}

/* Obrazek vlevo, popis vpravo */
.kalendar-container {
    display: flex;
    align-items: center;
    gap: 20px;
}
.kalendar-image img {
    width: 80px;
    height: auto;
    border-radius: 10px;
}
.kalendar-popis {
    width: 100%;
    float: left;
    display: block;
}


/* ---------------------------- TYPOGRAFIE -------------------------- */


.kalendar h3 {
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .2em;
}

.obdobi {
    text-align: center;
    font-size: 1.5em;
    font-weight: 500;
}

/* Nadpisy obdobi jsou h2, aby kurzy pod nimi (h3) sedely v hierarchii.
   Globalni pravidlo pro h2 v kritickem CSS jim ale dava pismo Allura
   a broskvovou barvu - tenhle blok vraci puvodni vzhled h3.
   Trida je v selektoru dvakrat kvuli specificite (0,2,1). */
.kalendar h2.obdobi.obdobi {
    font-family: inherit;
    color: inherit;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top: 1em;
    margin-bottom: .2em;
    padding-bottom: 20px;
}
.crop-dodatek-container {
  box-sizing: border-box; /* Zajistí, že padding se započítá DO celkové šířky */
  width: 100%;            /* Využije plnou šířku displeje */
  max-width: 800px;       /* Omezení na maximální šířku vašeho displeje */
  margin: 0 auto;         /* Vycentrování celého bloku na střed obrazovky */
  text-align: center;
  padding: 1.4em 5%;         

}
.dodatek {
    text-align: center;
    margin:0;  
    letter-spacing: .45px; 
    line-height: 1.5;
}

.kalendar-popis h3 {
    color: rgb(15, 59, 137);
    text-align: left;
    font-size: 1.2em;
    font-weight: 400;
}
.kalendar p {
    font-size: .9em;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 1.9em;
}

/* Cena za terminem. Na uzkem displeji se zalomi pod datum,
   od 501 px stoji na stejnem radku oddelena svislitkem. */
.kalendar-cena {
    display: block;
    margin-top: .2em;
    font-weight: 500;
    color: var(--color5);
}

@media (min-width: 501px) {
    .kalendar-cena {
        display: inline;
        margin-top: 0;
    }
    .kalendar-cena::before {
        content: " | ";
        font-weight: 400;
        color: var(--color6);
    }
}


@media (min-width: 501px) {
    .kalendar-popis h3 { font-size: 1.4em; }
}


/* ------------------------- VYZVA K AKCI --------------------------- */

.kalendar .container .cta-box {
    width: auto;
    max-width: none;
    margin-top: 2em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    float: none;
    clear: both;
}

@media (min-width: 1000px) {
    .kalendar .container .cta-box {
        max-width: 880px;
        margin-left: auto;
        margin-right: auto;
    }
}