/* ============================================================================
   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);
}