/* ─────────────────────────────────────────────────────────────────────────
   MALE THAJSKO – vlastné štýly mimo Elementora.
   Farby a písma sú prevzaté z pôvodného dizajnu, aby to sedelo so zvyškom:
   indigo #4B0082, ružová #C71585, zlatá #D6A944, text #555F5B,
   pozadie linear-gradient(20deg, #FFDDEE, #EFE2F5).
   ───────────────────────────────────────────────────────────────────────── */

:root {
    --mt-indigo: #4b0082;
    --mt-pink:   #c71585;
    --mt-gold:   #d6a944;
    --mt-text:   #555f5b;
    --mt-bg-1:   #ffddee;
    --mt-bg-2:   #efe2f5;
}

/* ── Hero na úvodnej stránke ──────────────────────────────────────────── */

.mt-hero {
    /* Výška vlnky = 18 % šírky obrazovky, presne ako na pôvodnom webe
       (180 % šírky pri pomere strán 10:1). Žiadny strop – so stropom bola
       na širokých monitoroch plochá a nesedela s pozadím. Slúži len na
       výpočet spodného odsadenia, samotné SVG si výšku dopočíta samo. */
    --mt-wave-h: max(52px, 18vw);

    position: relative;
    background: linear-gradient(20deg, var(--mt-bg-1) 15%, var(--mt-bg-2) 60%);
    /* Žiadna pevná výška – hero je vysoké podľa obsahu, plus miesto na vlnku. */
    padding: 48px 20px calc(var(--mt-wave-h) + 30px);
    overflow: hidden;
}

.mt-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 1140px;
    margin: 0 auto;
    text-align: center;
}

.mt-hero__eyebrow {
    margin: 0 0 18px;
    padding-left: 15px;
    border-left: 1px solid var(--mt-gold);
    font-family: "Open Sans", sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mt-pink);
}

.mt-hero__title {
    margin: 0 0 18px;
    font-family: "Caudex", serif;
    /* Plynulá veľkosť namiesto troch pevných hodnôt pre mobil/tablet/desktop. */
    font-size: clamp(2rem, 7vw, 3.75rem);
    font-weight: 500;
    line-height: 1.12;
    color: var(--mt-indigo);
}

.mt-hero__lead {
    max-width: 46ch;
    margin: 0 0 28px;
    font-family: "Raleway", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--mt-text);
}

.mt-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.mt-btn {
    display: inline-block;
    padding: 14px 30px;
    font-family: "Raleway", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    color: #fff;
    background: var(--mt-indigo);
    border: 1px solid var(--mt-indigo);
    border-radius: 50px;
    text-decoration: none;
    transition: background .25s, border-color .25s, color .25s;
}

.mt-btn:hover,
.mt-btn:focus-visible {
    color: #fff;
    background: var(--mt-pink);
    border-color: var(--mt-pink);
}

.mt-btn--ghost {
    color: var(--mt-indigo);
    background: transparent;
}

.mt-btn--ghost:hover,
.mt-btn--ghost:focus-visible {
    color: #fff;
    background: var(--mt-indigo);
    border-color: var(--mt-indigo);
}

.mt-hero__media {
    width: 100%;
    max-width: 340px;
    margin-top: 28px;
}

.mt-hero__media img {
    display: block;
    width: 100%;
    height: auto;
}

/* Vlnka dole – rovnaká ako mala pôvodná sekcia.
   Elementor ju otáča o 180°, inak je výplň hore a namiesto vĺn je vidieť
   len biely blok. Bez tejto rotácie to vyzerá rozbito. */
.mt-hero__waves {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    line-height: 0;
    overflow: hidden;
    transform: rotate(180deg);
    pointer-events: none;
}

.mt-hero__waves svg {
    display: block;
    /* Roztiahnutá na 180 % a vycentrovaná – vidno len jej stred, oblúky sú
       tým pádom jemné a rozvláčne, presne ako na pôvodnom webe. */
    position: relative;
    left: 50%;
    width: calc(180% + 1.3px);
    /* Výšku zámerne nenastavujeme – SVG má preserveAspectRatio="none"
       a pomer strán 10:1, takže si ju dopočíta zo šírky rovnako ako
       pôvodná sekcia. */
    transform: translateX(-50%);
}

