/**
 * Homepage Features - Scroll-Driven Accordion
 * 
 * Używa zmiennej CSS --open (0..1) do kontroli stanu karty:
 * - open = 0: karta zwinięta (tylko header widoczny)
 * - open = 1: karta rozwinięta (pełna treść)
 * 
 * Scroll mapping: t = scroll_progress / step → dla karty i: open = clamp(1 - |t - i|, 0, 1)
 */

/* =============================================
   CSS VARIABLES
   ============================================= */
.hpf-section {
    /* Kolory */
    --hpf-bg: #f6f1ff;
    --hpf-text: #0f1115;
    --hpf-muted: #5e6472;
    --hpf-line: rgba(15, 17, 21, 0.12);
    --hpf-card-bg: rgba(255, 255, 255, 0.60);
    --hpf-accent: #6366f1;
    
    /* Layout */
    --hpf-top-offset: 20px;       /* pozycja sticky stacka od góry */
    --hpf-step-vh: 60;            /* ile vh scrollu na jedną kartę */
    --hpf-n: 3;                   /* liczba kart (nadpisuje JS) */
    --hpf-gap: 14px;              /* odstęp między kartami */
    
    /* Animacje */
    --hpf-collapsed-height: 160px;   /* wysokość zwiniętej karty (64px top + tytuł + 18px) */
    --hpf-expanded-height: 480px;    /* wysokość rozwiniętej karty (z 80px bottom) */
    --hpf-transition-duration: 0.12s;
    --hpf-blur-delay: 0.03s;         /* opóźnienie efektu rozmycia */
    --hpf-blur-amount: 4px;          /* maksymalna wartość blur */
}

/* =============================================
   RESET & BASE
   ============================================= */
.hpf-section *,
.hpf-section *::before,
.hpf-section *::after {
    box-sizing: border-box;
}

/* =============================================
   MAIN SECTION
   ============================================= */
