/**
 * Banner Sections Module - Frontend styles
 * 
 * @author    Woohoo.pl
 * @copyright 2025 Woohoo.pl
 * @license   https://opensource.org/licenses/AFL-3.0
 */

/* =============================================
   Base section container
   ============================================= */
.wh-banners {
    box-sizing: border-box;
    padding: 15px 0;
}

/* =============================================
   Section title
   ============================================= */
.wh-banners__title {
    margin-bottom: 15px;
}

.wh-banners__title h2 {
    font-family: var(--wh-font-heading, var(--wh-font-body, inherit));
    font-size: var(--wh-font-size-h2, 24px);
    font-weight: var(--wh-font-weight-heading, var(--wh-font-weight-bold, 700));
    line-height: 1.3;
    margin: 0;
    color: var(--wh-color-text-primary, #333);
}

.wh-banners__title--left {
    text-align: left;
}

.wh-banners__title--center {
    text-align: center;
}

.wh-banners__title--right {
    text-align: right;
}

/* =============================================
   Grid layout
   ============================================= */
.wh-banners__grid {
    display: flex;
    flex-wrap: wrap;
    /* ⚠️ fallback 15px = wartosc sprzed 1.5.0. Projekt, ktory chce innego odstepu,
       ustawia `--wh-bn-gap` u siebie — modul jest wspolny i nie zmieniamy wygladu
       sklepom, ktore o to nie prosily. */
    gap: var(--wh-bn-gap, 15px);
}

/* ⚠️ Szerokosci liczone Z ODSTEPU (`--wh-bn-gap`), nie z zahardkodowanej polowki.
   Do 1.5.0 stalo tu `calc(50% - 8px)` — dobrane pod domyslne 15px. Gdy projekt
   ustawil odstep 2.5rem, dwa kafelki po `50% - 8px` przekraczaly 100% i drugi
   spadal do nowego rzedu; sekcja wygladala na jednokolumnowa, bez zadnego bledu.
   Jesli odstep jest tokenem, szerokosc MUSI byc z niego liczona. */
/* 1 column = full width */
.wh-banners--cols-1 .wh-banners__item {
    flex: 0 0 100%;
}

/* 2 columns */
.wh-banners--cols-2 .wh-banners__item {
    flex: 0 0 calc(50% - (var(--wh-bn-gap, 15px) / 2));
}

/* 3 columns */
.wh-banners--cols-3 .wh-banners__item {
    flex: 0 0 calc(33.333% - (var(--wh-bn-gap, 15px) * 2 / 3));
}

/* 4 columns */
.wh-banners--cols-4 .wh-banners__item {
    flex: 0 0 calc(25% - (var(--wh-bn-gap, 15px) * 3 / 4));
}

/* 5 columns */
.wh-banners--cols-5 .wh-banners__item {
    flex: 0 0 calc(20% - (var(--wh-bn-gap, 15px) * 4 / 5));
}

/* =============================================
   Item (single banner tile)
   ============================================= */
.wh-banners__item {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--wh-bn-radius, 8px);
    box-sizing: border-box;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) {
a.wh-banners__item:hover {
    opacity: 0.92;
    text-decoration: none;
    color: inherit;
}
}

/* =============================================
   Media containers (desktop / mobile switch)
   ============================================= */
.wh-banners__media--desktop {
    display: block;
}

.wh-banners__media--mobile {
    display: none;
}

/* =============================================
   Image & Video
   ============================================= */
