/* css/apartments.css */

/* ==========================================================================
   📄 HLAVIČKA PRAVÉHO PANELU BYTOV ("Dostupné byty" + počet + podnadpis)
   ========================================================================== */
.apartments-panel-header {
    flex-shrink: 0;
    margin-bottom: 14px;
}

.apartments-panel-header h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--text-strong);
}

.apartments-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: calc(22px * var(--ui-scale-kompenzacia, 1));
    height: calc(22px * var(--ui-scale-kompenzacia, 1));
    padding: 0 calc(6px * var(--ui-scale-kompenzacia, 1));
    border-radius: 11px;
    background: rgb(var(--accent-rgb) / 0.18);
    color: rgb(var(--accent-rgb));
    font-size: 0.75rem;
    font-weight: 700;
}

.apartments-panel-header p {
    font-size: 0.76rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ==========================================================================
   📊 SÚHRNNÝ PANEL "PREHĽAD BYTOV" - JEDEN zdieľaný panel (sekcia zadania
   "Zjednotiť 'Prehľad bytov' panel v Základnom móde s badge panelom vo
   Výbere blokov") vykresľovaný funkciou vykresliPanelPrehladBytov
   (js/apartments.js) na DVOCH miestach appky:
     - Základný filter mód (fasáda, pravý panel #apartments-list-panel,
       css/layout.css dáva vonkajšie dark-glass pozadie/rám/blur) - BEZ CTA.
     - Výber blokov (js/vyber-blokov.js, .blok-badge - css/vyber-blokov.css
       dáva vonkajší dark-glass vzhľad cez zdieľanú .project-info-panel
       triedu, css/layout.css) - S CTA (.apartments-summary-cta nižšie).
   Čisto informatívne riadky (.summary-*), žiadna interaktivita/hover na
   nich samých (zadanie) - klikateľnosť (ak vôbec) patrí VONKAJŠIEMU
   kontajneru (.blok-badge), nie týmto vnútorným prvkom.
   ========================================================================== */
.apartments-summary-panel h2 {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--text-strong);
    margin-bottom: 16px;
}

/* "BLOK A" riadok (sekcia zadania, bod 1) - VOLITEĽNÝ prvý riadok panela,
   iba keď appka pozná aktuálny blok (vykresliPanelPrehladBytov, blokId
   parameter) - PRED "Prehľad bytov" nadpisom vyššie. Zlatá farba
   (--btn-secondary-text-active, appka ju už používa naprieč appkou pre
   aktívne/zvýraznené texty - žiadny nový hardcoded hex). */
.apartments-summary-blok {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--btn-secondary-text-active);
    margin-bottom: 2px;
}

/* "PONUKA BYTOV" CTA (sekcia zadania, bod 3) - iba keď panel vykresľuje
   Výber blokov (vykresliPanelPrehladBytov, sButtonom=true). Sekcia zadania
   "Vo Výbere blokov musí byť klikateľný IBA button 'POZRIEŤ BYTY'..." -
   PREDTÝM čisto vizuálne (žiadny vlastný listener, klik bubloval na celý
   obklopujúci <button class="blok-badge">), TERAZ je toto SKUTOČNÝ
   <button> (js/apartments.js) a JEDINÝ klikateľný element badge (.blok-
   badge je odvtedy iba <div>, vytvorBlokBadge, js/vyber-blokov.js) - reset
   natívneho vzhľadu buttonu (font-family/border/width/display) nižšie,
   rovnaký minimálny vzor, aký predtým používal .blok-badge samotný, keď
   ešte bol on <button>.
   Sekcia zadania "Zmena textu a vzhľadu tlačidla v karte bloku" -
   vzhľad zmenený z priehľadného tónovaného (rgb(--accent-rgb)/0.18) na
   PLNÉ zlaté - ZDIEĽANÝ token appky pre primárnu CTA akciu
   (--btn-primary-bg/-hover/-active/-text, css/base.css), rovnaký, aký už
   používa "VYBRAŤ BYT"/"Spustiť virtuálnu prehliadku"/"Kontaktovať
   predajcu" (.detail-action-primary, css/detail.css;
   #okolie-trigger.okolie-trigger-cta, css/layout.css) - jeden zdroj
   pravdy pre "plné zlaté" tlačidlo naprieč appkou, žiadna nová farba.
   Vertikálny padding 7px->20px*K->14px*K (sekcia zadania "Korekcia výšky
   tlačidla .apartments-summary-cta na desktope") - 20px*K (predošlý tiket,
   cielil na dotykovú plochu) urobilo tlačidlo na desktope 56% vyššie než
   analogické primárne CTA ".compare-apartments-btn" ("POROVNAŤ BYTY",
   panel "Môj výber", zdieľa rovnaký --btn-primary-* token aj font-size) -
   pomer 56px/36px pri K=1 (1920×1080), rovnaký ~56% pomer platí NEZÁVISLE
   od K/scale (obe tlačidlá zdieľajú font-size aj calc(Npx*K) vzor paddingu,
   pomer ich výšky sa preto K/scale-om nemení, iba absolútnou voľbou N).
   14px*K znižuje tento pomer na ~22% (44px/36px pri K=1) - POD hranicou
   ~25% zo zadania - a zároveň PRIBLIŽUJE výšku tlačidla k .summary-row
   (riadky štatistiky nad ním v tej istej karte, ~47px pri K=1) namiesto
   toho, aby bolo nápadne vyššie než OBOJE. Na dotyku (K aktívne) klesá
   reálna výška z ~34px na ~27px - stále nad bežným kompaktným dotykovým
   tlačidlom appky (#den-noc-trigger/#okolie-trigger/.view-btn, ~19-20px
   reálne), dotyková plocha sa teda neztráca pod zavedený štandard appky,
   iba sa vracia z nadštandardnej na solídnu. Vtedy jeden flat calc, žiadna
   samostatná mobilná vetva - viď report tiketu pre plné meranie na 4
   rozlíšeniach (1920×1080, 2560×1440, 1024×768 touch, 915×412 touch).
   POZOR - "14px*K" nižšie odvtedy NAHRADENÉ clamp() mechanizmom (sekcia
   zadania "Znížiť výšku tlačidla... na mobile/tablete", komentár priamo
   nad `padding:` deklaráciou) - na desktope (K=1) sa výsledok NEMENÍ
   (stále presne 14px, tento odsek zostáva platný pre K=1 prípad), na
   dotyku (K>1) padding TERAZ saturuje na 10px namiesto lineárneho
   14px*K - dotyková výška klesla z ~27px na cieľových ~23-24px. */