.hpf-section {
    position: relative;
    background: var(--e-global-color-60bc06c);
    color: var(--hpf-text);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* =============================================
   HEADER SEKCJI (jako pierwsza "karta") - desktop
   ============================================= */
.hpf-feature.hpf-feature--header {
    --open: 1;
    height: auto !important; /* nie animowana wysokość */
    border-top: none !important;
}

.hpf-feature--header .hpf-feature__wrapper {
    padding: 40px clamp(20px, 8vw, 155px) 40px;
}

/* =============================================
   HEADER MOBILE (poza scroll sekcją)
   ============================================= */
.hpf-header-mobile {
    display: none; /* domyślnie ukryty na desktop */
}

.hpf-header-mobile__wrapper {
    padding: 24px 20px 20px;
}

.hpf-kicker {
    font-family: var(--e-global-typography-8c37042-font-family), Sans-serif;
    font-size: var(--e-global-typography-8c37042-font-size);
    font-weight: var(--e-global-typography-8c37042-font-weight);
    line-height: var(--e-global-typography-8c37042-line-height);
    margin-bottom: 16px;
}

.hpf-title {
    margin: 0;
    font-family: var(--e-global-typography-primary-font-family), Sans-serif;
    font-size: var(--e-global-typography-primary-font-size);
    font-weight: var(--e-global-typography-primary-font-weight);
    line-height: var(--e-global-typography-primary-line-height);
    letter-spacing: var(--e-global-typography-primary-letter-spacing);
    color: var(--e-global-color-primary);
}

/* =============================================
   WRAPPER (full-width dla border)
   ============================================= */
.hpf-wrap {
    width: 100%;
}

/* =============================================
   SCROLL SECTION
   ============================================= */
.hpf-scroll-section {
    position: relative;
    height: calc(var(--hpf-n) * var(--hpf-step-vh) * 1vh);
}

/* =============================================
   STICKY STACK
   Wszystkie karty widoczne cały czas
   ============================================= */
.hpf-stack {
    position: sticky;
    top: var(--hpf-top-offset);
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0; /* bez gap - border-top załatwia separację */
}

/* =============================================
   FEATURE CARD
   --open: 0..1 ustawiane przez JS
   Full-width z border-top, content ograniczony
   ============================================= */
.hpf-feature {
    --open: 0;
    
    background: var(--e-global-color-60bc06c);
    border: none;
    border-top: 1px solid var(--e-global-color-6001df1);
    border-radius: 0;
    overflow: hidden;
    
    /* Interpolacja wysokości: collapsed + (expanded - collapsed) * open */
    height: calc(
        var(--hpf-collapsed-height) + 
        (var(--hpf-expanded-height) - var(--hpf-collapsed-height)) * var(--open)
    );
    
    transition: height var(--hpf-transition-duration) ease-out;
    will-change: height;
}

/* Domyślnie pierwsza karta (po nagłówku) jest otwarta (zanim JS się uruchomi) */
.hpf-feature:nth-child(2) {
    --open: 1;
}

/* =============================================
   WRAPPER - okalający head i body
   ============================================= */
.hpf-feature__wrapper {
    max-width: var(--content-width, 1200px);
    margin: 0 auto;
    padding: 20px clamp(20px, 8vw, 155px);
}

/* =============================================
   CARD HEADER (zawsze widoczny)
   ============================================= */
.hpf-feature__head {
    padding: 44px 0 18px;
}

.hpf-feature__title {
    margin: 0;
    font-family: var(--e-global-typography-c0c59a4-font-family), Sans-serif;
    font-size: var(--e-global-typography-c0c59a4-font-size);
    font-weight: var(--e-global-typography-c0c59a4-font-weight);
    line-height: var(--e-global-typography-c0c59a4-line-height);
    letter-spacing: var(--e-global-typography-c0c59a4-letter-spacing);
    color: var(--e-global-color-primary);
}

/* =============================================
   CARD BODY (sterowany przez --open)
   Efekt "wtapiania się w tło" przy collapse
   ============================================= */
.hpf-feature__body {
    opacity: var(--open);
	/*
    transform: translateY(calc(6px * (1 - var(--open))));
    filter: blur(calc(var(--hpf-blur-amount) * (1 - var(--open))));
	transition:
    opacity var(--hpf-transition-duration) linear,
    transform var(--hpf-transition-duration) linear;

  will-change: opacity, transform;
    */
    transition: 
        opacity var(--hpf-transition-duration) linear,
        transform var(--hpf-transition-duration) linear,
        filter 0.1s linear var(--hpf-blur-delay);
    
    will-change: opacity, transform, filter;
    
    /* Pointer events tylko gdy widoczne */
    pointer-events: none;
}

.hpf-feature.is-focus .hpf-feature__body {
    pointer-events: auto;
}

/* =============================================
   INNER CONTENT (grid: tekst | visual)
   ============================================= */
.hpf-feature__inner {
    padding: 0 0 60px;
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 18px;
    align-items: center;
}

.hpf-feature__content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hpf-feature__p {
    margin: 0;
    font-family: var(--e-global-typography-text-font-family), Sans-serif;
    font-size: var(--e-global-typography-text-font-size);
    font-weight: var(--e-global-typography-text-font-weight);
    line-height: var(--e-global-typography-text-line-height);
    color: var(--e-global-color-text);
    max-width: 60ch;
}

.hpf-feature__p p {
    margin: 0 0 0.3em 0;
}

.hpf-feature__p p:last-child {
    margin-bottom: 0;
}

.hpf-feature__p strong {
    font-weight: 700;
}

.hpf-feature__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    font-family: var(--e-global-typography-ae68c71-font-family), Sans-serif;
    font-size: var(--e-global-typography-ae68c71-font-size);
    font-weight: var(--e-global-typography-ae68c71-font-weight);
    line-height: var(--e-global-typography-ae68c71-line-height);
    letter-spacing: var(--e-global-typography-ae68c71-letter-spacing);
    color: var(--e-global-color-primary);
    fill: var(--e-global-color-primary);
    text-decoration: none;
}

