/* ---------------- Rytmus sekci (jako /fotografovani/) ---------------- */

.masaze-stranka .container > :last-child,
.masaze-stranka .container > :last-child > p:last-child { margin-bottom: 0; }
.masaze-stranka .nadpis-h1.nadpis-h1 { margin-top: 80px; }
.masaze-stranka .faq-section { padding-top: 0; }
.masaze-stranka .main-link { margin-top: 80px; }
.masaze-stranka .uvod-nabidka { text-align: center; max-width: 760px; margin-left: auto; margin-right: auto; }
.masaze-stranka #nabidka,
.masaze-stranka #kde,
.masaze-stranka #objednat,
.masaze-stranka #lektori { scroll-margin-top: 20px; }

/* Hero: fotka masérny je svetla, text potrebuje tmavsi prekryv */
.masaze-stranka .style-background-header::before {
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.25));
}

/* Hero tlacitka (.hero-tlacitka, .button-cover--obrys): style.css, sekce HERO TLACITKA */

/* Pozadi tmaveho pasu na konci (odkaz na kurzy) */
.main-link-masaze-od-nas {
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.3)),
                url(/img/masaze-od-nas/maserna-studio-jogaza-plzen.jpg) center center no-repeat;
    background-size: cover;
}
.main-link-rozsirujici {
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.3)),
                url(/img/rozsirujici-kurzy.jpg) center center no-repeat;
    background-size: cover;
}


/* ---------------- Karty masazi (nad .masaze-box ze style.css) ----------------
   Delky s cenami jako seznam pod popisem; radek dole: kdo masiruje + sipka. */

.masaze-stranka .cena-masaze { color: var(--color5); }
.masaze-stranka .cena-masaze b { font-size: 1.25em; font-weight: 600; }


/* ---------------- Kde masirujeme ---------------- */

.kde-text {
    max-width: 836px;
    margin: 0 auto 3em;
}
.kde-text p {
    text-align: center;
    line-height: 1.65em;
    margin: 0 0 1em;
}
.kde-text p:last-child { margin-bottom: 0; }

/* Galerie: 4 fotky na vysku, na pocitaci v jedne rade. Sirka a bocni
   okraje stejne jako karty masazi, banner a .cta-box (836 px, 2rem/1rem/0.2rem). */
.galerie-maserna { max-width: 836px; margin-left: 0.2rem; margin-right: 0.2rem; }
.galerie-maserna .galerie-polozka img { border-radius: 0; }
@media (min-width: 401px) { .galerie-maserna { margin-left: 1rem; margin-right: 1rem; } }
@media (min-width: 601px) { .galerie-maserna { margin-left: 2rem; margin-right: 2rem; } }
@media (min-width: 701px) { .galerie-maserna { column-count: 4; column-gap: 1rem; } }
@media (min-width: 930px) { .galerie-maserna { margin-left: auto; margin-right: auto; } }


