/* css/detail.css */

/* ==========================================================================
   🗂️ DETAIL BYTU - DOČASNÁ VRSTVA NAD KONFIGURÁTOROM (sekcia 35-44)
   ========================================================================== */
#apartment-detail-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}

#apartment-detail-panel.detail-hidden {
    display: none;
}

.detail-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(var(--surface-backdrop-rgb) / 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.detail-card {
    position: relative;
    /* Širší modal - 2 stĺpce namiesto 1 potrebujú viac miesta na šírku,
       aby sa ani jeden nezovrel (zadanie).

       K-ŠKÁLOVANÉ (sekcia zadania "Detail bytu na mobile/tablete musí mať
       horizontálny (wide) tvar... rovnako ako PC") - PREDTÝM bola táto
       šírka NEZÁVISLÁ od --ui-scale-kompenzacia (flat 760px), zatiaľ čo
       TAKMER VŠETKO vnútri modalu (padding nižšie, .detail-columns gap,
       .detail-col flex-basis, font-size/padding každého jednotlivého
       prvku v detail.css) K-ŠKÁLUJE. Na vysokom K (dotykové zariadenia,
       js/gate.js jeDotykoveZariadenie) tak obsah potreboval proporčne
       viac VÝŠKY v RVNAKEJ (neškálovanej) šírke - modal sa namiesto
       širokého/horizontálneho tvaru naťahoval do výšky až takmer po
       max-height (zmerané na Galaxy S20 FE: aspect ratio kleslo z 2.23
       na PC na 0.85 - z "výrazne širší než vyšší" na "vyšší než širší").
       Škálovaním ŠÍRKY rovnakým K faktorom ako obsah rastie VÝŠKA aj
       ŠÍRKA úmerne spolu - tvar (aspect ratio) modalu tak zostáva na
       KAŽDOM K rovnaký ako na PC (K=1), bez zásahu do samotného obsahu.
       "94%" strop ostáva nezávislý od K (poistka proti pretečeniu cez
       #apartment-detail-panel na extrémne vysokom K/úzkom kontajneri). */
    width: min(calc(760px * var(--ui-scale-kompenzacia, 1)), 94%);
    max-height: 85cqh; /* voči skutočnej výške konfigurátora, nie browser viewportu */
    overflow-y: auto;
    background: rgb(var(--surface-card-rgb) / 0.92);
    border: 1px solid rgb(var(--accent-rgb) / 0.2);
    border-radius: 16px;
    padding: calc(28px * var(--ui-scale-kompenzacia, 1));
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
}

/* HORIZONTÁLNE 2-stĺpcové rozloženie (namiesto pôvodného jedného zvislého
   stĺpca) - ĽAVÝ "O byte" / PRAVÝ "Akcie", rovnako široké. Zalomí sa na
   zvislé stohovanie iba ak by sa stĺpce reálne nezmestili vedľa seba
   (veľmi úzky kontajner) - min-width na .detail-col nižšie to rieši.
   gap K-škálovaný (rovnaký dôvod ako .detail-card width vyššie) - inak by
   pri vysokom K zaberal proporčne menej miesta z celkovej (teraz tiež
   K-škálovanej) šírky karty, než na PC. */
.detail-columns {
    display: flex;
    flex-wrap: wrap;
    gap: calc(28px * var(--ui-scale-kompenzacia, 1));
}

.detail-col {
    /* flex-basis K-škálovaný (rovnaký dôvod) - udržuje POMER medzi šírkou
       stĺpca a jeho K-škálovaným obsahom (padding/font-size/medzery
       vnútri) konzistentný na každom K, nie iba celkovú šírku karty. */
    flex: 1 1 calc(260px * var(--ui-scale-kompenzacia, 1));
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Pravý stĺpec je flex-column - "Kontaktovať predajcu" sa margin-top:auto
   pridŕža spodku stĺpca (zadanie: "na spodku, najvýraznejšie"), aj keď je
   ľavý stĺpec (parametre) vyšší než obsah pravého. */
.detail-col-actions .detail-contact {
    margin-top: auto;
}

.detail-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: calc(32px * var(--ui-scale-kompenzacia, 1));
    height: calc(32px * var(--ui-scale-kompenzacia, 1));
    border-radius: 50%;
    border: 1px solid var(--btn-secondary-border);
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

/* Rozšírený neviditeľný dotykový cieľ - rovnaký vzor ako
   .porovnanie-frame-remove::before (css/porovnanie.css), IBA na dotykových
   zariadeniach (na rozdiel od Porovnania, kde je univerzálny - tu sa
   zámerne scopuje, aby "0px zmena" na PC/tablete-so-myšou bolo triviálne
   pravdivé aj formálne, nielen vizuálne). .detail-close-btn je containing
   block (position:absolute) - vzhľad ikony (✕) sa vôbec nemení, iba sa
   pridáva neviditeľný štvorec navyše okolo nej.
   73px zvolené rovnako ako pri Porovnaní: kým je K aktívne (dotykové
   zariadenie, scale < uiMinScaleFactor), platí K*scale == uiMinScaleFactor
   VŽDY, teda 73px * 0.6 (dnešná uiMinScaleFactor) = 43.8px reálnych
   (po-transform) px, zaokrúhlené na cieľových ~44px, nezávisle od
   konkrétneho zariadenia/scale.
   NIE symetrické centrovanie na tlačidlo (translate(-50%,-50%), ako pri
   Porovnaní) - .detail-card má overflow-y:auto (nezmenené, mimo rozsahu) a
   CSS "overflow interdependency" pravidlo (overflow-x sa NEDÁ nastaviť na
   visible, kým je overflow-y iné než visible - overené priamo, aj
   explicitný override cez !important zostal computed ako auto) by
   symetrické presiahnutie za pravý/horný okraj karty (potvrdené meraním:
   scrollWidth > clientWidth) premenilo na skutočný scrollovateľný
   horizontálny overflow. Namiesto toho: `right`/`top` (nie `left`/`bottom`,
   nie transform) ukotvia hitbox PRESNE na pravý/horný okraj karty (button
   je containing block, jeho pravý/horný okraj je od okraja karty vzdialený
   presne o TEN ISTÝ flat 16px ako `top`/`right` na .detail-close-btn
   vyššie, preto -16px presne vykompenzuje tento odstup nezávisle od K aj
   od konkrétneho zariadenia/rozlíšenia - žiadne pevné číslo odvodené z
   merania, iba priamy dôsledok existujúcej 16px pozície tlačidla). Celá
   "chýbajúca" časť (73px*K mínus týchto 16px) sa presunie doľava/nadol, do
   VNÚTRA karty namiesto von z nej - súčet oboch rozmerov ostáva 73px*K,
   nezmenené, iba zarovnanie.
   DÔLEŽITÉ - `top:-16px; right:-16px` PRIAMO ZÁVISÍ od `top:16px; right:16px`
   na .detail-close-btn vyššie (presne opačné znamienko, aby sa hitbox
   zarovnal na roh karty) - pri zmene tejto pozície tlačidla treba
   zodpovedajúco upraviť aj tieto dve hodnoty, inak hitbox buď znova
   presiahne kartu (spôsobí scrollovateľný overflow), alebo sa od okraja
   karty vzdiali (zbytočne strmý zásah smerom dovnútra).
   VEDOMÝ PREKRYV s .detail-price ("CENA S DPH...") - presunutím prebytku
   dovnútra karty (namiesto von z nej) hitbox zasahuje do pravej časti
   cenového riadku (zmerané a odsúhlasené). .detail-price je čisto
   informačný <div>, nie klikateľný prvok - ťuknutie na jeho koniec vedľa
   krížika detail zatvorí, žiadny iný ovládací prvok o klik nepríde. */
@media (hover: none) and (pointer: coarse) {
    .detail-close-btn::before {
        content: '';
        position: absolute;
        top: -16px;
        right: -16px;
        width: calc(73px * var(--ui-scale-kompenzacia, 1));
        height: calc(73px * var(--ui-scale-kompenzacia, 1));
    }
}

.detail-close-btn:hover {
    background: var(--btn-secondary-bg-hover);
    border-color: var(--btn-secondary-border-hover);
    color: var(--btn-secondary-text-hover);
}

.detail-close-btn:active {
    background: var(--btn-secondary-bg-active);
    border-color: var(--btn-secondary-border-active);
    color: var(--btn-secondary-text-active);
}

.detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(10px * var(--ui-scale-kompenzacia, 1));
    padding-right: 32px;
    /* flex-wrap - poistka pre extrémne úzke stĺpce (napr. veľmi malé mobilné
       zariadenia s vysokou --ui-scale-kompenzacia), kde by sa BLOK label inak
       vizuálne prekrýval so susednou cenovou časťou. Na PC/touch table/tablete
       je stĺpec dostatočne široký, takže sa toto nikdy neprejaví (jeden riadok
       ako doteraz). */
    flex-wrap: wrap;
    row-gap: calc(4px * var(--ui-scale-kompenzacia, 1));
    align-content: flex-start;
}

.detail-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-strong);
    letter-spacing: 0.5px;
}