.mt-hero__waves .mt-shape-fill {
    fill: #fff;
}

/* Od tabletu vyššie dvojstĺpec: text vľavo, obrázok vpravo. */
@media (min-width: 768px) {
    .mt-hero {
        /* Výšku tu drží min-height (rovnako ako pôvodná sekcia), odsadenie
           preto nemusí počítať s celou vlnkou – jej horná časť je priehľadná
           a obsah cez ňu môže pokojne siahať. */
        padding: 90px 32px 140px;
    }

    .mt-hero__inner {
        flex-direction: row;
        align-items: center;
        gap: 48px;
        text-align: left;
    }

    .mt-hero__text {
        flex: 1 1 55%;
    }

    .mt-hero__eyebrow {
        display: inline-block;
    }

    .mt-hero__lead {
        margin-bottom: 32px;
    }

    .mt-hero__actions {
        justify-content: flex-start;
    }

    .mt-hero__media {
        flex: 0 1 42%;
        max-width: 420px;
        margin-top: 0;
    }
}

@media (min-width: 1200px) {
    .mt-hero {
        padding: 110px 32px 160px;
    }

    .mt-hero__media {
        max-width: 480px;
    }
}

/* ── Zväčšenie obrázka po kliknutí (cenník) ───────────────────────────── */

[data-mt-zoom] {
    cursor: zoom-in;
}

.mt-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    background: rgba(24, 12, 30, .94);
    overscroll-behavior: contain;
}

.mt-lightbox.is-open {
    display: block;
}

