/* ========================================
   PÁS VŠECH ZEMÍ (homepage) - mezi panelem
   vyhledávání a "Cesty, které si zamilujete"
======================================== */

.home-countries-strip {
    /*
     * Výška sekce je teď VŽDY konstantní - karta zájezdů (position:
     * absolute, viz .home-countries-strip-gap) nikdy neovlivňuje výšku
     * rodičů ani pozici obsahu pod touto sekcí, ať je otevřená, nebo
     * ne - a díky "overflow: clip" na .home-countries-strip-viewport
     * (šesté kolo) se navíc ani nešíří dál jako "scrollable overflow"
     * dokumentu (viz komentář tam - dřív se to dělo přes clip-path,
     * který sice pás vizuálně ořízl, ale scrollable overflow nezastavil).
     */
    padding: 24px 0;

    /*
     * Stejná světlá "paper-2" barva, jakou má web zavedenou jinde
     * (--msn-paper-2/--home-paper-2/--cesty-paper-2 vždy #ebe7df) -
     * tmavý text #141414 na ní dává kontrastní poměr ~15:1 (WCAG AAA),
     * takže zůstává beze změny.
     */
    background: #ebe7df;
    color: #141414;

    /* Stejná linka jako mezi hero bannerem a zbytkem světlé homepage
       (viz "body.home .hero" ve style.css) - jen zrcadlově dole. */
    border-bottom: 1px solid rgba(88, 77, 64, .18);
}

.home-countries-strip-inset {
    /* Stejný 5vw okraj jako .section-heading/.travel-row/.home-country-row
       a panel vyhledávání - viz style.css. Na rozdíl od dřívější verze je
       tohle SAMOSTATNÝ element bez overflow:hidden, takže ořezová hranice
       níže (.home-countries-strip-viewport) skutečně kopíruje tenhle
       odsazený box, ne celou šířku obrazovky. */
    padding: 0 5vw;
}

.home-countries-strip-viewport {
    /*
     * OPRAVA (šesté kolo): dřív clip-path misto overflow (viz historie
     * commitů), protože clip-path ořízne VIZUÁLNĚ, ale beze změny
     * overflow vlastnosti - žádný scroll kontejner, žádný posuvník.
     * Jenže clip-path je JEN vykreslovací efekt - vůbec nezastaví
     * "scrollable overflow" (kolik místa element se svými potomky
     * geometricky zabírá) v šíření vzhůru řetězcem předků s
     * overflow:visible (inset -> strip -> body -> html). Panel se
     * zájezdy (position:absolute, přesahuje nad/pod řádek) tak i přes
     * clip-path mohl zvětšit document.documentElement.scrollHeight -
     * to je pravý zdroj posuvníku a "poskakování" karet při otevření.
     *
     * "overflow: clip" tenhle problém řeší napřímo - na rozdíl od
     * clip-path totiž PATŘÍ mezi "overflow" hodnoty (spolu s hidden/
     * auto/scroll), takže podle CSS specu zastavuje šíření scrollable
     * overflow do předků přesně tady, na týhle úrovni - žádný předek
     * výš (.home-countries-strip-inset, .home-countries-strip, body,
     * html) se o přesahující panel vůbec nedozví.
     *
     * Rozdíl proti obyčejnému "overflow: hidden": vlastní box
     * .home-countries-strip-viewport by se tím OŘÍZL přesně na svojí
     * výšku (~111px, výška řádku fotek) - panel by se svisle useknul,
     * přesně to, co NECHCEME (má symetricky přesahovat nahoru/dolů).
     * "padding: 200px 0" dává boxu mnohem větší "plátno" na výšku, než
     * kdy panel skutečně potřebuje (nejvyšší reálný panel ~154px,
     * přesah ~22px na stranu - 200px je bohatá rezerva i pro budoucí
     * větší karty), a "margin: -200px 0" ten samý prostor navenek zase
     * vizuálně zruší, takže se nezvětší skutečná výška řádku/sekce ani
     * pozice obsahu pod ní (přesně stejný účel, jaký dřív měl trik
     * "height:0 + overflow:visible" na .home-countries-strip-gap -
     * jen aplikovaný o úroveň výš, tam, kde se dá zastavit šíření
     * overflow, ne jen jeho vliv na výšku VLASTNÍHO řádku).
     *
     * Vodorovně (šířka boxu = přesně padding rodiče .home-countries-
     * strip-inset) se chování nemění - "overflow: clip" ořízne pás na
     * stejnou hranici, jakou dřív dával clip-path.
     */
    overflow: clip;
    padding: 200px 0;
    margin: -200px 0;
}