/* "BLOK A" medzi ID bytu a stavovým odznakom (sekcia zadania "Pridať
   'BLOK [X]' label do detailu bytu") - zlatá (var(--btn-secondary-text-
   active), ROVNAKÁ premenná ako "BLOK A" nadpis v paneli "Prehľad bytov",
   css/apartments.css, .apartments-summary-blok - konzistencia). flex-shrink:0
   - .detail-title (byt ID) môže byť dlhší na niektorých projektoch, tento
   krátky label sa nesmie stlačiť/zalomiť skôr než by ustúpil dlhší sused. */
.detail-blok-label {
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--btn-secondary-text-active);
}

.detail-badge {
    font-size: 0.68rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: calc(4px * var(--ui-scale-kompenzacia, 1)) calc(10px * var(--ui-scale-kompenzacia, 1));
    border-radius: 5px;
}

/* Farby stavu - jeden zdroj pravdy je STATUS_COLORS (js/state.js);
   tu iba zodpovedajúce pozadie/text pre odznak v detaile (sekcia 3, 9).
   Špeciálna ponuka (4. rovnocenná hodnota Dostupnost) je vždy zelená,
   rovnaká ako "volny" - zdieľa s ním ten istý selektor/pravidlo, žiadna
   duplicitná farba. */
.detail-badge.badge-volny,
.detail-badge.badge-specialna_ponuka { background: rgba(46, 204, 113, 0.12); color: #2ecc71; }
.detail-badge.badge-rezervovany { background: rgba(230, 126, 34, 0.12); color: #e67e22; }
.detail-badge.badge-predany { background: rgba(231, 76, 60, 0.12); color: var(--status-danger-light); }

/* 🧡 Srdiečko "obľúbený byt" (sekcia zadania "Implementácia 'Obľúbené
   byty'", bod 4) - ZA stavovým odznakom vyššie, IBA pre Dostupný/Špeciálnu
   ponuku (js/detail.js, jeStavDostupny podmienka - element sa pre
   Rezervovaný/Predaný vôbec nevykreslí). Rovnaký kruhový chip vzor ako
   #app-info-trigger (css/layout.css), iba menší (radí sa medzi ostatné
   texty v riadku, nie samostatná headerová skupina). .favorites-heart-icon/
   .is-active zdieľané s headerovým tlačidlom #favorites-trigger (rovnaká
   trieda, css/layout.css) - jedna spoločná definícia vyplneného/červeného
   stavu, iba veľkosť ikony tu prepísaná (menší chip). */
.detail-favorite-btn {
    flex-shrink: 0;
    width: calc(24px * var(--ui-scale-kompenzacia, 1));
    height: calc(24px * var(--ui-scale-kompenzacia, 1));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--btn-secondary-text);
    background: var(--btn-secondary-bg-nested);
    border: 1px solid var(--btn-secondary-border);
    cursor: pointer;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.detail-favorite-btn:hover,
.detail-favorite-btn:focus-visible {
    background: var(--btn-secondary-bg-hover);
    border-color: var(--btn-secondary-border-hover);
    color: var(--btn-secondary-text-hover);
}

.detail-favorite-btn .favorites-heart-icon {
    width: calc(14px * var(--ui-scale-kompenzacia, 1));
    height: calc(14px * var(--ui-scale-kompenzacia, 1));
}

.detail-favorite-btn.is-active {
    color: #e0473e;
    border-color: rgba(224, 71, 62, 0.4);
}

.detail-favorite-btn.is-active .favorites-heart-icon path {
    fill: currentColor;
}

/* Rámik špeciálnej ponuky (sekcia 5) - nadpis + jedna veta na riadok
   (viď js/detail.js, vykresliDetailBytu). Zobrazuje sa iba pre byty so
   status === "specialna_ponuka" A vyplneným promo textom. */
.detail-special-offer {
    font-size: 0.82rem;
    color: #eab308;
    background: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.25);
    border-radius: 8px;
    padding: calc(12px * var(--ui-scale-kompenzacia, 1)) calc(14px * var(--ui-scale-kompenzacia, 1));
}

.detail-special-offer-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
}