.hpf-feature__link svg {
    width: 16px;
    height: 16px;
}

/* =============================================
   VISUAL (obrazek/gif)
   ============================================= */
.hpf-feature__visual {
    width: 100%;
    max-width: 280px;
    justify-self: end;
    overflow: hidden;
    
    opacity: var(--open);
	transform: scale(calc(0.98 + var(--open) * 0.02));

  transition:
    opacity var(--hpf-transition-duration) linear,
    transform var(--hpf-transition-duration) linear;
	/*
    transform: scale(calc(0.98 + var(--open) * 0.02));
    filter: blur(calc(var(--hpf-blur-amount) * (1 - var(--open))));
    
    transition: 
        opacity var(--hpf-transition-duration) linear,
        transform var(--hpf-transition-duration) linear,
        filter 0.1s linear var(--hpf-blur-delay);
	*/
}

.hpf-feature__visual img {
    width: 100%;
    height: auto;
    display: block;
}


/* =============================================
   ACCESSIBILITY: prefers-reduced-motion
   ============================================= */
@media (prefers-reduced-motion: reduce) {
    .hpf-feature,
    .hpf-feature__body,
    .hpf-feature__icon,
    .hpf-feature__visual,
    .hpf-feature__link,
    .hpf-progress__dot {
        transition: none !important;
    }
    
    .hpf-feature__body {
        filter: none !important;
    }
    
    .hpf-feature__visual {
        filter: none !important;
    }
}

/* =============================================
   RESPONSIVE: TABLET
   ============================================= */
@media (max-width: 1024px) {
    .hpf-section {
        --hpf-top-offset: 20px;
        --hpf-expanded-height: 520px;
    }
    
    .hpf-feature__head {
        padding: 36px 0 14px;
    }
    
    .hpf-feature__inner {
        padding: 0 0 50px;
    }
}

/* =============================================
   RESPONSIVE: MOBILE
   ============================================= */
@media (max-width: 768px) {
    .hpf-section {
        --hpf-top-offset: 0px;
        --hpf-step-vh: 95;
        --hpf-collapsed-height: 120px;
        --hpf-expanded-height: 620px;
    }
    
    .hpf-feature.hpf-feature--header {
        display: none; /* ukryj header w stack na mobile */
    }
    
    .hpf-header-mobile {
        display: block; /* pokaż header poza scroll sekcją na mobile */
        background: var(--e-global-color-60bc06c);
        border-bottom: 1px solid var(--e-global-color-6001df1);
        padding-bottom: 32px;
    }
    
    .hpf-feature__wrapper {
        padding: 16px 20px;
    }
    
    .hpf-feature__head {
        padding: 24px 0 32px;
    }
    
    .hpf-feature__inner {
        padding: 0 0 24px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    
    .hpf-feature__visual {
        order: -1; /* obrazek na górę (przed tekstem) */
        align-self: center;
        max-width: 160px;
        width: 100%;
        margin: 16px 0;
    }
    
    .hpf-feature__content {
        order: 1; /* tekst na dół */
    }
    
    .hpf-kicker {
        margin-bottom: 8px;
    }
}

/* =============================================
   RESPONSIVE: SMALL MOBILE
   ============================================= */
@media (max-width: 480px) {
    .hpf-section {
        --hpf-collapsed-height: 110px;
        --hpf-expanded-height: 580px;
        --hpf-step-vh: 100;
    }
    
    .hpf-feature__wrapper {
        padding: 12px 16px;
    }
    
    .hpf-feature__head {
        padding: 20px 0 28px;
    }
    
    .hpf-feature__inner {
        padding: 0 0 20px;
        gap: 12px;
    }
    
    .hpf-feature__visual {
        max-width: 160px;
    }
}