/* ============================================================
   PGD Hero Slider — frontend styles
   Font display: "Termina" (Adobe Fonts) — fallback sans
   Font body:    "Montserrat" (Google Fonts)
   Brand:        #0B457F
   ============================================================ */

.pgd-hero,
.pgd-hero * {
    box-sizing: border-box !important;
}

.pgd-hero {
    position: relative !important;
    width: 100% !important;
    max-width: 1920px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    background: #0B457F !important;
    height: clamp(420px, 90vh, 750px) !important;
    isolation: isolate !important;
}

/* Zaokrąglenie pojawia się tylko gdy ekran > 1920px (czyli slider ma marginesy po bokach) */
@media (min-width: 1921px) {
    .pgd-hero.pgd-hero--rounded {
        border-radius: 30px !important;
    }
}

/* ---------- TRACK ---------- */
.pgd-hero__track {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}

/* ---------- SLIDE ---------- */
.pgd-hero__slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity .8s ease, visibility .8s ease !important;
    display: flex !important;
    pointer-events: none !important;
}

.pgd-hero__slide.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 2 !important;
}

/* ---------- IMAGE ---------- */
.pgd-hero__img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
}

.pgd-hero__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

/* ---------- LABEL ---------- */
.pgd-hero__label {
    position: absolute !important;
    top: 24px !important;
    left: 24px !important;
    z-index: 5 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.pgd-hero__label--text {
    padding: 8px 18px !important;
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    background: var(--pgd-label-bg, #0B457F) !important;
    color: var(--pgd-label-color, #fff) !important;
    border-radius: 100px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .15) !important;
}

.pgd-hero__label--image {
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.pgd-hero__label--image img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 80px !important;
    width: auto !important;
}

/* ---------- CORNER WRAPPERS — narożne kontenery pozycjonowania ---------- */
.pgd-hero__corner {
    position: absolute !important;
    z-index: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    max-width: min(600px, calc(100% - 160px)) !important;
    color: var(--pgd-text-color, #fff) !important;
    pointer-events: none !important;
}

.pgd-hero__corner > * {
    pointer-events: auto !important;
}

/* Górne narożniki — treść rośnie w dół */
.pgd-hero__corner--top-left  { top: 60px !important; left: 80px !important;  right: auto !important; bottom: auto !important; text-align: left !important;  align-items: flex-start !important; }
.pgd-hero__corner--top-right { top: 60px !important; right: 80px !important; left: auto !important;  bottom: auto !important; text-align: right !important; align-items: flex-end !important; }

/* Dolne narożniki — DOM odwrócony + flex-direction:column-reverse = poprawna wizualna kolejność */
.pgd-hero__corner--bottom-left  { bottom: 80px !important; left: 80px !important;  right: auto !important; top: auto !important; text-align: left !important;  align-items: flex-start !important; flex-direction: column-reverse !important; }
.pgd-hero__corner--bottom-right { bottom: 80px !important; right: 80px !important; left: auto !important;  top: auto !important; text-align: right !important; align-items: flex-end !important;   flex-direction: column-reverse !important; }

/* ---------- TYPOGRAPHY ---------- */
.pgd-hero__heading {
    margin: 0 !important;
    font-family: "Termina", "Montserrat", -apple-system, sans-serif !important;
    font-size: 40px !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
    letter-spacing: .04em !important;
    color: inherit !important;
    text-transform: none !important;
}

.pgd-hero__heading b,
.pgd-hero__heading strong {
    font-weight: 700 !important;
    letter-spacing: .03em !important;
}

.pgd-hero__heading br + b,
.pgd-hero__heading br + strong {
    /* Drugi wiersz po <br> z <b> dostaje mocniejszy tracking jak w designie */
    line-height: 1.05 !important;
}

.pgd-hero__price {
    margin: 0 !important;
    font-family: "Montserrat", -apple-system, sans-serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: inherit !important;
}

/* ---------- CTA BUTTONS ---------- */
.pgd-hero__ctas {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
}

.pgd-hero__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 38px !important;
    font-family: "Montserrat", -apple-system, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border-radius: 100px !important;
    line-height: 1 !important;
    transition: transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease !important;
    cursor: pointer !important;
    min-height: 50px !important;
    white-space: nowrap !important;
}

.pgd-hero__btn--primary {
    background: #ffffff !important;
    color: #0B457F !important;
    border: 1px solid #ffffff !important;
}

.pgd-hero__btn--primary:hover,
.pgd-hero__btn--primary:focus-visible {
    background: #f0f4f9 !important;
    color: #0B457F !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .2) !important;
}

.pgd-hero__btn--secondary {
    background: transparent !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
}

.pgd-hero__btn--secondary:hover,
.pgd-hero__btn--secondary:focus-visible {
    background: #ffffff !important;
    color: #0B457F !important;
    transform: translateY(-2px) !important;
}

/* ---------- TYPOGRAFIA CENY ---------- */
.pgd-hero__price-value {
    margin: 0 !important;
    font-family: "Montserrat", -apple-system, sans-serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: inherit !important;
}

.pgd-hero__price-value--secondary {
    font-size: 16px !important;
    font-weight: 400 !important;
    opacity: .8 !important;
    margin-bottom: 4px !important;
}

.pgd-hero__price-old {
    margin: 0 0 4px !important;
    font-family: "Montserrat", -apple-system, sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: inherit !important;
    text-decoration: line-through !important;
    opacity: .65 !important;
}

.pgd-hero__price-promo {
    margin: 0 !important;
    font-family: "Montserrat", -apple-system, sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    color: inherit !important;
}

.pgd-hero__price-omnibus {
    margin: 6px 0 0 !important;
    font-family: "Montserrat", -apple-system, sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: inherit !important;
    opacity: .72 !important;
}

.pgd-hero__price-installment {
    margin: 0 !important;
    font-family: "Montserrat", -apple-system, sans-serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: inherit !important;
}

.pgd-hero__desc {
    margin: 0 !important;
    font-family: "Montserrat", -apple-system, sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: inherit !important;
}

/* ---------- CHIPS ---------- */
.pgd-hero__chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
	justify-content: flex-end!important;
}

.pgd-hero__chip {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 16px !important;
    font-family: "Montserrat", -apple-system, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .04em !important;
    line-height: 1 !important;
    background: rgba(255, 255, 255, .15) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, .4) !important;
    border-radius: 100px !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    white-space: nowrap !important;
}

