/* css/responsive.css */

/*
 * Upozornenie na otočenie na šírku je v plnej réžii JavaScriptu (js/
 * gate.js - stavový automat 'gate'/'awaiting-rotation'/'active'/
 * 'paused-portrait', pôvodne js/ui.js - skontrolujAplikujOrientaciu,
 * presunuté sekciou zadania "Portrétová vstupná brána pre mobil/tablet"),
 * pretože musí reagovať na SKUTOČNÝ tvar iframu pri KAŽDEJ zmene jeho
 * veľkosti (resize bez reloadu), nie iba pri jednom pevnom CSS
 * breakpointe.
 *
 * Preto tu zámerne nie je žiadny @media, ktorý by prepisoval display
 * (predchádzajúca verzia mala "@media (min-width:601px) { display:none
 * !important }" pre upozornenie a súčasne JS skrýval #app pri akomkoľvek
 * pomere výška>šírka - tie dve pravidlá si pri "úzkom, ale nie mobilnom"
 * iframe (napr. 700x900) odporovali a spôsobovali prázdnu obrazovku).
 * JS teraz jednoznačne rozhoduje o oboch prvkoch naraz.
 *
 * ⚠️ @container TIERE NIŽŠIE SÚ OD SEKCIE ZADANIA "Appka sa škáluje podľa
 * kontajnera na webe..." NEAKTÍVNE (nie zmazané, ale ani už nespustiteľné) -
 * #app má odteraz VŽDY presne 1920×1080 (js/scale.js, #app-scale-wrapper,
 * css/scale.css, contain-fit transform:scale() namiesto fluid cqw/cqh
 * relayoutu), takže "@container configurator (max-height:900px/450px)"
 * nižšie už nikdy nesplnia podmienku (výška #app je vždy 1080). Príliš
 * malý kontajner namiesto toho aktivuje portrétovú vstupnú bránu (js/
 * gate.js, MIN_SCALE_PRE_GATE) - ponechané nezmazané ako dokumentácia
 * predošlého správania, appka už na ne nespolieha.
 */
#rotate-warning-overlay {
    display: none; /* predvolený stav - JS prepína na 'flex', keď treba */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(var(--surface-void-rgb) / 0.92);
    flex-direction: column;
    align-items: center;
    z-index: 99999;
    padding: 16px;
    padding-top: 16px;
    box-sizing: border-box;
}