.home-countries-strip-track {
    display: flex;
    /* Střed, ne nahoru - panel se zájezdy (position:absolute, viz
       .home-countries-strip-gap) se zarovnává vůči středu vlastního
       .home-countries-strip-slot, takže tohle tady řeší jen vzájemné
       zarovnání fotek samotných (všechny stejně vysoké, prakticky
       no-op, ale bezpečné držet konzistentní se zbytkem řádku). */
    align-items: center;

    width: max-content;
    gap: 20px;

    /* will-change: prohlížeč drží track na vlastní kompozitní vrstvě
       (GPU), aby transform animace zůstala plynulá i s větším počtem
       potomků v DOM (skryté panely zájezdů). */
    will-change: transform;

    /* Rychlost drží konstantní tempo na položku bez ohledu na to, kolik
       zemí taxonomie zrovna má - víc zemí = delší smyčka, ne rychlejší. */
    animation: home-countries-strip-scroll calc(var(--msn-strip-count, 20) * 3.4s) linear infinite;
}

/*
 * OPRAVA (desáté kolo): ":hover" úplně odstraněno - i s ".is-hovered"
 * navěšenou přes mouseenter/mouseleave (osmé kolo) se podle rozboru
 * videa snímek po snímku animace uprostřed souvislého hoveru sama na
 * okamžik rozjela. Příčina: mouseenter/mouseleave (stejně jako
 * ":hover") závisí na tom, KTERÝ element prohlížeč vyhodnotí jako "pod
 * kurzorem" - a to se u fotek zvětšovaných/zmenšovaných přes dock
 * magnifikaci (transform:scale + měnící se z-index na každý mousemove)
 * neustále mění. ".is-hovered" teď (desáté kolo, viz
 * home-countries-strip.js) nastavuje jediný window-level mousemove
 * listener, který porovnává holé souřadnice kurzoru proti jednou
 * přečtené geometrii sekce - vůbec se neptá, "jaký element je pod
 * kurzorem", takže je na hit-test nezávislý úplně, ne jen z části.
 * ":focus-within" zůstává (klávesová navigace nemá mousemove).
 */
.home-countries-strip.is-hovered .home-countries-strip-track,
.home-countries-strip:focus-within .home-countries-strip-track {
    animation-play-state: paused;
}

@keyframes home-countries-strip-scroll {
    from {
        transform: translateX(0);
    }
    to {
        /* Track obsahuje dvě STEJNĚ ŠIROKÉ kopie celého seznamu zemí
           (.home-countries-strip-copy x2), takže -50% jeho vlastní
           (vyrenderované) šířky = přesně šířka jedné kopie - druhá kopie
           pak plynule zaujme místo první beze skoku/mezery.

           OPRAVA (dvanácté kolo): -50% se počítá z AKTUÁLNÍ šířky tracku -
           otevřený panel zájezdů track rozšíří, takže se i POZASTAVENÁ
           animace posunula doleva o (průběh × polovina šířky panelu) a
           fotka pod kurzorem "ujela" (čím déle stránka běží, tím víc).
           JS proto nastavuje pevnou vzdálenost v px (šířka zdvojené
           kopie + mezera, ta panely nemá) - -50% zůstává jen jako
           záloha, než JS doběhne. */
        transform: translateX(var(--msn-strip-loop, -50%));
    }
}

.home-countries-strip-copy {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 20px;
}

.home-countries-strip-slot {
    display: flex;
    align-items: center;
    flex: 0 0 auto;

    /*
     * "position: relative" tu zůstává jako kotva pro starší kód, ale
     * VÝŠKU řádku už hlídá jen .home-countries-strip-gap sám (viz
     * jeho "height: 0" níže) - slot proto nepotřebuje vlastní pevnou
     * výšku ani overflow. "overflow: visible" je tu explicitně (i
     * když je to výchozí hodnota) jen jako dokumentace záměru - karta
     * zájezdů smí přesahovat nahoru/dolů mimo výšku řádku.
     */
    position: relative;
    overflow: visible;
}

.home-countries-strip-item {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    width: 71px;

    color: #141414;
    text-decoration: none;
}

