/* css/vyber-blokov.css */

/* ==========================================================================
   🧱 VÝBER BLOKU - ÚVODNÁ OBRAZOVKA APPKY (sekcia zadania "Implementácia
   'Výber bloku'"). Z-Index (6) aj transform/opacity/filter prechod sú
   ZÁMERNE IDENTICKÉ s #okolie-overlay (css/okolie.css) - rovnaký "kríženie
   s #main-configurator-view.mcv-hidden" mechanizmus (js/vyber-blokov.js),
   iba iný obsah (badge blokov namiesto mapy). Logo (#app-logo, z-index 15)
   zostáva viditeľné nad touto obrazovkou bez duplikovania, presne ako nad
   OKOLIE.
   ========================================================================== */
#vyber-blokov-overlay {
    position: absolute;
    inset: 0;
    z-index: 6;
    overflow: hidden;
    transform-origin: center center;
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
    transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

#vyber-blokov-overlay.vyber-blokov-hidden {
    transform: scale(0.85);
    opacity: 0;
    filter: blur(6px);
    pointer-events: none;
}

#vyber-blokov-media {
    position: absolute;
    inset: 0;
}

.vyber-blokov-media-element {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Kontajner badge-ov je iba pozicovací rámec (nemá vlastný vzhľad/interakciu) -
   pointer-events (hover/klik) patria VÝHRADNE jednotlivým .blok-badge
   (nižšie - hover, čisto vizuálny) a VNÚTRI nich samotnému CTA <button>
   (klik, sekcia zadania "Vo Výbere blokov musí byť klikateľný IBA button
   'POZRIEŤ BYTY'..."), aby prázdny priestor medzi badge-mi nezachytával
   kliky/hover. */
#vyber-blokov-badges {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* 📄 Panel "Prémiová Rezidencia" + panel "Obľúbené byty" na obrazovke Výber
   blokov (sekcia zadania "Doladenie viditeľnosti prvkov v menu 'Výber
   blokov'", bod 1 + "Prepísať logiku 'Obľúbené byty'...", bod 2/4 -
   "zobrazí sa nový panel pod 'Prémiová Rezidencia'"). Spoločný flex-stack
   wrapper - PRESNE rovnaký princíp ako #right-panel-stack na fasáde (css/
   layout.css): #vyber-blokov-project-info-panel je flex-shrink:0 (pevná
   výška podľa obsahu, VŽDY viditeľný, nikdy sa nezmenšuje/nezakrýva),
   #vyber-blokov-favorites-panel pod ním je flex:1 1 auto a rastie do
   zvyšného priestoru IBA keď nie je .vyber-blokov-favorites-hidden
   (js/favorites.js). Position/top/right/width, ktoré predtým niesol PRIAMO
   #vyber-blokov-project-info-panel (nemal rodiča, ktorý by mu ju dal), sa
   presunuli SEM na wrapper - identická hodnota ako predtým, iba o úroveň
   vyššie v DOM strome. Z-Index netreba explicitne riešiť - je posledné
   dieťa #vyber-blokov-overlay v DOM poradí (index.html), teda prirodzene
   nad #vyber-blokov-media aj #vyber-blokov-badges (rovnaká úroveň
   z-indexu = DOM poradie rozhoduje). */
#vyber-blokov-right-stack {
    position: absolute;
    top: 16px;
    right: 16px;
    width: clamp(160px, 44cqw, min(calc(320px * var(--ui-scale-kompenzacia, 1)), 480px));
    max-height: calc(100cqh - 32px - 24px - 30px - (40px * var(--ui-scale-kompenzacia, 1)));
    display: flex;
    flex-direction: column;
    gap: var(--panel-gap);
}

/* Sekcia zadania "Stacky, výplň Prémiovej, banner" (Časť C) - dotykový
   touch-narrowing override, zjednocuje šírku s `#right-panel-stack`
   (fasáda, `css/layout.css`) na dotyku - rovnaký vzorec ako ľavý filter
   panel (`#configurator-filters`), viď `css/layout.css` komentár pri
   `#right-panel-stack` pre plný kontext. MUSÍ byť TU (v `css/vyber-
   blokov.css`, ZA base pravidlom vyššie), NIE v `css/layout.css` -
   `index.html` linkuje `vyber-blokov.css` AŽ PO `layout.css` (riadok 18
   vs. 10), takže pri rovnakej špecificite (jeden ID selektor) by base
   pravidlo vyššie VŽDY vyhralo nad touch override umiestneným v skôr
   linkovanom súbore, bez ohľadu na @media - priamo overené
   (`CSS.getMatchedStylesForNode`, base pravidlo víťazilo aj na dotyku,
   kým override žil v layout.css). Tu (rovnaký súbor, neskôr) funguje
   spoľahlivo - poradie v RÁMCI súboru rozhoduje normálne. */
