/* ##########################################################################
   ALLMEBLO. Konfigurator idxrcustomproduct: siatka kafelkow i miniatury.
   Wdrozone 2026-08-06 (runda "kolory tkanin").

   CO BYLO ZEPSUTE
   Krok 3 "Wybierz kolor tkaniny" (komponenty 7, 8, 13, 14, 20, 21, 22, 23,
   24, 25, 26, 27, 67, 68) ma w bazie columns=4, wiec modul nadaje kafelkom
   klasy "col-lg-3 col-md-6 cl_4". Pomiar na zywo, tkanina RICO (komponent 24,
   13 opcji), przegladarka Chromium:

     szerokosc okna 1440 -> kontener kroku 518 px -> kafelek 124 px
     szerokosc okna  992 -> kontener kroku 368 px -> kafelek  86 px

   a zdjecie w obu przypadkach renderowalo sie na 180 x 127 px, bo regula
   z custom.css (sekcja K3, 2026-08-05) ustawia

     #Config .card-block .option_div img { max-width: 180px; max-height: 180px }

   To jest limit w PIKSELACH, a nie w procentach, wiec przy kafelku 124 px
   zdjecie wystawalo o 56 px, a przy 86 px bylo ponad dwa razy szersze od
   swojej komorki i wchodzilo na sasiada. Regula K3 powstala na krokach,
   ktorych zrodla maja 330x240 i 225x225, i tam dziala; kroki z kolorami
   tkanin maja zrodla 270x270, 1200x1200, 2000x2000 i 2245x1587 i tam ta
   sama regula rozjezdza siatke.

   Drugi objaw: rozne proporcje zrodel w jednym kroku (komponent 13 ma
   240x160, 270x270, 217x145 i 1106x735), wiec zdjecia mialy rozna wysokosc
   i wiersze nie stały w jednej linii.

   CO ROBI TEN PLIK
   1. Kafelki krokow wielokolumnowych dostaja jawne szerokosci procentowe
      dobrane do RZECZYWISTEJ szerokosci kontenera, a nie do szerokosci okna.
   2. Zdjecie siedzi w kwadratowym polu 1:1 i jest w nie wpisywane przez
      object-fit: contain, wiec nic nie jest ucinane ani rozciagane, a siatka
      jest rowna niezaleznie od proporcji zrodla.
   3. Stan zaznaczenia opiera sie na natywnym :checked ukrytego radia, ma
      ramke, tlo I znacznik, czyli nie tylko kolor obramowania.

   Podmiane zrodla zdjecia na miniature robi assets/js/konfigurator.js.
   ########################################################################## */


/* ==========================================================================
   1. Zabezpieczenie ogolne: zdjecie opcji nigdy nie wystaje poza kafelek

   Zostawiamy dotychczasowy limit 180/140 px z custom.css, ale skladamy go
   z limitem 100 procent szerokosci kafelka. min() jest wspierane wszedzie
   tam, gdzie dziala reszta motywu (Chrome 79+, Safari 13.1+, Firefox 75+).
   Dotyczy krokow jedno- i dwukolumnowych, ktore poza tym zostaja bez zmian.
   ========================================================================== */
#Config .card-block .option_div .image-container img {
    max-width: min(180px, 100%);
}

@media (max-width: 991px) {
    #Config .card-block .option_div .image-container img {
        max-width: min(140px, 100%);
    }
}


/* ==========================================================================
   2. Siatka krokow wielokolumnowych (cl_3, cl_4)

   Liczba kolumn wynika ze zmierzonej szerokosci kontenera kroku, bo
   konfigurator siedzi w waskiej prawej kolumnie karty produktu i szerokosc
   okna nie mowi o niej prawdy:

     okno 1920..1600 -> kontener 551 px
     okno 1440       -> kontener 518 px
     okno 1280       -> kontener 501 px
     okno 1200       -> kontener 468 px
     okno 1100..992  -> kontener 368 px
     okno  768       -> kontener 288 px
     okno  600       -> kontener 568 px (uklad przechodzi na jedna kolumne)
     okno  390       -> kontener 358 px

   Kolumny sa dobrane tak, zeby kafelek mial nie mniej niz okolo 115 px,
   czyli tyle, ile potrzeba na ocene koloru i splotu tkaniny:

     okno >= 1200      -> 3 kolumny -> kafelek 148..175 px
     okno 992..1199    -> 2 kolumny -> kafelek 176 px
     okno 768..991     -> 2 kolumny -> kafelek 136..163 px
     okno < 768        -> BEZ ZMIAN, patrz nizej

   Skok liczby kolumn miedzy 1199 a 1200 nie jest przypadkiem: to tam uklad
   karty produktu zmienia szerokosc kolumny z konfiguratorem, 368 -> 468 px.

   PONIZEJ 768 px NIC TU NIE ZMIENIAMY. custom.css (sekcja K18 z 2026-08-05)
   robi tam z kafelka poziomy wiersz na cala szerokosc: zdjecie po lewej,
   ograniczone do 96 px, opis po prawej. Zmierzone przy oknie 390 px: zdjecie
   96 x 68 px, kafelek 334 px, czyli nic nie wystaje i nie ma czego naprawiac.
   Probne nalozenie tu siatki dwukolumnowej rozbilo tamten uklad (opis
   wychodzil poza kafelek), wiec wszystkie reguly siatki i kwadratowego pola
   zdjecia sa zamkniete w @media (min-width: 768px).

   Cztery kolumny z ustawienia modulu (columns=4 w bazie) daja przy oknie
   1440 kafelek 116 px i zdjecie 90 px, a przy oknie 992 kafelek 86 px,
   czyli mniej niz sama nazwa opcji. Dlatego liczba kolumn jest tutaj
   pochodna szerokosci kontenera, a nie wpisu w bazie.

   Marginesy 4 px z kazdej strony sa wliczone w calc, wiec suma kafelkow
   w wierszu to dokladnie 100 procent i ostatnia kolumna nie spada nizej.
   ========================================================================== */