/* Jedno tmave tlacitko = hlavni akce stranky */
.tlacitko-tmave {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    padding: .9em 2.2em;
    background: var(--color5);
    border: 2px solid var(--color5);
    color: #fff;
    font-size: 1.05em;
    font-weight: 500;
    letter-spacing: .4px;
    text-decoration: none;
    transition: background .2s, color .2s;
}
.tlacitko-tmave:hover,
.tlacitko-tmave:focus-visible { background: #fff; color: var(--color5); }
.tlacitko-tmave i { padding: 0; }
@media (max-width: 480px) {
    .tlacitko-tmave { width: 100%; }
}

/* FAQ: tmave ikony jako na /fotografovani/ */
.masaze-stranka .faq-icon { color: var(--color5); }
.masaze-stranka .faq-item.active .faq-icon { color: var(--color1); }


/* =================================================================
   PODSTRANKA MASAZE (/masaze-od-nas/<masaz>)
   Stavi na .produkty ze style-kurzy.css (stejne jako stranky kurzu).
   ================================================================= */

/* Panel s cenami: jedna polozka na delku + Kde. Pocet sloupcu = pocet
   delek + 1 (trida .masaz-info--2/3/4 ze sablony). Na mobilu pod sebou
   (dedi se ze style-kurzy.css), od 720 px vsechny v jedne rade a stejne
   siroke; prebiji mrizku 2 / 4 sloupce a okraje ze style-kurzy.css. */
.masaz-info .kurz-info-polozka--cena .hodnota { white-space: nowrap; }
@media (min-width: 720px) {
    .kurz-info.masaz-info--2 { grid-template-columns: repeat(2, 1fr); }
    .kurz-info.masaz-info--3 { grid-template-columns: repeat(3, 1fr); }
    .kurz-info.masaz-info--4 { grid-template-columns: repeat(4, 1fr); }
    .kurz-info.masaz-info .kurz-info-polozka {
        border-bottom: 0;
        border-right: 1px solid #f0ece8;
    }
    .kurz-info.masaz-info .kurz-info-polozka:last-child { border-right: 0; }
}

/* Odstavce „Jak probiha / Co prinasi / Pro koho / Kterou delku“ */
.masaz-popis h2 { margin-top: 32px; }
.masaz-popis ul.odrazky { margin: 0 0 1em; padding-left: 1.3em; }
.masaz-popis ul.odrazky li { margin: 0 0 .35em; }


/* Poukaz a kurz: dva male odkazy pod objednavkou */
.masaz-odkazy {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
    margin: 1.6em 0 0;
}
.masaz-odkaz {
    display: flex;
    align-items: center;
    gap: .9em;
    padding: 1em 1.2em;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .05);
    color: var(--color5);
    font-size: .92em;
    line-height: 1.4;
}
.masaz-odkaz i { padding: 0; font-size: 1.4em; color: var(--color1); flex-shrink: 0; }
.masaz-odkaz b { display: block; font-weight: 500; }
.masaz-odkaz:hover b { color: var(--color1); }
@media (min-width: 700px) {
    .masaz-odkazy { grid-template-columns: 1fr 1fr; }
}



/* Kroky: telefonni odkazy bez sipky, tmave, nezalamovat cislo */
.masaze-stranka .krok a::after { content: none; }
.masaze-stranka .krok p a { color: var(--color5); font-weight: 500; white-space: nowrap; border-bottom: 1px solid var(--color2); }
.masaze-stranka .krok p a:hover { color: var(--color1); }

.masaz-info .hodnota small a { color: var(--color5); font-weight: 400; }


/* ---------------- Filtr podle masera (etapa 1b) ---------------- */

.filtr-maseri {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .6em;
    margin: 1.6em auto 0;
}
.filtr-popisek { font-size: .9em; color: var(--color6); margin-right: .2em; }
.filtr-maser {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .45em 1.1em .45em .5em;
    border: 1px solid #e4dcd5;
    border-radius: 999px;
    background: #fff;
    color: var(--color5);
    font: inherit;
    font-size: .92em;
    font-weight: 400;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}
.filtr-maser[data-maser=""] { padding-left: 1.1em; }
.filtr-maser { min-height: calc(28px + .9em); box-sizing: border-box; }   /* stejna vyska i bez portretu („Vsichni“) */
.filtr-maser img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.filtr-maser:hover,
.filtr-maser:focus-visible { border-color: var(--color1); color: var(--color1); }
.filtr-maser.active {
    background: var(--color5);
    border-color: var(--color5);
    color: #fff;
}
.masaz-karta[hidden] { display: none; }
/* Na uzkem displeji filtr v jedne radce: mensi mezery a odsazeni, popisek
   „Maser:“ zustava; pod 360 px se schova, aby se tri tlacitka vesla. */
@media (max-width: 480px) {
    .filtr-maseri { flex-wrap: nowrap; gap: .4em; }
    .filtr-popisek { font-size: .85em; margin-right: 0; white-space: nowrap; }
    .filtr-maser { font-size: .88em; padding: .4em .8em .4em .4em; gap: .4em; }
    .filtr-maser[data-maser=""] { padding-left: .8em; }
    .filtr-maser img { width: 24px; height: 24px; }
    .filtr-maser { min-height: calc(24px + .8em); }
}
@media (max-width: 359px) {
    .filtr-popisek { display: none; }
}
.masaze-stranka .filtr-prazdno { text-align: center; color: var(--color6); margin: 1em 0 0; }
.masaze-stranka .filtr-prazdno[hidden] { display: none; }


/* Speciality lektoru: samostatna mensi sekce pod standardni nabidkou */
.speciality { margin-top: 3.2em; }
.masaze-stranka .speciality-nadpis {
    font-size: 1.3em;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    text-align: center;
    color: var(--color5);
    margin: 0 0 .4em;
}


