/* ==========================================================================
   ALLMEBLO. Banery CTA na stronie glownej. 2026-08-11.

   CZEGO DOTYCZY
   Wiersz trzech kwadratowych banerow w bloku appagebuilder 363 (profil 9,
   pozycja 47, hook displayHome): "Darmowe probki tkanin", "Raty 0%" i
   "Skonfiguruj swoj mebel". Wiersz ma w DSL klase alm-cta-row, kazdy ApImage
   klase alm-cta, a przycisk w description klase alm-cta__btn plus modyfikator
   --probki, --raty albo --konfigurator, ktory podaje ikone.

   JAK TO JEST ZBUDOWANE
   Szablon ApImage.tpl renderuje atrybut "description" jako DRUGI element <a>,
   rodzenstwo tego z obrazkiem, w srodku <div class="image_description">:

       <div class="block alm-cta ApImage">
         <a href="..."><img class="lazy img-fluid" data-src="..."></a>
         <a href="..."><div class="image_description">
             <span class="alm-cta__btn alm-cta__btn--probki">Zamow probki</span>
         </div></a>
       </div>

   Drugi <a> nie ma wlasnej klasy i nie da sie jej tam dodac z panelu, wiec
   jedynym pewnym uchwytem jest selektor rodzenstwa "a + a" (0,1,2). Motyw
   uzywa dokladnie tej samej sztuczki na .banner-box .bannerx.ApImage
   a:nth-child(2), wiec to idiom tego szablonu, nie obejscie.

   WARSTWY, w kolejnosci malowania
     1. <img>                                    powiekszenie 1.06 na hover
     2. a:first-of-type::after                   przebiegajacy blysk
     3. .alm-cta::after      z-index 1           zielona ramka radialna, stale
     4. a + a::before        z-index 2           to samo, mocniej, na hover
     5. .image_description   z-index 3           przycisk

   Ramka jest radialna, czyli przezroczysta w srodku i zielona przy krawedziach,
   przez co nie zasłania napisow na grafice, a i tak zamyka kadr. Na hover
   wchodzi druga, mocniejsza warstwa i przez to ramka "rosnie" do srodka.

   IKONY
   Wpisane jako data URI w background-image, bo osadzanie SVG w atrybucie
   description w DSL wymagaloby kodowania cudzyslowow przez _APQUOT_ przy
   kazdym atrybucie sciezki i przy nastepnej edycji z panelu nikt by tego
   nie rozplatal. W CSS ikone zmienia sie w jednym miejscu. Znak # w kolorze
   musi byc zapisany jako %23, inaczej url() konczy sie na nim.

   PRZYCISK JEST WIDOCZNY OD RAZU
   Ekran dotykowy nie ma stanu :hover, a poza tym przycisk ukryty do najechania
   nie mowi, ze kafel jest klikalny. Delikatne, wolne pulsowanie cienia
   (alm-cta-puls) ma to samo zadanie. Cala animacja gasnie przy
   prefers-reduced-motion: reduce.

   Plik wchodzi osobnym <link ?v=> z layout-both-columns.tpl, tylko dla
   page_name == index, wiec po edycji trzeba podbic numer wersji w tym
   szablonie, inaczej zmiana nie dojdzie do przegladarek.
   ========================================================================== */

.alm-cta {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    /* Cienki zielony kant. Sama ramka radialna jest miekka i przy jasnym
       tle grafiki gubi krawedz kafla. */
    box-shadow: 0 0 0 1px rgba(20, 51, 10, .22), 0 10px 26px rgba(20, 51, 10, .10);
    transition: box-shadow .4s ease, transform .4s ease;
}

.alm-cta:hover,
.alm-cta:focus-within {
    box-shadow: 0 0 0 2px rgba(20, 51, 10, .55), 0 18px 40px rgba(20, 51, 10, .26);
    transform: translateY(-4px);
}

/* --- obrazek ----------------------------------------------------------- */

.alm-cta > a {
    display: block;
    text-decoration: none;
}

.alm-cta > a:first-of-type {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}

.alm-cta > a > img,
.alm-cta > img {
    display: block;
    width: 100%;
    height: auto;
    /* Rezerwacja miejsca przed pobraniem obrazka. DSL appagebuilder zapisuje
       width="100%", a szablon wstawia atrybut HTML width tylko gdy jest
       liczba, wiec bez tej reguly baner nie ma proporcji i skacze layout.
       Zrodla to kwadraty 880x880. */
    aspect-ratio: 1 / 1;
    transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}

.alm-cta:hover > a > img,
.alm-cta:focus-within > a > img {
    transform: scale(1.06);
}

/* Blysk przebiegajacy po grafice na najechanie. */
.alm-cta > a:first-of-type::after {
    content: "";
    position: absolute;
    top: -10%;
    left: -70%;
    width: 45%;
    height: 120%;
    pointer-events: none;
    background: linear-gradient(100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .42) 50%,
        rgba(255, 255, 255, 0) 100%);
    transform: skewX(-18deg);
    opacity: 0;
}

.alm-cta:hover > a:first-of-type::after,
.alm-cta:focus-within > a:first-of-type::after {
    animation: alm-cta-blysk .9s ease-out;
}

@keyframes alm-cta-blysk {
    0%   { left: -70%; opacity: 1; }
    100% { left: 125%; opacity: 0; }
}

/* --- zielona ramka radialna -------------------------------------------- */

/* Warstwa stala. pointer-events musi byc none, bo lezy nad obrazkiem
   i inaczej zjadalaby klikniecie w kafel. */
.alm-cta::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    border-radius: 16px;
    background: radial-gradient(120% 120% at 50% 50%,
        rgba(20, 51, 10, 0) 52%,
        rgba(20, 51, 10, .20) 78%,
        rgba(20, 51, 10, .50) 100%);
    transition: opacity .45s ease;
}