.apartments-summary-cta {
    display: block;
    width: 100%;
    margin-top: 12px;
    /* Sekcia zadania "Znížiť výšku tlačidla .apartments-summary-cta na
       mobile/tablete" - RATO ISTÝ K-ONLY clamp() "skokový" mechanizmus
       ako font-size vyššie (žiadna media query, žiadna zmena
       js/scale.js). Pri K=1 (desktop, PC aj touch-desktop) je vnútorný
       rampový argument PRESNE 14px (0×koeficient), teda clamp() vráti
       HORNÚ hranicu 14px - matematicky DOKÁZATEĽNE nezmenené voči
       predošlému tiketu (44px pri 1920×1080, 58,67px pri 2560×1440).
       Pri AKOMKOĽVEK K>1 (koeficient 1000 je rovnako extrémne strmý ako
       pri font-size - už pri K=1,004 je rampa hlboko pod dolnou
       hranicou) padding saturuje na DOLNÚ hranicu 10px.
       Odvodenie hodnoty 10px (KROK 0b, priame meranie): reálna
       (post-transform) výška RIADKU TEXTU tlačidla (nezávislá od
       paddingu, meraná dočasným vynulovaním paddingu na živom
       elemente) je na všetkých troch testovaných dotykových
       zariadeniach (1024×768/915×412/800×360 DPR4) takmer identická
       ~11,7-12,0px (rovnaká K-nezávislá "floor" vlastnosť ako reálny
       font-size - font aj padding sú calc(Npx*K)/rem, takže keď je K
       aktívne, platí K·scale=uiMinScaleFactor=0,6 KONŠTANTNE, nezávisle
       od konkrétneho K). Cieľ zo zadania: reálna výška tlačidla ~23-24px
       (blízko .summary-row, ktorá je dnes reálne ~17-19px na týchto
       zariadeniach). 10px*K saturované padding dáva REÁLNY príspevok
       2×(10×0,6)=12px, spolu s ~11,7-12px riadku textu = **23,7-24,0px
       reálne na VŠETKÝCH troch zariadeniach** (overené priamo, nie iba
       vypočítané) - v cieľovom rozsahu, text má viditeľný odstup ~6px
       reálne z KAŽDEJ strany (nedotýka sa okraja). */
    padding: calc(clamp(10px,
                        calc(14px - 1000px * (var(--ui-scale-kompenzacia, 1) - 1)),
                        14px) * var(--ui-scale-kompenzacia, 1)) 0;
    border: none;
    border-radius: 8px;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    text-align: center;
    font-family: inherit;
    /* Sekcia zadania "Na mobile a tablete zväčšiť text tlačidla
       .apartments-summary-cta" - K-ONLY mechanizmus (--ui-scale-
       kompenzacia), ŽIADNA media query, ŽIADNA zmena js/scale.js.
       (a) Prečo K-only a nie @media (pointer:coarse) - dotykový desktop
       (napr. touch-table pri 1920×1080) MÁ pointer:coarse rovnako ako
       mobil, ale K=1 tam (overené priamo, KROK 0d predošlého tiketu) -
       media query na dotyk by TEDA nesprávne zväčšila text aj na
       touch-desktope, ktorý sa podľa zadania NESMIE zmeniť. K je jediný
       mechanizmus, ktorý correctne rozlíši "desktop vrátane touch-
       desktopu" (VŽDY K=1) od "mobil/tablet" (VŽDY K>1, keďže K = max(1,
       uiMinScaleFactor/scale) je >1 iba keď scale<0,6 - to sa v praxi
       stáva len na skutočne malých/stlačených viewportoch).
       (b) Koeficient 100 v strednom (rampovom) argumente clamp() je
       ZÁMERNE extrémne strmý - už pri K=1,001 by stredný argument bol
       0,78rem + 100×0,001×1rem = 0,88rem, teda ĎALEKO nad hornou
       hranicou 0,92rem, takže clamp() ho okamžite oreže na 0,92rem. Pri
       K=1 PRESNE je stredný argument 0,78rem+0=0,78rem, čo je zároveň
       DOLNÁ hranica clamp() - výsledok je teda presne 0,78rem, nie
       "takmer". Efekt: clamp() sa správa ako skoková funkcia (0,78rem
       pri K=1, 0,92rem pri AKOMKOĽVEK K>1), nie ako plynulá rampa medzi
       K=1 a K=1,8 (rozsah K na testovaných zariadeniach appky).
       (c) Keď je K aktívne (K>1), platí identita K·scale=uiMinScaleFactor
       (0,6, CLAUDE.md sekcia 3) VŽDY, nezávisle od konkrétnej hodnoty K -
       keďže font-size je rem-based (koreňový font-size sám already rastie
       s K), REÁLNA (post-transform) veľkosť textu = 0,92rem-v-px-pri-K=1 ×
       (K·scale) = 12,48×1,18 × 0,6 = konštanta ~8,84px NA VŠETKÝCH
       dotykových zariadeniach appky (tablet aj mobile aj menšie), presne
       ako dnešná (pred touto zmenou) reálna veľkosť 7,49px bola tiež
       konštantná naprieč nimi - len POSUNUTÁ vyššie, nie novo nerovnomerná.
       Bezpečne pod .apartments-summary-blok ("BLOK A", 1rem, reálne
       konštantných 9,6px na dotyku) - CTA text ju stále nepresahuje.
       (d) Výška tlačidla (dnes ~26,7px reálne na dotyku, s väčším písmom
       o niečo vyššia) sa VEDOME nedolaďuje v tomto tiketu - padding
       ostáva nezmenený - doladenie príde AŽ PO odstránení nadpisu
       "Prehľad bytov" z karty bloku (samostatný, budúci tiket), keďže tá
       zmena uvoľní priestor v karte a ovplyvní, aká výška CTA je vtedy
       želaná. */
    font-size: clamp(0.78rem,
                     calc(0.78rem + 100 * (var(--ui-scale-kompenzacia, 1) - 1) * 1rem),
                     0.92rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 200ms ease, box-shadow 200ms ease;
}

.apartments-summary-cta:hover,
.apartments-summary-cta:focus-visible {
    background: var(--btn-primary-bg-hover);
    box-shadow: var(--btn-primary-shadow-hover);
}

.apartments-summary-cta:active {
    background: var(--btn-primary-bg-active);
}

.summary-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgb(var(--hairline-rgb) / 0.06);
}