/* Pri priblížení sa v tomto kontajneri posúva prstom. */
.mt-lightbox__scroll {
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mt-lightbox__img {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    cursor: zoom-in;
    transition: none;
}

.mt-lightbox.is-zoomed .mt-lightbox__scroll {
    display: block;
}

.mt-lightbox.is-zoomed .mt-lightbox__img {
    max-width: none;
    max-height: none;
    width: 260%;          /* na mobile spoľahlivo čitateľný cenník */
    cursor: zoom-out;
}

@media (min-width: 768px) {
    .mt-lightbox.is-zoomed .mt-lightbox__img {
        width: 150%;
    }
}

.mt-lightbox__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 44px;
    height: 44px;
    font-size: 26px;
    line-height: 1;
    color: #fff;
    background: rgba(0, 0, 0, .45);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.mt-lightbox__hint {
    position: absolute;
    right: 0;
    bottom: 16px;
    left: 0;
    font-family: "Raleway", sans-serif;
    font-size: 13px;
    text-align: center;
    color: rgba(255, 255, 255, .75);
    pointer-events: none;
}

.mt-lightbox.is-zoomed .mt-lightbox__hint {
    display: none;
}

/* ── Sekcia s počítadlami pod hero ────────────────────────────────────────
   Fotokoláž s dvoma plávajúcimi kartičkami (počítadlo, hodnotenie) je
   napozicovaná zápornými marginmi voči hero sekcii – pôvodne -275 px na
   desktope, -180 px na tablete, -80 px na mobile. Tie hodnoty NEPREPISUJEME,
   inak sa kartičky rozídu oproti originálu.

   Namiesto toho dávame hero rovnakú minimálnu výšku, akú mala pôvodná
   sekcia, aby mali tie záporné marginy do čoho zapadnúť. Na mobile výšku
   nefixujeme – tam je prekryv len -80 px a hero môže byť kratšie a krajšie.
   ──────────────────────────────────────────────────────────────────────── */

@media (min-width: 768px) {
    .mt-hero {
        min-height: 885px;      /* pôvodná hodnota pre tablet */
    }
}

@media (min-width: 1025px) {
    .mt-hero {
        min-height: 900px;      /* pôvodná hodnota pre desktop */
    }
}

/* ── Cenník ───────────────────────────────────────────────────────────────
   Pôvodne bol cenník len grafika 3841×2161 px. Na telefóne sa zmenšila na
   ~370 px a text v nej bol nečitateľný. Teraz sa vykresľuje ako skutočný
   text z databázy (tabuľka `sluzby`), grafika ostáva pod ním ako doplnok.
   Farby sú z tej grafiky: zlaté nadpisy, tmavo fialové ceny.
   ──────────────────────────────────────────────────────────────────────── */

.mt-cennik {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px 56px;
    max-width: 1000px;
    margin: 0 auto 40px;
    padding: 32px 24px;
    background: #fdeef7;
    border-radius: 16px;
}

.mt-cennik__nadpis {
    margin: 0 0 14px;
    font-family: "Raleway", sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #b8912f;
}

.mt-cennik__zoznam {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mt-cennik__variant {
    margin-top: 12px;
    font-family: "Raleway", sans-serif;
    font-size: 14px;
    color: #b8912f;
}

.mt-cennik__variant:first-child {
    margin-top: 0;
}

/* Bodkovaná linka medzi trvaním a cenou sa roztiahne cez voľné miesto. */
.mt-cennik__polozka {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 5px 0;
    font-family: "Raleway", sans-serif;
    font-size: 16px;
    color: #2b0a4d;
}

.mt-cennik__bodky {
    flex: 1 1 auto;
    height: 1px;
    min-width: 18px;
    background: repeating-linear-gradient(
        to right, #c9aee0 0 3px, transparent 3px 7px
    );
}

.mt-cennik__cena {
    font-weight: 600;
    white-space: nowrap;
}

@media (min-width: 700px) {
    .mt-cennik {
        grid-template-columns: 1fr 1fr;
        padding: 40px 44px;
    }
}

/* Grafika cenníka pod textovým výpisom – doplnok, nie hlavný zdroj. */
.elementor-229 .elementor-element.elementor-element-ee304c9 img {
    border-radius: 12px;
}

/* ── Responzivita: oprava pretekania cez pravý okraj ──────────────────────
   Widget mobilného menu má v Elementore nastavenú šírku 120.622 % svojho
   stĺpca (niekto ho pri návrhu roztiahol myšou). Na telefóne tým pretečie
   cez okraj stránky, prehliadač zväčší šírku dokumentu a celý web sa dá
   oddialiť. Na malých displejoch mu šírku vraciame na 100 %.
   ──────────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .elementor-69 .elementor-element.elementor-element-27ed1d5,
    .elementor-69 .elementor-element.elementor-element-27ed1d5.elementor-element {
        width: 100%;
        max-width: 100%;
        --container-widget-width: 100%;
    }
}

/* Poistka: nič sa nesmie roztiahnuť širšie než obrazovka. Rieši to aj
   prípadné ďalšie prvky z pôvodnej šablóny, na ktoré sa nepríde hneď. */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* ── Zabalené mobilné menu nesmie trčať za pravým okrajom ─────────────────
   Xpro necháva vysúvacie menu ako position:fixed odsunuté cez
   translateX(100%) za pravý okraj, ale stále viditeľné. Na iOS Safari sa
   kvôli takému prvku dá stránka potiahnuť doprava – vedľa hera a pätičky
   potom svieti biely pruh. `overflow-x: hidden` na html/body to na iOS
   nerieši, fixed prvky neoreže.

   Keď menu nie je otvorené (nemá triedu .active), skryjeme ho úplne.
   Vysúvaciu animáciu to nepokazí – tá beží na transforme.
   ──────────────────────────────────────────────────────────────────────── */

/* POZOR: ten istý prvok je na desktope obyčajná vodorovná navigácia a triedu
   .active nemá – skrývať ho smieme len tam, kde sa mení na vysúvacie menu,
   teda na tablete a menej. Inak zmizne menu v hlavičke. */
@media (max-width: 1024px) {
    .xpro-elementor-horizontal-navbar-wrapper:not(.active),
    .elementskit-menu-offcanvas-elements:not(.active) {
        visibility: hidden;
    }

    .xpro-elementor-horizontal-navbar-wrapper.active,
    .elementskit-menu-offcanvas-elements.active {
        visibility: visible;
    }
}