/* ---------- STRZAŁKI NAWIGACJI ---------- */
.pgd-hero__arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    width: 56px !important;
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .15) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: #ffffff !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    padding: 0 !important;
    transition: background .25s ease, transform .25s ease, opacity .25s ease !important;
    opacity: .85 !important;
}

.pgd-hero__arrow svg {
    display: block !important;
    pointer-events: none !important;
}

.pgd-hero__arrow:hover {
    background: rgba(255, 255, 255, .3) !important;
    opacity: 1 !important;
}

.pgd-hero__arrow:active {
    transform: translateY(-50%) scale(.95) !important;
}

.pgd-hero__arrow:focus-visible {
    outline: 2px solid #ffffff !important;
    outline-offset: 4px !important;
}

.pgd-hero__arrow--prev {
    left: 24px !important;
}

.pgd-hero__arrow--next {
    right: 24px !important;
}

/* ---------- DOTS (lewy dolny róg) ---------- */
.pgd-hero__dots {
    position: absolute !important;
    left: 80px !important;
    bottom: 40px !important;
    z-index: 10 !important;
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
}

.pgd-hero__dot {
    width: 40px !important;
    height: 2px !important;
    padding: 14px 0 !important;
    background: transparent !important;
    border: 0 !important;
    cursor: pointer !important;
    display: block !important;
    appearance: none !important;
    position: relative !important;
}

.pgd-hero__dot span {
    display: block !important;
    width: 100% !important;
    height: 2px !important;
    background: rgba(255, 255, 255, .4) !important;
    transition: background .3s ease, height .3s ease !important;
}