.summary-row:last-child {
    border-bottom: none;
}

.summary-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Špeciálna ponuka riadok - zlatá hviezdička namiesto bodky (rovnaký
   vizuál ako checkbox/badge). */
.summary-star {
    width: 10px;
    flex-shrink: 0;
    font-size: 13px;
    line-height: 1;
    text-align: center;
}

.summary-label {
    flex: 1 1 auto;
    font-size: 0.82rem;
    color: var(--text-body);
}

/* Sekcia zadania "Zjednotenie veľkosti popiskov a odstup Prémiovej" -
   K-only rampa VÝHRADNE pre pravý panel fasády (Základný mód), scoped
   `#apartments-list-panel` - `.blok-badge` má vlastnú, nezávislú rampu s
   INOU hornou hranicou (css/vyber-blokov.css). Rovnaký K-only "skoková"
   princíp ako .apartments-summary-cta (apartments.css:191-193) - pri K=1
   (PC/touch-table) vráti presne 0,82rem, bit-identické base pravidlu
   vyššie. Horná hranica 0,92rem zhodná s referenčným popiskom ľavého
   filter panela (.status-checkbox-row, css/filters.css). */
#apartments-list-panel .summary-label {
    font-size: clamp(0.82rem,
                     calc(0.82rem + 100 * (var(--ui-scale-kompenzacia, 1) - 1) * 1rem),
                     0.92rem);
}

.summary-count {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-strong);
}