.detail-special-offer p {
    margin: 0;
    line-height: 1.5;
}

.detail-special-offer p + p {
    margin-top: 2px;
}

/* Riadky promo textu - farba (biela) sa líši od nadpisu (žltá), font-size
   je ZÁMERNE zhodný s .detail-special-offer-title (0.72rem, sekcia zadania
   "Oprava textu 'ŠPECIÁLNA PONUKA'..." - predtým 0.92rem, väčší než nadpis).
   Veľké písmená - zdrojový text ostáva v pôvodnom tvare, iba vizuálne
   zobrazený uppercase. */
.detail-special-offer-line {
    color: var(--text-strong);
    font-weight: 500;
    font-size: 0.72rem;
    text-transform: uppercase;
}

.detail-params {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}

.detail-param {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.detail-param-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.detail-param-value {
    font-size: 0.92rem;
    color: var(--text-strong);
    font-weight: 500;
}

.detail-price {
    font-size: 1.4rem;
    font-weight: 700;
    color: rgb(var(--accent-rgb));
    border-top: 1px solid rgb(var(--hairline-rgb) / 0.06);
    padding-top: 14px;
}

.detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Pevné rozloženie "po dvoch" (sekcia zadania "Detail bytu - finálny zápis,
   bod D") - scoped LEN na tlačidlá vnútri .detail-actions (médiá aj
   .detail-actions-secondary zdieľajú túto triedu, obe teda dostávajú
   rovnaké dvojstĺpcové správanie) - .detail-contact (KONTAKTOVAŤ PREDAJCU)
   ani kontaktný formulár/kontextová správa NIE SÚ potomkami .detail-actions,
   tento selektor sa ich netýka (overené priamo v DOM štruktúre, žiadny iný
   komponent v appke .detail-actions ako rodiča nepoužíva). Nepárne posledné
   tlačidlo v riadku prirodzene zaberie celý riadok vďaka flex-wrap (žiadne
   :nth-child pravidlo netreba - jediné tlačidlo v poslednom, neúplnom
   riadku sa vďaka flex:1 1 calc(50% - 5px) so shrink aj grow roztiahne, ak
   je v riadku samo). #detail-download-all má VLASTNÝ riadok vynútený
   explicitným flex-basis:100% (šírka jeho obsahu, "Stiahnuť médiá (n)",
   pri páde na 50% stĺpec nevošla na jeden riadok - zmerané v predošlom
   kole, potvrdené používateľom ako dôvod tohto pravidla). */
.detail-actions .detail-action-btn {
    flex: 1 1 calc(50% - 5px);
}

#detail-download-all {
    flex-basis: 100%;
}

.detail-action-btn {
    flex: 1 1 auto;
    text-align: center;
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border: 1px solid var(--btn-secondary-border);
    padding: calc(10px * var(--ui-scale-kompenzacia, 1)) calc(14px * var(--ui-scale-kompenzacia, 1));
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* 8px -> 12px, sekcia zadania "Rozšírenie opravy artefaktu na
       zaoblených rohoch na ďalšie miesta appky" (nadväzuje na commit
       6743e54). */
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
    /* .detail-action-btn je <button> - PREDTÝM chýbalo font-family:inherit,
       ktoré majú VŠETKY tlačidlá bottom row (#den-noc-trigger/#okolie-
       trigger/#vr-tours-trigger, css/layout.css) - <button> má vlastný UA
       (prehliadačový) predvolený font, ktorý sa NEDEDÍ automaticky z body,
       takže bez tejto deklarácie appka renderovala Arial namiesto
       zdieľaného body stacku (Segoe UI Semibold v tomto prostredí).
       Zámerne ZDIEĽANÉ aj s .contact-form-submit a #kontextova-sprava-
       nie/ano (obe tiež .detail-action-btn) - rovnaká chyba, jeden zdroj
       pravdy, potvrdené používateľom. */
    font-family: inherit;
}

/* Ikony v tlačidlách detailu (STIAHNUŤ MÉDIÁ/ZDIEĽAŤ, js/detail.js) -
   nahrádzajú predošlé textové Unicode glyfy ⬇/🔗 inline SVG v štýle
   .favorites-heart-icon (stroke="currentColor", rovnaký mechanizmus).
   Jedna zdieľaná trieda pre veľkosť/medzeru k textu (nie inline štýl) -
   výška 12px (nezväčšuje výšku tlačidla, tá je riadená font-size/padding
   textu, nie ikonou) a medzera k textu 5px (zhodné pre obe ikony, zmerané
   v predošlom kole ako 5.0px). Flat px (nie K-kompenzované) - rovnaký
   mechanizmus ako border-radius/letter-spacing na tomto tlačidle, ktoré
   tiež nepoužívajú calc(*K). */
.detail-action-icon {
    width: 12px;
    height: 12px;
    vertical-align: -1px;
    margin-right: 5px;
    flex-shrink: 0;
}

.detail-action-btn:hover {
    background: var(--btn-secondary-bg-hover);
    color: var(--btn-secondary-text-hover);
    border-color: var(--btn-secondary-border-hover);
}

.detail-action-btn:active {
    background: var(--btn-secondary-bg-active);
    border-color: var(--btn-secondary-border-active);
    color: var(--btn-secondary-text-active);
}

/* Tlačidlo na stiahnutie všetkých médií bytu naraz (galéria + PDF ako
   .zip) - rovnaký SECONDARY vzhľad ako ostatné akcie (žiadne osobitné
   farebné odlíšenie - teplý accent je vyhradený pre PRIMARY kategóriu). */
.detail-action-download-all:disabled {
    background: var(--btn-disabled-bg);
    color: var(--btn-disabled-text);
    border-color: var(--btn-disabled-border);
    opacity: 1;
    cursor: default;
}