/* --- nakladka z przyciskiem -------------------------------------------- */

.alm-cta > a + a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    align-items: center;      /* na srodku wysokosci baneru */
    justify-content: center;  /* i wycentrowany w poziomie */
    overflow: visible;
    text-decoration: none;
}

/* Druga warstwa ramki, mocniejsza i siegajaca glebiej do srodka. Rosnie
   z niej wrazenie, ze obramowanie na hover sie powieksza. */
.alm-cta > a + a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    background: radial-gradient(120% 120% at 50% 50%,
        rgba(20, 51, 10, 0) 26%,
        rgba(20, 51, 10, .34) 62%,
        rgba(20, 51, 10, .74) 100%);
    opacity: 0;
    transition: opacity .45s ease;
}

.alm-cta:hover > a + a::before,
.alm-cta:focus-within > a + a::before {
    opacity: 1;
}

.alm-cta .image_description {
    position: relative;   /* nad oboma warstwami ramki */
    z-index: 3;
    width: 100%;
    padding: 0 14px;
    text-align: center;
}

/* --- przycisk ---------------------------------------------------------- */

.alm-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    background: #14330a;   /* zielen z samych grafik, zmierzona: #123008 */
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .01em;
    padding: 13px 24px;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(10, 24, 6, .34);
    animation: alm-cta-puls 3.4s ease-in-out infinite;
    transition: background-color .25s ease, box-shadow .3s ease, transform .3s ease;
}

/* Ikona tematyczna z lewej i strzalka z prawej. Rozmiar w em, zeby szly
   za zmniejszonym fontem przycisku na waskich ekranach. */
.alm-cta__btn::before,
.alm-cta__btn::after {
    content: "";
    flex: 0 0 auto;
    width: 1.25em;
    height: 1.25em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.alm-cta__btn::after {
    width: 1.05em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='M12.5 6l6 6-6 6'/%3E%3C/svg%3E");
    transition: transform .3s ease;
}

.alm-cta:hover .alm-cta__btn::after,
.alm-cta:focus-within .alm-cta__btn::after {
    transform: translateX(5px);
}

/* probki tkanin: warstwy materialu */
.alm-cta__btn--probki::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 3 7l9 4.2L21 7z'/%3E%3Cpath d='M3 12l9 4.2L21 12'/%3E%3Cpath d='M3 16.9l9 4.2 9-4.2'/%3E%3C/svg%3E");
}

/* raty: karta platnicza */
.alm-cta__btn--raty::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.4' y='5' width='19.2' height='14' rx='2.6'/%3E%3Cpath d='M2.4 9.9h19.2'/%3E%3Cpath d='M6 14.6h4'/%3E%3C/svg%3E");
}

/* konfigurator: suwaki */
.alm-cta__btn--konfigurator::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h4.2M12.8 7H20'/%3E%3Cpath d='M4 17h8.2M16.8 17H20'/%3E%3Ccircle cx='10.5' cy='7' r='2.3'/%3E%3Ccircle cx='14.5' cy='17' r='2.3'/%3E%3C/svg%3E");
}

@keyframes alm-cta-puls {
    0%, 100% { box-shadow: 0 6px 18px rgba(10, 24, 6, .34); }
    50%      { box-shadow: 0 6px 18px rgba(10, 24, 6, .34), 0 0 0 8px rgba(255, 255, 255, .16); }
}

.alm-cta:hover .alm-cta__btn,
.alm-cta:focus-within .alm-cta__btn {
    background: #21580f;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(10, 24, 6, .46);
    animation: none;   /* pulsowanie ma zachecac do najechania, na hover jest zbedne */
}

/* Widoczna obwodka klawiatury. Motyw gasi outline na wielu elementach,
   wiec ustawiamy ja na samym przycisku. */
.alm-cta > a:focus-visible .alm-cta__btn {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* --- waskie ekrany ----------------------------------------------------- */

/* Kolumny maja w DSL sm="6", a sp="12" wchodzi dopiero od 480 px w dol.
   W pasmie 481 do 767 px trzy banery ustawialyby sie 2 plus 1, czyli
   trzeci zostawal sam w wierszu. Tutaj ida na pelna szerokosc. */
@media (min-width: 481px) and (max-width: 767px) {
    .alm-cta-row > .ApColumn {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
}

@media (max-width: 1199px) {
    .alm-cta__btn {
        font-size: 14px;
        padding: 11px 20px;
        gap: 8px;
    }
}

/* Na ekranie dotykowym nie ma hover, wiec ramka i tak musi byc czytelna
   od razu, a pulsowanie przy trzech kaflach jeden pod drugim rozprasza. */
@media (hover: none) {
    .alm-cta__btn {
        animation: none;
    }
    .alm-cta::after {
        background: radial-gradient(120% 120% at 50% 50%,
            rgba(20, 51, 10, 0) 40%,
            rgba(20, 51, 10, .28) 70%,
            rgba(20, 51, 10, .62) 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .alm-cta,
    .alm-cta > a > img,
    .alm-cta__btn,
    .alm-cta__btn::after {
        transition: none;
        animation: none;
    }
    .alm-cta:hover,
    .alm-cta:focus-within,
    .alm-cta:hover > a > img,
    .alm-cta:focus-within > a > img,
    .alm-cta:hover .alm-cta__btn,
    .alm-cta:focus-within .alm-cta__btn,
    .alm-cta:hover .alm-cta__btn::after,
    .alm-cta:focus-within .alm-cta__btn::after {
        transform: none;
    }
    .alm-cta:hover > a:first-of-type::after,
    .alm-cta:focus-within > a:first-of-type::after {
        animation: none;
        opacity: 0;
    }
}