.home-countries-strip-photo {
    display: block;
    overflow: hidden;

    width: 71px;
    aspect-ratio: 4 / 5;

    border-radius: 0;

    background: rgba(20, 20, 20, .08);
}

.home-countries-strip-photo img {
    display: block;

    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: transform .35s ease;
}

/*
 * Jen :focus-visible (klávesová navigace) - dřív tu byl i :hover, ale
 * ten teď nahrazuje bohatší "dock" magnifikace celé fotky (viz
 * .home-countries-strip-photo v @media (hover:hover) níže,
 * home-countries-strip.js) - ponechání obojího by se u fotky přímo
 * pod kurzorem sčítalo (1.45 × 1.08) a působilo to nekonzistentně
 * proti sousedním fotkám, které tenhle druhý efekt nemají.
 */
.home-countries-strip-item:focus-visible .home-countries-strip-photo img {
    transform: scale(1.08);
}

.home-countries-strip-name {
    overflow: hidden;

    max-width: 98px;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .01em;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========================================
   ROZBALOVACÍ KARTA ZÁJEZDŮ (jen desktop/hover - viz
   home-countries-strip.js a @media (hover:hover) níže)
======================================== */

@media (hover: hover) and (pointer: fine) {
    .home-countries-strip-item {
        cursor: pointer;
    }

    /*
     * "Dock" magnifikace (home-countries-strip.js) - JEN transform:
     * scale(), NIKDY width/height/font-size. transform je čistě
     * vykreslovací (nemění layout box, nezpůsobuje reflow), takže
     * nemůže znovu otevřít dřívější bugy se scrollbarem/poskakováním
     * pásu (viz historie komentářů výš - to všechno se týkalo LAYOUT
     * rozměrů, ne transformu). "position:relative" je tu jen proto,
     * aby JS mohl přes z-index dostat právě zvětšenou fotku nad
     * sousedy (jinak by ji při překryvu mohla zakrýt fotka s vyšším
     * pořadím v DOM). "transform-origin: 50% 100%" (střed dole) -
     * fotka roste nahoru ze své spodní hrany, stejně jako ikony v
     * macOS Docku rostou od linie doku, ne od svého středu.
     * "transition" jen na transform - JS nastavuje cílovou hodnotu při
     * každém mousemove (ne každý animační snímek), přechod mezi
     * jednotlivými hodnotami dohladí prohlížeč sám.
     */
    .home-countries-strip-photo {
        position: relative;

        transform-origin: 50% 100%;
        transition: transform .12s ease-out;

        /*
         * PREVENTIVNÍ OPATŘENÍ (desáté kolo, testováno v headless
         * prohlížeči): "pointer-events: none" - zvětšená fotka (až 1.45×,
         * transform-origin 50% 100%) roste i do stran a teoreticky může
         * fyzicky přesáhnout do prostoru sousední položky (71px fotka +
         * 20px mezera, ale zvětšení nejbližšího souseda dle Gaussova
         * útlumu už samo o sobě dá přes 35 %). V testech se mi chybné
         * kliknutí na souseda kvůli tomuto přesahu NAKONEC reprodukovat
         * nepodařilo (viz commit message - to, co zprvu vypadalo jako
         * tenhle bug, byl ve skutečnosti artefakt testovacího skriptu),
         * ale mechanismus je reálný a riziko nulové - .home-countries-
         * strip-item (odkaz, rodič fotky) sám nikdy neškáluje, takže s
         * pointer-events:none na fotce klik spolehlivě "prohlédne" skrz
         * vizuální přesah na skutečný, nikdy neroztažený hit-box správné
         * položky pod ním. Magnifikace zůstává čistě vizuální.
         */
        pointer-events: none;
    }
}

.home-countries-strip-gap {
    /*
     * OPRAVA (páté kolo): dřív position:absolute - panel tak
     * neovlivňoval výšku řádku, ale zároveň NEZABÍRAL žádnou šířku ve
     * flex toku .home-countries-strip-track, takže sousední fotky
     * neodsouval, jen je vizuálně překryl. Potřebujeme OBOJÍ zároveň:
     * odsunutí sousedů (reálná šířka ve flexu) I nulový vliv na výšku
     * řádku (karta zájezdů bývá vyšší než samotná fotka).
     *
     * Řešení: .home-countries-strip-gap zůstává NORMÁLNÍ flex položka
     * (žádné position:absolute) - jeho "width" (0 → var(--msn-gap-
     * open-width)) se tak PROJEVÍ v šířce .home-countries-strip-slotu
     * a odsune všechny další sloty (fotky) v řádku doprava. Zároveň má
     * ale "height: 0" (NE auto) - takže bez ohledu na to, jak vysoký
     * je jeho OBSAH (karty zájezdů), sám box do výšky řádku (align-
     * items:center na .home-countries-strip-track) nijak nepočítá.
     * "overflow: visible" (obě osy stejně - žádná kombinace hidden/
     * visible, viz oprava scrollbaru níže) dovoluje obsahu i přes
     * nulovou výšku boxu být VIDĚT - viz position:absolute na
     * .home-countries-strip-gap-scroll, které se vycentruje vůči
     * TÉTO (position:relative) 0px vysoké čáře, ne vůči celému slotu.
     *
     * "margin-left" animovaný spolu se šířkou (0 → 12px) nahrazuje
     * dřívější "left: calc(100% + 12px)" - mezera mezi fotkou a
     * panelem se tak taky počítá do reálně odsouvané šířky, ne jen do
     * pozice absolutního prvku.
     */
    position: relative;
    z-index: 5;

    overflow: visible;

    width: 0;
    height: 0;
    margin-left: 0;

    transition: width .35s ease, margin-left .35s ease;
}

/*
 * Přesná šířka na míru počtu vložených malých karet (viz
 * --msn-gap-open-width, spočítané v PHP z počtu karet × jejich šířky +
 * mezer - front-page.php) - NE fixní vw/clamp hodnota. Panel tak roste
 * přirozeně podle obsahu, nikdy není větší, než kolik karet skutečně
 * obsahuje.
 */
.home-countries-strip-gap.is-open {
    width: var(--msn-gap-open-width, 210px);
    margin-left: 12px;
}

.home-countries-strip-gap-scroll {
    display: none;

    /*
     * Vycentrováno vůči rodiči (.home-countries-strip-gap), jehož
     * vlastní výška je záměrně 0 (viz výš) - "top: 50%" tak dopadne
     * přesně na osu řádku fotek a translateY(-50%) posune OBSAH
     * (podle jeho VLASTNÍ výšky, ne rodičovy) tak, aby vyšší karta
     * zájezdů přesahovala symetricky nahoru i dolů, stejně jako dřív
     * u position:absolute řešení. "height: max-content" (NE 100%,
     * které by se z nulové výšky rodiče spočítalo jako 0) nechává
     * obsah, ať si vezme přesně tolik místa, kolik potřebuje.
     */
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);

    width: 100%;
    height: max-content;

    /*
     * OPRAVA (sedmé kolo - potvrzeno snímek po snímku, ne jen teorií):
     * "width: 100%" tady sleduje AKTUÁLNÍ (animovanou) šířku rodiče
     * (.home-countries-strip-gap, width 0 -> var(--msn-gap-open-width)
     * za .35s) - ale karty uvnitř (.home-countries-strip-gap-inner)
     * mají PEVNOU šířku, která se s tranzicí nezmenšuje. Po CELOU
     * dobu přechodu je tak vnitřní obsah širší, než kolik má tenhle
     * box aktuálně místa - dřív nastavené "overflow-x: auto" v tu
     * chvíli spolehlivě ukázalo vodorovný posuvník (potvrzeno: 18 z 35
     * snímků během otevření mělo scrollWidth > clientWidth), který po
     * doběhnutí tranzice zase zmizel - přesně to "poskočení", co bylo
     * vidět na videu. V USTÁLENÉM stavu (tranzice dokončená) content
     * šířku přesně odpovídá, takže "auto" scrollbar tam nikdy skutečně
     * nebyl potřeba jako fungující bezpečnostní síť - jen jako vedlejší
     * efekt způsoboval posuvník během KAŽDÉHO otevření/zavření.
     * "clip" (ne "hidden") - přebytek se má za tranzice tiše OŘÍZNOUT,
     * nikdy nezobrazit posuvník, at uz na X nebo Y ose.
     */
    overflow: clip;
}