/* Krátke potvrdenie (napr. "Odkaz skopírovaný") */
.detail-toast {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translate(-50%, 8px);
    background: rgb(var(--surface-panel-rgb) / 0.95);
    border: 1px solid rgb(var(--accent-rgb) / 0.35);
    color: var(--text-strong);
    font-size: 0.76rem;
    font-weight: 500;
    padding: calc(10px * var(--ui-scale-kompenzacia, 1)) calc(18px * var(--ui-scale-kompenzacia, 1));
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    max-width: 90%;
    text-align: center;
    z-index: 10;
}

.detail-toast.detail-toast-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.detail-contact {
    display: flex;
}

.detail-action-primary {
    flex: 1 1 auto;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-color: transparent;
}

.detail-action-primary:hover {
    background: var(--btn-primary-bg-hover);
    color: var(--btn-primary-text);
    border-color: transparent;
    box-shadow: var(--btn-primary-shadow-hover);
}

.detail-action-primary:active {
    background: var(--btn-primary-bg-active);
    color: var(--btn-primary-text);
    border-color: transparent;
}

/* ==========================================================================
   🖼️ GALÉRIA - LIGHTBOX (sekcia 117.4), nad detailom (Z-Index: 300)
   ========================================================================== */
#gallery-lightbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
}

#gallery-lightbox.gallery-hidden {
    display: none;
}

.gallery-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(var(--surface-deep-rgb) / 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.gallery-lightbox-image {
    position: relative;
    max-width: 78%;
    max-height: 78%;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
}

.gallery-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: calc(36px * var(--ui-scale-kompenzacia, 1));
    height: calc(36px * var(--ui-scale-kompenzacia, 1));
    border-radius: 50%;
    border: 1px solid var(--btn-secondary-border);
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    cursor: pointer;
    font-size: 0.95rem;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.gallery-lightbox-close:hover {
    background: var(--btn-secondary-bg-hover);
    border-color: var(--btn-secondary-border-hover);
    color: var(--btn-secondary-text-hover);
}

.gallery-lightbox-close:active {
    background: var(--btn-secondary-bg-active);
    border-color: var(--btn-secondary-border-active);
    color: var(--btn-secondary-text-active);
}

.gallery-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: calc(44px * var(--ui-scale-kompenzacia, 1));
    height: calc(44px * var(--ui-scale-kompenzacia, 1));
    border-radius: 50%;
    border: 1px solid var(--btn-secondary-border);
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.gallery-lightbox-nav:hover {
    background: var(--btn-secondary-bg-hover);
    border-color: var(--btn-secondary-border-hover);
    color: var(--btn-secondary-text-hover);
}

.gallery-lightbox-nav:active {
    background: var(--btn-secondary-bg-active);
    border-color: var(--btn-secondary-border-active);
    color: var(--btn-secondary-text-active);
}

.gallery-lightbox-nav:disabled {
    background: var(--btn-disabled-bg);
    color: var(--btn-disabled-text);
    border-color: var(--btn-disabled-border);
    cursor: default;
    pointer-events: none;
}

.gallery-lightbox-prev { left: 20px; }
.gallery-lightbox-next { right: 20px; }

.gallery-lightbox-counter {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgb(var(--surface-panel-rgb) / 0.75);
    border: 1px solid rgb(var(--hairline-rgb) / 0.1);
    border-radius: 20px;
    padding: calc(6px * var(--ui-scale-kompenzacia, 1)) calc(16px * var(--ui-scale-kompenzacia, 1));
    font-size: 0.75rem;
    color: var(--text-body);
    font-weight: 600;
}

/* ==========================================================================
   ✉️ KONTAKTNÝ FORMULÁR - "Kontaktovať predajcu", rovnaký jazyk ako detail
   a galéria (Z-Index: 300, mutuálne exkluzívne s galériou v praxi).

   .contact-form-fields (<form>) obsahuje IBA 2 priame potomky - vnútorný
   .contact-form-body (skutočné polia Meno/E-mail/Telefón/Správa) a
   tlačidlo .contact-form-submit - namiesto pôvodných 5 (4 polia + tlačidlo
   priamo v riadku). Dôvod (sekcia zadania "Mobilná úprava formulára 'Dopyt
   na byt'"): na mobilnom breakpointe (css/responsive.css) potrebuje
   scrollovať IBA .contact-form-body (polia), NIE hlavička/tlačidlo
   ODOSLAŤ - vyžaduje si to vlastnú vrstvu na oddelenie "scrollovateľné
   telo" od "fixné navrchu/dole". Na PC/tablet/touch table (TU, mimo
   media query) je toto ROZDELENIE VIZUÁLNE NEVIDITEĽNÉ - .contact-form-
   fields aj .contact-form-body zdieľajú rovnaký gap (14px), takže
   výsledné rozostupy medzi VŠETKÝMI poľami aj tlačidlom ostávajú presne
   ako predtým (žiadna zmena mimo mobilného breakpointu).
   ========================================================================== */
#contact-form-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
}

#contact-form-overlay.contact-hidden {
    display: none;
}

.contact-form-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(var(--surface-backdrop-rgb) / 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.contact-form-card {
    position: relative;
    width: min(400px, 90%);
    max-height: 85cqh;
    overflow-y: auto;
    background: rgb(var(--surface-card-rgb) / 0.95);
    border: 1px solid rgb(var(--accent-rgb) / 0.2);
    border-radius: 16px;
    padding: calc(28px * var(--ui-scale-kompenzacia, 1));
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
}

.contact-form-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-strong);
    letter-spacing: 0.5px;
    margin-bottom: 18px;
    padding-right: 24px;
}

.contact-form-fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Vnútorný wrapper okolo SAMOTNÝCH polí (Meno/E-mail/Telefón/Správa) -
   rovnaký gap ako .contact-form-fields vyššie, takže na PC/tablet/touch
   table (mimo mobilného breakpointu, css/responsive.css) vyzerá úplne
   rovnako, ako keby polia boli priamo v .contact-form-fields (žiadna
   pridaná/chýbajúca medzera). Mobilný breakpoint mení TENTO wrapper na
   grid (Meno+Telefón vedľa seba) a robí z neho vlastnú scrollovateľnú
   oblasť - .contact-form-fields naopak ostáva zdieľaný flex stĺpec pre
   [.contact-form-body, .contact-form-submit] na VŠETKÝCH breakpointoch. */
.contact-form-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.contact-form-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    font-weight: 600;
}

