/* =========================================================
   RESPONSIVE.CSS – přizpůsobení webu pro telefony, tablety,
   menší okna a přiblížení (Ctrl + kolečko)
   ========================================================= */

/* ---------- PLATÍ VŽDY ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, iframe { max-width: 100%; }

/* písmo nadpisů Gilda Display má jen jednu tloušťku – žádné umělé ztučnění */
h1, h2, h3, h4, .castka, .balicek strong,
[style*="Gilda Display"] { font-weight: 400 !important; }

/* nadpisy se plynule zmenšují spolu s oknem */
h2[style*="font-size: 48px"],
.sluzby h2, .nabidka h2 { font-size: clamp(32px, 5vw, 48px) !important; }
h2[style*="font-size: 40px"],
.cenik-blok h2 { font-size: clamp(28px, 4.2vw, 40px) !important; }
.karta h3 { font-size: clamp(24px, 3vw, 30px) !important; }

/* mřížky karet se nikdy nevylijí z obrazovky */
.karty { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.partie { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.sloupce { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }

/* horní lišta – menu se při nedostatku místa zalomí */
body > div:first-of-type { flex-wrap: wrap; gap: 6px 20px; }
.menu a { white-space: nowrap; }


/* ---------- MENŠÍ NOTEBOOKY / PŘIBLÍŽENÍ (do 1100 px) ---------- */
@media (max-width: 1100px) {
    /* horní lišta: logo nahoře, menu pod ním */
    body > div:first-of-type {
        height: auto !important;
        padding: 10px 20px !important;
        justify-content: center !important;
    }
    body > div:first-of-type .menu { text-align: center; line-height: 2; }
    body > div:first-of-type .menu a { margin: 0 8px !important; }
    body > div:first-of-type h5 { margin: 6px 0; }

    /* úvodní sekce: text trochu širší, fotka na střed */
    div[style*="flex: 0 0 38%"] { flex-basis: 45% !important; padding: 60px 30px 60px 40px !important; }
    div[style*="min-height: 95vh"] > div:last-child { background-position: center !important; }

    /* lístky ve Filozofii jemnější, aby nezasahovaly do textu */
    img[src*="listky"] { opacity: 0.45; }

    /* sekce fotka + text: menší mezery */
    div[style*="gap: 70px"] { gap: 40px !important; padding-left: 30px !important; padding-right: 30px !important; }
    div[style*="gap: 60px"] { gap: 40px !important; padding-left: 30px !important; padding-right: 30px !important; }
}


/* ---------- TABLETY A TELEFONY (do 800 px) ---------- */
@media (max-width: 800px) {

    /* úvodní sekce: text nahoře, fotka pod ním */
    div[style*="min-height: 95vh"] {
        flex-direction: column !important;
        min-height: 0 !important;
    }
    div[style*="flex: 0 0 38%"] {
        flex: none !important;
        width: 100%;
        padding: 40px 24px 10px !important;
    }
    div[style*="min-height: 95vh"] > div:last-child {
        flex: none !important;
        width: 100%;
        min-height: 55vw;
        padding: 20px 24px 40px !important;
        background-position: center !important;
    }
    /* fotka s přechodem: na telefonu splyne s textem shora */
    div[style*="min-height: 95vh"] > div:last-child[style*="linear-gradient"] {
        position: relative;
        padding: 0 !important;
        min-height: 70vw;
    }
    div[style*="min-height: 95vh"] > div:last-child[style*="linear-gradient"]::before {
        content: "";
        position: absolute; left: 0; right: 0; top: 0; height: 30%;
        background: linear-gradient(to bottom, bisque, rgba(255, 228, 196, 0));
    }

    /* sekce s fotkou a textem (Masáže, Psychoterapie, kontakty…) */
    div[style*="gap: 70px"],
    div[style*="gap: 60px"] {
        gap: 28px !important;
        padding: 40px 20px !important;
    }
    div[style*="min-height: 520px"] { min-height: 280px !important; flex-basis: 100% !important; }
    div[style*="flex: 0 1 440px"] { padding-top: 0 !important; flex-basis: 100% !important; }
    div[style*="flex: 1 1 450px"],
    div[style*="flex: 1 1 400px"] { flex-basis: 100% !important; }
    iframe { height: 300px !important; }

    /* Filozofie: lístky jemnější, aby nepřekážely textu */
    img[src*="listky"] { opacity: 0.35; height: 70% !important; }
    div[style*="background: #90964b"][style*="padding: 60px 20px"],
    div[style*="background: #90964b"][style*="padding: 70px 20px"] { padding: 50px 20px !important; }

    /* stránky s kartami (masáže, reiki, ceník) */
    .nabidka, .sluzby, .cenik { padding: 50px 16px !important; }
    .nabidka .karta { padding: 26px 22px 22px; }
    .karta-text { padding: 26px 22px 22px !important; }
    .karta-foto { min-height: 240px !important; }
    .karta.otocena { flex-direction: row !important; }   /* na telefonu vždy fotka nahoře */
    .karta-foto, .karta-text { flex-basis: 100% !important; }
    .cena { flex-direction: column; align-items: flex-start; gap: 4px; }
    .cena .delka { text-align: left !important; }
    .cenik-blok { padding: 28px 20px 26px !important; }

    /* ceník: název na jednom řádku, délka a cena pod ním */
    .polozka { flex-wrap: wrap; gap: 4px 14px; }
    .polozka .nazev { flex-basis: 100%; }
    .polozka .delka { flex: 1; }
    .polozka .castka { min-width: 0; }

    /* tlačítka přes celou šířku, ať se dobře mačkají prstem */
    .tlacitko, a[style*="border-radius: 30px"][style*="padding: 14px 34px"] {
        display: block !important;
        text-align: center;
        margin: 10px 0 0 !important;
    }

    /* dolní lišta: pod sebou a na střed */
    body > div:last-of-type {
        flex-direction: column !important;
        gap: 12px;
        padding: 20px !important;
        text-align: center;
    }
    body > div:last-of-type > * { justify-content: center !important; flex-wrap: wrap; }
    body > div:last-of-type .menu { line-height: 2; }
}


/* ---------- MENU NA TELEFONU BEZ SVISLÝCH ČÁREK (do 800 px) ---------- */
@media (max-width: 800px) {
    .menu { font-size: 0 !important; }
    body > div:first-of-type .menu a { font-size: 16px; display: inline-block; margin: 2px 10px !important; }
    body > div:last-of-type .menu a { font-size: 14px; display: inline-block; margin: 2px 8px !important; }

    body > div:first-of-type > :first-child { width: 100%; justify-content: center; gap: 10px !important; }
    body > div:first-of-type .menu { width: 100%; text-align: center; }
    body > div:first-of-type img { margin-left: -10px; }
}

/* ---------- MALÉ TELEFONY (do 420 px) ---------- */
@media (max-width: 420px) {
    body > div:first-of-type h5 { font-size: 11px !important; letter-spacing: 2px !important; }
    body > div:first-of-type .menu a { font-size: 15px; }
    p[style*="font-size: 18px"] { font-size: 16px !important; }
}