/* ========================================
   STRÁNKA HOTELU (single-hotel.php) - PRVNÍ FUNKČNÍ VERZE

   Vlastní jmenný prostor (.hotel-*), NEsdílí .cesta-* třídy (ty jsou
   svázané s JS karuselem cesty) - ale POUŽÍVÁ STEJNÉ barvy/písmo jako
   zbytek webu (viz --msn-* proměnné, shodné hodnoty jako v style.css)
   a stejný obecný vzorec (kicker popisek, "-inner" wrapper, serif
   nadpisy), ať stránka vypadá jako přirozená součást webu.

   ROZSAH TÉHLE ETAPY: má FUNGOVAT na Brenta Dolomites, ne být hotová
   pro produkci - žádné jemné responzivní doladění, žádná optimalizace
   obrázků.
======================================== */

.single-hotel {
    --msn-paper: #f5f3ee;
    --msn-paper-2: #ebe7df;
    --msn-ink: #141414;
    --msn-muted: #6d6962;
    --msn-line: #d9d4ca;
    --msn-accent: #c9a86a;
    --msn-display-serif: 'Fraunces', Georgia, "Times New Roman", Times, serif;
    /* Stejná modrá jako check-in/check-out zvýraznění v kalendáři (viz assets/css/hotel-date-range-calendar.css) - BOD 5 (zadání, další kolo). */
    --msn-daterange-selected: #1d5fae;
    /*
     * BARVA VYPLNĚNÉ 3. SEKCE PILULKY / akčních tlačítek "Hledat" a
     * "Rezervovat" (zadání) - Martinem zvolená #feda32. ÚMYSLNĚ
     * SAMOSTATNÁ proměnná, ne alias na --msn-accent (#c9a86a) - ten se
     * na týhle stránce používá ještě jinde (.hotel-stars, hodnocení
     * hvězdičkami), takže by změna jeho hodnoty na jasně žlutou
     * nechtěně přebarvila i hvězdičky. Text tlačítek proto přepnutý
     * na var(--msn-ink) (viz .hotel-search-submit níž) - bílý text by
     * na týhle světlé žluté měl velmi špatný kontrast/čitelnost.
     */
    --msn-search-cta: #feda32;

    background: var(--msn-paper);
    color: var(--msn-ink);
    /*
     * OPRAVA: `.single-hotel` neni jen obalovaci prvek uvnitr stranky -
     * WordPress ho přes body_class() přidává PŘÍMO na <body> (jde o
     * typ obsahu "hotel", takže WP automaticky přidá třídu
     * "single-hotel"). Puvodni "font-family: inherit" proto NEdedilo
     * font z <body> (kde uz je font sady definovany, viz style.css),
     * ale prepsalo font primo NA <body> - trida ma vyssi specificitu
     * nez selektor "body", takze "inherit" hledalo font o uroven vys,
     * na <html>, kde zadny neni nastaveny. Vysledek: cely obsah
     * stranky hotelu VCETNE hlavniho menu (ktere je taky potomek
     * <body>) dostal font prohlizece misto sablony webu.
     *
     * Oprava: nastavit STEJNY font, jaky pouziva zbytek webu (viz
     * "body" v style.css), misto "inherit".
     */
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

.hotel-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

.hotel-kicker {
    margin: 0 0 8px;
    color: var(--msn-muted);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ---- Galerie nahoře (vzor Booking.com: jedna velká + mřížka menších) ---- */

/*
 * OPRAVA (zadání): hlavní menu webu (.site-header, viz
 * assets/css/navigation.css) je "position: fixed" s neprůhledným bílým
 * pozadím a je VŽDY nad obsahem (z-index 1002) - stránka hotelu
 * začínala galerií rovnou na souřadnici 0, takže menu překrývalo horní
 * část hlavní fotky. Ostatní šablony webu (např. page.php,
 * .standard-page__hero) mají tenhle odstup nahoře řešený - stránka
 * hotelu ho neměla vůbec.
 *
 * 94px = SKUTEČNÁ výška .site-header na šířkách >=1240px (změřeno
 * přímo, ne odhad) - přesně šířka/breakpoint, na kterém se hlavička v
 * navigation.css zmenšuje (viz media query níž). 28px je PŮVODNÍ odstup
 * galerie, který zůstává NAD týmhle odsazením, ne misto něj.
 *
 * Scoped jen na .hotel-gallery (jedinou stránku hotelu) - jiné šablony
 * webu svoje odsazení proti menu řeší už samy, tahle oprava do nich
 * nezasahuje.
 */
.hotel-gallery {
    padding: calc(94px + 28px) 0 0;
}

@media (max-width: 1240px) {
    .hotel-gallery {
        /* .site-header je na téhle šířce (a níž, včetně mobilu) 68px vysoká - stejný breakpoint jako assets/css/navigation.css. */
        padding-top: calc(68px + 28px);
    }
}

.hotel-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 160px);
    gap: 8px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    border-radius: 14px;
    overflow: hidden;
}