.contact-form-input,
.contact-form-textarea {
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--text-strong);
    background: rgb(var(--hairline-rgb) / 0.04);
    border: 1px solid rgb(var(--hairline-rgb) / 0.1);
    border-radius: 8px;
    padding: calc(10px * var(--ui-scale-kompenzacia, 1)) calc(12px * var(--ui-scale-kompenzacia, 1));
    outline: none;
    transition: border-color 0.2s ease;
}

.contact-form-input:focus,
.contact-form-textarea:focus {
    border-color: rgb(var(--accent-rgb) / 0.5);
}

.contact-form-textarea {
    resize: vertical;
    min-height: calc(70px * var(--ui-scale-kompenzacia, 1));
}

/* Pole Správa = zamknutý blok (hore) + textarea (dole) ako JEDNO pole: spoločný rám,
   bez medzery, blok bez spodného a textarea bez horného zaoblenia. */
.contact-form-message-box {
    display: flex;
    flex-direction: column;
}

.contact-form-locked {
    display: block;
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.45;
    text-transform: none;
    letter-spacing: normal;
    color: var(--text-muted);
    background: rgb(var(--hairline-rgb) / 0.02);
    border: 1px solid rgb(var(--hairline-rgb) / 0.1);
    border-radius: 8px 8px 0 0;
    padding: calc(10px * var(--ui-scale-kompenzacia, 1)) calc(12px * var(--ui-scale-kompenzacia, 1));
    cursor: default;
    user-select: text;
    -webkit-user-select: text;
}

.contact-form-locked-line {
    display: block;
}

.contact-form-message-box .contact-form-textarea {
    border-radius: 0 0 8px 8px;
    margin-top: -1px;
    min-height: calc(54px * var(--ui-scale-kompenzacia, 1));
}

.contact-form-message-box .contact-form-textarea:focus {
    position: relative;
}

.contact-form-submit {
    margin-top: 4px;
    width: 100%;
    order: 1;
}

/* Obal pravej časti (Správa, honeypot, súhlas, výzva, ODOSLAŤ): bez boxu, deti sú priame flex položky formulára.
   ODOSLAŤ je v DOM pred hláškou (poradie fokusu sa nemení), vizuálne ide cez order za ňu (pôvodné poradie). */
.contact-form-right {
    display: contents;
}

/* --- Odosielanie POST-om (Turnstile, súhlas, stavy) -----------------------
   Všetko scoped na .contact-form-*; zdieľané .detail-action-btn/.detail-close-btn
   sa nemenia (triedu .detail-action-btn zdieľa aj kontextová správa). */

/* Autorské display:flex na <form> by prebilo atribút hidden (stav úspechu). */
.contact-form-fields[hidden] {
    display: none;
}

/* Honeypot: mimo layoutu a mimo obrazovky, ale NIE display:none (tie polia
   boty často preskakujú). aria-hidden + tabindex -1 v markupe ho skrývajú
   pre čítačky aj klávesnicu. */
.contact-form-hp {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-form-consent {
    display: flex;
    align-items: flex-start;
    gap: calc(10px * var(--ui-scale-kompenzacia, 1));
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--text-muted);
    cursor: pointer;
}

.contact-form-consent-input {
    flex: none;
    width: calc(16px * var(--ui-scale-kompenzacia, 1));
    height: calc(16px * var(--ui-scale-kompenzacia, 1));
    margin: 0;
    accent-color: rgb(var(--accent-strong-rgb));
    cursor: pointer;
}

.contact-form-consent .contact-form-consent-link {
    color: rgb(var(--accent-strong-rgb));
    text-decoration: underline;
}

/* Kontajner widgetu Turnstile. Bez viditeľnej výzvy (interaction-only) má
   výšku 0 a ruší medzeru flex gapu (14px); JS (prisposobTurnstileKontajner)
   mu pri zobrazení výzvy nastaví post-scale rozmer a trieda -visible vráti
   medzeru. Vnútro je K-kompenzované (scale max. K, najviac na šírku karty). */
.contact-form-turnstile {
    height: 0;
    margin-top: -14px;
}

.contact-form-turnstile.contact-form-turnstile-visible {
    margin-top: 0;
}

.contact-form-turnstile .contact-form-turnstile-inner {
    display: inline-block;
    transform: scale(var(--contact-form-turnstile-scale, var(--ui-scale-kompenzacia, 1)));
    transform-origin: 0 0;
}

.contact-form-error {
    display: none;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--status-danger-light);
}

.contact-form-error.contact-form-error-visible {
    display: block;
}

/* Odosielanie: neaktívne tlačidlo (vyššia špecificita než .detail-action-primary:hover). */
.detail-action-btn.detail-action-primary.contact-form-submit:disabled,
.detail-action-btn.detail-action-primary.contact-form-submit:disabled:hover {
    background: var(--btn-primary-bg);
    box-shadow: none;
    opacity: 0.6;
    cursor: progress;
}

/* --- Dvojstĺpcové rozloženie formulára: IBA mobil/tablet (K>1) -------------
   Pod .ui-k-aktivne (trieda na <html>, js/scale.js), NIE cez media query
   hover/pointer (zasiahla by aj touch-desktop, kde je K=1 a formulár ostáva
   ako na PC). Čisté CSS bez zmeny DOM a JS: .contact-form-body má
   display:contents, takže jeho štyri <label> sú priamo bunky gridu
   <form class="contact-form-fields"> spolu so súhlasom, výzvou, hláškou a
   tlačidlom. Hlavička (nadpis + krížik) je mimo <form>, teda cez celú šírku.
   Pomer stĺpcov 5:7; minimum ľavého stĺpca 310px*K = nameraný text 43-znakového
   e-mailu (306px*K na všetkých meraných zariadeniach, nezávisle od K) + rezerva.
   Šírka karty: min(1450px*K, 100% - 24px): na telefónoch (plátno ~80 % viewportu)
   vyplní plátno (~79-81 % viewportu), na tablete 1024x768 dá 85 % viewportu.
   Ľavý stĺpec: Meno, E-mail, Telefón. Pravý: Správa (rovnaký spoločný rám)
   a pod ním súhlas. Pätička: výzva vľavo, ODOSLAŤ vpravo. Medzery medzi
   riadkami sú margin-top na položkách (row-gap 0), aby prázdna hláška a
   výzva bez widgetu (výška 0) nezaberali ani medzeru. */
