/* ============================================================================
   SELF-HOSTED FONTS — do not replace with a Google Fonts <link>.
   The site ships a strict CSP (default-src 'self'; style-src 'self'; font-src
   'self'), so an external stylesheet or font host is blocked by the browser and
   the page silently falls back to a system font. See ../../server/sws.toml and
   ../../../docs/security.md.

   Variable fonts, weight axis 400-900 — this covers every weight the stylesheet
   uses (500/600/700/800/900). NB the previous Google Fonts links requested only
   400/600/700(/800), so 500 and 900 were browser-synthesised fakes; self-hosting
   fixes that as a side effect.

   Both `latin` and `latin-ext` subsets are required: Czech ě š č ř ž ů ť live in
   latin-ext (U+0100+). Dropping it makes diacritics fall back to a system font
   mid-word. Do not "optimise" it away.

   Nunito & Nunito Sans © The Nunito Project Authors, SIL Open Font License 1.1.
   Licence text: assets/fonts/OFL.txt
   ========================================================================== */

@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('assets/fonts/nunito-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('assets/fonts/nunito-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('assets/fonts/nunito-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('assets/fonts/nunito-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Replaces two inline style="text-decoration:none" attributes that the strict
   CSP blocks (style-src 'self' does not permit style attributes). */
.btn {
    text-decoration: none;
}

body {
    margin: 0;
    font-family: Nunito, sans-serif;
}

/* HORNÍ LIŠTA */
.top-bar {
    height: 92px;
    background-color: #1f4fa3;
    /* modrá z Canvy */
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 9999;

}

.top-bar-inner {
    width: 100%;
    max-width: 2000px;
    margin: 0 auto;
    padding: 0 32px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* LOGO */
.logo {
    height: 82px;
}

/* TLAČÍTKA */
.actions {
    display: flex;
    gap: 16px;
}

.btn {
    height: 40px;
    min-width: 160px;
    /* TADY se dělá šířka */
    padding: 0 24px;
    /* padding už jen jemně */
    border-radius: 12px;
    border: none;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}



.btn.call {
    background-color: #ce1126;
    color: white;
}

.btn.write {
    background-color: #11457E;
    color: white;
}

.brand {
    display: flex;
    align-items: center;
    gap: 1px;
}

.brand-text {
    color: white;
    line-height: 1.1;
}

.brand-line-1 {
    font-size: 19px;
    font-weight: 600;
}

.brand-line-2 {
    font-size: 19px;
    font-weight: 800;
}

.btn img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.btn.write img {
    transform: scale(1.15);
}

.phone-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}


.phone {
    color: white;
    font-size: 22px;
    /* klidně dolaď podle oka */
    font-weight: 700;
}

.phone-emoji {
    font-size: 24px;
    line-height: 1;
}

/* HERO */
.hero {
    position: relative;
    overflow: hidden;
    /* ← TÍM SE ŘEŽE SPODNÍ ČÁST */
    height: clamp(420px, 60vw, 777px);
    /* ← TADY ŘÍKÁŠ, KOLIK VIDÍŠ */
}

.hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 75% 35%;
    display: block;
}

/* kontejner pro zarovnání jako top-bar-inner */
.hero-inner {
    position: absolute;
    top: 66px;
    /* výšku doladíme pak */
    left: 0;
    right: 0;
    max-width: 2000px;
    /* stejné jako top-bar-inner (ty máš 2000) */
    margin: 0 auto;
    padding: 0 32px;
    /* stejné jako top-bar-inner */
}

/* TADY se dělá “pod logo” */
.hero-text {
    padding-left: 18px;
    /* = logo(160) + gap(14) */
    color: #13457F;
    font-family: 'Nunito Sans', sans-serif;

}

.hero-text h1 {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 66px;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 12px 0;
}

.hero-text p {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 30px;
    margin: 0;
    color: #000;
}

.hero-text p strong {
    font-weight: 800;
}

/* INFO BOX – nová struktura (ikony vlevo, text vpravo) */
.info-box {
    width: 520px;
    height: 285px;
    margin-top: 60px;
    background: rgba(17, 69, 126, 0.2);
    border-radius: 16px;
}

.info-grid {
    display: grid;
    grid-template-columns: 70px 1fr;
    /* levý sloupek pro ikony */
    column-gap: 16px;
    padding: 26px 28px;
    padding-top: 34px;
}

/* ikony jako "buttony" */
.icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* === INFO BOX (ikony vlevo, text vpravo) === */


.info-icons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    margin-left: 30px;
}

/* vlajky */
.icon-btn.flags {
    width: 80px;
    height: 34px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -4px;
}

.icon-btn.flags img {
    width: 34px;
    height: auto;
    display: block;
}

.icon-btn.flags img:first-child {
    margin-right: 8px;
}

/* červené kolečko */
.icon-btn.check {
    background: #ce1126;
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
}

.info-labels {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding-left: 32px
}

.info-line {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.15;
    color: #0b0b0b;
}

/* === INDIVIDUÁLNÍ POSUN KOLEČEK === */

/* 1. kolečko – Naše služby jsou zdarma */
.info-icons .icon-btn.check:nth-of-type(2) {
    margin-top: 0px;
}

/* 2. kolečko – Lékařská péče je hrazena */
.info-icons .icon-btn.check:nth-of-type(3) {
    margin-top: -2px;
}

/* 3. kolečko – Jsme k dispozici 24/7 */
.info-icons .icon-btn.check:nth-of-type(4) {
    margin-top: 28px;
}

/* společný posun všech červených koleček doprava */
.info-icons .icon-btn.check {
    margin-left: 60px;
}

/* HERO CTA */
.hero-cta {
    margin-top: 90px;
    /* ↓ POSUN DOLŮ – zvětši = víc dolů */
    margin-left: 110px;
    /* → POSUN DOPRAVA – zvětši = víc doprava */

    display: flex;
    gap: 40px;
}


/* delší tlačítka než v horní liště */
.hero-cta .btn {
    height: 60px;
    min-width: 260px;
    /* DELŠÍ */
    padding: 0 80px;
    font-size: 20px;
    font-weight: 800;
    border-radius: 16px;
}

.hero-cta a {
    text-decoration: none;
    /* zruší podtržení */
}

/* barvy STEJNÉ jako horní lišta */
.hero-cta .btn.call {
    background-color: #ce1126;
    /* červená */
    color: #fff;
}

.hero-cta .btn.write {
    background-color: #11457E;
    /* modrá */
    color: #fff;
}

/* ikonky trochu větší */
.hero-cta .btn img {
    width: 38px;
    height: 38px;
}

/* schovat mobilní cta tlačítka na desktopu */
.hero-cta-mobile {
    display: none;
}

/* =========================================
   SEKCE: CO DĚLÁME (modrý pruh + 3 boxy)
   ========================================= */

/* MODRÝ PRUH (od kraje do kraje) */
.section-blue {
    width: 100%;
    height: 620px;
    /* výška modrého pruhu */
    background: rgba(17, 69, 126, 0.28);
    /* #11457E / 28% */
    margin-top: 20px;
    /* bílá linka pod hero */
}

/* vnitřní zarovnání obsahu (boxy nejsou od kraje) */
.section-inner {
    max-width: 2000px;
    margin: 0 auto;
    padding: 0 22px;
}

/* NADPIS */
.services-title {
    font-family: 'Nunito', sans-serif;
    font-size: 55px;
    font-weight: 700;
    color: #11457E;
    text-align: center;

    transform: translateY(40px);
    /* POSUN NADPISU ↑↓ */
}

/* 3 BOXY V ŘADĚ */
.boxes {
    display: flex;
    justify-content: center;
    gap: 60px;
    /* mezera mezi boxy */

    transform: translateY(30px);
    /* POSUN BOXŮ ↑↓ */
}

/* JEDEN BOX */
.box {
    width: 360px;
    /* šířka boxu */
    height: 340px;
    /* výška boxu */
    background: #fff;
    border-radius: 28px;
    padding: 32px;
}

/* obsah boxu (ikona nad textem) */
.box-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* IKONA */
.box-icon {
    width: 220px;
    /* velikost ikony */
    height: auto;

    transform: translateY(-40px);
    /* POSUN IKON ↑↓ */
}

/* NADPIS POD IKONOU */
.box-title {
    font-family: 'Nunito', sans-serif;
    font-size: 36px;
    font-weight: 900;
    color: #11457E;
    letter-spacing: 1px;

    margin-top: -50px;
    /* POSUN TEXTU POD IKONOU ↑↓ */
}

.box-text {
    font-family: 'Nunito', sans-serif;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.25;
    color: #000;
    text-align: center;

    margin-top: 10px;
    /* mezera pod nadpisem */
    transform: translateY(0px);
    /* ⬅️ TADY hýbeš textem ↑↓ */
}

/* ===== KDE POMÁHÁME ===== */

.section-locations {
    width: 100%;
    background: rgba(17, 69, 126, 0.28);
    margin-top: 50px;

    /* ↑↓ POSUN CELÉ SEKCE (když chceš) */
    /* transform: translateY(0px); */

    padding: 70px 0 70px 0;
    /* výška bloku */
}

.locations-inner {
    max-width: 2000px;
    margin: 0 auto;
    padding: 0 32px;
    text-align: center;
}