/* ---------------- Objednani: CTA box (styl .cta-box ze style.css) ---------------- */
.masaze-stranka .cta-box.cta-objednat { margin-top: 80px; }

/* Tlacitko s telefonem: ikona vlevo, vpravo jmeno (male) nad cislem (velke).
   Selektor zdvojeny (.cta-box .cta-box-buttony) kvuli specificite ve style.css. */
.cta-box .cta-box-buttony .tlacitko-telefon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6em;
    padding: .8em 1.6em .8em 1.3em;
    line-height: 1.2;
}
.cta-box .cta-box-buttony .tlacitko-telefon i { padding: 0; margin: 0; width: auto; font-size: 1.3em; }
.cta-box .cta-box-buttony .tlacitko-telefon i::before { margin: 0; width: auto; }
.tlacitko-telefon .tl-text { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.tlacitko-telefon .tl-jmeno { font-size: .78em; letter-spacing: .4px; text-transform: uppercase; opacity: .9; }
.tlacitko-telefon .tl-cislo { font-size: 1.1em; font-weight: 600; white-space: nowrap; }
@media (max-width: 599px) {
    .cta-box .cta-box-buttony .tlacitko-telefon { display: flex; width: 100%; }
}

/* Oddelovace (symbol) na prehledu: presne uprostred mezery.
   1) karty masazi -> banner: nad symbolem 2rem (padding .masaze-wrapper) + 1.4em,
      pod nim 3.4em; banner za oddelovacem bez vlastniho horniho okraje.
   2) galerie -> Objednejte se: nad symbolem 1rem (okraj posledni fotky) + 2.8em,
      pod nim 3.8em; .cta-box za oddelovacem bez horniho okraje (80 px). */
.masaze-stranka #nabidka > .oddelovac { margin: 1.4em auto 3.4em; }
.masaze-stranka .oddelovac + .banner-poukaz { margin-top: 0; }
.masaze-stranka #kde + .oddelovac { margin: 2.8em auto 3.8em; }
.masaze-stranka .oddelovac + #objednat .cta-box.cta-objednat { margin-top: 0; }
/* Podstranka: objednani oddelene symbolem nad a pod (jako na prehledu);
   box sam bez vlastnich okraju, mezery dela oddelovac. */
.produkty.masaze-stranka .cta-box.cta-objednat { margin: 0; }
.produkty.masaze-stranka .oddelovac { margin: 2.4em auto; }
.produkty.masaze-stranka .masaz-odkazy { margin-top: 0; }
.cta-objednat .cta-box-buttony .tlacitko { text-decoration: none; }
.cta-objednat .cta-box-buttony .tlacitko i { padding-right: .4em; }
/* Poznamka pod tlacitky s mezerou (pocitac i mobil) */
.masaze-stranka .cta-pozn.cta-pozn { margin: 2em auto 0; font-size: .9em; line-height: 1.5em; color: var(--color6); }
.masaze-stranka .cta-box p:last-of-type { margin-bottom: 0; }
.produkty.masaze-stranka .cta-box p { font-size: .95em; }


/* ---------------- Podstranka: Kdo masiruje (jen portret, jmeno, role) ---------------- */
.maseri-radek {
    list-style: none;
    margin: 0 0 2em;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}
.produkty .maseri-radek { padding: 0; }
/* Karty vyplni celou sirku radku: na uzkem displeji pod sebou pres celou
   sirku, na sirsim vedle sebe rovnym dilem (max. 3 v rade). */
.produkty .maseri-radek li,
.maseri-radek li { flex: 1 1 100%; padding: 0; }
@media (min-width: 601px) {
    .produkty .maseri-radek li,
    .maseri-radek li { flex: 1 1 calc(33.333% - 1em); }
}
.maseri-radek a {
    display: flex;
    align-items: center;
    gap: .9em;
    padding: .8em 1.1em;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .05);
    color: var(--color5);
    line-height: 1.3;
}
.maseri-radek img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--color2);
}
.maseri-radek .maseri-text { display: block; min-width: 0; }
.maseri-radek .maseri-jmeno { display: block; font-weight: 500; }
.maseri-radek .maseri-role { display: block; font-size: .82em; color: var(--color6); }
.maseri-radek a:hover .maseri-jmeno { color: var(--color1); }