@media (hover: none) and (pointer: coarse) {
    #vyber-blokov-right-stack {
        width: clamp(160px, 42cqw, min(calc(300px * var(--ui-scale-kompenzacia, 1)), 460px));
    }
}

#vyber-blokov-project-info-panel {
    flex-shrink: 0;
}

/* Vzhľad (glass pozadie/rám/blur/tieň/radius/padding) zdieľa rovnaký jazyk
   ako #apartments-list-panel (css/layout.css) - "vizuálne konzistentný s
   existujúcim vzorom 'Dostupné byty'" (zadanie, prevzaté z predošlej
   implementácie #favorites-panel, teraz už odstránenej). */
#vyber-blokov-favorites-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: calc(24px * var(--ui-scale-kompenzacia, 1));
    background: rgb(var(--surface-panel-rgb) / 0.55);
    border: 1px solid rgb(var(--hairline-rgb) / 0.04);
    border-radius: 14px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* ID selektor #vyber-blokov-favorites-panel vyššie ("display:flex") by inak
   VŽDY vyhral nad holým ".vyber-blokov-favorites-hidden" bez ohľadu na
   poradie v súbore (rovnaká špecifickosť triedy prehráva s ID) - presne
   TOTO spôsobilo regresiu v sekcii zadania "Opraviť chýbajúci nadpis
   'Prémiová Rezidencia'..." pri #favorites-panel (teraz odstránenom).
   #vyber-blokov-favorites-panel.vyber-blokov-favorites-hidden (rovnaká
   ID-úroveň špecifickosti) sa tejto chybe vyhýba nastálo. */
#vyber-blokov-favorites-panel.vyber-blokov-favorites-hidden {
    display: none;
}

/* ==========================================================================
   🏷️ BADGE JEDNÉHO BLOKU - kompaktná karta NAD súradnicou z
   PROJECT_CONFIG.data.bloky (percentá, rovnaký princíp ako fasádne badge
   bytov - css/apartments.css, .facade-overlay-container > .byt-badge).
   Vnútro je TERAZ (sekcia zadania "Zjednotiť 'Prehľad bytov' panel...") tá
   ISTÁ zdieľaná štruktúra (.apartments-summary-panel, .apartments-summary-
   blok, .summary-row a súrodenci, .apartments-summary-cta - css/
   apartments.css) ako súhrnný panel Základného módu - vykresľuje ju JEDNA funkcia
   (vykresliPanelPrehladBytov, js/apartments.js) na oboch miestach appky,
   žiadne duplikovanie/rozbiehanie štýlov ani textov.

   Vizuál pozadia/rámu/blur/tieňa TOHTO VONKAJŠIEHO <button> kontajnera je
   zdieľaná trieda .project-info-panel (css/layout.css, js/vyber-blokov.js
   pridáva OBE triedy na ten istý <button>) - predtým malo plné nepriehľadné
   pozadie (var(--accent-deep), rovnaké ako malé fasádne .byt-badge) -
   nekonzistentné s ostatnými panelmi appky (potvrdené screenshotom), teraz
   identické dark-glass sklo.
   ========================================================================== */