.hotel-gallery-grid img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hotel-gallery-main {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

.hotel-gallery-more {
    position: relative;
}

.hotel-gallery-more-count {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 20, 20, .55);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}

.hotel-gallery-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 280px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    color: var(--msn-muted);
    background: var(--msn-paper-2);
    border-radius: 14px;
}

/* ---- Hlavička (název, hvězdy, destinace) ---- */

.hotel-header {
    padding: 26px 0 8px;
}

.hotel-header h1 {
    margin: 0 0 8px;
    font-family: var(--msn-display-serif);
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.1;
    letter-spacing: -.01em;
}

.hotel-header-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    color: var(--msn-muted);
    font-size: 15px;
}

/*
 * Kategorie hotelu - grafické hvězdičky (.msn-hotel-stars/.msn-hotel-star)
 * PŘESUNUTO do assets/css/hotel-stars.css (samostatný soubor) - potřebují
 * je i stránky, které zbytek tohohle souboru vůbec nepoužívají (homepage,
 * detail země - viz template-parts/hotel-card.php, hotel-offer-card.php).
 * Enqueue viz inc/hotel-typ.php (msn_hotel_stars_enqueue) - vždy načteno
 * i tady (is_singular('hotel')), takže se chováním nic nemění.
 */

/* ----------------------------------------
   Vyhledávací/rezervační panel (redesign) -
   kompaktní jednořádkový "pruh" podle vzoru
   Booking.com (layout/chování), ale VŠECHNY
   barvy/písmo/rádiusy jsou stávající --msn-*
   proměnné webu, ne booking.com styl.
---------------------------------------- */

.hotel-search-panel {
    /*
     * BOD (zadání, 3. kolo): žádná spodní mezera tady - odstup od
     * výsledků teď dělá VÝHRADNĚ .hotel-search-results (margin-top),
     * protože výsledky jsou od téhle chvíle SOUROZENEC týhle sekce
     * (viz single-hotel.php), ne její potomek. Pilulka je tak vždy
     * úplně stejná, ať pod ní jsou výsledky, nebo ne.
     */
    margin: 26px 0 0;
    background: #fff;
    /*
     * 2px padding = přesně tloušťka modrého orámování níž - vytváří
     * viditelný "kanál", ve kterém se orámování ukáže KOLEM VŠECH polí
     * včetně vyplněné 3. sekce (tlačítko), místo aby ho tlačítko svým
     * neprůhledným pozadím úplně překrylo, kdyby sahalo až na skutečný
     * vnější okraj pilulky.
     */
    padding: 2px;
    /*
     * OPRAVA (zadání, 4. kolo): dřív tu byla i "0 10px 30px
     * rgba(20,20,20,.08)" ambientní stínová vrstva navíc - vedle
     * ostré modré inset linky pak byla kolem pilulky vidět ještě
     * druhá, rozmazaná "linka" (hlavně dole/vpravo, kde má drop-shadow
     * největší dosah) - Martin to nahlásil jako zdvojené orámování.
     * Zůstává JEN inset linka - jediné, ostré orámování.
     */
    box-shadow: inset 0 0 0 2px var(--msn-daterange-selected);
    border-radius: 20px;
    /*
     * BEZ overflow:hidden (oprava zadání, 4. kolo): tahle vlastnost
     * měla dřív oříznout pravé rohy vyplněné 3. sekce (tlačítka Hledat)
     * do stejného tvaru jako vnější roh pilulky - jenže kalendářový i
     * hostovský popup (position:absolute) jsou DOM potomci TÉHOŽ
     * kontejneru, takže je overflow:hidden usekával stejně jako
     * tlačítko (viditelná jen jejich horní hrana - funkční regrese,
     * ne jen kosmetická vada). Zaoblení pravých rohů teď řeší přímo
     * .hotel-search-submit vlastním border-radius (viz níž), ne
     * oříznutí rodiče - odpadá tak i nutnost cokoliv přesouvat v DOM.
     */
}