.home-countries-strip-gap.is-open .home-countries-strip-gap-scroll {
    display: block;
}

.home-countries-strip-gap-inner {
    display: flex;
    align-items: center;

    height: max-content;
    gap: 12px;

    padding: 6px;
}

/*
 * OPRAVA: "overflow-x: auto" samo o sobě při OTEVÍRACÍ animaci (šířka
 * panelu roste z 0) na zlomek vteřiny ukázalo posuvník, protože obsah
 * je po tu dobu širší než aktuální (ještě rostoucí) šířka boxu -
 * posuvník se tu ale NESMÍ objevit nikdy, ani na okamžik. Posouvání
 * (kolečko/trackpad/tažení/klávesnice) zůstává plně funkční, jen
 * samotný vizuální posuvník je trvale schovaný (scrollbar-width/
 * -ms-overflow-style pro Firefox a starý Edge, ::-webkit-scrollbar pro
 * Chrome/Safari/nový Edge).
 *
 * "--wide" (nad 4 karty, viz front-page.php $strip_gap_is_wide) -
 * bezpečný strop šířky vůči viewportu + vlastní vodorovné posouvání
 * uvnitř, ať panel u zemí s hodně cestami nepřeteče mimo viditelnou
 * část stránky. Při běžné šířce okna se stejně nic posouvat nemusí
 * (celá šířka panelu se vejde) - posouvání je tu jen jako záchrana na
 * úzkém okně. U 4 a méně karet (původní, dávno prověřený rozsah) se
 * tahle pravidla vůbec neuplatní - "overflow: clip" výš zůstává jejich
 * jediné chování.
 */