/* ==========================================================================
   🧱 REALITNÉ KARTY BYTOV (náhľad + info riadok + šípka)
   ========================================================================== */
/* Sekcia zadania "Pridať border na položky bytov" - border TU predtým
   NEBOL vizuálne prítomný (1px pri 0.04 alfa, opticky neviditeľný) - TERAZ
   rovnaká hodnota/premenná ako .porovnanie-frame (Element A Porovnania,
   css/porovnanie.css) - JEDEN zdroj pravdy pre "default" stav položky bytu
   naprieč appkou. Mení sa VÝHRADNE alfa (0.04->0.28), hrúbka (1px) aj
   premenná (--hairline-rgb) sú NEZMENENÉ - žiadny posun layoutu, border-box
   všade. Táto trieda je zdieľaná ("Môj výber", "Dostupné byty", Element B
   pás Porovnania - JEDNA HTML šablóna, vytvorHtmlKartyBytu, js/
   apartments.js) - zmena tu platí na VŠETKÝCH troch miestach naraz,
   univerzálne na všetkých zariadeniach (žiadny media-gate na tejto triede). */
.apartment-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: calc(10px * var(--ui-scale-kompenzacia, 1));
    background: rgba(30, 41, 59, 0.15); /* Identický tmavý polopriehľadný základ */
    border: 1px solid rgb(var(--hairline-rgb) / 0.28);
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Identický hover efekt ako vľavo - rozsvieti sa na pieskovo-zlatú */
.apartment-card:hover {
    background: rgb(var(--accent-rgb) / 0.03);
    border-color: rgb(var(--accent-rgb) / 0.35); /* Jemné pieskovo-zlaté lemovanie */
}

/* Sekcia zadania "Pridať border na položky bytov" - border-color TERAZ
   zhodná s aktívnym (zlatým) stavom prepínača ZÁKLADNÝ/ROZŠÍRENÝ MÓD
   (--btn-secondary-border-active, css/filters.css) namiesto pôvodnej bielej
   (rgba(249,252,255,0.8)) - VÝHRADNE border-color, zadanie explicitne
   vylúčilo zmenu background/box-shadow (tie ostávajú pôvodné, biele/glow),
   preto tu môže pôsobiť mierny farebný nesúlad medzi zlatým rámom a bielym
   glow pozadím - zámerne ponechané mimo rozsahu tohto tiketu. */
.apartment-card.selected-card {
    border-color: rgba(217, 181, 113, 0.6) !important;
    background: rgba(249, 252, 255, 0.06) !important;
    box-shadow: 0 4px 15px rgba(249, 252, 255, 0.12) !important;
}

/* ⚖️ POROVNANIE BYTOV (sekcia zadania "Implementácia funkcie 'Porovnanie
   bytov'", bod 5) - modré orámovanie karty v spodnom páse "Môj výber"
   (js/porovnanie.js, #porovnanie-pas), IBA kým je daný byt aktuálne
   pridaný do porovnania. Nová farba (appka doteraz nemala žiadny modrý
   token) - vyhradená VÝHRADNE pre tento stav, aby sa nezamieňala so
   zlatým akcentom (výber/hover) ani zeleným "Dostupný" stavom. */
.apartment-card.in-comparison {
    border-color: rgba(59, 130, 246, 0.75) !important;
    background: rgba(59, 130, 246, 0.08) !important;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.15) !important;
}

.card-thumb {
    flex-shrink: 0;
    width: calc(52px * var(--ui-scale-kompenzacia, 1));
    height: calc(52px * var(--ui-scale-kompenzacia, 1));
    border-radius: 8px;
    overflow: hidden;
    background: rgb(var(--hairline-rgb) / 0.04);
}

