/**
 * wh_instafeed — Frontend styles
 *
 * Instagram-gradient accent, Swiper slider, hover overlays.
 * Lazy-loaded images, responsive breakpoints.
 *
 * @author    Woohoo.pl
 * @copyright 2025 Woohoo.pl
 */

/* ======================================================
   TOKENY MODULU
   ------------------------------------------------------
   Fallback = dotychczasowa wartosc, wiec migracja niczego nie zmienia wizualnie,
   dopoki branza nie nadpisze. Standard: CLAUDE.md 5a.
   ====================================================== */

:root {
    /* ⚠️ KOLORY MARKI INSTAGRAM — NIE podpinac pod --wh-color-primary/accent.
       Gradient identyfikuje serwis; brandowa ikona Instagrama przestaje byc
       rozpoznawalna. Ten sam wzorzec co --wh-sl-fb-* (wh_sociallogin)
       i --wh-pv-youtube (wh_productvideo).
       Zapisane jako TRIPLETY RGB, bo sa uzywane takze w rgba() z przezroczystoscia. */
    --wh-if-yellow: 253, 244, 151;
    --wh-if-orange: 253, 89, 73;
    --wh-if-magenta: 214, 36, 159;
    --wh-if-blue: 40, 90, 235;

    /* Tlo strzalki karuzeli — pojlprzezroczysta biel na zdjeciu. */
    --wh-if-arrow-bg: color-mix(in srgb, var(--wh-color-bg-base, #fff) 92%, transparent);
    /* Cienie strzalki: paleta ma inne wartosci (--wh-shadow-sm/md), a to detal
       komponentu na zdjeciu — zostaja lokalne. */
    --wh-if-arrow-shadow: var(--wh-shadow-sm, 0 2px 8px rgba(0, 0, 0, .12));
    --wh-if-arrow-shadow-hover: var(--wh-shadow-md, 0 4px 12px rgba(0, 0, 0, .18));

    /* Promien ikony IG — 7 px lezy miedzy --wh-radius-sm (4) a -md (8). */
    --wh-if-icon-radius: 7px;
    --wh-if-icon-radius-sm: 5px;
    /* Przycisk „Obserwuj" — kapsulka o staloj wartosci, nie --wh-radius-pill,
       bo pill (99.9rem) na niskim przycisku wyglada tak samo, ale odbiera
       branzy mozliwosc ustawienia posredniego zaokraglenia. */
    --wh-if-follow-radius: 24px;

    --wh-if-hover-scale: 1.06;
    --wh-if-arrow-hover-scale: 1.08;
}

/* ── Section container ── */
.wh-instafeed {
    position: relative;
    padding: 30px 0;
    overflow: hidden;
}

/* ── Header ── */
.wh-instafeed__header {
    margin-bottom: 20px;
    padding: 0 15px;
}
.wh-instafeed__header--left { text-align: left; }
.wh-instafeed__header--center { text-align: center; }
.wh-instafeed__header--right { text-align: right; }

.wh-instafeed__title {
    font-size: var(--wh-font-size-base, 1.6rem);
    font-weight: var(--wh-font-weight-bold, 700);
    margin: 0 0 6px;
    line-height: 1.3;
}
.wh-instafeed__title a {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: opacity var(--wh-duration-fast, .2s) ease;
}
.wh-instafeed__title a:hover {
    opacity: .8;
}
.wh-instafeed__subtitle {
    font-size: var(--wh-font-size-body, 14px);
    color: var(--wh-color-text-muted, #737373);
    margin: 0;
}

/* ── Instagram icon (gradient) ── */
.wh-instafeed__ig-icon {
    display: inline-block;
    width: 26px;
    height: 26px;
    background: radial-gradient(circle at 30% 107%,
        rgb(var(--wh-if-yellow, 253, 244, 151)) 0%,
        rgb(var(--wh-if-yellow, 253, 244, 151)) 5%,
        rgb(var(--wh-if-orange, 253, 89, 73)) 45%,
        rgb(var(--wh-if-magenta, 214, 36, 159)) 60%,
        rgb(var(--wh-if-blue, 40, 90, 235)) 90%);
    border-radius: var(--wh-if-icon-radius, 7px);
    position: relative;
    flex-shrink: 0;
}
.wh-instafeed__ig-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border: 2px solid var(--wh-color-white, #fff);
    border-radius: 50%;
}
.wh-instafeed__ig-icon::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 3px;
    height: 3px;
    background: var(--wh-color-white, #fff);
    border-radius: 50%;
}
.wh-instafeed__ig-icon--sm {
    width: 20px;
    height: 20px;
    border-radius: var(--wh-if-icon-radius-sm, 5px);
}
.wh-instafeed__ig-icon--sm::before {
    width: 9px;
    height: 9px;
    border-width: 1.5px;
}
.wh-instafeed__ig-icon--sm::after {
    top: 3px;
    right: 3px;
    width: 2.5px;
    height: 2.5px;
}

/* ── Swiper slide / image ── */
.wh-instafeed__item {
    display: block;
    text-decoration: none;
}
.wh-instafeed__img-wrap {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 aspect ratio */
    overflow: hidden;
    border-radius: var(--wh-radius-sm, 4px);
    background: var(--wh-color-bg-subtle, #f0f0f0);
}
.wh-instafeed__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--wh-duration-slow, .4s) ease;
}
.wh-instafeed__item:hover .wh-instafeed__img {
    transform: scale(var(--wh-if-hover-scale, 1.06));
}

/* ── Hover overlay ── */
.wh-instafeed__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
        rgba(var(--wh-if-orange, 253, 89, 73), .5) 0%,
        rgba(var(--wh-if-magenta, 214, 36, 159), .5) 50%,
        rgba(var(--wh-if-blue, 40, 90, 235), .5) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--wh-duration-base, .3s) ease;
    border-radius: var(--wh-radius-sm, 4px);
}
.wh-instafeed__item:hover .wh-instafeed__overlay {
    opacity: 1;
}
.wh-instafeed__overlay-icon {
    display: block;
    width: 36px;
    height: 36px;
    position: relative;
}
.wh-instafeed__overlay-icon::before,
.wh-instafeed__overlay-icon::after {
    content: '';
    position: absolute;
    background: var(--wh-color-white, #fff);
    border-radius: var(--wh-radius-xs, 2px);
}
.wh-instafeed__overlay-icon::before {
    /* External link icon - horizontal */
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2px;
    transform: translate(-50%, -50%) rotate(-45deg);
}
.wh-instafeed__overlay-icon::after {
    /* Arrow head */
    top: 7px;
    right: 5px;
    width: 10px;
    height: 10px;
    background: transparent;
    border-top: 2px solid var(--wh-color-white, #fff);
    border-right: 2px solid var(--wh-color-white, #fff);
    border-radius: 0;
    transform: rotate(0deg);
}

/* ── Swiper arrows (custom SVG chevrons) ── */
.wh-instafeed__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--wh-if-arrow-bg, rgba(255, 255, 255, .92));
    border: none;
    border-radius: 50%;
    box-shadow: var(--wh-if-arrow-shadow, 0 2px 8px rgba(0, 0, 0, .12));
    cursor: pointer;
    color: var(--wh-color-text-primary, #262626);
    padding: 0;
    transition: opacity var(--wh-duration-fast, .2s) ease, transform var(--wh-duration-fast, .2s) ease, box-shadow var(--wh-duration-fast, .2s) ease;
}
.wh-instafeed__arrow:hover {
    transform: translateY(-50%) scale(var(--wh-if-arrow-hover-scale, 1.08));
    box-shadow: var(--wh-if-arrow-shadow-hover, 0 4px 12px rgba(0, 0, 0, .18));
}
.wh-instafeed__arrow--prev {
    left: 8px;
}
.wh-instafeed__arrow--next {
    right: 8px;
}
.wh-instafeed__arrow svg {
    width: 14px;
    height: 24px;
    flex-shrink: 0;
}
.wh-instafeed__arrow.swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
}

/* ── Dots ── */
.wh-instafeed__dots.swiper-pagination {
    position: relative;
    margin-top: 16px;
}
.wh-instafeed__dots .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: var(--wh-color-border-subtle, #dbdbdb);
    opacity: 1;
    transition: background var(--wh-duration-fast, .2s) ease;
}
.wh-instafeed__dots .swiper-pagination-bullet-active {
    background: linear-gradient(135deg, rgb(var(--wh-if-orange, 253, 89, 73)), rgb(var(--wh-if-magenta, 214, 36, 159)));
}

/* ── Follow button ── */
.wh-instafeed__follow {
    margin-top: 18px;
    padding: 0 15px;
}
.wh-instafeed__follow--left { text-align: left; }
.wh-instafeed__follow--center { text-align: center; }
.wh-instafeed__follow--right { text-align: right; }

.wh-instafeed__follow-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border: 1.5px solid var(--wh-color-border-subtle, #dbdbdb);
    border-radius: var(--wh-if-follow-radius, 24px);
    font-size: var(--wh-font-size-body, 14px);
    font-weight: var(--wh-font-weight-semibold, 600);
    color: var(--wh-color-text-primary, #262626);
    text-decoration: none;
    transition: border-color var(--wh-duration-fast, .2s) ease, color var(--wh-duration-fast, .2s) ease;
}
.wh-instafeed__follow-btn:hover {
    border-color: rgb(var(--wh-if-magenta, 214, 36, 159));
    color: rgb(var(--wh-if-magenta, 214, 36, 159));
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .wh-instafeed {
        padding: 20px 0;
    }
    .wh-instafeed__title {
        font-size: var(--wh-font-size-lg, 18px);
    }
    .wh-instafeed__arrow {
        display: none;
    }
}

/* =====================================================================
   UKLAD `grid` — statyczna siatka zamiast slidera
   =====================================================================
   Wszystkie wymiary sa tokenami: ten sam modul obsluguje sklepy o zupelnie
   innym rytmie sekcji, a wartosci projektu naleza do motywu, nie tutaj.
   Domyslne liczby odpowiadaja pierwszemu wdrozeniu tego ukladu.            */

.wh-instafeed--grid {
    /* Sekcja siedzi w kontenerze tresci, nie na calej szerokosci okna. */
    max-width: var(--wh-if-grid-container, var(--wh-container-max-w, 140.3rem));
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--wh-if-grid-mt, 6.7rem);
    margin-bottom: var(--wh-if-grid-mb, 9.8rem);

    /* ⚠️ W PIONIE sekcja nie ma wypelnienia (odstepy robia marginesy), ale
       W POZIOMIE musi miec tyle samo co `.container` motywu — inaczej jest
       SZERSZA niz reszta strony, a na waskim ekranie kafelki dotykaja krawedzi.
       Zmierzone: kontener 1403 px z wypelnieniem 24 px, wiec tresc ma 1355 px;
       sekcja bez wypelnienia rozciagala sie na pelne 1403 px. */
    padding-block: 0;
    padding-inline: var(--wh-if-grid-pad-x, 24px);
}

.wh-instafeed--grid .wh-instafeed__header {
    margin: 0 0 var(--wh-if-grid-title-gap, 6.7rem);
    text-align: center;
}

.wh-instafeed--grid .wh-instafeed__title {
    margin: 0;
    font-family: var(--wh-font-body, inherit);
    font-size: var(--wh-if-grid-title-fs, 1.8rem);
    font-weight: var(--wh-font-weight-regular, 400);
    line-height: var(--wh-if-grid-title-lh, 1);
    letter-spacing: var(--wh-if-grid-title-ls, 0.2rem);
    text-transform: uppercase;
    color: var(--wh-color-text-primary, #000);
}

/* Siatka: liczba kolumn jest tokenem, wiec sklep z inna liczba kafelkow
   nie potrzebuje wlasnej reguly — zmienia jedna liczbe. */
.wh-instafeed--grid .wh-instafeed__grid {
    display: grid;
    grid-template-columns: repeat(var(--wh-if-grid-cols, 4), minmax(0, 1fr));
    gap: var(--wh-if-grid-gap, 2.5rem);
}

.wh-instafeed--grid .wh-instafeed__item {
    display: block;
}

/* ⛔ Zaokraglenie kafelkow zdejmujemy na WSZYSTKICH trzech poziomach: odnosnik,
   ramka obrazka i sam obrazek. Wystarczy, ze zostanie na jednym z nich, a rogi
   dalej widac — obrazek wystaje spod ramki albo ramka przycina obrazek.
   Token zostaje, wiec sklep z innym stylem moze je przywrocic jedna wartoscia. */
.wh-instafeed--grid .wh-instafeed__item,
.wh-instafeed--grid .wh-instafeed__img-wrap,
.wh-instafeed--grid .wh-instafeed__img {
    border-radius: var(--wh-if-grid-radius, 0);
    overflow: hidden;
}

.wh-instafeed--grid .wh-instafeed__img {
    width: 100%;
    height: auto;
    display: block;
}

/* Przycisk pod lista — sam tekst z kreska na CALA szerokosc napisu.
   `inline-block` + `border-bottom` zamiast `text-decoration`, bo odstep
   miedzy tekstem a kreska ma byc sterowalny (`text-underline-offset`
   nie dziala jednakowo w starszych przegladarkach). */
.wh-instafeed--grid .wh-instafeed__follow {
    margin-top: var(--wh-if-grid-btn-gap, 9rem);
    text-align: center;
}

.wh-instafeed--grid .wh-instafeed__follow-btn--napis {
    display: inline-block;

    /* ⛔ Uklad slidera stylizuje ten sam element na PIGULKE: `border-radius: 24px`,
       tlo i ramka. Tutaj przycisk ma byc samym napisem z kreska, wiec te trzy
       rzeczy trzeba zdjac JAWNIE — sama zmiana `border-bottom` zostawia
       zaokraglony obrys, ktory widac przy najechaniu i przy fokusie. */
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0 0 var(--wh-if-grid-btn-underline-gap, 10px);
    border-bottom: var(--wh-if-grid-btn-underline-w, 1px) solid currentColor;
    font-family: var(--wh-font-body, inherit);
    font-size: var(--wh-if-grid-btn-fs, 1.4rem);
    font-weight: var(--wh-font-weight-regular, 400);
    line-height: var(--wh-if-grid-btn-lh, 1);
    letter-spacing: var(--wh-if-grid-btn-ls, 0.2rem);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--wh-color-text-primary, #000);
}

@media (max-width: 767.98px) {
    .wh-instafeed--grid {
        margin-top: var(--wh-if-grid-mt-mobile, 46px);
        margin-bottom: var(--wh-if-grid-mb-mobile, 40px);
        padding-inline: var(--wh-if-grid-pad-x-mobile, 15px);
    }

    .wh-instafeed--grid .wh-instafeed__header {
        margin-bottom: var(--wh-if-grid-title-gap-mobile, 52px);
    }

    .wh-instafeed--grid .wh-instafeed__title {
        font-size: var(--wh-if-grid-title-fs-mobile, 1.4rem);
    }

    .wh-instafeed--grid .wh-instafeed__grid {
        grid-template-columns: repeat(var(--wh-if-grid-cols-mobile, 2), minmax(0, 1fr));
        gap: var(--wh-if-grid-gap-mobile, 15px);
    }

    .wh-instafeed--grid .wh-instafeed__follow {
        margin-top: var(--wh-if-grid-btn-gap-mobile, 41px);
    }
}

/* W ukladzie `grid` tytul jest samym tekstem — ikona Instagrama pochodzi
   z ukladu slidera i tutaj rozbijalaby srodkowanie napisu. */
.wh-instafeed--grid .wh-instafeed__ig-icon {
    display: none;
}

.wh-instafeed--grid .wh-instafeed__title a {
    color: inherit;
    text-decoration: none;
}