/* Horný panel - kompaktný pruh (sekcia 2), nie veľký centrovaný box */
.warning-box {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: min(480px, 90%);
    background: rgb(var(--surface-panel-rgb) / 0.85);
    border: 1px solid rgb(var(--hairline-rgb) / 0.08);
    border-radius: 14px;
    padding: 14px 22px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* PEVNÉ px, NIE rem (sekcia zadania "Text gate oznámenia... je extrémne
   veľký, presahuje obrazovku") - #rotate-warning-overlay žije ZÁMERNE MIMO
   #app-scale-wrapper (js/scale.js komentár), ale rem je VŽDY relatívny
   voči koreňovému <html> font-size bez ohľadu na to - preto ho aj tak
   zachytával --ui-scale-kompenzacia (K, css/base.css), hoci pre tento
   kontext nebol nikdy zamýšľaný. V portréte je K obzvlášť vysoký (host-
   demo.html kontajner je zámerne 16:9-tvarovaný aj v portréte, scale sa
   preto počíta z veľmi nízkeho efektívneho rozmeru) - kombinácia s pôvodne
   už väčším gate font-size spôsobila extrémne nadmerený, odseknutý text.
   px jednotky sú od html font-size (a teda od K) úplne nezávislé. */
.warning-icon {
    font-size: 25.6px;
    flex-shrink: 0;
    display: inline-block;
    animation: smoothLayoutRotate 2.5s infinite ease-in-out;
}

.warning-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
}

.warning-text strong {
    font-size: 14.72px;
    font-weight: 600;
    color: var(--text-strong);
}

.warning-text span {
    font-size: 12.16px;
    color: var(--text-dim);
    line-height: 1.4;
}

@keyframes smoothLayoutRotate {
    0% { transform: rotate(0deg); }
    45% { transform: rotate(-90deg); }
    65% { transform: rotate(-90deg); }
    100% { transform: rotate(0deg); }
}

/* ==========================================================================
   📐 BREAKPOINTY PODĽA VÝŠKY 16:9 KONTAJNERA (#app.configurator-ratio)

   Panely appky (logo, filter, pravý stĺpec, spodná lišta, ikonky) mali
   pevné pixelové hodnoty navrhnuté pre desktop výšku - na mobile landscape
   (napr. 915×412, Samsung Galaxy S20 Ultra) sa kvôli malej výške
   kontajnera obsah orezával (v STAV BYTU bol viditeľný iba 1 zo 4
   checkboxov). Riešenie: 3 RUČNE DOLADENÉ tiery (nie jedna clamp()
   formula) cez @container query VIAZANÚ na #app.configurator-ratio
   (container-name: configurator, css/layout.css) - teda na SKUTOČNÚ výšku
   16:9 kontajnera, nie na surový browser viewport (ten pri širokom-ale-
   nízkom okne nezodpovedá reálnej výške appky kvôli letterboxingu).

   DESKTOP (>900px výška kontajnera) = pôvodné hodnoty vo layout.css/
   filters.css/apartments.css/okolie.css, TU SA NIČ NEPREPISUJE.
   TABLET LANDSCAPE (601-900px) a MOBILNÝ LANDSCAPE (≤450px) nižšie.

   #app.configurator-ratio samotný (position/aspect-ratio/width/height/
   container-type) sa TU NIKDY neprepisuje - 16:9 zámok ostáva nedotknutý,
   breakpointy menia VÝHRADNE vnútorné panely (font-size/padding/gap/
   pozícia), nikdy rozmery kontajnera.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TABLET LANDSCAPE - výška kontajnera 451-900px
   -------------------------------------------------------------------------- */
@container configurator (min-height: 451px) and (max-height: 900px) {
    #app-logo {
        top: 10px;
        left: 10px;
        padding: 5px 10px;
        gap: 6px;
        border-radius: 10px;
    }
    .logo-icon {
        width: 20px;
        height: 15px;
    }
    .logo-text {
        font-size: 0.68rem;
    }
    /* INFO+ZDIEĽAŤ skupina vedľa loga - left duplikuje presne rovnaký
       vzorec ako #app-logo left+width v tomto tieri (10px + clamp(160,
       42cqw,300)), height zhodná s nameranou výškou #app-logo v tomto
       tieri (27px, zadanie bod 3). */
    .header-icon-group {
        top: 10px;
        left: calc(10px + clamp(160px, 42cqw, 300px) + 6px);
        height: 27px;
    }
    #app-info-trigger,
    #share-app-trigger {
        width: 19px;
        height: 19px;
        font-size: 0.7rem;
    }
    /* OBĽÚBENÉ - tretia skupina, TERAZ zdieľajúca .header-icon-group triedu
       (top/height už prevzaté z pravidla vyššie) - iba "left" je vlastný,
       rovnaký "left duplikuje vzorec" princíp: 10px(logo left) + clamp(logo
       width) + 6px(medzera logo↔I/zdieľať) + vlastná šírka .header-icon-
       group v tomto tieri (2×padding(3px*K) + 2×chip(19px) + gap(6px) +
       2×border(1px) = 6px*K + 46px) + 6px (rovnaká medzera
       I/zdieľať↔OBĽÚBENÉ). Žiadny vlastný "width" - pilulka sa (rovnako ako
       .header-icon-group) sama roztiahne podľa 2 vnútorných chipov. */
    #favorites-trigger-group {
        left: calc(68px + clamp(160px, 42cqw, 300px) + 6px * var(--ui-scale-kompenzacia, 1));
    }
    #favorites-trigger,
    #favorites-clear-trigger {
        width: 19px;
        height: 19px;
    }
    .favorites-heart-icon,
    .favorites-trash-icon {
        width: 13px;
        height: 13px;
    }

    /* Kontajner DEŇ/NOC + "Mapa"[+"Výber bloku"] - rovnaká kompaktná úprava
       ako logo nad ním. bottom/height zhodné s #facade-view-switcher v
       tomto tieri (12px/40px) - border-radius sa NEPREPISUJE, ostáva
       zdedené 8px (rovnaké ako view-switcher vo všetkých tieroch, ten ho
       tiež nikdy neprepisuje). */
    .mapa-blok-corner {
        bottom: 12px;
        left: 10px;
        height: 40px;
    }
    #okolie-trigger,
    #blok-vyber-trigger {
        padding: 0 10px;
        font-size: 0.65rem;
    }
    #den-noc-trigger {
        height: 32px;
        font-size: 0.65rem;
        min-width: 48px;
        padding: 0 12px;
    }

    #configurator-filters {
        top: 46px;
        left: 10px;
        padding: 16px;
        max-height: calc(100cqh - 46px - 66px);
        border-radius: 12px;
    }
    .filter-group-box {
        margin-bottom: 12px;
        gap: 5px;
    }
    .filter-group-box h3 {
        font-size: 0.6rem;
    }
    .status-checkbox-list {
        gap: 2px;
    }
    .status-checkbox-row {
        padding: 5px 4px;
        font-size: 0.7rem;
        gap: 8px;
    }
    .status-checkbox-row input[type="checkbox"] {
        width: 12px;
        height: 12px;
    }
    .status-dot {
        width: 8px;
        height: 8px;
    }
    .status-star {
        width: 8px;
        font-size: 0.82rem;
    }
    .lightbox-nav-bar {
        padding: 5px;
        gap: 3px;
    }
    /* min-width:0 (nie desktopových 96px) - riadok môže mať variabilný
       počet tlačidiel (POI kategórie/N vzorových bytov), na tomto užšom
       tieri sa preto vracia k pôvodnému "hug content" správaniu (padding-
       based veľkosť) namiesto pevnej jednotnej šírky, aby sa pri väčšom
       počte položiek nezalamoval/nepretekal mimo obrazovky. */
    .lightbox-nav-btn {
        min-width: 0;
        padding: 7px 12px;
        font-size: 11px;
        border-radius: 6px;
    }
    .mode-tab {
        padding: 8px 5px;
        font-size: 0.6rem;
    }
    .btn-reset-filters-main {
        padding: 7px;
        font-size: 0.62rem;
    }

    #app.configurator-ratio {
        --panel-gap: 12px;
    }
    #right-panel-stack {
        top: 10px;
        right: 10px;
        max-height: calc(100cqh - 20px - 66px);
    }
    #project-info-panel {
        padding: 14px;
        border-radius: 12px;
    }
    .project-info-title {
        font-size: 0.85rem;
        margin-bottom: 6px;
    }
    .project-info-desc {
        font-size: 0.68rem;
        margin-bottom: 8px;
        line-height: 1.35;
    }
    .project-info-features {
        gap: 5px;
        margin-bottom: 8px;
    }
    .project-info-features li {
        font-size: 0.66rem;
    }
    .project-info-features .feature-icon {
        width: 12px;
        height: 12px;
    }

    #apartments-list-panel {
        padding: 16px;
        border-radius: 12px;
    }
    /* OBĽÚBENÉ BYTY na obrazovke Výber blokov - duplikuje #right-panel-stack
       (top/right/max-height vyššie) + #apartments-list-panel (padding/
       radius vyššie), rovnaký dôvod ako na desktope (css/vyber-blokov.css). */
    #vyber-blokov-right-stack {
        top: 10px;
        right: 10px;
        max-height: calc(100cqh - 20px - 66px);
    }
    #vyber-blokov-favorites-panel {
        padding: 16px;
        border-radius: 12px;
    }
    .apartments-summary-panel h2 {
        font-size: 0.85rem;
        margin-bottom: 8px;
    }
    .summary-row {
        padding: 6px 0;
        gap: 8px;
    }
    .summary-dot {
        width: 8px;
        height: 8px;
    }
    .summary-star {
        width: 8px;
        font-size: 0.8rem;
    }
    .summary-label {
        font-size: 0.7rem;
    }
    .summary-count {
        font-size: 0.8rem;
    }

    .apartments-panel-header {
        margin-bottom: 8px;
    }
    .apartments-panel-header h2 {
        font-size: 0.85rem;
        gap: 6px;
    }
    .apartments-count-badge {
        min-width: 18px;
        height: 18px;
        font-size: 0.65rem;
    }
    .apartments-panel-header p {
        font-size: 0.65rem;
    }

    .apartment-card {
        padding: 8px;
        gap: 9px;
    }
    .card-thumb {
        width: 40px;
        height: 40px;
    }
    .card-title {
        font-size: 0.72rem;
    }
    .card-blok-label {
        font-size: 0.58rem;
    }
    .card-meta {
        font-size: 0.66rem;
    }
    .card-chevron {
        font-size: 1.05rem;
    }

    #facade-view-switcher {
        bottom: 12px;
        height: 40px;
        padding: 3px;
    }
    .view-btn {
        font-size: 0.65rem;
    }

    /* VR + GALÉRIE + FULLSCREEN - rovnaký riadok ako na desktope
       (css/layout.css), tu iba dolaďujeme rozmery/pozíciu na tento tier:
       right/width zhodné s #right-panel-stack (right:10px, šírka
       nezmenená z desktop clamp() - tablet ju tiež neprepisuje), bottom/
       height zhodné s #facade-view-switcher (12px/40px). */
    .vr-gallery-corner {
        bottom: 12px;
        right: 10px;
        height: 40px;
    }
    #vr-tours-trigger,
    #gallery-trigger {
        font-size: 0.62rem;
    }
    #fullscreen-blok-group {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }
    .fullscreen-icon {
        width: 16px;
        height: 16px;
    }
}