/*
 * O trochu výraznější stav, dokud je kalendář/menu hostů otevřené -
 * trigger tlačítko zůstává fokusované, dokud je jeho popup otevřený,
 * takže žádný extra JS stav navíc netřeba. Přidaná vnější vrstva
 * (druhý box-shadow) je taky mimo box model (na rozdíl od outline by
 * fungovala i přes border-radius rohy), takže ani tahle vrstva
 * navíc nezpůsobí žádný posun/zvětšení pilulky.
 */
.hotel-search-panel:focus-within {
    box-shadow: inset 0 0 0 2px var(--msn-daterange-selected), 0 0 0 3px rgba(29, 95, 174, .18);
}

.hotel-search-form {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.hotel-search-field {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 14px 18px;
    /*
     * BOD (zadání, 3. kolo, vzor Booking.com): svislé dělicí linky mezi
     * sekcemi pilulky jsou teď MODRÉ (stejná barva jako orámování celé
     * pilulky), dřív šedé (var(--msn-line)).
     */
    border-right: 1px solid var(--msn-daterange-selected);
}

.hotel-search-field:last-child {
    border-right: none;
}

.hotel-search-field-daterange {
    flex: 1 1 260px;
    min-width: 220px;
}

.hotel-search-field-guests {
    flex: 1 1 220px;
    min-width: 200px;
    position: relative;
}

/*
 * BOD (zadání, 3. kolo, vzor Booking.com): 3. sekce pilulky je teď
 * CELÁ vyplněná barvou (tlačítko níž vyplňuje celou tuhle sekci, na
 * celou výšku) - žádný vlastní padding tady, tlačítko uvnitř má
 * padding svůj vlastní, ať sahá až k hraně (viz .hotel-search-submit).
 */
.hotel-search-field-submit {
    flex: 0 0 auto;
    padding: 0;
    border-right: none;
}

.hotel-search-field label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--msn-muted);
}

/* Kalendář a "Hosté" jsou uvnitř pruhu jen jako text/tlačítko bez vlastního rámečku - rámeček dělá celý .hotel-search-panel. */
.hotel-search-field-daterange .hotel-daterange-trigger,
.hotel-guests-trigger {
    padding: 0;
    border: none;
    background: none;
    color: var(--msn-ink);
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hotel-guests-trigger {
    width: 100%;
}

.hotel-guests-trigger:hover,
.hotel-search-field-daterange .hotel-daterange-trigger:hover {
    color: var(--msn-muted);
}

.hotel-guests-popup {
    position: absolute;
    z-index: 40;
    top: calc(100% + 10px);
    left: 0;
    width: max-content;
    min-width: 280px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--msn-line);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(20, 20, 20, .16);
}

.hotel-guests-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
}

.hotel-guests-row + .hotel-guests-row {
    border-top: 1px solid var(--msn-line);
}

.hotel-guests-row-label {
    font-size: 14px;
    font-weight: 600;
}

.hotel-guests-done {
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid var(--msn-ink);
    border-radius: 8px;
    background: var(--msn-ink);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.hotel-guests-done:hover {
    background: #000;
}

.hotel-stepper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hotel-stepper button {
    width: 28px;
    height: 28px;
    border: 1px solid var(--msn-line);
    border-radius: 50%;
    background: #fff;
    color: var(--msn-ink);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.hotel-stepper button:hover {
    background: var(--msn-paper-2);
}

.hotel-stepper-count {
    min-width: 18px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
}

.hotel-children-ages {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 4px 0 8px;
}

.hotel-child-age-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--msn-muted);
}

.hotel-child-age-row select {
    padding: 6px 8px;
    border: 1px solid var(--msn-line);
    border-radius: 6px;
    background: var(--msn-paper);
    color: var(--msn-ink);
    font-size: 14px;
}