.card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Skrytie fotky/ikonky na mobile/tablete (sekcia zadania "Skryť ikonky
   fasády/pôdorysu v zozname 'Dostupné byty' na mobile/tablete...") - IBA
   dotykové zariadenia (rovnaký (hover:none) and (pointer:coarse) gate,
   aký appka už používa v js/gate.js, jeDotykoveZariadenie(), pre K-
   kompenzáciu) - PC/touch-table zostávajú BEZO ZMENY. display:none (nie
   iba vizuálne skrytie) - .card-thumb prestane byť flex-item, .card-body
   (flex:1 1 auto) tak automaticky prevezme celú uvoľnenú šírku (aj gap
   12px z .apartment-card sa medzi neexistujúcim a existujúcim flex-item
   neuplatní) - žiadna prázdna medzera na mieste ikonky, žiadny ďalší
   zásah do .card-body potrebný. */
@media (hover: none) and (pointer: coarse) {
    .card-thumb {
        display: none;
    }
}

.card-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.card-title-row {
    display: flex;
    align-items: center;
    gap: 7px;
    /* flex-wrap - rovnaká poistka pre úzke šírky ako .detail-header
       (css/detail.css, sekcia zadania "Pridať 'BLOK [X]' label do detailu
       bytu") - s pribudnutým .card-blok-label nižšie (bod 7, "Implementácia
       'Obľúbené byty'") môže byť na veľmi úzkom pravom paneli obsah tesnejší
       než predtým (title+bodka), toto zabráni prekrytiu s .card-meta pod
       riadkom. Na bežnej šírke (PC/touch table/tablet) bez efektu - obsah sa
       zmestí na jeden riadok ako doteraz. */
    flex-wrap: wrap;
}

.card-title {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-strong);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-title-row .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* "BLOK [X]" v riadku karty (sekcia zadania "Implementácia 'Obľúbené
   byty'", bod 7) - ZA farebnou ikonkou stavu (.status-dot vyššie), zlatá
   (var(--btn-secondary-text-active), ROVNAKÁ premenná ako "BLOK A" nadpis v
   paneli "Prehľad bytov" a label v detaile bytu - konzistencia). Platí
   NATRVALO, nie podmienene počtom blokov (na rozdiel od badge vo Výbere
   blokov) - v zozname "Dostupné byty" AJ "Obľúbené byty" (js/favorites.js),
   obe zdieľajú JEDNU implementáciu karty (vytvorHtmlKartyBytu, js/apartments.js). */
.card-blok-label {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--btn-secondary-text-active);
}

/* Hviezdička špeciálnej ponuky v karte zoznamu - rovnaký vizuál ako
   .byt-badge-star na facade overlay badge (farba vždy inline zo
   SPECIAL_OFFER_COLOR, nezávisle od STATUS_COLORS bodky vedľa nej). */
.card-status-star {
    font-size: 12px;
    line-height: 1;
    flex-shrink: 0;
}

.card-meta {
    font-size: 0.78rem;
    color: var(--text-body);
}

.card-chevron {
    flex-shrink: 0;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--text-dim);
    transition: color 0.2s ease, transform 0.2s ease;
}

.apartment-card:hover .card-chevron {
    color: rgb(var(--accent-rgb));
    transform: translateX(2px);
}

/* Chybové boxy */
.no-results-box {
    text-align: center;
    padding: 40px 10px;
    color: var(--text-slate);
}

.no-results-box p {
    font-size: 0.8rem;
    line-height: 1.4;
}

.btn-reset-filters {
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border: 1px solid var(--btn-secondary-border);
    padding: calc(6px * var(--ui-scale-kompenzacia, 1)) calc(12px * var(--ui-scale-kompenzacia, 1));
    font-size: 0.75rem;
    /* 6px -> 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;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

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

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

/* ==========================================================================
   🟥 FIXNÉ A VŠEOBECNÉ OVERLAYE (sekcia 23-31, 115-116)
   ========================================================================== */
.facade-overlay-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

/* ==========================================================================
   🟢 JEDINÝ ZDIEĽANÝ BADGE PRE VŠETKY OVERLAYE NA FASÁDE (sekcia 115-116)
   2 riadky: bodka + "Byt {id}" (tučne), potom "{izby} izby / {rozloha} m²"
   (jemnejšie) - farba okraja PODĽA STAVU cez data-status (CSS premenné
   odvodené priamo z STATUS_COLORS, js/state.js, žiadne duplicitné hex
   hodnoty). Predtým existoval samostatný "fixný" typ A overlay (vlastná
   farba/ikonka namiesto stavu, .type-*) - nahradený doplnkovým
   .byt-vr-badge nižšie, aby jeden byt nemal dva rôzne/prekrývajúce sa
   badge naraz.
   ========================================================================== */
.byt-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--accent-deep);
    border: 2px solid rgb(var(--hairline-rgb) / 0.2);
    border-radius: 12px;
    padding: 7px 14px;
    cursor: pointer;
    pointer-events: auto;
}

/* Samostatný badge (auto-zobrazenie / ručný výber) je priamy potomok
   overlay kontajnera - vlastné centrovanie priamo na súradnici bytu. Badge
   vnorený v .facade-overlay-icons-row (fixný typ A) NIE je priamy potomok,
   takže zostáva obyčajným flex-item v riadku (žiadne position:absolute). */
/* Posun (--badge-offset-*) aj zmenšenie (--badge-scale) zapisuje
   js/apartments.js (zmiernKolizieBadge) pri hustej fasáde. Predvolené
   hodnoty = presne pôvodné správanie (žiadny posun, mierka 1), takže pri
   dnešnom rozsahu dát je pravidlo vizuálne totožné s predošlým
   `transform: translate(-50%, -50%)`. */