.ui-k-aktivne .contact-form-card {
    width: min(calc(1450px * var(--ui-scale-kompenzacia, 1)), calc(100% - 24px));
}

.ui-k-aktivne .contact-form-fields {
    display: grid;
    grid-template-columns: minmax(calc(310px * var(--ui-scale-kompenzacia, 1)), 5fr) minmax(0, 7fr);
    grid-template-rows: auto auto 1fr auto;
    column-gap: calc(24px * var(--ui-scale-kompenzacia, 1));
    row-gap: 0;
    align-items: start;
}

.ui-k-aktivne .contact-form-fields .contact-form-body {
    display: contents;
}

/* Atribút hidden musí prebiť display:grid vyššie (rovnaká špecificita 0,2,0 a neskoršie pravidlo vyhrávalo). */
.ui-k-aktivne .contact-form-fields[hidden] {
    display: none;
}

.ui-k-aktivne .contact-form-fields .contact-form-body > .contact-form-label:nth-child(1) { grid-area: 1 / 1; }
.ui-k-aktivne .contact-form-fields .contact-form-body > .contact-form-label:nth-child(2) { grid-area: 2 / 1; margin-top: 14px; }
.ui-k-aktivne .contact-form-fields .contact-form-body > .contact-form-label:nth-child(3) { grid-area: 3 / 1; margin-top: 14px; }

/* Pravý stĺpec = samostatný zásobník (obal .contact-form-right): label SPRÁVA, zamknutý blok a hneď pod ním riadok
   súhlas (flex 1) + ODOSLAŤ (podľa obsahu, vpravo, zvislo na stred); medzi súhlasom a ODOSLAŤ je pri viditeľnej výzve
   Turnstile (v DOM je medzi nimi, poradie fokusu ostáva). Obal je v riadkoch 1-3, riadok 3 je 1fr, takže jeho výška
   nepresúva Meno/E-mail/Telefón; voľné miesto je pod riadkom súhlas + ODOSLAŤ. Hláška je v riadku 4 cez celú šírku. */
.ui-k-aktivne .contact-form-fields .contact-form-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    column-gap: calc(24px * var(--ui-scale-kompenzacia, 1));
    grid-area: 1 / 2 / 4 / 3;
    align-self: start;
    min-width: 0;
}

.ui-k-aktivne .contact-form-right > .contact-form-label {
    flex: 0 0 100%;
}

.ui-k-aktivne .contact-form-right > .contact-form-consent {
    flex: 1 1 0;
    min-width: 0;
    align-items: center;
    margin-top: 18px;
    position: relative;
}

/* Výzva: bez widgetu nulová šírka (inak by zaberala miesto v riadku); pri viditeľnom widgete jej šírku a výšku nastaví JS. */
.ui-k-aktivne .contact-form-right > .contact-form-turnstile {
    flex: none;
    width: 0;
    margin-top: 0;
}

.ui-k-aktivne .contact-form-right > .contact-form-turnstile.contact-form-turnstile-visible {
    margin-top: 18px;
}

.ui-k-aktivne .contact-form-right > .contact-form-submit {
    flex: none;
    order: 0;
    margin-top: 18px;
    width: auto;
    white-space: nowrap;
    font-size: 1.3rem;
}

.ui-k-aktivne .contact-form-fields .contact-form-error {
    grid-area: 4 / 1 / 5 / 3;
    margin-top: 14px;
}

/* Písmo (reálne px = rem * 9,6, lebo K*scale = 0,6): labely, súhlas, hláška 12 px; hodnoty polí, Správa a zamknutý
   blok 13,4 px; ODOSLAŤ 12,5 px. Nadpis karty sa nemení. */
.ui-k-aktivne .contact-form-label,
.ui-k-aktivne .contact-form-consent,
.ui-k-aktivne .contact-form-error {
    font-size: 1.25rem;
}

.ui-k-aktivne .contact-form-input,
.ui-k-aktivne .contact-form-textarea,
.ui-k-aktivne .contact-form-locked {
    font-size: 1.4rem;
}

/* Zamknutý blok: line-height 1,3 (predtým 1,45) kvôli väčšiemu písmu. Textarea správy sa na mobile/tablete skrýva
   (display:none: nie je viditeľná ani v poradí fokusu, hodnota ostáva prázdna, takže odoslaná správa je len zamknutý
   blok); blok je samostatná karta so zaoblením všetkých rohov, výška = obsah. */
.ui-k-aktivne .contact-form-locked {
    line-height: 1.3;
    border-radius: 8px;
}

.ui-k-aktivne .contact-form-message-box .contact-form-textarea {
    display: none;
}

/* Farby: existujúce tokeny. Labely, súhlas a zamknutý blok zosvetlené z --text-muted na --text-dim; hodnoty polí
   ostávajú --text-strong, takže zamknutý blok je o niečo tlmenejší než polia. */
.ui-k-aktivne .contact-form-label,
.ui-k-aktivne .contact-form-consent,
.ui-k-aktivne .contact-form-locked {
    color: var(--text-dim);
}

/* Checkbox: vizuálne ~20 reálnych px (33px * K * scale 0,6). Natívny input v <label> s textom, takže ťuk na text aj
   na checkbox ho prepne. Neviditeľný rozšírený hitbox (::before, súčasť labelu) ~40 reálnych px na výšku (67px * K). */
.ui-k-aktivne .contact-form-consent-input {
    width: calc(33px * var(--ui-scale-kompenzacia, 1));
    height: calc(33px * var(--ui-scale-kompenzacia, 1));
}

.ui-k-aktivne .contact-form-consent::before {
    content: '';
    position: absolute;
    left: calc(-10px * var(--ui-scale-kompenzacia, 1));
    right: 0;
    top: 50%;
    height: calc(67px * var(--ui-scale-kompenzacia, 1));
    transform: translateY(-50%);
}

/* Fokus v textovom poli karty (mobil/tablet, len Android): karta sa zarovná k hornému okraju plátna,
   aby ju nezakryla klávesnica. #contact-form-overlay centruje kartu cez flex (align-items:center),
   tu sa prepíše len zarovnanie a horný odsadzovač; bez prechodu, hneď. Polohu klávesnice appka
   nepozná (nezávisí od výšky klávesnice konkrétneho telefónu). Checkbox, tlačidlá a krížik posun
   nespúšťajú (selektor je len na .contact-form-input a .contact-form-textarea). Po strate fokusu sa
   pravidlo prestane uplatňovať a karta sa vráti na pôvodné miesto. iOS (WebKit, vlastnosť
   -webkit-touch-callout) sa vynecháva: Safari posúva obsah natívne. Rezerva 12px*K je po škálovaní
   plátna reálne ~7 px (K*scale = 0,6). */