.blok-badge {
    position: absolute;
    /* Posun NAD fasádu (sekcia zadania "Repozícia panela – nad fasádu", bod
       3) - namiesto centrovania PRIAMO NA súradnici (predošlé translate(
       -50%,-50%)), badge teraz sedí SVOJÍM SPODNÝM OKRAJOM tesne nad
       súradnicou (--blok-badge-spicka nižšie = medzera pre .blok-badge::after
       špičku). Odvodené VÝLUČNE z VLASTNEJ veľkosti elementu (percentuálny
       translate, nie pevný px posun) - funguje preto IDENTICKY pre KAŽDÝ
       blok/súradnicu (zadanie, "Doplnenie" - škálovateľné na Blok B/C, nie
       natvrdo napísané pre Blok A).
       --ui-scale-kompenzacia (K) - IBA v tomto jednom mieste (--blok-badge-
       spicka), NIE ako transform:scale() na CELOM badge (na rozdiel od
       .facade-overlay-container > .byt-badge, ktorý K rieši VÝHRADNE cez
       scale(), keďže má napevno zapísané px rozmery). .blok-badge je TERAZ
       (sekcia zadania "Redizajn...", bod 2) .project-info-panel - K sa doň
       už premieta INAK (rem-based text cez K-upravené --root-font-size,
       padding cez vlastné calc(px*K), rovnaký princíp ako súhrnný panel
       Základného módu, ktorý TIEŽ nemá žiadny scale() wrapper). Pridanie
       ĎALŠIEHO scale(K) navyše by K aplikovalo DVAKRÁT (K² namiesto K) -
       potvrdené na Galaxy S20 FE (K≈1.93): badge orezaný nad horným okrajom
       obrazovky, opravené odstránením tohto scale(). */
    --blok-badge-spicka: calc(12px * var(--ui-scale-kompenzacia, 1));
    transform: translate(-50%, calc(-100% - var(--blok-badge-spicka)));
    transform-origin: center center;
    pointer-events: auto;

    display: block;
    min-width: 200px;
    text-align: left;
    font-family: inherit;
    transition: border-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

/* Sekcia zadania "Vo Výbere blokov musí byť klikateľný IBA button
   'POZRIEŤ BYTY'..." - .blok-badge už NIE JE samo o sebe klikateľné/
   focusovateľné (je to <div>, klikateľný je iba vnútorný .apartments-
   summary-cta <button>), preto :hover (myš nad celým panelom - čisto
   vizuálna spätná väzba, žiadna akcia) ostáva, ale :focus-visible sa mení
   na :focus-within, aby sa rovnaký zvýraznený rámik zobrazil aj keď
   klávesnica presunie fokus na vnútorný CTA button. */
.blok-badge:hover,
.blok-badge:focus-within {
    border-color: rgb(var(--accent-rgb) / 0.6);
}

/* Skrytá obrazovka Výber bloku (#vyber-blokov-overlay.vyber-blokov-hidden,
   opacity:0) nesmie zachytávať dotyk/klik nad fasádou - .blok-badge má vyššie
   explicitné pointer-events:auto, ktoré by prebilo pointer-events:none z
   rodiča, takže neviditeľný panel a jeho CTA by ťuk resetoval pohľad a swipe
   by sa nedoručil fasádnej zóne. Vyššia špecificita ako .blok-badge. */
#vyber-blokov-overlay.vyber-blokov-hidden .blok-badge,
#vyber-blokov-overlay.vyber-blokov-hidden .blok-badge:hover,
#vyber-blokov-overlay.vyber-blokov-hidden .blok-badge:focus-within,
#vyber-blokov-overlay.vyber-blokov-hidden .blok-badge * {
    pointer-events: none;
}

/* Špička smerujúca od posunutého panela k jeho SKUTOČNEJ súradnici (sekcia
   zadania "Doplnenie" - "zachovaj vizuálne prepojenie... pin/špička/čiara")
   - klasický "bublinový chvost" trik (border trojuholník), zavesený presne
   na stred SPODNÉHO okraja panela. Keďže --blok-badge-spicka vyššie určuje
   AJ posun panela hore, AJ výšku tejto špičky, jej hrot skončí PRESNE na
   pôvodnej súradnici (left/top na .blok-badge) nezávisle od veľkosti
   konkrétneho panela - funguje teda rovnako pre každý blok. */
.blok-badge::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc(-1 * var(--blok-badge-spicka));
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: var(--blok-badge-spicka) solid rgb(var(--surface-panel-rgb) / 0.55);
    pointer-events: none;
}

/* Obsah (titulok bloku, "Prehľad bytov", riadky, CTA) je TERAZ (sekcia
   zadania "Zjednotiť 'Prehľad bytov' panel...") vykreslený JEDINOU
   zdieľanou funkciou vykresliPanelPrehladBytov (js/apartments.js) - jej CSS
   (.apartments-summary-panel, .apartments-summary-blok, .summary-row a
   súrodenci, .apartments-summary-cta) žije v css/apartments.css, spoločná
   pre fasádu AJ tento badge. Tu ostáva iba badge-ŠPECIFICKÝ override
   odsadenia riadkov (kompaktnejšie než na fasáde, kde má panel viac miesta). */
.blok-badge .summary-row {
    padding: 6px 0;
}