.facade-overlay-container > .byt-badge {
    position: absolute;
    /* --ui-scale-kompenzacia (K, js/scale.js) sa vynára do TOHTO ISTÉHO
       scale() slotu (sekcia zadania "Minimálna 'podlaha' veľkosti pre
       text/UI prvky na mobile/tablete... + Doplnenie") - násobí sa s
       --badge-scale (Fázy 3.5 kolízna zrážka), obe riešia NEZÁVISLÉ veci
       (kolízia hustoty vs. čitateľnosť na mobile) bez toho, aby o sebe
       navzájom vedeli. Poradie translate->scale zostáva presne rovnaké
       ako doteraz (kotva/stred badge sa nemení, iba sa mení jeho výsledná
       veľkosť) - na PC/touch-table je K vždy 1, teda bezo zmeny. */
    transform:
        translate(
            calc(-50% + var(--badge-offset-x, 0px)),
            calc(-50% + var(--badge-offset-y, 0px))
        )
        scale(calc(var(--badge-scale, 1) * var(--ui-scale-kompenzacia, 1)));
}

/* Farba okraja podľa stavu. Predtým tu bolo JEDNO pravidlo NA KAŽDÝ stav
   (.byt-badge[data-status="volny"] atď.), takže 5. stav v configu by tu
   ostal bez farby. Teraz badge dostáva svoju stavovú farbu ako premennú
   --badge-status-color priamo z js/apartments.js (vytvorBytBadge, zdroj
   STATUS_COLORS) - CSS už nemusí poznať ANI JEDEN kľúč stavu. */
.byt-badge {
    border-color: var(--badge-status-color, rgb(var(--hairline-rgb) / 0.2));
}

/* Zvýraznenie "TOTO JE ten byt" na fasáde ('selected' režim vo
   vytvorZonuBytuNaFasade, js/apartments.js) - dvojvrstvový prstenec cez
   box-shadow (NIE border-color - ten musí zostať farba STAVU bytu, viď
   pravidlo vyššie): biely 2px (--text-strong) a tmavý lem do 4px
   (--surface-panel-rgb, alfa 0.55). Zlatá vrstva je zrušená (splývala s
   okrajom stavu). Jedna hodnota pre všetky zariadenia, bez K-škálovania
   (žiadny border/box-shadow-ako-border v appke nepoužíva calc(Npx*K),
   sekcia 4 CLAUDE.md, #compare-contact-cta precedens). */
.byt-badge.byt-badge-selected {
    box-shadow:
        0 0 0 2px var(--text-strong),
        0 0 0 4px rgb(var(--surface-panel-rgb) / 0.55);
}

/* Opakovaný pulz vybraného badge - samostatný zapnutý/vypnutý stav (trieda
   byt-badge-pulse pridáva js/apartments.js), NIE vlastnosť byt-badge-selected.
   Pseudoprvok nemení rozmer ani polohu badge (position:absolute, mimo toku,
   pointer-events:none, okraj 3px je jedna hodnota pre všetky zariadenia). Cyklus = --badge-pulse-cycle-ms (config), pomer pulz/
   pauza je pevný: 25 % pulz, 75 % pauza. Rozmer pulzu sa škáluje spolu s
   badge (scale s K), preto netreba samostatné K. */
.byt-badge.byt-badge-pulse::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 3px solid var(--text-strong);
    border-radius: 16px;
    opacity: 0;
    pointer-events: none;
    animation: byt-badge-pulse var(--badge-pulse-cycle-ms, 4000ms) ease-out infinite;
}