/* NADPIS */
.locations-title {
    font-family: 'Nunito', sans-serif;
    font-size: 55px;
    font-weight: 800;
    color: #11457E;
    margin: 0;

    /* ↑↓ POSUN JEN NADPISU */
    transform: translateY(-20px);
}

/* ŘADA BOXÍKŮ (celý řádek jako celek) */
.locations-pills {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 36px;
    margin-top: 44px;

    flex-wrap: nowrap;
    /* ← místo wrap */
    white-space: nowrap;
    /* ← pojistka */
    /* ↑↓ POSUN JEN ŘÁDKU BOXÍKŮ */
    transform: translateY(-20px);
}

.pill {
    white-space: nowrap;
}


/* JEDEN BOXÍK */
.pill {
    background: #ffffff;
    border-radius: 999px;

    /* ✅ VŠECH 5 STEJNÁ VELIKOST */
    width: 300px;
    /* ↔ šířka boxíku */
    height: 80px;
    /* ↑↓ výška boxíku */

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: 'Nunito', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #11457E;

    /* ↑↓ POSUN JEDNOHO BOXÍKU (default) */
    transform: translateY(0px);
}

/* AKTIVNÍ (Hurghada červeně) */
.pill-active {
    color: #ce1126;
}

/* INDIVIDUÁLNÍ POSUNY KAŽDÉHO BOXÍKU (když potřebuješ) */
.pill-1 {
    transform: translateY(0px);
}

.pill-2 {
    transform: translateY(0px);
}

.pill-3 {
    transform: translateY(0px);
}

.pill-4 {
    transform: translateY(0px);
}

.pill-5 {
    transform: translateY(0px);
}

/* CTA TLAČÍTKO */
.locations-cta {
    display: inline-block;
    margin-top: 54px;

    background: #11457E;
    color: #ffffff;
    text-decoration: none;

    font-family: 'Nunito', sans-serif;
    font-size: 34px;
    font-weight: 800;

    padding: 28px 70px;
    border-radius: 18px;

    /* ↑↓ POSUN JEN TLAČÍTKA */
    transform: translateY(0px);
}

.locations {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;

    flex-wrap: nowrap;
    /* ⬅️ TOHLE JE KLÍČ */
    white-space: nowrap;
    /* ⬅️ pojistka */
}

/* ===== RESPONSIVE (tablet/mensi obrazovky) ===== */
@media (max-width: 1100px) {

    /* HERO fotka se bude chovat hezky a nezničí layout */
    .hero {
        height: 620px;
        /* můžeš doladit */
    }

    .hero-photo {
        height: 100%;
        width: 100%;
        object-fit: cover;
        /* klíč */
        object-position: center;
    }

    /* zmenšíme typografii a boxy, aby se nerozpadaly */
    .hero-text h1 {
        font-size: 46px;
    }

    .hero-text p {
        font-size: 22px;
    }

    .info-box {
        width: 440px;
        height: auto;
    }

    .info-line {
        font-size: 22px;
    }

    .hero-cta {
        margin-top: 40px;
        margin-left: 0;
        gap: 18px;
        flex-wrap: wrap;
        /* tlačítka se můžou zalomit */
    }

    .hero-cta .btn {
        height: 56px;
        min-width: 240px;
        padding: 0 40px;
        font-size: 18px;
    }

    /* CO DĚLÁME – když se nevejde, zalomí se do 2 řad */
    .boxes {
        flex-wrap: wrap;
        gap: 30px;
    }

    /* KDE POMÁHÁME – dovolíme zalomení */
    .locations-pills {
        flex-wrap: wrap;
        white-space: normal;
    }

    .pill {
        width: auto;
        /* místo pevné šířky */
        padding: 0 26px;
        /* aby to vypadalo stejně */
    }
}

/* ===== HERO SE ZMENŠUJE SPOLU S OKNEM ===== */
@media (max-width: 1200px) {

    .hero {
        height: 60vw;
        /* ← KLÍČ */
        max-height: 777px;
        min-height: 420px;
    }

}

/* === STEPS / JAK TO PROBÍHÁ === */

.section-steps {
    background: #fff;
    padding: 40px 0;
}

.steps-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
}

.steps-title {
    text-align: center;
    font-size: 42px;
    font-weight: 800;
    color: #11457E;
    margin-bottom: 60px;
}

.steps-list {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

/* JEDEN ŘÁDEK */
.step {
    display: flex;
    align-items: center;
    /* ✅ kolečko + text srovná na střed */
    justify-content: center;
    /* ✅ celý řádek na střed */
    gap: 24px;
    text-align: left;
}


/* ČERVENÉ KOLEČKO */
.step-badge {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 50%;
    background: #ce1126;
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* TEXT – STEPS */
.step-text {
    font-size: 28px;
    font-weight: 600;
    color: #000;
    line-height: 1.3;
    max-width: 900px;
}

/* ===== KONTAKT 24/7 ===== */
.section-contact {
    background: rgba(238, 28, 36, 0.19);
    padding: 50px 0 60px 0;
    /* všechno výš */
}

.section-contact .contact-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
    text-align: center;
}

.section-contact .contact-title {
    font-size: 50px;
    font-weight: 800;
    margin: 0 0 30px 0;
}

.section-contact .contact-phone {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin: 0 0 -10px 0;
}

.section-contact .phone-icon {
    font-size: 60px;
    font-weight: 800;
}

.section-contact .phone-number {
    font-size: 78px;
    font-weight: 900;
    color: #ce1126;
}

.section-contact .contact-channels {
    font-size: 38px;
    font-weight: 800;
    margin: 0 0 20px 0;
}

/* TEXT + LOGO vedle sebe */
.section-contact .contact-grid {
    display: grid;
    grid-template-columns: 1fr 260px;
    align-items: center;
    gap: 20px;
    max-width: 900px;
    margin: 10px auto 0 auto;
}

/* text vlevo */
.section-contact .contact-info {
    text-align: left;
    font-size: 43px;
    line-height: 1.4;
    margin: 0;
}

/* logo vpravo */
.section-contact .contact-logo {
    width: 270px;
    height: auto;
    display: block;
    justify-self: start;
    margin-left: 55px;
    /* víc doleva */
    margin-top: -40px;
    /* víc nahoru */
}

/* tlačítka */
.section-contact .contact-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin: 30px 0 30px 0;
}

.section-contact .contact-buttons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 340px;
    height: 64px;
    border-radius: 16px;
    font-size: 26px;
    font-weight: 800;
    text-decoration: none;
    color: #fff;
}

.section-contact .contact-buttons a img {
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.section-contact .btn-wa {
    background: #ce1126;
}

.section-contact .btn-call {
    background: #11457E;
}

/* poznámka dole */
.section-contact .contact-note {
    font-size: 30px;
    line-height: 1.2;
    margin: 0;
}

.section-photo {
    margin-top: 40px;
    width: 100%;
}

.section-photo img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== DŮLEŽITÉ / 123 ===== */
.section-emergency {
    background: rgba(238, 28, 36, 0.19);
    /* 19 % červené */
    padding: 60px 0;
    margin-top: 40px
}

.emergency-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
    text-align: center;
}

.emergency-title {
    font-size: 55px;
    font-weight: 900;
    color: #ce1126;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.emergency-subtitle {
    font-size: 55px;
    font-weight: 900;
    color: #ce1126;
    margin-bottom: 60px;
    margin-top: -20px;
}

.emergency-text {
    font-size: 36px;
    font-weight: 600;
    color: #000;
    line-height: 1.35;
    margin-bottom: 18px;
}

.emergency-number {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 10px 0 18px 0;
}

.emergency-icon {
    font-size: 66px;
    line-height: 1;
}

.emergency-123 {
    font-size: 75px;
    font-weight: 900;
    color: #ce1126;
    margin-top: 20px;
}

.emergency-foot-main {
    font-size: 44px;
    font-weight: 900;
    color: #ce1126;
    margin-top: -20px;
}

.emergency-foot-small {
    font-size: 36px;
    font-weight: 500;
    color: #000;
    line-height: 1.35;
    margin-top: 40px;
}

/* ===== PARTNERSKÁ CENTRA A LÉKAŘI ===== */

.section-partners {
    background: #ffffff;
    padding: 50px 0;
}

.partners-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}

/* NADPIS */
.partners-title {
    font-size: 55px;
    font-weight: 900;
    text-align: center;
    margin-bottom: 24px;
}

/* ÚVODNÍ TEXT */
.partners-intro {
    font-size: 36px;
    font-weight: 500;
    text-align: center;
    line-height: 1.4;
    max-width: 1000px;
    margin: 0 auto 30px auto;
}

/* GRID – FOTO + TEXT */
.partners-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: center;
}

/* FOTO */
.partners-photo img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    display: block;
}

/* TEXT VPRAVO */
.partners-text {
    font-size: 31px;
    line-height: 1;
}

/* PODNADPIS */
.partners-subtitle {
    font-size: 36px;
    font-weight: 900;
    margin-bottom: 0px;
}

/* ODRÁŽKY */
.partners-list {
    list-style: disc;
    padding-left: 0px;
}

.partners-list li {
    margin-bottom: 4px;
    line-height: 1.35;
}

/* SPODNÍ TEXT */
.partners-foot {
    font-size: 28px;
    font-weight: 500;
    text-align: center;
    max-width: 1000px;
    margin: 20px auto 0 auto;
    line-height: 1.4;
}