/*
 * BOD (zadání, 3. kolo, vzor Booking.com): dřív malé černé tlačítko
 * uprostřed bílé sekce - teď tlačítko VYPLŇUJE celou 3. sekci pilulky
 * (height:100% + .hotel-search-field-submit má padding:0), barva
 * --msn-search-cta (viz proměnná v .single-hotel výš - PRINCIP
 * "vyplněná barevná sekce" jako Booking.com, ne jejich přesná žlutá).
 *
 * OPRAVA (zadání, 4. kolo): zaoblení pravých rohů dřív řešil
 * overflow:hidden na .hotel-search-panel - ten ale oříznul i
 * kalendářový/hostovský popup (jsou position:absolute potomci
 * TÉHOŽ kontejneru), takže byl vidět jen jejich horní okraj -
 * funkční regrese, ne kosmetická vada. Teď má tlačítko VLASTNÍ
 * border-radius jen na pravých rozích, žádné spoléhání na oříznutí
 * rodiče. 18px = 20px (rádius vnějšího rohu pilulky) MÍNUS 2px (o
 * kolik je tlačítko odsazené dovnitř paddingem .hotel-search-panel,
 * viz výš) - dvě soustředné zaoblené hrany se stejným středem musí mít
 * poloměr lišící se přesně o tenhle odstup, jinak by barva vyplnění
 * "přetékala" mimo modrou ohraničující linku v rohu (přesně tohle
 * Martin nahlásil).
 */
.hotel-search-submit {
    height: 100%;
    padding: 0 34px;
    border: 0;
    border-radius: 0;
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
    background: var(--msn-search-cta);
    /* Světlá žlutá (#feda32) pozadí - bílý text by měl špatný kontrast, tmavá barva webu čitelná dobře (zadání). */
    color: var(--msn-ink);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .03em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter .15s ease;
}

.hotel-search-submit:hover {
    filter: brightness(.92);
}

.hotel-search-submit:disabled {
    opacity: .6;
    cursor: default;
}

/* ---- Výsledky hledání ---- */

/*
 * BOD 4 (zadání, oprava předchozího kola): žádný SPOLEČNÝ obalující
 * box kolem výsledků - Martin nahlásil, že jeden sdílený šedý rámeček
 * kolem všech karet vizuálně spojuje nalezené pokoje do jednoho celku,
 * i když mezi nimi je mezera. Tenhle wrapper teď dělá JEN odstup od
 * pilulky (28px - stejné měřítko jako .hotel-search-panel má nad
 * sebou, 26px) - žádné vlastní pozadí/orámování/stín. Každá varianta
 * (.hotel-variant-card níž) je svůj vlastní samostatný box; mezera
 * mezi nimi (.hotel-search-variants gap) i nad tou první (tenhle
 * margin-top) je proto automaticky v barvě pozadí STRÁNKY, protože
 * mezi kartami už není žádný jiný box, co by ji přebarvil.
 *
 * :not(:empty), protože #hotel-search-results je v single-hotel.php
 * prázdný <div>, dokud JS (assets/js/hotel-search.js) nevloží
 * "Hledám…"/hlášku/varianty - odstup se má objevit hned s prvním
 * obsahem, ne až s výsledkem hledání.
 */
.hotel-search-results:not(:empty) {
    margin-top: 28px;
}

.hotel-search-loading {
    color: var(--msn-muted);
}

.hotel-search-notice {
    padding: 16px 18px;
    border-radius: 10px;
    background: var(--msn-paper-2);
    color: var(--msn-ink);
}

.hotel-search-notice-not_available,
.hotel-search-notice-no_combination,
.hotel-search-notice-error,
.hotel-search-notice-invalid_dates,
.hotel-search-notice-invalid_input,
.hotel-search-notice-child_age_gap,
.hotel-search-notice-min_nights {
    background: #f6e9e4;
}

.hotel-search-variants {
    display: flex;
    flex-direction: column;
    /* BOD 4 (zadání): bez sdíleného boxu potřebuje mezera mezi kartami víc prostoru, aby čitelně oddělovala, ne jen "trochu rozestrčila". */
    gap: 18px;
}