.pgd-hero__dot:hover span {
    background: rgba(255, 255, 255, .7) !important;
}

.pgd-hero__dot.is-active span {
    background: #ffffff !important;
    height: 3px !important;
}

/* ============================================================
   MOBILE — zdjęcie cover bez tekstu na nim
   Treść na #0B457F poniżej, białe napisy
   ============================================================ */
@media (max-width: 768px) {
    .pgd-hero {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        border-radius: 0 !important;
        background: #0B457F !important;
    }

    .pgd-hero__track {
        display: block !important;
    }

    .pgd-hero__slide {
        position: relative !important;
        inset: auto !important;
        display: none !important;
        flex-direction: column !important;
        height: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        background: #0B457F !important;
    }

    .pgd-hero__slide.is-active {
        display: flex !important;
    }

    .pgd-hero__img {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: 60vw !important;
        max-height: 480px !important;
        min-height: 280px !important;
        flex: 0 0 auto !important;
    }

    /* Label na mobile — prawy górny róg na zdjęciu */
    .pgd-hero__label {
        top: 16px !important;
        right: 16px !important;
        left: auto !important;
    }

    .pgd-hero__label--text {
        font-size: 11px !important;
        padding: 6px 14px !important;
    }

    .pgd-hero__label--image img {
        max-height: 50px !important;
    }

    /* CORNER WRAPPERS — reset z desktopowego absolute → normalny flow na mobile.
       Podwójna klasa slide zwiększa specyficzność ponad reguły desktopowe */
    .pgd-hero__slide.pgd-hero__slide .pgd-hero__corner {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        max-width: 100% !important;
        width: 100% !important;
        /* stretch — wszystkie dzieci wypełniają pełną szerokość cornera,
           dzięki czemu text-align na elementach działa poprawnie */
        align-items: stretch !important;
        background: #0B457F !important;
        color: #ffffff !important;
        padding: 0 24px 16px !important;
        pointer-events: auto !important;
    }

    /* Kolejność na mobile — reguły od najniższego priorytetu do najwyższego:
       gdy corner ma wiele typów, ostatnia pasująca reguła wygrywa (heading → order:2) */
    .pgd-hero__corner--has-cta     { order: 5 !important; }
    .pgd-hero__corner--has-chips   { order: 4 !important; }
    .pgd-hero__corner--has-price   { order: 3 !important; }
    .pgd-hero__corner--has-heading { order: 2 !important; }

    /* Padding kontekstowy: górny dla cornera z nagłówkiem, dolny dla cornera z CTA.
       Specyficzność (0,3,0) — taka sama jak base reset powyżej, ale reguły są późniejsze → wygrywają */
    .pgd-hero__slide.pgd-hero__slide .pgd-hero__corner--has-heading { padding-top: 32px !important; }
    .pgd-hero__slide.pgd-hero__slide .pgd-hero__corner--has-cta     { padding-bottom: 36px !important; }

    /* Wyrównanie nagłówka na mobile — text-align bezpośrednio na h2
       (align-items: stretch na cornerze sprawia, że h2 jest pełnoszerokościowy) */
    .pgd-hero__slide--malign-left   .pgd-hero__heading { text-align: left !important; }
    .pgd-hero__slide--malign-center .pgd-hero__heading { text-align: center !important; }
    .pgd-hero__slide--malign-right  .pgd-hero__heading { text-align: right !important; }

    .pgd-hero__heading { color: #ffffff !important; font-size: 26px !important; }
    .pgd-hero__price   { color: #ffffff !important; font-size: 18px !important; }

    /* Wyrównanie bloku ceny/opisu na mobile — text-align bezpośrednio na bloku */
    .pgd-hero__slide--pricemalign-left   .pgd-hero__price-block { text-align: left !important; }
    .pgd-hero__slide--pricemalign-center .pgd-hero__price-block { text-align: center !important; }
    .pgd-hero__slide--pricemalign-right  .pgd-hero__price-block { text-align: right !important; }

    /* Wyrównanie tagów na mobile */
    .pgd-hero__slide--chipsmalign-left .pgd-hero__chips   { justify-content: flex-start !important; }
    .pgd-hero__slide--chipsmalign-center .pgd-hero__chips { justify-content: center !important; }
    .pgd-hero__slide--chipsmalign-right .pgd-hero__chips  { justify-content: flex-end !important; }

    .pgd-hero__price-value,
    .pgd-hero__price-promo     { font-size: 20px !important; }
    .pgd-hero__price-old       { font-size: 14px !important; }
    .pgd-hero__price-installment { font-size: 20px !important; }
    .pgd-hero__desc            { font-size: 15px !important; }

    .pgd-hero__ctas {
        gap: 10px !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        justify-content: flex-start !important;
    }

    /* Wyrównanie CTA na mobile — działa głównie przy 1 CTA / mniejszych przyciskach */
    .pgd-hero__slide--mctaalign-left .pgd-hero__ctas   { justify-content: flex-start !important; }
    .pgd-hero__slide--mctaalign-center .pgd-hero__ctas { justify-content: center !important; }
    .pgd-hero__slide--mctaalign-right .pgd-hero__ctas  { justify-content: flex-end !important; }

    /* 1 CTA: szerokość 100%, ale wyrównanie steruje pozycją (po flexie) */
    .pgd-hero__slide--cta-1.pgd-hero__slide--mctaalign-left .pgd-hero__btn,
    .pgd-hero__slide--cta-1.pgd-hero__slide--mctaalign-center .pgd-hero__btn,
    .pgd-hero__slide--cta-1.pgd-hero__slide--mctaalign-right .pgd-hero__btn {
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    /* 2 CTA: po 50% obok siebie (wyrównanie ignorowane przy pełnej szerokości) */
    .pgd-hero__slide--cta-2 .pgd-hero__btn {
        flex: 1 1 50% !important;
        width: 50% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        font-size: 13px !important;
        letter-spacing: .04em !important;
    }

    .pgd-hero__btn--secondary {
        background: transparent !important;
        color: #ffffff !important;
        border-color: #ffffff !important;
    }

    /* Dots na mobile — pozycja w dolnej części obrazu */
    .pgd-hero__dots {
        position: absolute !important;
        left: 24px !important;
        bottom: auto !important;
        top: calc(60vw - 28px) !important;
        z-index: 10 !important;
    }

    /* Strzałki na mobile — mniejsze, w obszarze obrazu (nad treścią) */
    .pgd-hero .pgd-hero__arrow {
        top: 30vw !important;
        width: 40px !important;
        height: 40px !important;
        background: rgba(0, 0, 0, .35) !important;
    }
    .pgd-hero .pgd-hero__arrow svg {
        width: 18px !important;
        height: 18px !important;
    }
    .pgd-hero__arrow--prev {
        left: 12px !important;
    }
    .pgd-hero__arrow--next {
        right: 12px !important;
    }

    .pgd-hero__dot {
        width: 28px !important;
        padding: 10px 0 !important;
    }
}

/* ============================================================
   TABLET — kompromis
   ============================================================ */
@media (min-width: 769px) and (max-width: 1199px) {
    .pgd-hero__corner--top-left,
    .pgd-hero__corner--bottom-left  { left: 50px !important; }

    .pgd-hero__corner--top-right,
    .pgd-hero__corner--bottom-right { right: 50px !important; }

    .pgd-hero__corner--top-left,
    .pgd-hero__corner--top-right    { top: 40px !important; }

    .pgd-hero__corner--bottom-left,
    .pgd-hero__corner--bottom-right { bottom: 55px !important; }

    .pgd-hero__dots {
        left: 50px !important;
        bottom: 30px !important;
    }
    .pgd-hero__heading     { font-size: 32px !important; }
    .pgd-hero__price       { font-size: 20px !important; }
    .pgd-hero__price-promo { font-size: 24px !important; }
    .pgd-hero__desc        { font-size: 16px !important; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .pgd-hero__slide,
    .pgd-hero__btn,
    .pgd-hero__dot span {
        transition: none !important;
    }
}