@media (min-width: 768px) {
    #Config .card-block > .option_div.cl_3,
    #Config .card-block > .option_div.cl_4 {
        margin-left: 4px;
        margin-right: 4px;
    }
}

/* 3 kolumny */
@media (min-width: 1200px) {
    #Config .card-block > .option_div.cl_3,
    #Config .card-block > .option_div.cl_4 {
        flex: 0 0 calc(33.3333% - 8px);
        max-width: calc(33.3333% - 8px);
    }
}

/* 2 kolumny */
@media (min-width: 992px) and (max-width: 1199px) {
    #Config .card-block > .option_div.cl_3,
    #Config .card-block > .option_div.cl_4 {
        flex: 0 0 calc(50% - 8px);
        max-width: calc(50% - 8px);
    }
}

/* 2 kolumny */
@media (min-width: 768px) and (max-width: 991px) {
    #Config .card-block > .option_div.cl_3,
    #Config .card-block > .option_div.cl_4 {
        flex: 0 0 calc(50% - 8px);
        max-width: calc(50% - 8px);
    }
}


/* ==========================================================================
   3. Kwadratowe pole zdjecia w krokach wielokolumnowych

   Pole ma stale proporcje 1:1 jeszcze zanim plik sie pobierze, wiec kafelek
   nie zmienia wysokosci po zaladowaniu obrazka (zero przesuniec ukladu).
   object-fit: contain, a nie cover, bo czesc zrodel ma wypalony podpis:
   pliki tkaniny RICO (2245x1587) maja w prawym dolnym rogu napis "RICO 01",
   a bannery rodzajow tkanin (313x162) maja w lewym dolnym rogu wtret z
   powiekszeniem splotu. Kadrowanie do kwadratu ucinalo jedno i drugie.

   Specyficznosc (1 identyfikator, 4 klasy, 1 typ) jest wyzsza niz reguly
   K3 z custom.css (1 identyfikator, 3 klasy, 1 typ), wiec limit 180 px
   nie ma tu zastosowania. Sprawdzone przez getComputedStyle na zywo.
   ========================================================================== */
@media (min-width: 768px) {
    #Config .card-block > .option_div.cl_3 > .image-container,
    #Config .card-block > .option_div.cl_4 > .image-container {
        display: block;
        width: 100%;
        max-width: 100%;
        aspect-ratio: 1 / 1;
        /* KONIECZNE. front.js w handlerze 'shown.bs.collapse' wyrownuje kafelki
           ustawiajac im sztywna wysokosc w stylu wpisanym w element. Kafelek jest
           kolumna flex, wiec bez flex-shrink: 0 pole zdjecia zostawaloby wtedy
           sciskane i przestawalo byc kwadratem. Zmierzone przy oknie 992 px:
           pole 81 x 76 zamiast 81 x 81. */
        flex: 0 0 auto;
        margin: 0 0 4px;
        background: #f4f1ee;
        border-radius: 8px;
        overflow: hidden;
    }

    #Config .card-block > .option_div.cl_3 > .image-container > a.zoom,
    #Config .card-block > .option_div.cl_4 > .image-container > a.zoom {
        display: block;
        width: 100%;
        height: 100%;
    }

    #Config .card-block > .option_div.cl_3 > .image-container img,
    #Config .card-block > .option_div.cl_4 > .image-container img {
        display: block;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        border-radius: 8px;
    }

    /* Lupa ma zostac odznaka w rogu, a nie rozpychac kwadratowego pola.
       left: auto jest tu KONIECZNE. Modul ustawia .zoom-imagen { left: 25px }
       w views/css/17/front.css, custom.css dokladalo tylko right: 6px, a przy
       elemencie o znanej szerokosci wygrywa left. Zmierzone: odznaka stala
       25 px od LEWEJ krawedzi zdjecia, czyli prawie na srodku kafelka
       szerokiego na 131 px, i zaslaniala probke tkaniny. */
    #Config .card-block > .option_div.cl_3 > .image-container > a.zoom .zoom-imagen,
    #Config .card-block > .option_div.cl_4 > .image-container > a.zoom .zoom-imagen {
        top: 5px;
        right: 5px;
        left: auto;
        width: 26px;
        height: 26px;
        font-size: 16px;
    }

    /* Modul rezerwuje nad kazdym kafelkiem pusty pasek 24 px z marginesami
       10 px na ikone "done" (.check-symbol { height: 24px; margin: 10px 0 }).
       W siatce wielokolumnowej to 44 px na kafelek zabrane samym odstepem,
       a stan zaznaczenia i tak niesie ramka, tlo, kolor nazwy oraz odznaka
       z fajka wstawiana ponizej przy :checked. Pasek zwijamy. */
    #Config .card-block > .option_div.cl_3 > .check-symbol,
    #Config .card-block > .option_div.cl_4 > .check-symbol {
        display: none;
    }
}