/* ===== O NÁS ===== */

.section-about {
    background: #c6d6ea;
    /* světle modrá z grafiky */
    padding: 20px 0 40px 0;
}

.about-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}

/* NADPIS */
.about-title {
    text-align: center;
    font-size: 55px;
    font-weight: 900;
    margin-bottom: 60px;
}

/* GRID */
.about-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 10px;
    align-items: start;
}

/* TEXT */
.about-text {
    font-size: 38px;
    line-height: 1.15;
    margin-left: 40px;
}

.about-text p {
    margin-bottom: 28px;
}

.about-text strong {
    font-weight: 900;
}

/* LOGO */
.about-logo img {
    width: 100%;
    max-width: 700px;
    display: block;
    margin-left: 50px;
}

.about-full {
    margin-top: 30px;
    font-size: 40px;
    line-height: 1.15;
    padding: 0 32px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.about-full p {
    margin-bottom: 28px;
}

.about-full strong {
    font-weight: 900;
}

/* ===== SEKCE: FARAONŮV PRŮVODCE (2 fotky + symbol + CTA) ===== */

.section-photos {
    padding: 30px 0;
    margin-top: 0px;
}

.photos-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 32px;
    background: #fff;
    /* bílý blok uvnitř */
    text-align: center;
}

.photos-title {
    font-size: 50px;
    /* jak chceš */
    font-weight: 900;
    margin: 0 0 40px 0;
    white-space: nowrap;
}

.photos-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    align-items: start;
    margin-bottom: 34px;
}

/* LEVÁ FOTKA – přesný čtverec */
.photos-left img {
    width: 470px;
    height: 470px;
    display: block;
}

/* PRAVÁ FOTKA – výška 388, šířka podle obrázku */
.photos-right img {
    height: 470px;
    width: auto;
    display: block;
}


.photos-bottom {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 26px;
    align-items: center;
    justify-items: start;
    margin-top: -110px;
    /* ⬅️ POSUN CELÉHO BLOKU VÝŠ (záporné číslo) */
    margin-left: 20px
}

.photos-symbol {
    width: 400px;
    height: auto;
    display: block;
}

.photos-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 640px;
    height: 70px;
    background: #11457E;
    color: #fff;
    text-decoration: none;
    font-size: 30px;
    font-weight: 800;
    border-radius: 14px;
    margin-left: 150px;
    margin-top: -20px;
    /* ⬅️ TÍMTO POSOUVÁŠ DOPRAVA */
}

.photos-cta.disabled {
    background: transparent !important;
    border: 3px solid #11457E;
    color: #11457E !important;
    cursor: default;
    box-sizing: border-box;
}

/* jemné doladění pro menší okna */
@media (max-width: 900px) {
    .photos-main {
        grid-template-columns: 1fr;
    }

    .photos-left img,
    .photos-right img {
        height: 320px;
    }

    .photos-cta {
        height: 64px;
        font-size: 24px;
    }
}

.section-footer-contact {
    background: #c6d6ea;
    padding: 40px 0 40px;
    margin-top: -120px;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}

.footer-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
}

.footer-title {
    font-size: 55px;
    font-weight: 900;
    margin-bottom: 24px;
}

.footer-title-right {
    text-align: left;
}

/* LEVÁ STRANA */
.footer-left {
    margin-left: 60px;
    /* ⬅️ POSUN DOPRAVA */
}

.footer-phone {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.footer-phone-icon {
    width: 34px;
    height: auto;
}

.footer-phone-number {
    font-size: 38px;
    font-weight: 900;
}

.footer-channels {
    font-size: 34px;
    font-weight: 600;
}

/* LEVÁ STRANA */
.footer-left {
    margin-left: 60px;
}

.footer-phone {
    display: flex;
    align-items: center;
    gap: 0px;
    margin-bottom: 12px;
}

/* 📞 IKONA */
.phone-icon {
    font-size: 44px;
    /* ⬅️ zvětšení ikony */
    line-height: 1;
    display: inline-block;
    transform: translateY(2px);
    /* jemné srovnání s číslem */
    margin-left: -12px;
}

/* 📞 ČÍSLO */
.phone-number {
    font-size: 46px;
    /* ⬅️ zvětšení čísla */
    font-weight: 900;
    line-height: 1;
}

/* TEXT POD TÍM */
.footer-channels {
    font-size: 34px;
    font-weight: 600;
    margin-top: 6px;
    /* ⬅️ doladění mezery */
}


/* PRAVÁ STRANA */
.footer-right {
    margin-left: 50px;
    /* ⬅️ POSUN DOPRAVA */
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 0px;
    margin-top: -80px;
    /* ⬅️ POSUNE VÝŠ */
    margin-left: -35px;
    /* ⬅️ TÍM JE DOSTANEŠ DOLEVA */
}

.footer-social a {
    margin: 0;
    padding: 0;
}

.social-icon {
    margin: 0;
    padding: 0;
    display: block;
}

.social-icon {
    width: 160px;
    height: auto;
    display: block;
    margin-right: -50px;
    /* ⬅️ TÍM JE NATVRDO PŘIBLÍŽÍŠ */
}

.footer-faraon {
    display: flex;
    align-items: center;
    gap: 0px;
}

.footer-faraon img {
    width: 250px;
    height: auto;
    margin-left: -30px;
}

.footer-faraon span {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
    margin-left: -30px;
    /* ⬅️ text blíž k mapě */
    margin-top: -15px;
}

/* SPODNÍ ŘÁDEK */
.footer-bottom {
    margin-top: -20px;
    font-size: 38px;
    font-weight: 800;
    text-align: center;
}

/* ===== OCHRANA OSOBNÍCH ÚDAJŮ ===== */

.section-privacy {
    background: #ffffff;
    padding: 80px 0 -20px;
}

.privacy-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 12px;
    text-align: center;
}

.privacy-title {
    font-size: 55px;
    font-weight: 900;
    margin-bottom: 36px;
}

.privacy-text {
    font-size: 30px;
    line-height: 1.45;
    font-weight: 500;
}

.footer-bar {
    background: #2a5aa3;
    /* tvoje modrá */
    padding: 26px 0;
}

.footer-bar-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
}

/* LEVÁ ČÁST */
.footer-brand {
    display: flex;
    align-items: center;
    gap: 16px;

}

.footer-logo-main {
    width: 82px;
    height: auto;
}

.footer-brand-text {
    color: #fff;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.1;
    transform: translateX(-15px);
    /* ⬅️ minus = doleva */
}

/* TELEFON */
.footer-phone-number {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
    font-size: 22px;
    font-weight: 700;
    transform: translateX(200px);
    /* ⬅️ kladné = doprava, záporné = doleva */

}

.footer-phone-number:hover {
    opacity: 0.85;
}

.footer-bar .footer-phone-icon {
    font-size: 24px;
    /* ⬅️ vrátí velikost */
    line-height: 1;
    display: inline-block;
    transform: translateX(190px);
    /* ⬅️ doleva (kladné = doprava) */
}


/* PRAVÁ ČÁST */
.footer-author {
    display: flex;
    align-items: center;
    gap: 18px;
    color: #fff;
    text-align: right;
}

.footer-author-text {
    font-size: 14px;
    line-height: 1.2;
    font-weight: 600;
    transform: translateX(15px);
}

.footer-logo-shinelink {
    width: 90px;
    height: auto;
}

/* =========================
   MOBIL – LIŠTA (finální stabilní)
   ======================== */
@media (max-width: 768px) {

    .top-bar {
        width: 100vw;
        height: 62px;
        padding: 0 10px;
        display: flex;
        align-items: center;
        overflow: visible !important;
        box-sizing: border-box;
        position: relative;
    }

    .top-bar-inner {
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0;

        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        box-sizing: border-box;
        overflow: hidden !important;
        transform: none !important;
    }

    .phone-wrap {
        display: none;
    }

    /* BRAND */
    .brand {
        display: flex;
        align-items: center;
        gap: 0px;
        /* text víc k logu */
        min-width: 0;
        flex: 1 1 auto;
    }

    .logo {
        height: 40px;
        transform: translateY(-2px);
        /* logo trochu výš */
        flex: 0 0 auto;
    }

    .brand-text {
        line-height: 1.05;
        min-width: 0;
    }

    .brand-line-1,
    .brand-line-2 {
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
        /* na úzkých se ořízne, NELEZE pod tlačítka */
        text-overflow: ellipsis;
        max-width: 100%;
    }

    /* TLAČÍTKA */
    .actions {
        display: flex;
        gap: 3px;
        flex: 0 0 auto;
        margin-left: 0;
        position: absolute;
        right: 15px;
        transform: none !important;
        z-index: 99999;
    }

    .btn {
        height: 24px;
        /* tenčí */
        min-width: 0;
        max-width: 90px;
        padding: 0 10px;
        font-size: 10px;
        font-weight: 600;
        border-radius: 8px !important;
        gap: 6px;
        white-space: nowrap;

        flex: 0 0 auto;
        /* klíč: neprotáhne se a “neuteče” */
        padding: 0 8px;
    }

    .btn img {
        width: 16px;
        height: 16px;
    }

    @media (max-width: 340px) {

        .brand-line-1,
        .brand-line-2 {
            font-size: 10px;
        }

        .btn {
            height: 22px;
            padding: 0 8px;
            font-size: 9px;
            border-radius: 8px;
            gap: 5px;
        }

        .btn img {
            width: 14px;
            height: 14px;
        }
    }
}