/* Sekcia zadania "Skryť nadpis 'Prehľad bytov' v karte bloku" - karta
   (sButtonom=true, js/apartments.js) už nevykresľuje <h2>"Prehľad bytov"
   (predtým oddeľoval "BLOK A" od riadkov štatistiky svojím vlastným
   margin-bottom:16px, css/apartments.css .apartments-summary-panel h2).
   Bez neho by "BLOK A" nadväzovalo na prvý riadok s VLASTNÝM margin-
   bottom:2px (css/apartments.css .apartments-summary-blok) - príliš
   stiesnené. Táto scoped override (rovnaký vzor ako .blok-badge .summary-
   row vyššie - descendant selektor, vyššia špecificita, žiadny
   !important) prenáša PRESNE tú istú 16px hodnotu z bývalého h2 margin-
   bottom na "BLOK A", takže odstup medzi "BLOK A" a prvým riadkom ostáva
   VIZUÁLNE IDENTICKÝ ako predtým (nie dvojitá medzera, nie stiesnenie).
   Flat 16px (nie calc(16px*K)) - zámerne, zhodné s hodnotou, ktorú
   nahrádza (h2 margin-bottom TIEŽ nebol K-škálovaný) aj so susedným
   .blok-badge .summary-row overridom vyššie (tiež flat 6px) - lokálna
   konvencia tohto konkrétneho panela K nepoužíva, na rozdiel od
   .apartments-summary-cta nižšie v css/apartments.css. Pravý panel
   fasády (#apartments-list-panel .apartments-summary-blok) touto
   scoped triedou nedotknutý - ostáva na pôvodných 2px, keďže tam h2
   naďalej existuje a naďalej robí svoju pôvodnú 16px medzeru sám. */
.blok-badge .apartments-summary-blok {
    margin-bottom: 16px;
}

/* Sekcia zadania "Zmena čitateľnosti panelov a odstup (iba mobil/tablet,
   K-only)", Časť A - zväčšenie textu/ikoniek karty bloku VÝHRADNE na
   dotyku. K-only "skoková" clamp() rampa (rovnaký princíp ako
   .apartments-summary-cta font-size, css/apartments.css:191-193) - pri
   K=1 (PC/touch-table, VRÁTANE dotykového desktopu, kde K je vždy presne
   1) formula vráti PRESNE pôvodnú hodnotu, žiadny @media gate preto
   netreba (bare (hover:none)/(pointer:coarse) by nesprávne zasiahol aj
   touch-desktop s K=1 - K-only tomu zabraňuje). Scoped .blok-badge -
   #apartments-list-panel (fasádny duplikát tej istej .summary-* šablóny,
   css/apartments.css) touto zmenou ZÁMERNE nedotknutý. */
.blok-badge .apartments-summary-blok {
    font-size: clamp(1rem,
                     calc(1rem + 100 * (var(--ui-scale-kompenzacia, 1) - 1) * 1rem),
                     1.25rem);
}

/* Sekcia zadania "Zjednotenie veľkosti popiskov a odstup Prémiovej" -
   horná hranica znížená z 1,15rem na 0,92rem, aby popisky (Dostupné/
   Rezervované/Predané/Špeciálna ponuka) zodpovedali veľkosti referenčných
   popiskov v ľavom filter paneli (.status-checkbox-row, css/filters.css:
   232, resp. jeho živý dotykový override na riadku 428, 0,92rem) -
   VÝHRADNE hodnotovo, K-only mechanizmus je zámerne INÝ (filter panel
   používa bežný `@media (hover:none) and (pointer:coarse)` touch-gate,
   nie K-only - preto sa na touch-desktope K=1 správa inak, viď CLAUDE.md
   sekcia 4). Základ 0,82rem nezmenený. */
.blok-badge {
    --summary-label-max: 0.92rem;
}

.blok-badge .summary-label {
    font-size: clamp(0.82rem,
                     calc(0.82rem + 100 * (var(--ui-scale-kompenzacia, 1) - 1) * 1rem),
                     var(--summary-label-max));
}

/* Číslo v riadku stavu - horná hranica odvodená od hornej hranice popisku
   (--summary-label-max) x 1,2, takže na dotyku (K>1) je číslo presne 1,2x
   popisku; násobiteľ 1,2 je jediná konštanta. Dolná hranica 0,95rem a
   rampa nezmenené - pri K=1 (PC, touch-desktop) bit-identické predošlému
   stavu. tabular-nums drží šírku cifier stabilnú (dvojciferné čísla). */