@keyframes byt-badge-pulse {
    0% { transform: scale(1); opacity: 0.9; }
    25% { transform: scale(1.45, 1.7); opacity: 0; }
    100% { transform: scale(1.45, 1.7); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .byt-badge.byt-badge-pulse::after {
        display: none;
        animation: none;
    }
}

/* Doplnkový "VR" krúžok pripnutý do pravého horného rohu hlavného badge
   (byt.vzorovyByt === "Ano", js/apartments.js - vytvorBytBadge) - malý,
   biely lem, čierna výplň, biely text, vizuálne jasne "patrí" k badge pod
   ním vďaka prekrytiu rohu. .byt-badge má position:absolute (vyššie),
   preto je platným containing block aj pre tento svoj vlastný child. */
.byt-vr-badge {
    position: absolute;
    /* top/right sú počítané od padding-boxu rodiča (.byt-badge), teda OD
       VNÚTORNEJ hrany jeho 2px okraja, nie od jeho viditeľného vonkajšieho
       rohu - preto offset = polovica šírky/výšky (22/2=11) + hrúbka
       okraja rodiča (2px) = 13px, aby STRED krúžku sedel presne na
       viditeľnom vonkajšom rohu hlavného badge (klasický notifikačný
       badge štýl), nie 2px vedľa neho. */
    top: -13px;
    right: -13px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #000000;
    border: 1.5px solid var(--text-strong);
    color: var(--text-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1;
    pointer-events: none;
}

/* SAMOSTATNÁ VR znacka (js/apartments.js - vytvorZonuBytuNaFasade,
   "ibaVrZnacka" vetva) - nahrádza celý hlavný badge pre vzorový byt so
   stavom predany/rezervovany, keď by inak vôbec nebol vidieť (developer
   investoval do VR obsahu, ktorý má zostať marketingovo viditeľný).
   Zdieľa .byt-badge (obdĺžnikový tvar/padding/border-radius, pozícia,
   klik-delegovanie) - táto trieda iba PREPISUJE farby na čierne pozadie +
   biely lem/text, jeden riadok "{ID} VR" (žiadna bodka/hviezdička/izby/
   m², na rozdiel od plného status badge vyššie). JEDEN spojitý element,
   nie ikonka+text pod ňou osobitne. */
.byt-badge.byt-vr-standalone {
    background: #000000;
    border-color: var(--text-strong);
    color: var(--text-strong);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* Sekcia zadania "Opraviť veľkosť VR indikátora a textu na dvoch typoch
   badge na fasáde (mobil/tablet)" - IBA dotykové zariadenia (rovnaký
   (hover:none) and (pointer:coarse) gate ako inde v appke). Bezo zmeny na
   PC aj touch table (K-kompenzácia --ui-scale-kompenzacia tam vždy = 1,
   navyše tento blok sa na ne vôbec neaplikuje).

   DÔLEŽITÉ - prečo NIE cez @container tiery (css/responsive.css): appka od
   zavedenia "contain-fit" škálovania (css/scale.css, #app-scale-wrapper)
   drží #app VŽDY presne na 1920×1080 CSS pixeloch - @container tiery
   viazané na výšku #app (max-height:900px/450px) sú odvtedy TRVALO
   NEAKTÍVNE (mŕtvy kód, zámerne ponechaný, zdokumentované priamo v css/
   scale.css). Jediný SKUTOČNE fungujúci mechanizmus prispôsobenia veľkosti
   na mobile/tablete je --ui-scale-kompenzacia (K, js/scale.js) - .byt-badge
   ako celok sa ňou už škáluje (transform: scale(K), pravidlo
   ".facade-overlay-container > .byt-badge" vyššie), takže OBE nižšie
   úpravy (v obyčajných CSS px, nie rem) sa spolu s celým badge rovnako
   K-škálujú - proporcie zostávajú konzistentné na akomkoľvek K.

   1) Kruhový VR indikátor (.byt-vr-badge) - priemer 22px->28px, font-size
      OSTÁVA rovnaký (0.5rem) - celý nárast ide priamo do viditeľného
      odstupu medzi bielym okrajom a písmenami "VR" (predtým sa takmer
      dotýkali, bug zo zadania). Platí pre VŠETKY farby rámika bytu (žiadna
      farebne podmienená výnimka v CSS, trieda je zdieľaná univerzálne).
      top/right prepočítané rovnakým vzorcom ako base pravidlo vyššie:
      polovica novej šírky (28/2=14) + hrúbka okraja rodiča (2px) = 16px.
   2) Kompaktný čierny "{ID} VR" badge (.byt-badge.byt-vr-standalone) -
      font-size znížený z 0.85rem na 14px, PRESNE zhodný s .byt-id (css/
      apartments.css) - oba sú teraz rovnaká literálna px hodnota v tom
      istom K-škálovanom rodičovi, teda vizuálne vždy zhodné, nech je K
      akékoľvek. */
@media (hover: none) and (pointer: coarse) {
    .byt-vr-badge {
        width: 28px;
        height: 28px;
        top: -16px;
        right: -16px;
    }
    .byt-badge.byt-vr-standalone {
        font-size: 14px;
    }
}

/* Hviezdička popri farebnej bodke (iba status "specialna_ponuka", obe
   naraz - sekcia 4 zadania). Farba príde inline z JS - VŽDY
   SPECIAL_OFFER_COLOR (zlatá), NIKDY STATUS_COLORS.specialna_ponuka
   (zelená, tá farbí iba bodku/okraj) - hviezdička sa so stavovou farbou
   nesmie miešať (bug, opravené). Explicitná inline farba je zámerná, aby
   sa spoľahlivo vykreslila (predtým, vo fixnom overlayi, dedená farba
   niekedy nesvietila správne). */
/* Pravidelná 10-vrcholová hviezda (5 vonkajších + 5 vnútorných vrcholov
   presne po 36°, pomer polomerov 0.5) ako CSS clip-path tvar namiesto
   textového glyfu "★" - dôvod: glyf (font-size 13px) sa v tomto prostredí
   renderoval fallback fontom "Segoe UI Symbol" (Arial ho neobsahuje), čo je
   nestabilné naprieč OS/fontmi (žiadny zásah do JS/DOM - .byt-badge-star
   naďalej obsahuje textContent "★", iba je opticky skrytý cez font-size:0):
   - background:currentColor + clip-path vykreslí tvar, farba naďalej
     prichádza VÝHRADNE z inline style="color:..." (SPECIAL_OFFER_COLOR,
     js/apartments.js) - CSS farbu nemení, iba ju číta cez currentColor.
   - Vďaka 5-násobnej rotačnej symetrii MÁ TAKÝTO TVAR ŤAŽISKO VÝPLNE
     PRESNE V STREDE SVOJHO VLASTNÉHO BOXU (dôkaz: ťažisko sa pri rotácii o
     72° zobrazí samo na seba, jediný pevný bod takejto rotácie je stred
     kruhu, preto ťažisko = stred, nezávisle od pomeru polomerov) - NA
     ROZDIEL od fontového glyfu (ktorého ťažisko závisí od konkrétnych,
     asymetrických proporcií daného fontu/OS). Keďže .byt-badge-dot (kruh,
     tiež ťažisko=stred boxu) aj tento tvar majú ťažisko presne v strede
     VLASTNÉHO boxu, zdieľané align-items:center na .byt-badge-row-id
     (nezmenené) zarovná ich BOXY na spoločnú os - a teda AUTOMATICKY
     zarovná aj ich ŤAŽISKÁ, bez potreby akejkoľvek manuálnej translateY
     korekcie.
   - Rozmer boxu (width/height, štvorec) používa ROVNAKÝ mechanizmus
     jednotiek ako .byt-badge-dot nižšie - PLOCHÉ px, ŽIADNE calc(*K) - K
     (--ui-scale-kompenzacia) sa aplikuje raz na CELÝ badge cez vonkajší
     transform:scale() (.facade-overlay-container > .byt-badge vyššie),
     takže vnútorné rozmery netreba K-násobiť samostatne.
   - Veľkosť 10.35px (variant B, ~15% nad 9px bodkou) - zvolená spomedzi 3
     testovaných variantov (9px/10.35px/11px na všetkých 17 bytoch, DPR
     1-2, scale 1.0 aj ~1.21). V LOKÁLNYCH (pred-transformovaných)
     súradniciach je ťažisko ★ a bodky matematicky VŽDY presne zhodné
     (0.000px, dôkaz vyššie) - namerané odchýlky (do ~0.8px) vznikajú AŽ
     pri renderovaní cez transform:scale() (zlomkové polohy jednotlivých
     bytov na fasáde sa zaokrúhľujú na fyzické pixely inak pre kruh a inak
     pre clip-path polygón). 9px aj 11px (rovnaká/susedná parita ako 9px
     bodka) boli pri tomto teste PRESKÚŠANÉ a vyšli HORŠIE (max. odchýlka až
     1.26px, resp. 2.05px) - hypotéza "celočíselná veľkosť = rovnaké
     zaokrúhlenie" sa nepotvrdila, 10.35px zostáva najlepší z 3 testovaných. */
.byt-badge-star {
    font-size: 0;
    line-height: 0;
    width: 10.35px;
    height: 10.35px;
    background: currentColor;
    clip-path: polygon(50.0000% 0.0000%, 64.6946% 29.7746%, 97.5528% 34.5492%, 73.7764% 57.7254%, 79.3893% 90.4508%, 50.0000% 75.0000%, 20.6107% 90.4508%, 26.2236% 57.7254%, 2.4472% 34.5492%, 35.3054% 29.7746%);
    flex-shrink: 0;
}

/* align-items:center (namiesto predošlého predvoleného "stretch") - bez
   neho .byt-badge-row-id aj .byt-meta boli natiahnuté na ROVNAKÚ (širšiu)
   šírku kontajnera, ale ich obsah zostával vďaka text-align:left zarovnaný
   k ľavému okraju tejto natiahnutej škatule (vizuálne teda vždy doľava,
   nikdy centrovane) - "center" namiesto toho necháva každý riadok pri
   jeho VLASTNEJ prirodzenej šírke obsahu a centruje ho voči širšiemu z
   oboch (celková šírka .byt-badge-text, a teda aj .byt-badge, sa
   nemení - tá bola auto-šírkou stĺpcového flexu určená širším riadkom UŽ
   predtým, mení sa iba zarovnanie užšieho riadku v nej). */
.byt-badge-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Riadok 1 všeobecného/stavového badge (typ B) - bodka + ID, najvýraznejšie. */
.byt-badge-row-id {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Rovnaký vizuál ako .status-dot pri checkboxoch "Stav jednotky" v ľavom
   filtri (css/filters.css) - farba inline z STATUS_COLORS, žiadny duplicitný hex. */
.byt-badge-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.byt-id {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-pale);
    white-space: nowrap;
}

/* Riadok 2 - "{izby} izby / {rozloha} m²", jemnejšia váha ako ID (badge
   je teraz 2-riadkový, žiadne "Pozrieť detail" - kompaktnosť pri viacerých
   badgeoch naraz). */
.byt-meta {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-body);
    white-space: nowrap;
    margin-top: 2px;
}