@supports not (-webkit-touch-callout: none) {
    .ui-k-aktivne #contact-form-overlay {
        box-sizing: border-box;
        /* Návrat karty po strate fokusu je oneskorený (skok po 0,4 s, nie animácia): ťuk na krížik, ODOSLAŤ
           alebo súhlas pole najprv zablurí (mousedown) a click sa doručí až potom; keby sa karta vrátila hneď,
           click by minul cieľ. Posun hore (fokusované pravidlo nižšie) nemá prechod, nastane okamžite. */
        transition: align-items 1ms 0.4s allow-discrete, padding-top 1ms 0.4s;
    }

    .ui-k-aktivne #contact-form-overlay:has(.contact-form-input:focus, .contact-form-textarea:focus) {
        align-items: flex-start;
        padding-top: calc(12px * var(--ui-scale-kompenzacia, 1));
        transition: none;
    }

    /* DRUHÝ POSUN (pole E-mail a Telefón, len nízky landscape viewport): natívna klávesnica zaberá ~55 % výšky a pri
       fokuse v Mene by pole Telefón a riadok súhlas + ODOSLAŤ ostali pod ňou. Karta sa v týchto poliach posunie ešte o
       --contact-form-focus-shift-extra nahor (Meno ostáva s pôvodným posunom). JEDNA hodnota na JEDNOM mieste: ladí sa tu.
       Východisko 120px*K (K*scale = 0,6, teda reálne ~72 px); polohu klávesnice appka nepozná, doladí sa na zariadení.
       Mechanizmus: záporný margin-top na karte (nie transform: ten by z karty urobil containing block pre potomkov s
       position:fixed); karta presahuje nad horný okraj #app (overflow:hidden), nadpis a ✕ sú vtedy mimo obrazovky (zámer).
       Posun hore je okamžitý (pri fokuse v ktoromkoľvek poli transition:none), návrat po blur je oneskorený o 0,4 s ako pri
       overlayi (ťuk na ✕, ODOSLAŤ alebo checkbox pole najprv zablurí a click príde až potom). Platí len pod ui-k-aktivne
       a mimo iOS/WebKit (tento @supports blok); tablet (výška > 520 px) a PC (K=1) bez zmeny. */
    @media (max-height: 520px) {
        .ui-k-aktivne #contact-form-overlay {
            --contact-form-focus-shift-extra: calc(120px * var(--ui-scale-kompenzacia, 1));
        }

        .ui-k-aktivne #contact-form-overlay .contact-form-card {
            transition: margin-top 1ms 0.4s;
        }

        .ui-k-aktivne #contact-form-overlay:has(.contact-form-input:focus, .contact-form-textarea:focus) .contact-form-card {
            transition: none;
        }

        .ui-k-aktivne #contact-form-overlay:has(.contact-form-input[name="email"]:focus, .contact-form-input[name="telefon"]:focus) .contact-form-card {
            margin-top: calc(-1 * var(--contact-form-focus-shift-extra));
        }
    }
}

.contact-form-success {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.contact-form-success .contact-form-success-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-strong);
}

/* ==========================================================================
   📖 O PROJEKTE - lightbox otváraný klikom na logo/nadpis "BYTY RUŽINOV"
   (header, #app-logo, js/ui.js) - sekcia zadania "'BYTY RUŽINOV' logo/
   nadpis ako button otvárajúci lightbox s popisom projektu". Rovnaká
   štruktúra/vizuálny jazyk ako .contact-form-* vyššie (backdrop + jedna
   centrovaná karta + X, obsah generovaný dynamicky pri otvorení) - JEDEN
   stĺpec (text, žiadny formulár), preto vlastné (jednoduchšie) triedy
   namiesto znovupoužitia .contact-form-* priamo (predišlo by to mätúcim
   názvom typu ".contact-form-card" na obsahu, ktorý nie je formulár).
   ========================================================================== */
#o-projekte-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    /* Sekcia zadania "Zväčšiť lightbox 'BYTY RUŽINOV'... s garantovaným
       odstupom od headera a bottom row" - PADDING na tomto overlayi (nie
       max-height na karte samotnej) rezervuje presne priestor headera
       hore a spodného radu dole, TAKŽE flex centrovanie karty nižšie
       prebehne VNÚTRI tejto zmenšenej content-boxu - karta tak NIKDY
       nemôže prekryť header/bottom row, nech je akokoľvek vysoká (max-
       height:100% na karte sa vzťahuje na TENTO zmenšený priestor).
       Absolútne pozicovaný .o-projekte-backdrop nižšie (inset:0) ostáva
       NEDOTKNUTÝ týmto paddingom (počíta sa od padding-boxu rodiča, teda
       od jeho VONKAJŠIEHO okraja) - stále zaberá CELÚ obrazovku, "klik
       mimo karty" tak funguje aj v tejto rezervovanej marži (presne ako
       žiada zadanie - "odstup... slúži presne na toto").

       Horná rezerva (72px) je ROVNAKÁ hodnota, akú už #configurator-filters
       (css/layout.css) používa ako svoj vlastný "top" - už overené v praxi
       ako dostatočná (aj s K-kompenzovaným, o niečo vyšším logom).
       Spodná rezerva je IDENTICKÝ K-aware rozklad "94px", aký #configurator-
       filters/#right-panel-stack (css/layout.css) používajú pre spodný rad
       (24px anchor + 30px rezerva + 40px*K jeho skutočná výška). Ľavý/pravý
       odstup (20px) je voľný - žiadne fixné prvky po stranách appky. */
    padding: 72px 20px calc(24px + 30px + (40px * var(--ui-scale-kompenzacia, 1))) 20px;
}

#o-projekte-overlay.o-projekte-hidden {
    display: none;
}