.blok-badge .summary-count {
    font-size: clamp(0.95rem,
                     calc(0.95rem + 100 * (var(--ui-scale-kompenzacia, 1) - 1) * 1rem),
                     calc(var(--summary-label-max) * 1.2));
    font-variant-numeric: tabular-nums;
}

/* Riadky stavov s príznakom hideInBlockCardCompact (PROJECT_CONFIG.data.
   statuses) sa v karte bloku skrývajú iba pri K>1 (mobil/tablet, trieda
   ui-k-aktivne z js/scale.js). Pravý panel fasády je mimo .blok-badge. */
.ui-k-aktivne .blok-badge .summary-row-kompakt-skryt {
    display: none;
}

/* Bodka/hviezda - jednoduché LINEÁRNE K-škálovanie (nie skoková rampa),
   rovnaký vzor ako napr. .card-thumb (css/apartments.css) - pri K=1 dáva
   calc(Npx*1)=Npx, teda bit-identické pôvodnej flat hodnote bez potreby
   clamp()/gate. */
.blok-badge .summary-dot {
    width: calc(10px * var(--ui-scale-kompenzacia, 1));
    height: calc(10px * var(--ui-scale-kompenzacia, 1));
}

.blok-badge .summary-star {
    font-size: calc(13px * var(--ui-scale-kompenzacia, 1));
    width: calc(10px * var(--ui-scale-kompenzacia, 1));
}

/* CTA "Ponuka bytov" - iba horná hranica font-size rampy sa mení
   (0,92rem->1,1rem), padding rampa (14px->10px, apartments.css:145-147)
   NEDOTKNUTÁ (zadanie). CTA existuje VÝHRADNE v karte bloku (sButtonom=true,
   js/apartments.js) - #apartments-list-panel ju nikdy nevykresľuje, scoped
   override je tu napriek tomu (nie úprava base pravidla v apartments.css)
   kvôli konzistencii s ostatnými Časť A pravidlami a obrane proti
   budúcemu druhému spotrebiteľovi CTA triedy. */
.blok-badge .apartments-summary-cta {
    font-size: clamp(0.78rem,
                     calc(0.78rem + 100 * (var(--ui-scale-kompenzacia, 1) - 1) * 1rem),
                     1.1rem);
}

/* Bočný gap textu tlačidla iba pri K>1 (mobil/tablet, trieda ui-k-aktivne z
   js/scale.js). Šírku karty určuje obsah (tlačidlo width:100%), karta sa
   rozšíri sama o 2x tento padding; nowrap drží "PONUKA BYTOV" na jednom
   riadku aj pri iných fontoch. Pri K=1 sa pravidlo neaplikuje. */
.ui-k-aktivne .blok-badge .apartments-summary-cta {
    padding-inline: calc(14px * var(--ui-scale-kompenzacia, 1));
    white-space: nowrap;
}

/* Vertikálne vycentrovanie tlačidla v karte bloku (VŠETKY zariadenia, K>=1):
   odstup nad tlačidlom (od čiary posledného riadka) sa vyrovná odstupu pod
   ním (po spodný okraj karty), výška karty ostáva rovnaká. Súčet A+B = 12px
   (pôvodný margin-top) + 20px*K (spodný padding karty) + 1px (rámik karty) =
   20px*K + 13px; rovnomerne 10px*K + 6.5px. Padding-bottom = 10px*K + 5.5px
   (6.5px minus 1px rámik). Pri K=1 (PC/touch-table) dáva A=B=16.5px (predtým
   12/21px), pri K>1 (mobil/tablet) bit-identické predošlému stavu - preto
   už nie je potrebná trieda ui-k-aktivne. Konštanty 6.5 / 5.5 závisia od 1px
   rámika a pôvodného flat margin-top 12px (css/apartments.css) - pri ich
   zmene treba prepočítať. Spodný padding karty prepisuje IBA .blok-badge
   (padding .project-info-panel zdieľajú aj panely "Prémiová Rezidencia" -
   nedotknuté). */
.blok-badge .apartments-summary-cta {
    margin-top: calc(10px * var(--ui-scale-kompenzacia, 1) + 6.5px);
}

.blok-badge {
    padding-bottom: calc(10px * var(--ui-scale-kompenzacia, 1) + 5.5px);
}