/* BOD 4 (zadání): vlastní stín na KAŽDÉ kartě - dřív ho měl jen společný wrapper (viz .hotel-search-results výš, teď bez vlastního vzhledu). */
/*
 * BOD 3 (zadání, 3. kolo): vlastní MODRÉ orámování na KAŽDÉ kartě
 * zvlášť (stejná barva/tloušťka jako orámování pilulky), dřív šedé
 * (var(--msn-line)) - karta je teď sama o sobě stejně "vlastní box" se
 * stejným vizuálním jazykem jako pilulka, ne jen odlišená tenkou
 * neutrální linkou.
 */
.hotel-variant-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border: 2px solid var(--msn-daterange-selected);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(20, 20, 20, .05);
}

.hotel-variant-rooms {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hotel-variant-room {
    display: flex;
    flex-direction: column;
    min-width: 260px;
}

.hotel-variant-room-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}

.hotel-variant-room-type {
    font-weight: 600;
}

.hotel-variant-room-detail {
    color: var(--msn-muted);
    font-size: 14px;
}

.hotel-variant-room-alt {
    display: block;
    margin-top: 4px;
    color: var(--msn-muted);
    font-size: 12px;
    font-style: italic;
}

/* Itemizovaný rozpis (základní cena, sleva, doplňková osoba, sleva, mezisoučet) - viz Martinův požadavek, sleva musí být vidět. */
.hotel-variant-breakdown {
    width: 100%;
    max-width: 380px;
    border-collapse: collapse;
    font-size: 14px;
}

.hotel-variant-breakdown td {
    padding: 3px 0;
}