@media (min-width: 435px) and (max-width: 768px) {
    .actions {
        right: calc(100vw - 420px) !important;
    }
}

.mobile-hero {
    display: none;
}

@media (max-width: 768px) {

    /* HORNÍ MOBILNÍ LIŠTA DOPLŇKY */
    .hero {
        display: none !important;
    }

    .hero-cta-mobile {
        display: none !important;
    }

    /* MOBILNÍ HERO */
    .mobile-hero {
        display: flex !important;
        flex-direction: column;
        background: #fff;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    .mobile-hero-banner {
        width: 100%;
        min-height: 240px;
        background-image: url('assets/img/hero-lekar-egypt-hurghada-ordinace.jpg');
        background-size: cover;
        background-position: 25% center;
        padding: 30px 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        text-align: left;
    }

    .mobile-hero-banner h1 {
        font-family: 'Nunito Sans', sans-serif;
        font-size: 26px !important;
        font-weight: 800;
        line-height: 1.15;
        color: #11457E;
        margin: 0 0 10px 0 !important;
        text-shadow: 0px 1px 2px rgba(255, 255, 255, 0.9);
    }

    .mobile-hero-banner p {
        font-family: 'Nunito', sans-serif;
        font-size: 15px !important;
        font-weight: 600;
        color: #000;
        line-height: 1.35;
        margin: 0 !important;
        text-shadow: 0px 1px 2px rgba(255, 255, 255, 0.9);
    }

    .mobile-hero-content {
        width: 100%;
        padding: 24px 16px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .mobile-info-box {
        width: 100%;
        max-width: 340px;
        background: rgba(17, 69, 126, 0.08);
        border-radius: 12px;
        padding: 18px 16px;
        margin-bottom: 24px;
        box-sizing: border-box;
    }

    .mobile-info-grid {
        display: grid;
        grid-template-columns: 64px 1fr;
        column-gap: 12px;
    }

    .mobile-info-icons {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
    }

    .mobile-icon-flags {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 24px;
    }

    .mobile-icon-flags img {
        width: 28px;
        height: auto;
        display: block;
    }

    .mobile-icon-flags img:first-child {
        margin-right: 6px;
        z-index: 2;
    }

    .mobile-icon-flags img:last-child {
        z-index: 1;
    }

    .mobile-icon-check {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #ce1126;
        color: #fff;
        font-size: 12px;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    .mobile-info-labels {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .mobile-info-text {
        font-size: 14px;
        font-weight: 600;
        color: #0b0b0b;
        line-height: 1.35;
        min-height: 20px;
        display: flex;
        align-items: center;
    }

    .mobile-hero-buttons {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        max-width: 340px;
    }

    .mobile-hero-buttons a {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        border-radius: 12px;
        font-size: 16px;
        font-weight: 800;
        text-decoration: none;
        color: #fff;
        transition: opacity 0.2s ease;
        box-sizing: border-box;
    }

    .mobile-hero-buttons a:hover {
        opacity: 0.9;
    }

    .mobile-hero-buttons a img {
        width: 24px;
        height: 24px;
        object-fit: contain;
        margin-right: 10px;
    }

    .mobile-hero-buttons .mobile-write {
        background-color: #11457E; /* modrá */
        color: #fff;
    }

    .mobile-hero-buttons .mobile-call {
        background-color: #ce1126; /* červená */
        color: #fff;
    }

    /* SEKCE: CO DĚLÁME */
    .section-blue {
        height: auto !important;
        padding: 40px 16px 50px 16px;
        margin-top: 0;
    }

    .services-title {
        font-size: 28px !important;
        transform: none !important;
        margin-top: 0;
        margin-bottom: 30px;
    }

    .boxes {
        flex-direction: column;
        align-items: center;
        gap: 45px;
        transform: none !important;
    }

    .box {
        width: 100% !important;
        max-width: 300px !important;
        height: auto !important;
        padding: 24px !important;
        box-sizing: border-box;
        border-radius: 20px !important;
    }

    .box-icon {
        width: 130px !important;
        transform: translateY(-20px) !important;
        margin-bottom: -15px;
    }

    .box-title {
        font-size: 22px !important;
        margin-top: 0 !important;
        margin-bottom: 10px;
    }

    .box-text {
        font-size: 16px !important;
        transform: none !important;
    }

    /* SEKCE: KDE POMÁHÁME */
    .section-locations {
        padding: 40px 16px;
        margin-top: 0;
    }

    .locations-title {
        font-size: 28px !important;
        transform: none !important;
        margin-bottom: 24px;
    }

    .locations-pills {
        flex-direction: column !important;
        gap: 12px !important;
        transform: none !important;
        margin-top: 0 !important;
    }

    .pill {
        width: 100% !important;
        max-width: 280px !important;
        height: 48px !important;
        font-size: 16px !important;
        transform: none !important;
        border-radius: 999px !important;
    }

    .locations-cta {
        font-size: 18px !important;
        padding: 16px 24px !important;
        margin-top: 24px !important;
        transform: none !important;
        display: inline-block;
        width: 100%;
        max-width: 280px;
        box-sizing: border-box;
        text-align: center;
        border-radius: 12px !important;
    }

    /* SEKCE: JAK TO PROBÍHÁ */
    .section-steps {
        padding: 40px 16px;
    }

    .steps-inner {
        padding: 0;
    }

    .steps-title {
        font-size: 28px !important;
        margin-bottom: 30px !important;
    }

    .step {
        gap: 16px !important;
    }

    .step-badge {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        font-size: 18px !important;
    }

    .step-text {
        font-size: 16px !important;
        line-height: 1.35 !important;
    }

    /* SEKCE: KONTAKT */
    .section-contact {
        padding: 40px 16px;
    }

    .section-contact .contact-title {
        font-size: 24px !important;
        margin-bottom: 24px !important;
        line-height: 1.3;
    }

    .section-contact .contact-phone {
        gap: 8px !important;
        margin-bottom: 0 !important;
    }

    .section-contact .phone-icon {
        font-size: 28px !important;
    }

    .section-contact .phone-number {
        font-size: 26px !important;
    }

    .section-contact .contact-channels {
        font-size: 18px !important;
        margin-bottom: 20px !important;
    }

    .section-contact .contact-grid {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 16px !important;
        margin-top: 0 !important;
    }

    .section-contact .contact-info {
        text-align: center !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
    }

    .section-contact .contact-logo {
        width: 150px !important;
        margin: 0 auto !important;
        justify-self: center !important;
    }

    .section-contact .contact-buttons {
        flex-direction: column !important;
        gap: 12px !important;
        margin: 20px auto !important;
        width: 100%;
        max-width: 280px;
    }

    .section-contact .contact-buttons a {
        width: 100% !important;
        max-width: 280px !important;
        height: 48px !important;
        font-size: 16px !important;
        border-radius: 12px !important;
    }

    .section-contact .contact-buttons a img {
        width: 24px !important;
        height: 24px !important;
    }

    .section-contact .contact-note {
        font-size: 14px !important;
        line-height: 1.35 !important;
    }

    /* SEKCE: FOTOGRAFIE MEZI BLOKY */
    .section-photo {
        height: auto !important;
        background-image: none !important;
        margin-top: 20px;
    }

    .mobile-section-photo {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

    /* SEKCE: POHOTOVOST 123 */
    .section-emergency {
        padding: 40px 16px;
    }

    .emergency-title {
        font-size: 24px !important;
        margin-bottom: 6px !important;
    }

    .emergency-subtitle {
        font-size: 20px !important;
        margin-top: 0 !important;
        margin-bottom: 20px !important;
    }

    .emergency-text {
        font-size: 15px !important;
        line-height: 1.4 !important;
    }

    .emergency-text br {
        display: none;
    }

    .emergency-number {
        gap: 8px !important;
        margin: 15px 0 !important;
    }

    .emergency-icon {
        font-size: 28px !important;
    }

    .emergency-123 {
        font-size: 36px !important;
        margin-top: 0 !important;
    }

    .emergency-foot-main {
        font-size: 18px !important;
        margin-top: 0 !important;
    }

    .emergency-foot-small {
        font-size: 14px !important;
        margin-top: 20px !important;
        line-height: 1.35 !important;
    }

    /* SEKCE: PARTNERSKÁ CENTRA */
    .section-partners {
        padding: 40px 16px;
    }

    .partners-title {
        font-size: 24px !important;
        margin-bottom: 16px !important;
        line-height: 1.25;
    }

    .partners-intro {
        font-size: 16px !important;
        line-height: 1.4 !important;
        margin-bottom: 24px !important;
    }

    .partners-intro br {
        display: none;
    }

    .partners-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .partners-text {
        font-size: 15px !important;
    }

    .partners-subtitle {
        font-size: 18px !important;
        margin-bottom: 10px !important;
    }

    .partners-list {
        padding-left: 20px !important;
    }

    .partners-list li {
        font-size: 15px !important;
        line-height: 1.35 !important;
        margin-bottom: 8px !important;
    }

    .partners-foot {
        font-size: 15px !important;
        line-height: 1.4 !important;
        margin-top: 20px !important;
    }

    /* SEKCE: O NÁS */
    .section-about {
        padding: 40px 16px;
    }

    .about-title {
        font-size: 28px !important;
        margin-bottom: 24px !important;
    }

    .about-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .about-text {
        font-size: 15px !important;
        line-height: 1.45 !important;
        margin-left: 0 !important;
    }

    .about-text br {
        display: none;
    }

    .about-logo img {
        width: 100% !important;
        max-width: 180px !important;
        margin: 0 auto !important;
    }

    .about-full {
        font-size: 15px !important;
        line-height: 1.45 !important;
        padding: 0 !important;
        margin-top: 20px !important;
    }

    .about-full br {
        display: none;
    }

    /* SEKCE: FARAONŮV PRŮVODCE */
    .section-photos {
        padding: 20px 16px;
    }

    .photos-inner {
        padding: 24px 16px !important;
    }

    .photos-title {
        font-size: 20px !important;
        white-space: normal !important;
        margin-bottom: 24px !important;
        line-height: 1.35 !important;
    }

    .photos-main {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin-bottom: 20px !important;
    }

    .photos-left img,
    .photos-right img {
        width: 100% !important;
        max-width: 280px !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    .photos-bottom {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin-top: 20px !important;
        margin-left: 0 !important;
        justify-items: center !important;
    }

    .photos-symbol {
        width: 150px !important;
    }

    .photos-cta {
        max-width: 280px !important;
        height: 48px !important;
        font-size: 14px !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        padding: 0 16px;
        box-sizing: border-box;
        border-radius: 12px !important;
    }

    /* SEKCE: KONTAKT A SOCIÁLNÍ SÍTĚ */
    .section-footer-contact {
        padding: 40px 16px;
        margin-top: 0 !important;
    }

    .footer-top {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .footer-title {
        font-size: 24px !important;
        margin-bottom: 12px !important;
    }

    .footer-left {
        margin-left: 0 !important;
        text-align: center !important;
    }

    .footer-phone {
        justify-content: center !important;
    }

    .footer-left .phone-icon {
        font-size: 24px !important;
        margin-left: 0 !important;
    }

    .footer-left .phone-number {
        font-size: 22px !important;
    }

    .footer-channels {
        font-size: 16px !important;
    }

    .footer-right {
        margin-left: 0 !important;
        text-align: center !important;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-right .footer-title-right {
        text-align: center !important;
    }

    .footer-social {
        margin-top: 0 !important;
        margin-left: 0 !important;
        flex-direction: column !important;
        gap: 20px !important;
        align-items: center !important;
    }

    .social-icon {
        width: 80px !important;
        margin-right: 0 !important;
    }

    .footer-faraon {
        flex-direction: column !important;
        align-items: center !important;
        margin-top: 10px;
    }

    .footer-faraon img {
        width: 150px !important;
        margin-left: 0 !important;
    }

    .footer-faraon span {
        font-size: 14px !important;
        margin-left: 0 !important;
        margin-top: 5px !important;
        text-align: center !important;
    }

    .footer-bottom {
        margin-top: 20px !important;
        font-size: 15px !important;
        line-height: 1.35 !important;
    }

    /* OCHRANA OSOBNÍCH ÚDAJŮ */
    .section-privacy {
        padding: 40px 16px !important;
    }

    .privacy-title {
        font-size: 24px !important;
        margin-bottom: 16px !important;
    }

    .privacy-text {
        font-size: 14px !important;
        line-height: 1.45 !important;
    }

    /* PATIČKA WEB-BAR */
    .footer-bar {
        padding: 24px 16px;
    }

    .footer-bar-inner {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        justify-items: center !important;
        padding: 0 !important;
    }

    .footer-brand {
        justify-content: center !important;
        gap: 10px !important;
    }

    .footer-logo-main {
        width: 50px !important;
    }

    .footer-brand-text {
        font-size: 14px !important;
        transform: none !important;
    }

    .footer-phone-link {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 10px 0;
    }

    .footer-phone-number {
        font-size: 16px !important;
        transform: none !important;
    }

    .footer-bar .footer-phone-icon {
        font-size: 18px !important;
        transform: none !important;
    }

    .footer-author {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        text-align: center !important;
    }

    .footer-author-text {
        font-size: 12px !important;
        transform: none !important;
    }

    .footer-logo-shinelink {
        width: 70px !important;
    }
}
/* =========================================================================
   RESPONSIVE IMAGES  (added 2026-07-31 with the image-weight fix)
   =========================================================================
   The two heroes are now wrapped in <picture> so a phone fetches only the
   mobile hero and a desktop only the desktop one. That wrapper changes the
   box tree, so two things have to be restated here:

   1. <picture> defaults to display:inline. Inside .mobile-hero (a column
      flex container) the PICTURE becomes the flex item and stretches, but
      the <img> inside it is no longer a flex item — it would fall back to
      its intrinsic 900px and overflow the phone viewport. Hence the
      explicit width:100% on the image itself.

   2. .hero-photo is position:absolute; inset:0, so it resolves against
      .hero (position:relative) regardless of the wrapper — <picture> does
      not create a containing block. Nothing to restate there; the wrapper
      is display:block only so it never introduces an inline baseline gap.

   3. Every <img> now carries width/height attributes so the browser can
      reserve space and not shift the layout as images arrive. Those
      attributes are PRESENTATIONAL HINTS: they apply as real used values
      whenever CSS does not set that dimension. So an image whose CSS sets
      only ONE dimension (e.g. .logo sets height, never width) would take
      its width straight from the attribute and render stretched.
      `height: auto` below neutralises the hint for the common case; .logo
      needs the mirror-image fix and gets it explicitly.

      ⚠️ Any rule that sets a real size keeps winning on specificity
      (.photos-left img, .btn img, .hero-photo …) — this only fills in
      where CSS was previously silent.

   ⚠️ Deliberately NOT adding a global `img { max-width: 100% }`. It reads
   like a safe guard, but this layout intentionally lets several images
   overflow their grid cell (.photos-right img renders 703px in a 587px
   cell, .photos-symbol 400px in 260px, the social icons 160px in 110px).
   Capping them silently reflows the desktop design. Fixing image weight
   should not redesign the page.
   ========================================================================= */

img {
    height: auto;
}

.logo {
    width: auto;
}

.hero picture,
.mobile-hero picture {
    display: block;
}

.mobile-hero-photo-new {
    width: 100%;
    height: auto;
    display: block;
}

/* =========================================================================
   TABLET / SMALL-LAPTOP BAND  (added 2026-07-31)
   =========================================================================
   The mobile layout stops at 768px, but the desktop layout does not
   actually FIT until ~1231px — so every viewport from 769px to 1230px was
   scrolling sideways, by as much as +421px at 769px. That is the whole
   tablet-landscape and small-laptop range.

   This block closes that gap. It is scoped with a min-width so it can
   never touch the mobile layout, and capped at 1230px so the desktop
   design (verified clean from 1231px up) is untouched.

   Measured offenders, in order of damage:
     .photos-title  white-space:nowrap forced a 1158px line ("HLEDÁTE VÍC
                    INFO O CESTOVÁNÍ PO EGYPTĚ?" at 50px). Biggest single
                    cause of the 1190px plateau. Only the <=768 block ever
                    reset it.
     .photos-right img  703px (height:470 x native aspect) in a ~467px cell
     .photos-symbol     fixed 400px inside a 260px grid column
     .contact-logo      270px + 55px left margin inside a 260px column
     footer + about     fixed margins pushing content past the edge
   ========================================================================= */

@media (min-width: 769px) and (max-width: 1230px) {

    /* Let the headline wrap; scale it down with the viewport. */
    .photos-title {
        white-space: normal;
        font-size: clamp(26px, 3.6vw, 50px);
    }

    /* Photos scale into their grid cell instead of keeping a fixed height.
       object-fit keeps both columns the same height without distorting. */
    .photos-left img,
    .photos-right img {
        width: 100%;
        height: clamp(220px, 30vw, 470px);
        object-fit: cover;
    }

    /* Symbol + CTA row: drop the fixed 260px column and the nudge margin. */
    .photos-bottom {
        grid-template-columns: minmax(120px, 22%) 1fr;
        margin-left: 0;
        gap: 20px;
    }

    .photos-symbol {
        width: 100%;
        max-width: 260px;
    }

    /* Keep the design's 640px cap, but never let it exceed its grid cell
       (plain `max-width:100%` removed the cap and made it 866px at 1200). */
    .photos-cta {
        max-width: min(640px, 100%);
        margin-left: auto;
        margin-right: auto;
    }

    /* Contact + about: the decorative offsets do not fit in this band. */
    .section-contact .contact-logo {
        width: clamp(150px, 20vw, 270px);
        margin-left: 0;
    }

    .about-text {
        margin-left: 0;
    }

    .about-logo img {
        margin-left: 0;
    }

    /* Footer right-hand column: it carries decorative left margins (50px on
       .footer-right, 60px on the title) plus a fixed 250px .footer-faraon.
       In a 1fr 1fr grid that only fits once the viewport is wide enough. */
    .footer-right,
    .footer-title-right,
    .footer-social {
        margin-left: 0;
    }

    .footer-faraon {
        width: auto;
        margin-left: 0;
    }

    .footer-faraon img {
        width: 150px;
    }
}

/* =========================================================================
   MOBILE HORIZONTAL OVERFLOW FIX  (added 2026-07-31)
   =========================================================================
   Below 769px the page was 32px wider than the viewport at every width
   (375 -> 407, 430 -> 462, 768 -> 800). Cause: .section-blue and
   .section-locations are `width: 100%` and the <=768px block gives them
   `padding: … 16px`. There is NO global `box-sizing: border-box` in this
   stylesheet (only 11 scattered per-rule ones), so the default
   content-box adds that 16px+16px OUTSIDE the 100% width.

   Fixed at the two offending rules rather than with a global
   `*{box-sizing:border-box}`: a global switch would silently re-flow every
   element in 2400 lines of hand-tuned CSS that already sets both a width
   and a padding. Same reasoning as the img max-width note above.

   ⚠️ If a new full-width section gets horizontal padding, give it
   border-box here too — or it will reintroduce this exact bug.
   ========================================================================= */

.section-blue,
.section-locations {
    box-sizing: border-box;
}

/* Same bug, same fix: .pill is width:100% (=279px at a 375px viewport) with
   `padding: 0 26px`, so it rendered 331px. Its `max-width: 280px` could not
   help — under content-box that caps the CONTENT box, not the padded width. */
.pill {
    box-sizing: border-box;
}

/* .about-logo img is `width: 100%` PLUS `margin-left: 50px`, so it exceeded
   its grid cell by exactly 50px at every viewport width. That only reached
   past the viewport between 1231-1290px, where the 1200px container is
   maxed out and there is no slack left — which is why it read as a
   "desktop is fine" bug for so long. Capping to the space actually left
   after the margin keeps its left edge (and so its alignment) unchanged. */
.about-logo img {
    max-width: calc(100% - 50px);
}

/* =========================================================================
   "CO DĚLÁME" STRIP OVERFLOWS INTO "KDE POMÁHÁME"  (769-1100px)
   =========================================================================
   .section-blue declares a FIXED `height: 620px` (line 411), not min-height.

   ⚠️ .box (line 450) is `width:360; height:340; padding:32` and is NOT in
   the box-sizing block above, so it is content-box: it renders 424 x 404,
   not 360 x 340. Inner width available is viewport - 44 (.section-inner
   padding 0 22px).

     <=1100px  .boxes gets `flex-wrap: wrap; gap: 30px`. Three boxes need
               3*424 + 2*30 = 1332px, two need 878px, so the row breaks:
               2 rows from ~922px to 1100px, 3 rows below. Content becomes
               1029px (2 rows) or 1463px (3 rows).
     >=1101px  `flex-wrap: nowrap` + default flex-shrink:1 SHRINKS the
               boxes instead (323px @1101 ... 424px @1440), so they never
               wrap and content stays under 620px.

   Because the height is fixed, the 409px / 843px surplus paints OUTSIDE the
   section while .section-locations is laid out from the declared 620px box.
   At 1024px the white .pill row landed on the TRANSFER card — worst
   intersection 80px across 8 element pairs. The translateY(-20px) on
   .locations-title/.locations-pills contributed only 20px of that; removing
   the transforms would NOT have fixed it.

   The <=768px block already solves this with `height: auto !important`;
   this closes the 769-1100px gap the same way.

   ⚠️ The media-query scoping is LOAD-BEARING, not decoration. Dropping it
   makes `padding-bottom` override the `padding: 40px 16px 50px 16px`
   shorthand in the <=768 block (which carries no !important), shifting 156
   elements down 20px on mobile.
   ⚠️ .section-blue is border-box (tail block above), so min-height INCLUDES
   the padding.
   ========================================================================= */

@media (min-width: 769px) and (max-width: 1100px) {
    .section-blue {
        height: auto;
        min-height: 620px;
        padding-bottom: 70px;
    }
}

/* =========================================================================
   TAP TARGETS ON PHONES
   =========================================================================
   Below 769px three interactive elements — all on the emergency contact
   path — rendered under the 44px touch-target guidance:

     .btn.call / .btn.write   top-bar CALL + WhatsApp: 22px tall at <=340px,
                              24px at 341-768px
     .footer-phone-link       footer tel: link — 22px at EVERY width <=768px.
                              Its rule sets display:flex + centring but no
                              height, so the box collapsed onto its line box.

   min-height (not height) on purpose: the existing rules set `height`, and
   min-height clamps the used value regardless of source order, so none of
   the three hand-tuned blocks above has to be touched or reordered.

   The <img>/<span> children inside these anchors are NOT separate targets —
   they only inherit cursor:pointer; the anchor receives the tap. Fixing the
   parent covers them, and leaving their sizes alone keeps the top-bar
   buttons their current width (54.6px of brand-text clearance at 320px).

   KNOWN, DELIBERATELY OUT OF SCOPE — still under 44px at >=769px, where a
   touch tablet does reach them: .btn 208x40, .footer-phone-link 30px,
   .icon-btn.flags 80x34, .icon-btn.check 34x34. Fixing those moves the
   desktop layout, so it is a separate decision.
   ========================================================================= */

@media (max-width: 768px) {

    .btn {
        min-height: 44px;
    }

    .footer-phone-link {
        min-height: 44px;
    }
}

/* =========================================================================
   TEL: LINKS ON DISPLAYED PHONE NUMBERS
   =========================================================================
   Three displayed copies of the number were inert <span>s; only the
   .footer-bar copy was a link. They are now <a href="tel:…"> and must keep
   rendering EXACTLY as before.

   Swapping span -> a with no CSS gains, measured at 1440px:
     .phone                          white        + UNDERLINE
     .section-contact .phone-number  #ce1126      + UNDERLINE
     .footer-left .phone-number      rgb(0,0,238) + UNDERLINE
   There is no global `a {}` reset in this file, so the UA sheet supplies the
   underline everywhere and the blue wherever no author colour is declared.

   The colour fix is SCOPED to .footer-left rather than made global, because
   .phone (white) and .section-contact .phone-number (#ce1126) already
   declare their own colour and must keep winning.

   Same motivation as the .btn rule near the top of this file: the strict CSP
   (style-src 'self') forbids a style attribute, so this must be a class.
   ========================================================================= */

.tel-link {
    text-decoration: none;
}

.footer-left .tel-link {
    color: inherit;
}

/* =========================================================================
   DESKTOP HERO CTA WAS CLIPPED AWAY  (769px and up)  🔴
   =========================================================================
   The hero's own "Zavolat nyní" / "Napsat na WhatsApp" buttons were sliced
   in half and unclickable across almost the entire desktop range. On an
   emergency medical-contact site.

   Mechanism: .hero-inner is `position: absolute; top: 66px` inside .hero,
   which has `overflow: hidden` and `height: clamp(420px, 60vw, 777px)`.
   Absolutely-positioned content does not contribute to its parent's height,
   so the hero never grew to fit — the CTA row simply laid out past the clip
   boundary and was cut off.

   Measured shortfall (CTA bottom relative to hero top, vs the hero height):
     769-1100px  CTA is 320x56 and ends 672px below the hero top   (hero was 461-660)
     1101px+     CTA is 420x60 and ends 808px below the hero top   (hero was 661-777)
   So the hero was 31px too short at 1440px (only 29px of the 60px button
   visible) and 211px too short at 769px. It hit-tested OCCLUDED at 769,
   900, 1024, 1200, 1231, 1440 and 1920 — CLICKABLE only at 1100, by the
   coincidence of 60vw briefly being tall enough.

   ⚠️ `overflow: hidden` is NOT what crops the photo, despite the comment on
   line 186 ("TÍM SE ŘEŽE SPODNÍ ČÁST"). .hero-photo is `position:absolute;
   inset:0; object-fit:cover`, so it is cropped by object-fit and exactly
   fills the box. Removing overflow:hidden would not restore the buttons
   either — it would just paint them over the next section. The hero has to
   be tall enough.

   Two bands because the CTA itself changes size at 1101px. Heights leave
   ~40px of clearance below the buttons.
   ⚠️ If the hero copy, the .info-box or the CTA size ever changes, re-measure
   the needed height — this is a fixed height containing absolute content, so
   it cannot self-adjust. Re-run the check in docs/frontend.md.

   ⚠️ `max-height: none` is REQUIRED in both blocks. The `@media (max-width:
   1200px)` block sets `.hero { height: 60vw; max-height: 777px }` — and
   max-height clamps the USED value, so raising `height` alone silently does
   nothing between 1101 and 1200px. That cost a debug cycle; do not drop it.

   ⚠️ Below 1101px `.hero-cta` is `flex-wrap: wrap` with `min-width: 240px`
   buttons, so the two buttons WRAP onto two rows and the block is taller
   than the one-row desktop case (content ends 746px below the hero top, not
   672px — the 672px figure is the first row only).
   ========================================================================= */

@media (min-width: 769px) and (max-width: 1100px) {
    .hero {
        height: 790px;
        max-height: none;
    }
}

@media (min-width: 1101px) {
    .hero {
        height: clamp(850px, 62vw, 920px);
        max-height: none;
    }
}

/* =========================================================================
   TAP TARGET FOR THE NEW TEL: LINKS  (touch widths only)
   =========================================================================
   Making the three displayed numbers into <a href="tel:"> created three new
   tap targets — but at their natural text height they are only 22-26px,
   under the 44px guidance (and under WCAG 2.2 SC 2.5.8's 24x24 AA floor at
   22px). They were not tappable at all before, so this is not a regression,
   but it is not good enough on the emergency path either.

   Vertical padding grows the hit box; the equal NEGATIVE margin cancels its
   effect on layout, so nothing moves. Verified: hit box 22 -> 44px at 320/
   375/430/768 with document.body.scrollHeight UNCHANGED at every width and
   no horizontal overflow.

   Scoped to touch: <=1024px OR any coarse pointer. The `pointer: coarse`
   arm was added after the iPad sweep — a 12.9" iPad is 1366px wide, well
   past the width cap, but is still a finger-driven device. A mouse does not
   need a 44px target, and the negative margins make the padding box overlap
   11px of surrounding whitespace, which is worth accepting on touch but not
   worth spreading to the desktop layout for no benefit.
   ========================================================================= */

@media (max-width: 1024px), (pointer: coarse) {
    .tel-link {
        display: inline-block;
        padding-top: 11px;
        padding-bottom: 11px;
        margin-top: -11px;
        margin-bottom: -11px;
    }
}

/* =========================================================================
   HERO INFO BOX — bigger flags, bigger panel, readable over the photo
   =========================================================================
   Requested: larger flags, keep the icon/text alignment, and on DESKTOP make
   the panel less transparent and allow it to be bigger.

   COLOUR. The panel was `rgba(17, 69, 126, 0.2)` — 20% of the brand blue, so
   the hero photo (a stethoscope on light paper) showed straight through and
   competed with the near-black text. Simply raising that alpha makes the box
   DARKER, which pushes `#0b0b0b` text toward the background and makes
   readability worse, not better. Instead the panel is now the colour it
   already APPEARS as — rgba(17,69,126,0.2) composited over a light backdrop
   is rgb(207,218,229) — at 0.92 alpha. Same look, photo no longer bleeding
   through, and the text lands at ~13:1 contrast (WCAG AAA).
   ⚠️ If this is ever made a strong blue instead, the text must go white in
   the same change or the box becomes less legible than before.

   SIZE. The old `height: 285px` was FIXED and the content did not fit: the
   last line ("a někdy i o den víc") was clipped by the box edge. Now 345px.
   ⚠️ NOT `height: auto` — `.hero-cta` (the two call buttons) is a child of
   `.info-grid`, so an auto height makes the panel swallow the buttons and
   they then overflow it horizontally. Keep an explicit height.

   ALIGNMENT. `.icon-btn.flags` keeps its 34px height so the icon column's
   row pitch is unchanged and the larger flag images simply overflow it
   symmetrically. The icons deliberately align to the FIRST line of each
   two-line label, which is why rows 3 and 4 read as offset — that is the
   existing convention, preserved. Verified: icon-to-text offsets are
   4 / 2 / 2 / 5 px before AND after, unchanged.
   ========================================================================= */

@media (min-width: 769px) {

    .info-box {
        width: 600px;
        height: 345px;
        background: rgba(207, 219, 232, 0.92);
    }

    .info-grid {
        grid-template-columns: 118px 1fr;
        padding: 34px 34px 30px;
    }

    .icon-btn.flags {
        width: 118px;
        height: 34px;
    }

    .icon-btn.flags img {
        width: 54px;
    }

    .icon-btn.flags img:first-child {
        margin-right: 10px;
    }
}

/* Mobile hero has its own markup (.mobile-info-*) and sits on a white panel,
   so only the flag size changes there — the transparency/size requests were
   desktop-only.
   ⚠️ The icon COLUMN width is deliberately NOT widened. Taking it 64px -> 78px
   re-wraps the first label at 320px (20px -> 38px tall), which shifts every
   row and breaks the alignment. Letting the wider flag block overflow the
   64px column symmetrically instead leaves box height, line heights and all
   four offsets byte-identical at 320/375/430. */

@media (max-width: 768px) {

    .mobile-icon-flags {
        width: auto;
        height: 24px;
        margin: 0 auto;
    }

    .mobile-icon-flags img {
        width: 36px;
    }
}

/* =========================================================================
   FOOTER PHONE LINK — kill the UA underline
   =========================================================================
   `.footer-bar .footer-phone-link` is an <a> that never had an author
   text-decoration, so the UA stylesheet gives it `underline` (and
   `rgb(0,0,238)`, which is masked because its child .footer-phone-number
   sets its own white colour).

   The underline was computed but not PAINTED while the anchor was 22px tall.
   Giving it `min-height: 44px` for the tap-target fix moved the flex
   baseline and made it visible — a regression introduced by that change,
   caught in the mobile review.

   Only the decoration is reset here. Deliberately NOT given the `.tel-link`
   class: that class also sets `color`, which would override the white the
   child supplies and turn the number link-blue.
   ========================================================================= */

.footer-bar .footer-phone-link {
    text-decoration: none;
}

/* =========================================================================
   TOP-BAR BUTTON ICONS ON MOBILE — scale to the 44px button
   =========================================================================
   The 0.6.0 tap-target fix took `.btn` from 24px to `min-height: 44px` but
   left the icon at 16px (14px below 340px) and the label at 10px/9px. The
   button nearly doubled in height while its contents did not, so the icons
   read as too small and the button looks half empty.

   Icon 16 -> 22px and label 10 -> 12px, applied across the whole <=768px
   range (this rule is later in the file than the nested @media (max-width:
   340px) block, so it also supersedes that block's 14px/9px — deliberately,
   since the smallest screens need the LARGER target, not a smaller one).

   ⚠️ Sized against the 320px case, which is the binding constraint: the
   buttons grow 66 -> 84px wide, leaving 19px of clearance to the brand text
   (was 55px). 24px icons would cut that to 8px and 26px to 4px, so 22px is
   the largest size that keeps a comfortable gap. Verified no horizontal
   overflow at 320/360/375/430.
   ========================================================================= */

@media (max-width: 768px) {

    .btn {
        font-size: 12px;
    }

    .btn img {
        width: 22px;
        height: 22px;
    }
}

/* =========================================================================
   PHONE IN LANDSCAPE — compact desktop layout for short, wide screens
   =========================================================================
   A phone held sideways is >=769px wide (iPhone 14 Pro Max landscape is 932),
   so it fell straight into the desktop layout, which is built for a tall
   window. Measured before this block, at 932x430 / 896x414 / 844x390:

     hero        790px tall  =  1.8x - 2.2x the entire screen
     headline    46px
     top bar     92px, with the brand wrapping to THREE lines and the phone
                 number breaking across two

   The emergency path was never actually broken — .top-bar is `position:
   sticky`, so its Zavolat/Napsat buttons stay on screen at any scroll. This
   is a proportion problem, not a reachability one. Everything is scaled so
   the hero occupies about one screen instead of two.

   SCOPE — three conditions, all load-bearing:
     min-width: 769px   below this the mobile layout already applies
     max-width: 1024px  keeps a wide-but-short DESKTOP window on the normal
                        layout; only phone-sized landscape is retargeted
                        (verified: 1024x500 compact, 1025x500 unchanged)
     max-height: 560px  the actual symptom is a short viewport, not a narrow
                        one. A tablet in landscape (iPad 1180x820) is tall
                        enough and is deliberately untouched.

   ⚠️ `.hero-cta` needs `grid-column: 1 / -1`. It is a child of `.info-grid`
   and lands in row 2 of a 2-column grid whose first column is ~76px wide, so
   without the span the two buttons are squeezed into that column: with
   `flex-wrap: wrap` (inherited from the <=1100 block) they stack and overlap
   the info box, and with `nowrap` + `min-width: 0` they collapse on top of
   each other. Both were observed; the span is what fixes it.

   ⚠️ `.info-box` height and `.hero-cta` margin-top are a matched pair. The
   buttons render BELOW the box only because the grid's second row overflows
   the box's explicit height — margin-top must be large enough to clear it.
   At 150px/18px they sit just under the box; shrink the margin and they
   overlap the last info line.
   ========================================================================= */

@media (min-width: 769px) and (max-width: 1024px) and (max-height: 560px) {

    .top-bar { height: 56px; }
    .logo { height: 38px; }
    .brand-line-1,
    .brand-line-2 { font-size: 13px; }
    .phone { font-size: 15px; }
    .phone-emoji { font-size: 15px; }
    .top-bar .btn { height: 36px; min-width: 118px; font-size: 13px; padding: 0 14px; }
    .top-bar .btn img { width: 18px; height: 18px; }

    .hero { height: 470px; max-height: none; }
    .hero-inner { top: 12px; padding: 0 24px; }
    .hero-text { padding-left: 0; }
    .hero-text h1 { font-size: 26px; margin-bottom: 4px; }
    .hero-text p { font-size: 14px; }

    .info-box { width: 400px; height: 150px; margin-top: 10px; }
    .info-grid { grid-template-columns: 76px 1fr; padding: 12px 14px; }
    .info-icons { gap: 5px; margin-left: 8px; }
    .icon-btn { width: 20px; height: 20px; }
    .icon-btn.flags { width: 76px; height: 20px; }
    .icon-btn.flags img { width: 30px; }
    .icon-btn.check { font-size: 11px; }
    .info-icons .icon-btn.check { margin-left: 30px; }
    .info-icons .icon-btn.check:nth-of-type(4) { margin-top: 9px; }
    .info-labels { gap: 5px; padding-left: 10px; }
    .info-line { font-size: 13px; }

    /* ⚠️ 18px here shipped in 0.9.0 and left the buttons overlapping the info
       box by 15px — inside its bottom padding, so it looked fine in a
       screenshot and the CTA-vs-hero check did not catch it. The margin has
       to clear the box, not just stay inside the hero; 56px gives 23px of
       gap, matching the other bands. The hero grew 440 -> 470px to keep the
       taller stack inside it. */
    .hero-cta {
        margin-top: 56px;
        margin-left: 0;
        gap: 12px;
        flex-wrap: nowrap;
        grid-column: 1 / -1;
    }

    .hero-cta .btn {
        height: 40px;
        min-width: 150px;
        font-size: 14px;
        padding: 0 18px;
        white-space: nowrap;
    }
}

/* =========================================================================
   TABLETS (iPad) — 769-1100px wide on a TALL screen
   =========================================================================
   Found by an iPad sweep: 5 of 8 iPad configurations rendered the hero's
   "Zavolat nyní" button ON TOP of the info box, with the two CTAs stacked
   instead of side by side — iPad 9.7" landscape (1024x768), iPad 10.2"
   portrait and landscape (810x1080, 1080x810), iPad Air/Pro 11" portrait
   (820x1180) and iPad Pro 12.9" portrait (1024x1366).

   Same root cause as the landscape-phone block above: `.hero-cta` is a child
   of `.info-grid` and lands in row 2 of a 2-column grid whose first column is
   ~76px, and the <=1100px block gives it `flex-wrap: wrap`. So the buttons
   wrap inside that narrow column and ride up over the box. `grid-column:
   1 / -1` gives the row the full grid width; `margin-top` then has to clear
   the box's explicit height (measured: 40/60/76px all still overlap, 90px
   clears by 3px, 100px gives a comfortable 13px).

   ⚠️ `min-height: 561px` keeps this MUTUALLY EXCLUSIVE with the
   landscape-phone block (which is `max-height: 560px`). Both target
   769-1024px wide; without the height split, whichever came last in the file
   would silently win for phones in landscape.

   ⚠️ The 44px tap targets are NOT redundant with the `<=768px` block above.
   An iPad is a touch device on the desktop side of the breakpoint, so it was
   getting 40px buttons. Same emergency-contact argument as on phones.
   ========================================================================= */

@media (min-width: 769px) and (max-width: 1100px) and (min-height: 561px) {

    .hero-cta {
        grid-column: 1 / -1;
        flex-wrap: nowrap;
        margin-left: 0;
        margin-top: 100px;
    }

    .hero-cta .btn {
        white-space: nowrap;
    }
}

/* The displayed phone number does not fit beside the brand and both buttons
   below ~936px: the brand wraps to THREE lines and the number breaks across
   two (measured 769-935px; clean from 939px). Hiding the static number is
   what the mobile layout already does — the Zavolat button beside it carries
   the action, so nothing is lost.
   ⚠️ `min-height: 561px` again: a phone in LANDSCAPE is 769-940px wide too,
   and there the landscape block shrinks the type so the number fits on one
   line. It should stay visible there. */

@media (min-width: 769px) and (max-width: 940px) and (min-height: 561px) {

    .phone-wrap {
        display: none;
    }
}

/* Touch targets on tablets — see the note above. */

@media (min-width: 769px) and (max-width: 1366px) and (pointer: coarse) {

    .top-bar .btn {
        min-height: 44px;
    }
}

/* =========================================================================
   SHORT VIEWPORTS — laptops and tablets under ~900px tall
   =========================================================================
   The hero is a FIXED height (850-920px), so on a short screen it ran past
   the fold and took its call buttons with it. Measured before this block:

     1280x720   hero 850  CTA 180px below the fold, info box cut
     1366x768   hero 850  CTA 132px below
     1133x744   hero 850  CTA 156px below   (iPad mini landscape)
     1180x820   hero 850  CTA  80px below   (iPad Air landscape)
     1024x768   hero 790  CTA  37px below   (iPad 9.7 landscape)
     1440x900 / 1600x900  CTA sitting exactly ON the fold line

   1366x768 is one of the most common laptop resolutions, so this was not an
   exotic case. The emergency action was never lost — `.top-bar` is sticky —
   but the hero's own CTAs required a scroll.

   The hero now takes the viewport height, and the type/box/buttons scale
   with `vh` so the whole block still fits inside it. Everything ≥901px tall
   (MacBook Pro 982/1117, 1080p, QHD, 4K) is untouched — verified 0 elements
   moved at 1512/1920/2560.

   ⚠️ `.hero-cta`'s margin-top must CLEAR the info box, not merely stay inside
   the hero. The box has an explicit height and the CTA is row 2 of the grid
   inside it, so too small a margin puts the buttons on top of the panel:
   measured 4vh = -20px (overlapping), 6vh = -22px, 9vh = +1px, 12vh = +23px.
   That is the same trap that shipped a 15px overlap in the landscape block.

   ⚠️ `min-height: 561px` keeps this clear of the landscape-phone block
   (`max-height: 560px`), which has its own, tighter treatment.
   ========================================================================= */

@media (min-width: 769px) and (min-height: 561px) and (max-height: 900px) {

    .hero {
        height: calc(100vh - 92px);
        min-height: 460px;
        max-height: none;
    }

    .hero-inner { top: 2vh; }
    .hero-text h1 { font-size: clamp(30px, 6vh, 56px); margin-bottom: 0.6vh; }
    .hero-text p { font-size: clamp(15px, 2.7vh, 26px); }

    .info-box {
        width: 520px;
        height: clamp(180px, 30vh, 300px);
        margin-top: 2vh;
    }

    .info-grid { grid-template-columns: 100px 1fr; padding: 2vh 20px; }
    .info-icons { gap: 1.1vh; margin-left: 10px; }
    .icon-btn { width: 26px; height: 26px; }
    .icon-btn.flags { width: 100px; height: 26px; }
    .icon-btn.flags img { width: 40px; }
    .icon-btn.check { font-size: 14px; }
    .info-icons .icon-btn.check { margin-left: 40px; }
    .info-icons .icon-btn.check:nth-of-type(4) { margin-top: 1.4vh; }
    .info-labels { gap: 1.1vh; padding-left: 14px; }
    .info-line { font-size: clamp(13px, 2.3vh, 22px); }

    .hero-cta {
        grid-column: 1 / -1;
        flex-wrap: nowrap;
        margin-left: 0;
        margin-top: 12vh;
        gap: 16px;
    }

    .hero-cta .btn {
        height: clamp(40px, 6vh, 56px);
        min-width: 190px;
        font-size: clamp(14px, 2.3vh, 20px);
        white-space: nowrap;
    }
}

/* =========================================================================
   VERY SHORT LANDSCAPE (<=400px tall) — two-column hero
   =========================================================================
   800x360 is a common Android in landscape (a 360px-wide phone turned
   sideways), and there the stacked landscape hero still put the call buttons
   30px BELOW the fold. 844x390 sat exactly on the fold line.

   Cramming the stacked layout into 304px of content area would have needed
   ~10px body text — trading legibility for fold-fitting, which is the wrong
   trade on a page someone reads in an emergency. Landscape has width to
   spare, so the hero uses it: headline and subline on the LEFT, the info box
   (with the CTAs under it) on the RIGHT, side by side instead of stacked.
   That roughly halves the vertical requirement and keeps the type readable
   (25px headline, 12px bullets rather than ~10px).

     800x360   CTA 30px BELOW fold  ->  103px clear
     844x390   CTA on the fold line ->  133px clear

   `.hero-text` becomes a 2-column grid with EXPLICIT placement, because its
   three children (h1, p, .info-box) would otherwise auto-flow into the wrong
   cells — h1 and p must stack in column 1 while .info-box spans both rows in
   column 2.

   ⚠️ Capped at `max-height: 400px` ON PURPOSE. 896x414 and 932x430 (iPhone
   14 Pro Max landscape) already clear the fold by 24 and 40px with the
   stacked layout that was reviewed and signed off, so they keep it. Widening
   this block would silently restyle an approved design.
   ========================================================================= */

@media (min-width: 769px) and (max-width: 1024px) and (max-height: 400px) {

    .top-bar { height: 50px; }

    .hero {
        height: calc(100vh - 50px);
        max-height: none;
        min-height: 0;
    }

    .hero-inner { top: 10px; }

    .hero-text {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 26px;
        align-items: start;
    }

    .hero-text h1 { grid-column: 1; grid-row: 1; font-size: 25px; margin-bottom: 6px; }
    .hero-text p { grid-column: 1; grid-row: 2; font-size: 14px; }
    .hero-text .info-box { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; width: 372px; height: 136px; }

    .info-grid { grid-template-columns: 70px 1fr; padding: 10px 12px; }
    .info-icons { gap: 4px; margin-left: 6px; }
    .icon-btn { width: 18px; height: 18px; }
    .icon-btn.flags { width: 70px; height: 18px; }
    .icon-btn.flags img { width: 27px; }
    .icon-btn.check { font-size: 10px; }
    .info-icons .icon-btn.check { margin-left: 26px; }
    .info-icons .icon-btn.check:nth-of-type(4) { margin-top: 8px; }
    .info-labels { gap: 4px; padding-left: 8px; }
    .info-line { font-size: 12px; }

    .hero-cta { margin-top: 54px; gap: 10px; }
    .hero-cta .btn { height: 38px; min-width: 140px; font-size: 13px; }
}