.o-projekte-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(var(--surface-backdrop-rgb) / 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.o-projekte-card {
    position: relative;
    /* Šírka rastie s K (rovnaký princíp ako #configurator-filters/#right-
       panel-stack, css/layout.css) - PÔVODNÝCH 600px reference-px na
       mobile/tablete (nízky S) po transform:scale() vizuálne pôsobilo
       malé, hoci "600px" znie veľkoryso (referenčný rozmer sa vždy
       vykresľuje cez S, K kompenzáciu preto potrebuje rovnako ako
       ktorýkoľvek iný pevný px rozmer v appke). calc(100cqw - 40px) je
       bezpečný strop (nikdy neprekročí šírku appky mínus 20px z oboch
       strán, nezávisle od toho, ako vysoké K by K-multiplikácia dala). */
    width: min(calc(700px * var(--ui-scale-kompenzacia, 1)), calc(100cqw - 40px));
    max-height: 100%;
    overflow-y: auto;
    background: rgb(var(--surface-card-rgb) / 0.95);
    border: 1px solid rgb(var(--accent-rgb) / 0.2);
    border-radius: 16px;
    padding: calc(28px * var(--ui-scale-kompenzacia, 1));
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
}

.o-projekte-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-strong);
    letter-spacing: 0.5px;
    margin-bottom: 18px;
    padding-right: 24px;
}

.o-projekte-text {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-body);
}

/* 🔗 ZDIEĽAŤ presunuté do samostatného css/share.css (sekcia zadania
   "Ponuka zdieľania s presne definovanými 4 kanálmi") - musí sa dať
   načítať AJ v host-demo.html (mimo iframe appky, mimo dosahu tohto
   súboru/css/base.css premenných), preto vlastný nezávislý súbor s
   napevno zapísanými farbami namiesto var(--btn-secondary-*) tu. */

/* ==========================================================================
   🗔 MEDIA VIEWER - VIDEO / VR, VŽDY V INTERNOM OVERLAYI appky (Z-Index:
   300). VR beží cez <iframe>, video cez natívny <video>. VR dostáva
   takmer celý dostupný priestor overlay-u. (PDF tu bývalo, nahradené
   obrázkovým Pôdorysom cez #gallery-lightbox - .media-viewer-pdf už nie
   je použité, sekcia zadania "Kompletná výmena pôdorysu z PDF na obrázok".)
   ========================================================================== */
#media-viewer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
}

#media-viewer-overlay.media-viewer-hidden {
    display: none;
}

.media-viewer-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(var(--surface-deep-rgb) / 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.media-viewer-card {
    position: relative;
    background: #000000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
}

/* Video - pohodlná čitateľná veľkosť, nie celá plocha */
.media-viewer-card.media-viewer-video {
    width: min(960px, 94cqw);
    height: 80cqh;
}

/* VR - takmer celý dostupný priestor (potrebuje viac miesta) */
.media-viewer-card.media-viewer-vr {
    width: 97cqw;
    height: 95cqh;
}

.media-viewer-iframe,
.media-viewer-video {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    background: #000000;
}

/* CSS fallback pre skrytie fullscreen ikonky z natívnych video controls -
   rovnaký princíp/dôvod ako .vr-tours-video/.vr-tours-zoom-video (css/
   vr-tours.css) - controlsList (js/vr-tours.js, nastavJednotneVideoOvladanie)
   nie je štandardizované vo všetkých prehliadačoch rovnako spoľahlivo, toto
   selektor-based riešenie funguje priamo v Chrome/Edge (primárny cieľ
   appky). Sekcia zadania "Jednotné nastavenie video prehrávača". */
/* video. prefix (nie iba .media-viewer-video) - tá istá trieda visí AJ na
   obalovej karte (.media-viewer-card.media-viewer-video) - pseudo-element
   ::-webkit-media-controls-fullscreen-button síce aj tak zmysluplne
   existuje iba na skutočnom <video> prvku (div ho nikdy nevykreslí, takže
   pôvodný selektor bez "video." nebol reálne rozbitý), tag-kvalifikovaný
   selektor je tu ale presnejší/jednoznačnejší a zosúladený s opravou v
   js/detail.js (querySelector musel byť spresnený na "video.media-viewer-
   video", inak vracal obalové <div>, nie <video> - sekcia zadania "Oprava
   – video v detaile bytu nie je predvolene MUTE..."). */
video.media-viewer-video::-webkit-media-controls-fullscreen-button {
    display: none !important;
}

.media-viewer-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: calc(36px * var(--ui-scale-kompenzacia, 1));
    height: calc(36px * var(--ui-scale-kompenzacia, 1));
    border-radius: 50%;
    border: 1px solid var(--btn-secondary-border);
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    cursor: pointer;
    font-size: 0.95rem;
    z-index: 2;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.media-viewer-close:hover {
    background: var(--btn-secondary-bg-hover);
    border-color: var(--btn-secondary-border-hover);
    color: var(--btn-secondary-text-hover);
}

.media-viewer-close:active {
    background: var(--btn-secondary-bg-active);
    border-color: var(--btn-secondary-border-active);
    color: var(--btn-secondary-text-active);
}

/* VR NA DOTYKU (K>1, js/detail.js, otvorMediaOverlay) - vrstva v <body>
   mimo škálovaného plátna, preto REÁLNE px (žiadne calc(Npx * K)). z-index
   je POD #rotate-warning-overlay (99999) a #gate-overlay (500000), aby pri
   otočení na výšku ostala viditeľná existujúca výzva. #media-viewer-overlay
   ostáva v DOM len ako nositeľ stavu (nezobrazuje sa). */
#media-viewer-overlay.media-viewer-externe {
    display: none;
}

#media-viewer-vr-layer {
    position: fixed;
    inset: 0;
    z-index: 90000;
    background: #000000;
}

#media-viewer-vr-layer .media-viewer-card.media-viewer-vr {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
}

/* Krížik vpravo hore (VR logo LAYAMA je vpravo dole). Kontrastný podklad. */
#media-viewer-vr-layer .media-viewer-close,
#media-viewer-vr-layer .media-viewer-close:hover,
#media-viewer-vr-layer .media-viewer-close:active {
    top: max(var(--vr-layer-close-inset, 12px), env(safe-area-inset-top, 0px));
    right: max(var(--vr-layer-close-inset, 12px), env(safe-area-inset-right, 0px));
    width: var(--vr-layer-close-size, 44px);
    height: var(--vr-layer-close-size, 44px);
    padding: 0;
    font-size: 20px;
    line-height: 1;
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: #ffffff;
}