.hotel-variant-breakdown-price {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.hotel-variant-breakdown-discount td {
    color: #1a7a3c;
}

.hotel-variant-breakdown-subtotal td {
    padding-top: 6px;
    border-top: 1px solid var(--msn-line);
    font-weight: 600;
}

.hotel-variant-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.hotel-variant-total-price {
    font-family: var(--msn-display-serif);
    font-size: 24px;
}

.hotel-variant-total-note {
    color: var(--msn-muted);
    font-size: 13px;
}

/* ---- Popisné sekce ---- */

/*
 * OPRAVA MEZER (zadání): horní padding býval 30px, počítaný pro skupinu
 * VÍC sekcí (Lokalita, Popis pokojů, ...) hned pod výsledky hledání.
 * Když se "O hotelu" přesunulo nad pilulku (viz single-hotel.php),
 * tenhle padding se u NĚJ sečetl s odsazením pilulky pod ním - proto se
 * "O hotelu" teď vykresluje BEZ týhle obalové třídy vůbec (viz
 * .hotel-description-section--top níž). Tahle třída/padding teď slouží
 * JEN skupině pod výsledky - 6px nahoře (dřív 30px) - do 26px celkové
 * mezery od pilulky/výsledků nad ní doplní zbylých 20px vlastní padding
 * první .hotel-description-section v týhle skupině (beze změny).
 */
.hotel-description {
    padding: 6px 0 60px;
}

/*
 * OPRAVA MEZER (zadání, další kolo): stejný princip jako
 * .hotel-description-section--top výš, jen obráceně - tahle třída se
 * použije, KDYŽ za skupinou popisných sekcí HNED následuje sekce mapy
 * (#hotel-mapa, single-hotel.php). Bez ní by se spodní padding skupiny
 * (60px, navržený jako "konec stránky") sečetl s vlastním horním
 * paddingem .hotel-map-section (20px, zděděným z .hotel-description-section
 * výš) na 80px - víc, než je normální mezera mezi sousedícími sekcemi
 * (40px, viz např. Lokalita -> Popis pokojů). Snížením na stejných 20px,
 * jaké má běžná sekce, vyjde mezera na oněch 40px.
 */
.hotel-description--tight-bottom {
    padding-bottom: 20px;
}

.hotel-description-section {
    padding: 20px 0;
    border-top: 1px solid var(--msn-line);
}

.hotel-description-section:first-child {
    border-top: none;
}

/*
 * "O hotelu" přesunuté nad pilulku (single-hotel.php) - je tam jediná
 * svého druhu, ne první z víc sekcí ve skupině, takže žádný border-top
 * (stejně jako :first-child výš) ani spodní padding - mezeru k pilulce
 * pod ní dělá výhradně .hotel-search-panel margin-top (26px), ať
 * nedochází ke zdvojení dvou odsazení nad sebou.
 */
.hotel-description-section--top {
    border-top: none;
    padding-bottom: 0;
}

.hotel-description-section h2 {
    margin: 0 0 10px;
    font-family: var(--msn-display-serif);
    font-size: 22px;
}

.hotel-description-section .hotel-description-copy {
    color: var(--msn-ink);
    line-height: 1.6;
}

/*
 * OPRAVA MEZER (zadání): wpautop() obaluje text do <p> beze změny
 * vlastních CSS pravidel - prohlížečovy VÝCHOZÍ odstavcové marginy
 * (~16-18px, závisí na velikosti písma) se pak nepředvídatelně sčítaly
 * s marginem nadpisu h2 nad sebou. Explicitní hodnota dělá mezeru mezi
 * odstavci konzistentní a mezeru h2->text řídí jen h2 margin-bottom
 * (10px výš), ne náhodná prohlížečová výchozí hodnota navíc.
 */
.hotel-description-copy p {
    margin: 0 0 1em;
}

.hotel-description-copy p:last-child {
    margin-bottom: 0;
}

.hotel-description-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 700px) {
    .hotel-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 130px);
    }
    .hotel-gallery-main {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
    }
    .hotel-description-columns {
        grid-template-columns: 1fr;
    }
    .hotel-variant-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .hotel-variant-total {
        align-items: flex-start;
        text-align: left;
    }

    /* Pruh (viz výš) se na mobilu rozpadne na svisle skládaná pole - stejný vzor jako booking.com. */
    .hotel-search-panel {
        border-radius: 16px;
    }
    .hotel-search-form {
        flex-direction: column;
    }
    .hotel-search-field {
        border-right: none;
        border-bottom: 1px solid var(--msn-daterange-selected);
        padding: 12px 14px;
    }
    /*
     * OPRAVA (mobil - formulář byl nesmyslně vysoký): desktopové
     * "flex: 1 1 260px/220px" + min-width u pole termínu a hostů je
     * míněné jako ŠÍŘKA v řádku - ve sloupci (flex-direction: column)
     * se ale flex-basis uplatní na VÝŠKU, takže každé pole mělo přes
     * 200 px. Ve sloupci výška podle obsahu.
     */
    .hotel-search-field-daterange,
    .hotel-search-field-guests {
        flex: 0 0 auto;
        min-width: 0;
    }
    .hotel-search-field:last-child {
        border-bottom: none;
    }
    /*
     * Na mobilu se pole skládají POD sebe (sloupec), ne vedle sebe -
     * "3. sekce" tlačítka tu tedy nemá žádnou "výšku pilulky", na
     * kterou by se dalo natáhnout (height:100% z desktopové verze by
     * tu proti auto-výšce sloupce neplatilo). Zůstává padding:0 jen
     * proto, aby tlačítko dál sahalo až k levému/pravému/dolnímu
     * okraji pilulky (stejný "vyplněná sekce" princip), výšku a
     * odsazení textu uvnitř řeší .hotel-search-submit samo.
     */
    .hotel-search-field-submit {
        padding: 0;
    }
    .hotel-search-submit {
        width: 100%;
        height: auto;
        padding: 16px 20px;
        /*
         * Na mobilu je tlačítko POSLEDNÍ pole ve sloupci (dole, přes
         * celou šířku), ne pravá sekce v řádku - zaoblit se tedy mají
         * OBA spodní rohy (14px = 16px rádius pilulky na mobilu mínus
         * 2px odsazení, stejný princip jako na desktopu), ne pravé.
         */
        border-radius: 0;
        border-bottom-left-radius: 14px;
        border-bottom-right-radius: 14px;
    }
    .hotel-guests-popup {
        left: 50%;
        transform: translateX(-50%);
        width: calc(100vw - 48px);
        max-width: 320px;
    }
}

/* Poznámka v rozpisu ceny - pokoj placený za minimální obsazenost. */
.hotel-variant-breakdown-note {
    color: var(--msn-muted);
    font-size: 12px;
}