/* --------------------------------------------------------------------------
   MOBILNÝ LANDSCAPE - výška kontajnera do 450px (napr. 915×412)
   Najagresívnejšie kompaktné hodnoty - kritická požiadavka: všetky 4
   checkboxy "Stav bytu" AJ všetky 4 riadky "Prehľad bytov" musia byť
   viditeľné naraz, bez orezania/scrollovania.
   -------------------------------------------------------------------------- */
@container configurator (max-height: 450px) {
    /* PROPORČNÉ zmenšenie (nie iba vertikálne stlačenie) - šírka panelov
       tu klesá SPOLU s výškou, v rovnakom pomere strán, aký majú na PC
       (odmerané: filter panel 300×376=0.798, pravý stĺpec 320×469=0.682).
       Stropy NIŽŠIE než v prvom pokuse - tie ešte fyzicky zasahovali do
       fasádnej fotky (bug, opravené). */
    #app-logo,
    #configurator-filters,
    .mapa-blok-corner {
        width: clamp(90px, 42cqw, 145px);
    }

    #app-logo {
        top: 6px;
        left: 6px;
        padding: 3px 8px;
        gap: 4px;
        border-radius: 8px;
    }
    .logo-icon {
        width: 15px;
        height: 11px;
    }
    .logo-text {
        font-size: 0.54rem;
    }
    /* INFO+ZDIEĽAŤ skupina vedľa loga - left duplikuje presne rovnaký
       vzorec ako #app-logo left+width v tomto tieri, height zhodná s
       nameranou výškou #app-logo v tomto tieri (19px, zadanie bod 3).
       Padding/gap zúžené oproti desktopu, aby oba kruhy mali čo najviac
       priestoru v tejto agresívne kompaktnej výške. */
    .header-icon-group {
        top: 6px;
        left: calc(6px + clamp(90px, 42cqw, 145px) + 4px);
        height: 19px;
        padding: 2px;
        gap: 3px;
    }
    #app-info-trigger,
    #share-app-trigger {
        width: 13px;
        height: 13px;
        font-size: 0.5rem;
    }
    /* OBĽÚBENÉ - rovnaký princíp ako v tablet tieri vyššie (top/height
       prevzaté z .header-icon-group, iba "left" vlastný): 6px(logo left) +
       clamp(logo width) + 4px(medzera) + vlastná šírka .header-icon-group v
       tomto tieri (2×2px padding + 2×13px chip + 3px gap + 2×1px border =
       35px, VŠETKO flat/neškálované v tomto agresívne kompaktnom tieri) +
       4px (rovnaká medzera I/zdieľať↔OBĽÚBENÉ). */
    #favorites-trigger-group {
        left: calc(49px + clamp(90px, 42cqw, 145px));
    }
    #favorites-trigger,
    #favorites-clear-trigger {
        width: 13px;
        height: 13px;
    }
    .favorites-heart-icon,
    .favorites-trash-icon {
        width: 9px;
        height: 9px;
    }

    /* Kontajner DEŇ/NOC + "Mapa"[+"Výber bloku"] - rovnaká agresívna
       kompaktná úprava ako logo. bottom/height zhodné s #facade-view-
       switcher v tomto tieri (5px/24px) - border-radius sa NEPREPISUJE,
       ostáva zdedené 8px. */
    .mapa-blok-corner {
        bottom: 5px;
        left: 6px;
        height: 24px;
    }
    #okolie-trigger,
    #blok-vyber-trigger {
        padding: 0 8px;
        font-size: 0.46rem;
    }
    #den-noc-trigger {
        height: 18px;
        min-width: 34px;
        padding: 0 8px;
        font-size: 0.46rem;
        border-radius: 4px;
    }

    #configurator-filters {
        top: 28px;
        left: 6px;
        padding: 9px;
        /* height: auto (zdedené z layout.css) - panel sa prispôsobuje IBA
           vlastnému obsahu, Základný (krátky) aj Rozšírený (dlhší) mód majú
           preto VLASTNÚ výšku, nie zdieľanú/pevnú. #okolie-trigger ("Mapa")
           POD panelom má VLASTNÚ pevnú pozíciu (bottom, zhodnú s
           #facade-view-switcher/VIRTUÁLNE PREHLIADKY, css/layout.css)
           nezávislú od výšky tohto panelu - v Základnom móde preto medzi
           nimi vznikne medzera (očakávané). max-height tu je iba STROP pre
           prípad neobvykle dlhého obsahu (interné scrollovanie cez
           overflow-y:auto, layout.css), aby panel nikdy nezasiahol do
           spodného radu. */
        max-height: calc(100cqh - 60px);
        border-radius: 8px;
    }
    .filter-group-box {
        margin-bottom: 6px;
        gap: 3px;
    }
    .filter-group-box h3 {
        font-size: 0.48rem;
    }
    .status-checkbox-list {
        gap: 1px;
    }
    .status-checkbox-row {
        padding: 4px 3px;
        font-size: 0.62rem;
        gap: 6px;
    }
    .status-checkbox-row input[type="checkbox"] {
        width: 10px;
        height: 10px;
    }
    .status-dot {
        width: 6px;
        height: 6px;
    }
    .status-star {
        width: 6px;
        font-size: 0.66rem;
    }
    .lightbox-nav-bar {
        padding: 4px;
        gap: 3px;
        /* 8px -> 12px, sekcia zadania "Rozšírenie opravy artefaktu na
           zaoblených rohoch..." - zosúladené s base pravidlom (css/okolie.css)
           pre konzistenciu; tento @container blok je mŕtvy kód (sekcia 1,
           CLAUDE.md), žiadny reálny vizuálny dopad. */
        border-radius: 12px;
    }
    .lightbox-nav-btn {
        min-width: 0;
        padding: 5px 10px;
        font-size: 10px;
        /* 5px -> 12px, rovnaký dôvod ako .lightbox-nav-bar vyššie. */
        border-radius: 12px;
    }
    .mode-tab {
        padding: 5px 3px;
        font-size: 0.46rem;
    }
    .btn-reset-filters-main {
        padding: 4px;
        font-size: 0.45rem;
    }

    /* Dlaždice Podlažie/Počet izieb (ROZŠÍRENÝ mód) - predtým netknuté,
       preto pri zúženom paneli pôsobili neprimerane veľké (bug, opravené).
       Rovnaký strop šírky ako filter panel vyššie - Rozšírený mód tak
       vyjde presne rovnako široký ako Základný, nikdy širší. */
    .filter-grid {
        gap: 4px;
    }
    .filter-tile {
        padding: 4px 3px;
        font-size: 0.45rem;
        /* 5px -> 12px, sekcia zadania "Rozšírenie opravy artefaktu na
           zaoblených rohoch..." - zosúladené s base pravidlom (css/filters.css)
           pre konzistenciu; tento @container blok je mŕtvy kód (sekcia 1,
           CLAUDE.md), žiadny reálny vizuálny dopad. */
        border-radius: 12px;
    }
    .area-slider-row {
        gap: 4px;
    }
    .area-slider-value {
        font-size: 0.52rem;
    }
    .area-slider-row input[type="range"] {
        height: 3px;
    }
    .area-slider-row input[type="range"]::-webkit-slider-thumb {
        width: 10px;
        height: 10px;
    }
    .area-slider-row input[type="range"]::-moz-range-thumb {
        width: 10px;
        height: 10px;
    }

    #app.configurator-ratio {
        --panel-gap: 6px;
    }
    #right-panel-stack {
        top: 6px;
        right: 6px;
        width: clamp(85px, 44cqw, 135px);
        max-height: calc(100cqh - 12px - 34px);
    }
    #project-info-panel {
        padding: 8px;
        border-radius: 8px;
    }
    .project-info-title {
        font-size: 0.6rem;
        margin-bottom: 3px;
    }
    .project-info-desc {
        font-size: 0.5rem;
        line-height: 1.25;
        margin-bottom: 4px;
    }
    .project-info-features {
        gap: 2px;
        margin-bottom: 0;
    }
    .project-info-features li {
        font-size: 0.48rem;
    }
    .project-info-features .feature-icon {
        width: 8px;
        height: 8px;
    }

    #apartments-list-panel {
        padding: 9px;
        border-radius: 8px;
    }
    /* OBĽÚBENÉ BYTY na obrazovke Výber blokov - duplikuje #right-panel-stack
       + #apartments-list-panel vyššie, rovnaký dôvod ako v tablet tieri. */
    #vyber-blokov-right-stack {
        top: 6px;
        right: 6px;
        width: clamp(85px, 44cqw, 135px);
        max-height: calc(100cqh - 12px - 34px);
    }
    #vyber-blokov-favorites-panel {
        padding: 9px;
        border-radius: 8px;
    }
    .apartments-summary-panel h2 {
        font-size: 0.6rem;
        margin-bottom: 4px;
    }
    .summary-row {
        padding: 3px 0;
        gap: 5px;
    }
    .summary-dot {
        width: 6px;
        height: 6px;
    }
    .summary-star {
        width: 6px;
        font-size: 0.6rem;
    }
    .summary-label {
        font-size: 0.52rem;
    }
    .summary-count {
        font-size: 0.6rem;
    }

    .apartments-panel-header {
        margin-bottom: 4px;
    }
    .apartments-panel-header h2 {
        font-size: 0.6rem;
        gap: 4px;
    }
    .apartments-count-badge {
        min-width: 13px;
        height: 13px;
        font-size: 0.46rem;
    }
    .apartments-panel-header p {
        font-size: 0.46rem;
        margin-top: 2px;
    }

    /* Prázdny stav "Nenašli sa žiadne byty" - menší font + padding, aby sa
       veta v úzkom mobilnom stĺpci nelámala na mnoho krátkych riadkov
       (bug, opravené - font ešte znížený, 0.5rem bol stále príliš veľký
       vzhľadom na šírku panelu). */
    .no-results-box {
        padding: 8px 4px;
    }
    .no-results-box p {
        font-size: 0.42rem;
        line-height: 1.3;
    }

    .apartment-card {
        padding: 5px;
        gap: 5px;
    }
    /* Miniatúra fasády v karte bytu - na mobile úplne skrytá (karta bez
       fotky, iba textové info), desktop/tablet bez zmeny. */
    .card-thumb {
        display: none;
    }
    .card-title {
        font-size: 0.52rem;
    }
    .card-blok-label {
        font-size: 0.42rem;
    }
    .card-meta {
        font-size: 0.46rem;
    }
    .card-chevron {
        font-size: 0.75rem;
    }

    /* Badge bytu na fasáde (napr. "Byt A3.02") - predtým netknutý, preto
       na malej mobilnej scéne pôsobil neprimerane veľký (bug, opravené). */
    .byt-badge {
        padding: 4px 8px;
        border-radius: 7px;
        gap: 4px;
        border-width: 1.5px;
    }
    .byt-vr-badge {
        /* Polovica 15px (7.5) + hrúbka okraja rodiča v tomto tieri (1px,
           .byt-badge[data-status] nižšie) = 8.5px (rovnaký princíp ako
           base pravidlo v css/apartments.css). */
        top: -8.5px;
        right: -8.5px;
        width: 15px;
        height: 15px;
        font-size: 0.34rem;
        border-width: 1px;
    }
    .byt-badge.byt-vr-standalone {
        font-size: 0.5rem;
    }
    .byt-id {
        font-size: 9px;
    }
    .byt-meta {
        font-size: 7.5px;
        margin-top: 1px;
    }

    /* Ďalšie zmenšenie o ~30% - IBA všeobecný/stavový badge (Typ B, má
       vždy atribút data-status), NIE fixné overlaye (Typ A, .type-*, bez
       data-status) - tie zdieľajú triedy .byt-badge/.byt-id/.byt-meta
       vyššie, preto scoping cez [data-status] namiesto úpravy tých
       pravidiel priamo. Dôvod: pri všetkých 4 stavoch zaškrtnutých môže
       byť na fasáde naraz 9-10 týchto badgeov, pôsobilo to preplnene.
       .byt-id (hlavný identifikátor "Byt X") ostáva na 9px - ďalšie
       zmenšenie by kleslo pod rozumné minimum čitateľnosti (9-10px),
       preto sa tu NEmení. .byt-meta (vedľajší riadok izby/plocha) je
       menej kritický, zmenšený na 5px. */
    .byt-badge[data-status] {
        padding: 3px 6px;
        border-radius: 5px;
        gap: 3px;
        border-width: 1px;
    }
    .byt-badge-star {
        font-size: 6px;
    }
    .byt-badge-row-id {
        gap: 3px;
    }
    .byt-badge-dot {
        width: 4px;
        height: 4px;
    }
    .byt-badge[data-status] .byt-meta {
        font-size: 5px;
        margin-top: 0.5px;
    }

    #facade-view-switcher {
        bottom: 5px;
        height: 24px;
        padding: 2px;
        gap: 3px;
    }
    .view-btn {
        font-size: 0.46rem;
        /* 4px -> 12px, zosúladené s base pravidlom (css/layout.css) kvôli
           konzistencii zdrojového kódu - tento @container blok je mŕtvy
           kód (sekcia 1, CLAUDE.md), žiadny reálny runtime dopad. */
        border-radius: 12px;
    }

    /* VR + GALÉRIE - rovnaký obdĺžnik ako na desktope (css/layout.css), tu
       iba dolaďujeme rozmery/pozíciu: right/width zhodné s #right-panel-
       stack v tomto tieri, bottom/height zhodné s #facade-view-switcher/
       #okolie-trigger. ŽIADNY FULLSCREEN na mobile (appka tu vždy beží
       iba v landscape) - VR a GALÉRIE tak automaticky zdieľajú celú
       šírku 50/50 (flex, #fullscreen-trigger je jednoducho display:none). */
    .vr-gallery-corner {
        bottom: 5px;
        right: 6px;
        width: clamp(85px, 44cqw, 135px);
        height: 24px;
        gap: 4px;
    }
    #vr-gallery-group {
        padding: 2px;
        gap: 3px;
        border-radius: 6px;
    }
    #vr-tours-trigger,
    #gallery-trigger {
        padding: 0 4px;
        font-size: 0.4rem;
        letter-spacing: 0.5px;
        border-radius: 4px;
    }
    #fullscreen-blok-group {
        display: none;
    }

    /* ----------------------------------------------------------------------
       OKNO KONKRÉTNEHO BODU ZÁUJMU (POI lightbox, css/okolie.css) - vlastný
       mobilný prepočet, NIE desktopový vzorec so zmenšeným stropom. Pri
       výške kontajnera ~380-450px by desktopový calc(50% + 600px)/min(600px,
       82cqh) dal fotke (viazanej na výšku karty) štvorec väčší než celá
       dostupná šírka, takže by sa karta aj text zdeformovali/orezali (bug,
       opravené). Výška karty je tu pevná a malá, aby fotka (66% šírky, css/
       okolie.css) nechala dosť miesta na text aj šípky. Žiadny left posun
       (od zrušenia ľavého panela kategórií je okno VŽDY vycentrované,
       rovnako ako .vr-tours-card nižšie) - iba menšia medzera nad kartou
       (#poi-nav-bar, .lightbox-nav-bar vyššie) v tomto tesnejšom tieri. */
    #poi-window-overlay {
        gap: 8px;
    }
    .poi-window-card {
        /* Zväčšené (z min(420px,88%)) - pôvodný 420px strop nechával na
           širších mobilných landscape viewportoch (napr. 915×412) veľký
           nevyužitý tmavý okraj po stranách, zatiaľ čo text panel (34% Z
           TEJTO príliš úzkej karty) bol zbytočne stiesnený, čo spôsobovalo
           nadmerné zalamovanie (napr. "Byt A1.03", "Záhrada: 167.47 m²" -
           bug, zadanie "Roztiahnutie lightboxu na mobile pre viac
           priestoru v text paneli"). ~97% šírky kontajnera namiesto toho -
           900px strop je iba poistka pre nezvyčajne široké/nízke pomery
           strán v tomto tieri (max-height:450px nekladie žiadny strop na
           šírku). */
        width: min(97cqw, 900px);
        /* +17.5% oproti pôvodnej (190px→223.25px, 60cqh→70.5cqh) - rovnaká
           zmena ako desktopové karty vyššie (css/okolie.css,
           css/vr-tours.css), výška nad tým ZOSTÁVA NEZÁVISLÁ od šírky
           (žiadny aspect-ratio na tomto type karty).
           -40px: #poi-window-overlay je stĺpec [#poi-nav-bar, karta] (gap:
           8px vyššie) - karta si rezervuje odmeranú výšku riadka (32px) +
           tento gap, aby dvojica spolu zaberala rovnaký priestor ako
           predtým samotná karta. */
        height: min(183.25px, calc(70.5cqh - 40px));
        max-width: none;
    }
    .poi-window-close {
        /* Vycentrované v novom (30px) hornom gape - (30-22)/2 = 4px. */
        top: 4px;
        right: 6px;
        width: 22px;
        height: 22px;
        font-size: 0.65rem;
    }
    .poi-window-content {
        gap: 6px;
        padding: 30px 4px 30px 4px;
    }
    /* Šípky/počítadlo výberu POI (.vr-tours-byt-nav/.vr-tours-counter,
       zdieľané triedy s VR/Galéria) aj výberu média (.vr-tours-media-nav/
       .vr-tours-media-counter) sa v tomto tieri zmenšujú AUTOMATICKY cez
       tie isté zdieľané pravidlá nižšie (css/responsive.css, sekcia
       "VIRTUÁLNE PREHLIADKY lightbox") - žiadny samostatný POI-špecifický
       predpis netreba. #poi-window-counter je pridaný do ID-zoznamu tam,
       keďže tá konkrétna úprava cieli na ID, nie na zdieľanú triedu. */
    /* Počítadlo (#poi-window-counter, zdieľaná .gallery-lightbox-counter
       báza je VŽDY position:absolute) aj šípky (.vr-tours-byt-prev/next)
       sa na tomto úzkom tieri dostávali príliš blízko k textu (bug,
       zadanie "Oprava prekrývania počítadla a šípok s textovým obsahom") -
       .poi-window-text preto na tomto tieri prepína na STĹPCOVÝ flex:
       počítadlo (order:-1 nižšie) dostáva VLASTNÝ riadok NAD textom
       (position:relative namiesto absolute), .poi-window-text-inner
       zaberá zvyšný priestor pod ním - štrukturálne vylučuje prekrytie
       bez ohľadu na dĺžku obsahu (vertikálne centrovanie textu už nemôže
       "vyliezť" až ku počítadlu, keďže má teraz svoj vlastný oddelený
       riadok). Šípky (position:absolute, mimo flow) ostávajú vycentrované
       na CELÚ výšku panela ako doteraz. */
    .poi-window-text {
        display: flex;
        flex-direction: column;
        padding: 14px 0;
    }
    .poi-window-text-inner {
        flex: 1 1 auto;
        min-height: 0;
        /* PREPÍSANÉ z desktopového justify-content:center (css/okolie.css) -
           tento panel je STĹPCOVÝ flex (na rozdiel od VR/Galéria, kde je
           riadkový a rovnaký problém rieši align-items vyššie), takže
           vertikálne centrovanie ide cez justify-content, nie align-items.
           Rovnaký dôvod ako pri VR/Galéria: centrovanie by pri dlhšom
           obsahu (dlhší názov POI zalomený na 2 riadky) rástlo súmerne
           oboma smermi a horný okraj by sa dostal až ku počítadlu nad ním
           (bug, zadanie). flex-start necháva obsah rásť VÝHRADNE nadol. */
        justify-content: flex-start;
        gap: 8px;
        /* 34px - zladené s menšou 20px šípkou (.vr-tours-byt-nav, ktorá
           teraz sedí bližšie k okraju, left/right:6px) - dáva textu VIAC
           šírky než pôvodných 40px, pri zachovaní bezpečného odstupu od
           šípky (34-6-20=8px), bod 1-3 zadania. */
        padding: 0 34px;
    }
    /* min-width:0 na SAMOTNÝCH textových flex-položkách (nie iba na ich
       obale vyššie) + overflow-wrap - bez toho flex-item defaultne nikdy
       nezmrští POD šírku svojho najdlhšieho NEZALOMITEĽNÉHO slova
       (min-content), aj keď má rodič min-width:0. Na tomto úzkom paneli
       (~43-83px obsahu) dlhšie slová (napr. "Nemocnica", "Ružinov")
       samotné prekračujú dostupnú šírku - bez tejto opravy pretečú MIMO
       vlastného boxu priamo do priestoru šípok (bug, zadanie "Oprava
       prekrývania počítadla a šípok s textovým obsahom"), teraz sa namiesto
       toho zalomia aj VNÚTRI slova, ak treba. */
    .poi-window-name,
    .poi-window-desc,
    .poi-window-distance {
        min-width: 0;
        overflow-wrap: break-word;
        word-break: break-word;
        /* Tesnejší line-height (bod 3 zadania) - defaultný by pri
           zalomenom (2-riadkovom) názve/popise zbytočne naťahoval
           celkovú výšku obsahu. */
        line-height: 1.2;
    }
    .poi-window-name {
        font-size: 0.72rem;
    }
    .poi-window-desc {
        font-size: 0.56rem;
    }
    .poi-window-distance {
        font-size: 0.56rem;
        gap: 4px;
    }
    .poi-window-photo {
        padding: 6px;
    }
    .poi-window-photo img {
        border-radius: 5px;
    }

    /* VIRTUÁLNE PREHLIADKY lightbox - NIE desktopový calc(50% + 600px)
       vzorec (rovnaký bug ako mal POI predtým, tu rovno predídený). Na
       rozdiel od POI okna VŽDY vycentrované (žiadny left posun).

       Zväčšené na maximum dostupného vertikálneho priestoru (predtým
       pevných 190px, teraz min(272px,66cqh)) - box sa centruje spolu s
       #vr-tours-nav-bar nad ním (flex stĺpec, .vr-tours-foreground, css/
       vr-tours.css), rovnaká zmenšená medzera medzi nimi ako pri POI
       vyššie (gap:8px). Šírka sa dopočíta z výšky cez aspect-ratio
       (rovnaký pomer strán ako predtým, 420:190), max-width je iba
       bezpečnostný strop. */
    .vr-tours-foreground {
        gap: 8px;
    }
    .vr-tours-card {
        /* +17.5% výška (272px→319.6px, 66cqh→77.55cqh), rovnaké % ako
           desktopové karty vyššie. */
        height: min(279.6px, calc(77.55cqh - 40px));
        /* Šírka NEZÁVISLÁ od výšky (žiadny aspect-ratio) - rovnaká oprava
           ako .poi-window-card vyššie (bug, zadanie "Roztiahnutie
           lightboxu na mobile pre viac priestoru v text paneli"). Predtým
           width:auto + aspect-ratio:420/223.25 väzalo šírku na výšku, čo
           na širokom-ale-nízkom viewporte (napr. 915×412) dalo kartu
           oveľa užšiu, než by sa reálne zmestilo - textový panel (34% Z
           TEJTO príliš úzkej karty) bol zbytočne stiesnený (nadmerné
           zalamovanie, napr. "Byt A1.03"/"Záhrada: 167.47 m²"). ~97%
           šírky kontajnera namiesto toho, rovnaká hodnota/strop ako POI. */
        width: min(97cqw, 900px);
    }
    /* Vnútorné rozmery/písmo úmerne zväčšené (~1.43×, rovnaký pomer ako
       rast samotného boxu 190px→272px) - väčší box s nezmeneným malým
       textom by pôsobil prázdno, nie "ľahšie čitateľne" (zadanie). */
    .vr-tours-close {
        /* Vycentrované v novom (40px) hornom gape - (40-32)/2 = 4px. */
        top: 4px;
        right: 9px;
        width: 32px;
        height: 32px;
        font-size: 0.93rem;
    }
    .vr-tours-content {
        gap: 9px;
        padding: 40px 6px 40px 6px;
    }
    /* Rovnaká oprava ako .poi-window-text vyššie (bug, zadanie "Oprava
       prekrývania počítadla a šípok s textovým obsahom") - zdieľaná
       štruktúra medzi VR aj GALÉRIA typom (rovnaký #vr-tours-text). */
    .vr-tours-text {
        display: flex;
        flex-direction: column;
        padding: 14px 0;
    }
    .vr-tours-text-inner {
        flex: 1 1 auto;
        min-height: 0;
        /* PREPÍSANÉ z desktopového align-items:center (css/vr-tours.css) -
           s krátkym obsahom (napr. byt bez Balkónu/Terasy/Záhrady) toto
           centrovanie vyzerá rovnako ako predtým, ALE pri dlhšom obsahu
           (viac vyplnených parametrov, zalomený na 2 riadky kvôli úzkemu
           panelu) by stred rástol SYMETRICKY oboma smermi - horný okraj by
           sa posúval NAHOR, priamo do počítadla nad ním (presne bug zo
           zadania). flex-start namiesto toho necháva obsah rásť VÝHRADNE
           nadol (bezpečný smer - dolu je iba padding karty, nie počítadlo/
           nadpis), takže sa NIKDY nemôže dostať späť ku počítadlu, nech je
           obsah akokoľvek dlhý. */
        align-items: flex-start;
        gap: 12px;
        /* 34px - zladené s menšou 20px šípkou (.vr-tours-byt-nav, ktorá
           teraz sedí bližšie k okraju, left/right:6px) - dáva textu VIAC
           šírky než pôvodných 40px, pri zachovaní bezpečného odstupu od
           šípky (34-6-20=8px), bod 1-3 zadania. */
        padding: 0 34px;
    }
    .vr-tours-text-info {
        /* Zmenšené (z 6px) - kompaktnejšie riadky, viac parametrov sa
           zmestí bez potreby scrollovania/orezania (bod 3 zadania -
           "doladiť... aby sa obsah zmestil čitateľne"). */
        gap: 3px;
        /* PREPÍSANÉ z desktopového min-width:max-content (css/vr-tours.css) -
           na tomto úzkom tieri (panel iba ~160-170px) by vynútenie
           jednoriadkového textu (kvôli miestu pre voliteľný pôdorys stĺpec)
           spôsobilo pretečenie dlhších parametrov (napr. "Záhrada: 167.47
           m²") MIMO vlastného boxu priamo do priestoru šípok (bug, zadanie) -
           na mobile smie text namiesto toho voľne zalomiť na 2 riadky. */
        min-width: 0;
    }
    /* Rovnaká oprava ako .poi-window-name a spol. vyššie (bug, zadanie) -
       zdieľaná štruktúra medzi VR aj GALÉRIA typom. Tesnejší line-height
       (bod 3 zadania) - defaultný (~1.4-1.5) by pri viacriadkových
       parametroch zbytočne naťahoval celkovú výšku obsahu. */
    .vr-tours-byt-id,
    .vr-tours-byt-param {
        min-width: 0;
        overflow-wrap: break-word;
        word-break: break-word;
        line-height: 1.2;
    }
    .vr-tours-byt-id {
        font-size: 1.03rem;
    }
    .vr-tours-byt-param {
        font-size: 0.56rem;
    }
    .vr-tours-photo {
        padding: 9px;
    }
    .vr-tours-photo img {
        border-radius: 7px;
    }
    /* #poi-window-counter zdieľa triedu .vr-tours-counter (index.html) -
       táto úprava cieli na ID (nie na triedu), preto musí vymenovať OBA
       lightboxy zvlášť, aby sa zjednotená veľkosť prejavila aj na POI.
       position:relative (namiesto zdedeného absolute z .gallery-lightbox-
       counter) + order:-1 - vlastný riadok NAD .vr-tours-text-inner/
       .poi-window-text-inner (oba teraz flex-column, vyššie), nikdy sa
       neprekrýva s nadpisom bez ohľadu na dĺžku obsahu (bug, zadanie
       "Oprava prekrývania počítadla a šípok s textovým obsahom"). */
    #vr-tours-counter,
    #poi-window-counter {
        position: relative;
        order: -1;
        top: auto;
        left: auto;
        bottom: auto;
        transform: none;
        /* align-self:center - rodič (.vr-tours-text/.poi-window-text) má
           zdedené align-items:stretch (css/vr-tours.css/okolie.css), bez
           tohto by sa počítadlo v STĹPCOVOM flexe (vyššie) natiahlo na
           celú šírku panela namiesto toho, aby zostalo malý vycentrovaný
           "pill" ako doteraz. */
        align-self: center;
        flex: 0 0 auto;
        margin-bottom: 6px;
        padding: 4px 11px;
        font-size: 0.83rem;
    }
    .vr-tours-spustit-btn {
        bottom: 11px;
        padding: 8px 14px;
        font-size: 0.72rem;
    }
    /* Plný text pretekal cez rámik fotky na tejto šírke - skrátený variant
       namiesto ďalšieho zmenšovania písma/paddingu. */
    .vr-tours-spustit-full {
        display: none;
    }
    .vr-tours-spustit-short {
        display: inline;
    }
    /* Vnútorná navigácia médií bytu (GALÉRIA typ) - úmerne zmenšená pre
       malý mobilný 1:1 rámik. .vr-tours-byt-nav (šípky výberu bytu,
       teraz v textovom paneli) zdieľa rovnakú veľkosť/okraj. */
    .vr-tours-media-nav,
    .vr-tours-byt-nav {
        width: 26px;
        height: 26px;
        font-size: 0.8rem;
    }
    /* Šípky VÝBERU BYTU/POI (v textovom paneli, súťažia o priestor s
       textom) sú MENŠIE než šípky výberu MÉDIA (na fotke, kde priestor nie
       je problém) - uvoľňuje viac šírky pre samotný text (bod 1-3 zadania
       "Oprava prekrývania počítadla a šípok s textovým obsahom"). Zdieľaná
       trieda s POI kategóriou (#poi-window-prev/next), takže sa prejaví aj
       tam. */
    .vr-tours-byt-nav {
        width: 20px;
        height: 20px;
        font-size: 0.7rem;
    }
    .vr-tours-media-prev,
    .vr-tours-byt-prev {
        left: 10px;
    }
    .vr-tours-media-next,
    .vr-tours-byt-next {
        right: 10px;
    }
    .vr-tours-byt-prev {
        left: 6px;
    }
    .vr-tours-byt-next {
        right: 6px;
    }
    /* Posunuté nižšie od horného okraja (predtým 5px) - viditeľný odstup. */
    .vr-tours-media-counter {
        top: 10px;
        padding: 2px 7px;
        font-size: 0.55rem;
    }
    .vr-tours-zoom-trigger {
        top: 10px;
        right: 10px;
        width: 22px;
        height: 22px;
    }
    .vr-tours-zoom-trigger svg {
        width: 12px;
        height: 12px;
    }

    /* ----------------------------------------------------------------------
       DETAIL BYTU (2-stĺpcový horizontálny layout, css/detail.css) - modal
       má vlastný max-height: 85cqh nezávislý od bočných panelov, ale pri
       výške kontajnera ~380-450px je aj 85cqh iba ~320-380px, takže
       potrebuje rovnaké kompaktné doladenie ako ostatné panely vyššie.
       -------------------------------------------------------------------- */
    .detail-card {
        padding: 14px;
        border-radius: 10px;
    }
    .detail-columns {
        gap: 14px;
    }
    .detail-col {
        gap: 8px;
        flex-basis: 180px;
    }
    .detail-close-btn {
        top: 8px;
        right: 8px;
        width: 24px;
        height: 24px;
        font-size: 0.62rem;
    }
    .detail-header {
        padding-right: 24px;
    }
    .detail-title {
        font-size: 0.85rem;
    }
    .detail-badge {
        font-size: 0.56rem;
        padding: 3px 7px;
    }
    .detail-special-offer {
        font-size: 0.64rem;
        padding: 8px 10px;
    }
    .detail-special-offer-title {
        font-size: 0.56rem;
        margin-bottom: 4px;
    }
    .detail-special-offer-line {
        font-size: 0.68rem;
    }
    .detail-params {
        gap: 6px 10px;
    }
    .detail-param-label {
        font-size: 0.5rem;
    }
    .detail-param-value {
        font-size: 0.68rem;
    }
    .detail-price {
        font-size: 0.95rem;
        padding-top: 8px;
    }
    /* Tlačidlá do 2×2 mriežky namiesto samostatných plnošírkových riadkov -
       na 412px výšku sa 6+ riadkov pod sebou (Cena/PDF/VR/Video/Galéria/
       Stiahnuť/Zdieľať/Kontakt) nezmestí bez scrollu (bug, opravené).
       Platí pre OBIDVE skupiny (.detail-actions aj .detail-actions-
       secondary zdieľajú tú istú triedu) - PDF/VR/Video/Fotogaléria AJ
       Stiahnuť médiá/Zdieľať. Text sa smie zalomiť na 2 riadky vnútri
       tlačidla (dlhšie popisky ako "Stiahnuť médiá (N)"). */
    .detail-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px;
    }
    /* Iba tlačidlá VNÚTRI .detail-actions (mriežka) - "Kontaktovať
       predajcu" (.detail-contact) NIE JE .detail-actions potomok, zdieľa
       len rovnakú .detail-action-btn triedu, a musí si zachovať flex:1 1
       auto (plná šírka svojho vlastného flex riadku, bod 3 zadania) -
       príliš všeobecný selektor tu bol bug (opravené). */
    .detail-actions .detail-action-btn {
        flex: none;
        padding: 5px 4px;
        font-size: 0.48rem;
        line-height: 1.25;
        white-space: normal;
        /* 6px -> 12px, sekcia zadania "Rozšírenie opravy artefaktu na
           zaoblených rohoch..." - zosúladené s base pravidlom (css/detail.css)
           pre konzistenciu; tento @container blok je mŕtvy kód (sekcia 1,
           CLAUDE.md), žiadny reálny vizuálny dopad. */
        border-radius: 12px;
    }
    /* "Kontaktovať predajcu" - samostatné, plná šírka, najvýraznejšie
       (bod 3 zadania) - vlastná kompaktná veľkosť, nezdieľaná s mriežkou
       vyššie (zostáva o niečo výraznejšie ako ostatné tlačidlá). */
    .detail-contact .detail-action-btn {
        padding: 7px 8px;
        font-size: 0.56rem;
        /* 6px -> 12px, rovnaký dôvod ako vyššie. */
        border-radius: 12px;
    }

    /* ----------------------------------------------------------------------
       KONTAKTNÝ FORMULÁR "DOPYT NA BYT" (css/detail.css) - sekcia zadania
       "Mobilná úprava formulára 'Dopyt na byt' (KONTAKTOVAŤ PREDAJCU) -
       iba mobilný breakpoint". Bug (potvrdený screenshotom): modal
       presahoval výšku viewportu, pole Správa aj tlačidlo Odoslať boli
       neviditeľné bez scrollu. Fix: hlavička (.contact-form-title) a
       tlačidlo (.contact-form-submit) sú flex-shrink:0 (vždy viditeľné),
       scroll je IBA vo vnútri .contact-form-body (samotné polia). Meno +
       Telefón vedľa seba cez CSS grid, s nth-of-type mapovaním na
       pomenované grid oblasti - BEZ zásahu do poradia elementov v DOM
       (js/detail.js), takže PC/tablet/touch table (mimo tohto @container
       bloku) zostávajú úplne bezo zmeny.
       -------------------------------------------------------------------- */
    .contact-form-card {
        display: flex;
        flex-direction: column;
        max-height: 92cqh;
        overflow: hidden;
        padding: 14px;
    }
    .contact-form-title {
        flex-shrink: 0;
        margin-bottom: 8px;
        font-size: 0.85rem;
        padding-right: 20px;
    }
    .contact-form-fields {
        flex: 1 1 auto;
        min-height: 0;
        gap: 8px;
    }
    .contact-form-submit {
        flex-shrink: 0;
        padding: 8px;
        font-size: 0.75rem;
    }

    /* Jediná scrollovateľná oblasť formulára - Meno/Telefón vedľa seba
       (2 stĺpce), E-mail aj Správa ostávajú na celú šírku vlastného
       riadku (zadanie, bod 1). */
    .contact-form-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "meno telefon"
            "email email"
            "sprava sprava";
        gap: 6px 10px;
        padding: 2px; /* focus rámik polí sa neorezáva o okraj/scrollbar */
    }
    .contact-form-body > label:nth-of-type(1) { grid-area: meno; }
    .contact-form-body > label:nth-of-type(2) { grid-area: email; }
    .contact-form-body > label:nth-of-type(3) { grid-area: telefon; }
    .contact-form-body > label:nth-of-type(4) { grid-area: sprava; }

    /* Kompaktnejšie rozostupy label->pole (zadanie, bod 2) - citeľne, nie
       drasticky (6px → 3px). */
    .contact-form-label {
        gap: 3px;
        font-size: 0.62rem;
    }
    .contact-form-input,
    .contact-form-textarea {
        padding: 6px 8px;
        font-size: 0.75rem;
    }
    /* Predvolene cca 2 riadky namiesto rows="4" (HTML atribút, js/
       detail.js) - resize:vertical (css/detail.css) ostáva aktívne,
       používateľ si pole môže sám roztiahnuť (zadanie, bod 3). */
    .contact-form-textarea {
        height: 36px;
        min-height: 32px;
    }
}