.home-countries-strip-gap--wide .home-countries-strip-gap-scroll {
    max-width: calc(100vw - 48px);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* starý Edge */
}

.home-countries-strip-gap--wide .home-countries-strip-gap-scroll::-webkit-scrollbar {
    display: none;                  /* Chrome, Safari, nový Edge */
    width: 0;
    height: 0;
}

/*
 * Kompaktní karta zájezdu v panelu - o 25 % větší než malá fotka země
 * (71px -> 89px, viz $home_countries_strip_mini_width ve front-page.php),
 * NE zmenšená/zvětšená verze velké karty z "Cesty, které si
 * zamilujete" (viz template-parts/trip-mini-card.php).
 */
.home-countries-strip-trip-mini {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 6px;

    width: 89px;

    color: #141414;
    text-decoration: none;
}

.home-countries-strip-trip-mini-photo {
    display: block;
    overflow: hidden;

    width: 89px;
    aspect-ratio: 4 / 5;

    background: rgba(20, 20, 20, .08);
}

.home-countries-strip-trip-mini-photo img {
    display: block;

    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: transform .3s ease;
}

.home-countries-strip-trip-mini:hover .home-countries-strip-trip-mini-photo img,
.home-countries-strip-trip-mini:focus-visible .home-countries-strip-trip-mini-photo img {
    transform: scale(1.06);
}