.wh-banners__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.wh-banners__video {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* =============================================
   Responsive visibility
   ============================================= */
.wh-desktop-only {
    display: block;
}

a.wh-desktop-only,
a.wh-banners__item.wh-desktop-only {
    display: block;
}

.wh-mobile-only {
    display: none;
}

/* =============================================
   Tablet (769px - 1024px)
   ============================================= */

/* =============================================
   Napis na kafelku (1.5.0)

   Desktop: napis LEZY NA obrazku, w lewym dolnym rogu.
   Komorki: napis idzie POD obrazek, na bialym tle, z kreska pod spodem.
   HTML jest jeden — o ukladzie decyduje wylacznie CSS.
   ============================================= */
.wh-banners__item {
    /* napis pozycjonowany wzgledem kafelka */
    position: relative;
}

.wh-banners__label {
    display: flex;
    align-items: center;
    gap: var(--wh-bn-label-gap, max(17px, 1.7rem));
    position: absolute;
    left: var(--wh-bn-label-left, 5rem);
    right: var(--wh-bn-label-left, 5rem);
    bottom: var(--wh-bn-label-bottom, 4rem);
    font-family: var(--wh-font-body, sans-serif);
    font-size: var(--wh-bn-label-fs, 2.6rem);
    font-weight: var(--wh-font-weight-regular, 400);
    line-height: 1;                       /* 100% */
    letter-spacing: var(--wh-bn-label-ls, .2rem);
    text-transform: uppercase;
    /* Kolor niesie `color`, a strzalka bierze go przez `currentColor` —
       dzieki temu parzystosc ustawia sie w JEDNYM miejscu. */
    color: var(--wh-bn-label-color-odd, var(--wh-color-text-muted, #DCDADA));
    pointer-events: none;                 /* klikalny jest caly kafelek */
}

/* Kafelki 2, 4, 6… na bialo; 1, 3, 5… zostaja przy kolorze wyzej. */
.wh-banners__item:nth-child(even) .wh-banners__label {
    color: var(--wh-bn-label-color-even, var(--wh-color-bg-base, #FFFFFF));
}

.wh-banners__label-text {
    /* dlugi napis ma sie zlamac wewnatrz kafelka, nie wyjechac poza obrazek */
    min-width: 0;
}

/* ⛔ Ruch dostaje OPAKOWANIE, nie samo `<svg>`. Zmierzone 2026-09-16 (Chrome):
   `transform` na `<svg>`, ktory ma `transition: transform`, nie daje ZADNEGO
   ruchu — `getComputedStyle` zwraca `matrix(1,0,0,1,0,0)`, element stoi. Ten sam
   `translateX(6px)` po wylaczeniu `transition` przesuwa go o 6 px, a na `<span>`
   dziala zawsze. Objaw myli: regula jest w kaskadzie, `:hover` = true, media
   pasuje, atrybuty `width`/`height` sa — i nic sie nie rusza. */
.wh-banners__arrow-box {
    display: inline-flex;
    flex: 0 0 auto;                       /* strzalka nigdy sie nie sciska */
    margin-left: auto;                    /* do prawej krawedzi napisu */
    transition: transform .25s ease;
}

.wh-banners__arrow {
    display: block;
    width: var(--wh-bn-arrow-size, 1.6rem);
    height: var(--wh-bn-arrow-size, 1.6rem);
}

/* Strzalka odjezdza w bok, gdy kursor jest na kafelku.
   ⚠️ `@media (hover: hover)`, nie `min-width`: na dotyku `:hover` zostaje po
   tapnieciu i strzalka zostalaby przesunieta do czasu dotkniecia czegos innego.
   Szerokosc ekranu nie mowi nic o tym, czy urzadzenie ma kursor. */
@media (hover: hover) {
    a.wh-banners__item:hover .wh-banners__arrow-box {
        transform: translateX(var(--wh-bn-arrow-move, .6rem));
    }
}

/* Kto wylaczyl animacje w systemie, nie dostaje ruchu — sama strzalka zostaje. */
@media (prefers-reduced-motion: reduce) {
    .wh-banners__arrow-box {
        transition: none;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .wh-banners--cols-5 .wh-banners__item {
        flex: 0 0 calc(33.333% - (var(--wh-bn-gap, 15px) * 2 / 3));
    }

    .wh-banners--cols-4 .wh-banners__item {
        flex: 0 0 calc(50% - (var(--wh-bn-gap, 15px) / 2));
    }
}

/* =============================================
   Mobile (max-width: 768px)
   ============================================= */
@media (max-width: 768px) {
    .wh-desktop-only {
        display: none !important;
    }

    .wh-mobile-only {
        display: block !important;
    }

    a.wh-mobile-only,
    a.wh-banners__item.wh-mobile-only {
        display: block !important;
    }

    /* Switch media containers */
    .wh-banners__media--desktop {
        display: none;
    }

    .wh-banners__media--mobile {
        display: block;
    }

    /* Mobile: 2 columns for 3+ items, full width for 1-2 */
    .wh-banners--cols-3 .wh-banners__item,
    .wh-banners--cols-4 .wh-banners__item,
    .wh-banners--cols-5 .wh-banners__item {
        flex: 0 0 calc(50% - (var(--wh-bn-gap, 15px) / 2));
    }

    .wh-banners--cols-1 .wh-banners__item,
    .wh-banners--cols-2 .wh-banners__item {
        flex: 0 0 100%;
    }

    .wh-banners__title h2 {
        font-size: var(--wh-font-size-h3, 20px);
    }

    .wh-banners__grid {
        gap: 10px;
    }

    .wh-banners__item {
        border-radius: 6px;
    }
}

/* =============================================
   Very small mobile (max-width: 480px)
   ============================================= */
@media (max-width: 480px) {
    .wh-banners--cols-3 .wh-banners__item,
    .wh-banners--cols-4 .wh-banners__item,
    .wh-banners--cols-5 .wh-banners__item {
        flex: 0 0 100%;
    }

    .wh-banners__title h2 {
        font-size: var(--wh-font-size-h3, 18px);
    }
}

/* ── Komorki: napis pod obrazkiem (1.5.0) ─────────────────────────────────
   Do 460 px mieszcza sie jeszcze DWA kafelki obok siebie (decyzja Alexa
   2026-09-16); ponizej ida jeden pod drugim. */
@media (max-width: 768px) {
    .wh-banners__grid {
        gap: var(--wh-bn-gap-mobile-row, 14px) var(--wh-bn-gap-mobile-col, 16px);
    }

    .wh-banners__item {
        /* kreska pod calym kafelkiem — razem z napisem, nie pod samym obrazkiem */
        border-bottom: 1px solid var(--wh-bn-label-line, var(--wh-color-text-primary, #000));
        border-radius: 0;
        overflow: visible;
    }

    .wh-banners__label {
        position: static;                 /* wychodzi z obrazka pod niego */
        padding: var(--wh-bn-label-pad-mobile, 5px) 0;
        font-size: var(--wh-bn-label-fs-mobile, 1.4rem);
        color: var(--wh-bn-label-color-mobile, var(--wh-color-text-primary, #000));
    }

    /* na komorkach oba kolory sa takie same — napis lezy na bialym, nie na zdjeciu */
    .wh-banners__item:nth-child(even) .wh-banners__label {
        color: var(--wh-bn-label-color-mobile, var(--wh-color-text-primary, #000));
    }

    .wh-banners__arrow {
        width: var(--wh-bn-arrow-size-mobile, .7rem);
        height: var(--wh-bn-arrow-size-mobile, .7rem);
    }
}