/* ==========================================================================
   4. Powiekszenie (modal)

   front.js przenosi wszystkie .modal z kafelkow prosto do
   #component_steps_container, wiec po starcie strony zdjecie w modalu NIE
   jest juz potomkiem .card-block i regula K3 go nie dotyczy. Bez wlasnej
   reguly modal pokazywalby plik w naturalnym rozmiarze, czyli nawet
   2245 px szerokosci. Tutaj wpisujemy go w okno.
   ========================================================================== */
#component_steps_container .modal .modal-dialog {
    max-width: 560px;
}

#component_steps_container .modal .modal-body img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 6px;
}


/* ==========================================================================
   5. Stan zaznaczenia i klawiatura

   Modul renderuje przed kazdym kafelkiem prawdziwy <input type="radio">
   z klasa "hidden", czyli display:none. Element schowany przez display:none
   nie istnieje dla czytnika ekranu i nie da sie na niego wejsc tabem, wiec
   caly wybor tkaniny byl dostepny wylacznie myszka, a stan zaznaczenia
   niosla tylko ikona "done" wstawiana skryptem.

   Tutaj radio przestaje byc display:none, a zaczyna byc niewidoczne
   wizualnie (opacity: 0), czyli dalej nie zajmuje miejsca w ukladzie, ale
   jest normalna grupa radio: czytnik ekranu czyta nazwe opcji z <label for>,
   strzalki przechodza miedzy tkaninami, spacja wybiera. Zaznaczenie
   pokazujemy przez :checked + kafelek, wiec nie zalezy od JavaScriptu.

   Sygnal zaznaczenia jest potrojny: ramka, tlo I znacznik z fajka w rogu.
   Sam kolor ramki by nie wystarczyl.
   ========================================================================== */
/* Kontener musi byc pozycjonowany, bo ukryte radio jest position: absolute.
   Bez tego przyczepiloby sie do dalekiego przodka i moglo rozpychac strone. */
#Config .card-block {
    position: relative;
}

#Config .card-block > input[type="radio"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    /* Klikniecie obsluguje kafelek, radio ma sluzyc tylko klawiaturze
       i czytnikowi ekranu. Bez tego niewidoczny 1 px potrafilby przechwycic
       klikniecie w lewym gornym rogu kroku. */
    pointer-events: none;
    /* !important jest tu KONIECZNE i sprawdzone przez CSS.getMatchedStylesForNode:
       w arkuszu motywu lezy .hidden { display: none !important }, wiec bez tego
       radio zostaje display:none, czyli nie istnieje dla czytnika ekranu i nie
       da sie na nie wejsc tabem. To byl caly powod, dla ktorego wybor tkaniny
       dzialal wylacznie myszka. */
    display: block !important;
    /* Ta sama regula .hidden ustawia rowniez visibility: hidden !important,
       a element z visibility: hidden dalej nie przyjmuje fokusu. Zmierzone:
       po samym display: block wywolanie focus() nadal zostawialo
       document.activeElement na <body>. */
    visibility: visible !important;
    /* nadpisuje #Config .card-block > *:not(.option_div) { flex: 0 0 100% } z custom.css */
    flex: 0 0 auto;
}

#Config .card-block > input[type="radio"]:checked + .option_div {
    border-color: #2a8300;
    box-shadow: inset 0 0 0 2px #2a8300;
    background: #f4faef;
}

#Config .card-block > input[type="radio"]:checked + .option_div .option_titles {
    color: #1f6300;
}

/* Znacznik wyboru: nie jest to sam kolor, tylko widoczna fajka na krawedzi
   zdjecia. Modul pokazuje wlasna ikone .check-symbol i ona zostaje;
   ten znacznik dziala takze wtedy, gdy skrypt modulu jeszcze nie zadzialal. */
#Config .card-block > input[type="radio"]:checked + .option_div > .image-container::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 6px;
    left: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #2a8300 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

#Config .card-block > .option_div > .image-container {
    position: relative;
}

/* Fokus z klawiatury musi byc widoczny na kafelku, bo samo radio ma 1 px. */
#Config .card-block > input[type="radio"]:focus + .option_div {
    outline: 3px solid #1f6300;
    outline-offset: 2px;
}

#Config .card-block > input[type="radio"]:focus:not(:focus-visible) + .option_div {
    outline: none;
}

#Config .card-block > input[type="radio"]:focus-visible + .option_div {
    outline: 3px solid #1f6300;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    #Config .card-block .option_div,
    #Config .card-block .option_div img {
        transition: none !important;
    }
}