.home-countries-strip-trip-mini-name {
    display: -webkit-box;
    overflow: hidden;
    flex: 0 0 auto;

    /*
     * Pevná výška na přesně 2 řádky (10.5px × 1.2 řádkování × 2) bez
     * ohledu na skutečnou délku názvu - jinak měl jednořádkový název
     * (Peru) nižší kartu než dvouřádkový a karty v panelu vypadaly
     * různě velké, i když fotka měla stejný poměr stran.
     */
    height: 25px;
    max-width: 89px;

    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.home-countries-strip-empty {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;

    width: 100%;
    padding: 8px 6px;
}

.home-countries-strip-empty p {
    margin: 0;

    font-size: 11px;
    line-height: 1.3;
}

.home-countries-strip-empty a {
    display: inline-block;

    padding: 7px 10px;

    border: 1px solid #141414;

    color: #141414;
    font-size: 10.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.home-countries-strip-empty a:hover,
.home-countries-strip-empty a:focus-visible {
    background: #141414;
    color: #fff;
}

@media (max-width: 760px) {
    /*
     * Tenhle blok řeší jen VIZUÁLNÍ velikost na úzkém viewportu (menší
     * fotky/mezery) - nezávisle na tom, jestli jde o dotyk, nebo jen
     * úzké okno myší/touchpadem. Chování INTERAKCE (swipe vs.
     * auto-scroll smyčka, tap vs. panel se zájezdy) řeší samostatně
     * @media (hover: none), (pointer: coarse) níže - stejné rozlišení
     * jako zbytek webu u ostatních tažitelných řádků ([data-slider-row]
     * ve style.css) a jako home-countries-strip.js. "animation-duration"
     * tady zůstává i pro úzké OKNO myší (má rychlejší smyčku), i když
     * na dotyku se animace stejně úplně vypne (viz níže).
     */
    .home-countries-strip-gap {
        display: none !important;
    }

    .home-countries-strip {
        padding: 18px 0;
    }

    .home-countries-strip-track {
        gap: 14px;
        animation-duration: calc(var(--msn-strip-count, 20) * 4.2s);
    }

    .home-countries-strip-copy {
        gap: 14px;
    }

    .home-countries-strip-item {
        width: 55px;
    }

    .home-countries-strip-photo {
        width: 55px;
        border-radius: 0;
    }

    .home-countries-strip-name {
        max-width: 78px;
        font-size: 10.5px;
    }
}

@media (hover: none), (pointer: coarse) {
    /*
     * OPRAVA (sedmé kolo, bod 1): na dotyku/bez hover myši (stejná
     * podmínka jako home-countries-strip.js a jako [data-slider-row]
     * ve style.css) se ruší auto-scroll nekonečná smyčka i rozbalovací
     * panel se zájezdy (ten zůstává JEN pro desktop) - místo toho
     * konečný seznam zemí (BEZ zdvojené kopie) s obyčejným swipe/
     * momentum tažením přes sdílený engine assets/js/momentum-drag.js,
     * stejně jako ostatní vodorovné řádky na webu. Desktop (hover:hover
     * + pointer:fine) zůstává úplně beze změny.
     */
    .home-countries-strip-track {
        animation: none;
    }

    .home-countries-strip-copy[aria-hidden="true"] {
        display: none;
    }

    .home-countries-strip-gap {
        display: none !important;
    }

    .home-countries-strip-viewport {
        /*
         * "overflow: clip" (základní pravidlo) tu ustupuje skutečnému
         * scroll kontejneru - žádný panel se zájezdy tu není (viz výš),
         * takže ani není potřeba svislá rezerva (padding/margin trik) -
         * ta se proto na dotyku vrací zpátky na 0.
         */
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0;
        margin: 0;

        /* Stejná sada vlastností jako [data-slider-row] ve style.css
           (na dotyku), aby se tenhle řádek táhl úplně stejně jako
           zbytek webu - nativní touch scroll se setrvačností, JS
           momentum-drag engine jen doplňuje tažení myší/perem. */
        cursor: grab;
        user-select: none;
        -webkit-user-select: none;
        touch-action: auto;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;

        /*
         * OPRAVA (osmé kolo, bod 2): nativní posuvník skutečného scroll
         * kontejneru (overflow-x:auto výš) překrýval název země pod
         * fotkou. Stejná dvojice pravidel jako u VŠECH ostatních
         * tažitelných řádků na webu se stejným momentum-drag enginem
         * (.travel-row, .continent-row, .home-country-row, ... viz
         * style.css) - schová jen VZHLED posuvníku, scrollování zůstává
         * plně funkční (scrollbar-width:none samo o sobě netýká
         * funkčnosti, jen renderování).
         */
        scrollbar-width: none;
    }

    .home-countries-strip-viewport::-webkit-scrollbar {
        display: none;
    }

    .home-countries-strip-viewport.is-dragging {
        cursor: grabbing;
        scroll-behavior: auto !important;
    }

    .home-countries-strip-viewport img,
    .home-countries-strip-viewport a {
        -webkit-user-drag: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-countries-strip-track {
        animation: none;
    }

    .home-countries-strip-viewport {
        /*
         * Bez animace se pás nemusí ořezávat přes overflow:clip -
         * místo toho normální ruční horizontální scroll ("overflow-x:
         * auto"). "overflow-y" NEPŘEPISUJEME - zůstává "clip" ze
         * základního pravidla výš (spolu s padding/margin trikem,
         * který dovoluje panelu zájezdů přesahovat nahoru/dolů beze
         * změny výšky řádku/dokumentu) - jen na ose X se scroll chová
         * jinak. "auto" + "clip" je platná kombinace bez pasti "visible
         * -> auto" (ta hrozí jen když je JEDNA osa doslova "visible" -
         * tady žádná není).
         */
        overflow-x: auto;
    }

    .home-countries-strip-copy[aria-hidden="true"] {
        display: none;
    }
}