/* ============================================================
   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;
}

/* ---------- CONTENT & CTA — niezależne bloki absolute ---------- */
.pgd-hero__content,
.pgd-hero__cta-wrap {
    position: absolute !important;
    z-index: 3 !important;
    max-width: min(620px, calc(100% - 160px)) !important;
    color: var(--pgd-text-color, #fff) !important;
    pointer-events: none !important;
}

.pgd-hero__content > *,
.pgd-hero__cta-wrap > * {
    pointer-events: auto !important;
}

/* CONTENT — pozycja */
.pgd-hero__slide--pos-top-left .pgd-hero__content     { top: 60px !important;    left: 80px !important;  right: auto !important; bottom: auto !important; text-align: left !important; }
.pgd-hero__slide--pos-top-right .pgd-hero__content    { top: 60px !important;    right: 80px !important; left: auto !important;  bottom: auto !important; text-align: right !important; }
.pgd-hero__slide--pos-bottom-left .pgd-hero__content  { bottom: 90px !important; left: 80px !important;  right: auto !important; top: auto !important;    text-align: left !important; }
.pgd-hero__slide--pos-bottom-right .pgd-hero__content { bottom: 90px !important; right: 80px !important; left: auto !important;  top: auto !important;    text-align: right !important; }

/* CTA — pozycja niezależna */
.pgd-hero__slide--ctapos-top-left .pgd-hero__cta-wrap     { top: 60px !important;    left: 80px !important;  right: auto !important; bottom: auto !important; }
.pgd-hero__slide--ctapos-top-right .pgd-hero__cta-wrap    { top: 60px !important;    right: 80px !important; left: auto !important;  bottom: auto !important; }
.pgd-hero__slide--ctapos-bottom-left .pgd-hero__cta-wrap  { bottom: 60px !important; left: 80px !important;  right: auto !important; top: auto !important; }
.pgd-hero__slide--ctapos-bottom-right .pgd-hero__cta-wrap { bottom: 60px !important; right: 80px !important; left: auto !important;  top: auto !important; }

.pgd-hero__content-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
}

.pgd-hero__slide--pos-top-left .pgd-hero__content-inner,
.pgd-hero__slide--pos-bottom-left .pgd-hero__content-inner {
    align-items: flex-start !important;
}
.pgd-hero__slide--pos-top-right .pgd-hero__content-inner,
.pgd-hero__slide--pos-bottom-right .pgd-hero__content-inner {
    align-items: flex-end !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;
    margin-top: 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;
}

/* ---------- 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;
    }

    /* CONTENT — reset z desktopowego absolute → normalny flow.
       Większa specyficzność (2 klasy slide) żeby pokonać desktopowe reguły --pos-* */
    .pgd-hero__slide.pgd-hero__slide .pgd-hero__content {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        max-width: 100% !important;
        width: 100% !important;
        background: #0B457F !important;
        color: #ffffff !important;
        padding: 32px 24px 12px !important;
        text-align: left !important;
        order: 2 !important;
        pointer-events: auto !important;
    }

    .pgd-hero__content-inner {
        max-width: 100% !important;
        width: 100% !important;
        gap: 12px !important;
        color: #ffffff !important;
    }

    /* Wyrównanie treści na mobile — sterowane meta */
    .pgd-hero__slide--malign-left .pgd-hero__content,
    .pgd-hero__slide--malign-left .pgd-hero__content-inner,
    .pgd-hero__slide--malign-left .pgd-hero__heading,
    .pgd-hero__slide--malign-left .pgd-hero__price       { text-align: left !important; }

    .pgd-hero__slide--malign-center .pgd-hero__content,
    .pgd-hero__slide--malign-center .pgd-hero__content-inner,
    .pgd-hero__slide--malign-center .pgd-hero__heading,
    .pgd-hero__slide--malign-center .pgd-hero__price     { text-align: center !important; }

    .pgd-hero__slide--malign-right .pgd-hero__content,
    .pgd-hero__slide--malign-right .pgd-hero__content-inner,
    .pgd-hero__slide--malign-right .pgd-hero__heading,
    .pgd-hero__slide--malign-right .pgd-hero__price      { text-align: right !important; }

    .pgd-hero__slide--malign-left .pgd-hero__content-inner   { align-items: flex-start !important; }
    .pgd-hero__slide--malign-center .pgd-hero__content-inner { align-items: center !important; }
    .pgd-hero__slide--malign-right .pgd-hero__content-inner  { align-items: flex-end !important; }

    .pgd-hero__heading,
    .pgd-hero__price {
        color: #ffffff !important;
    }

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

    /* CTA — reset z desktopowego absolute → normalny flow pod treścią.
       Większa specyficzność (2 klasy slide) żeby pokonać desktopowe reguły --ctapos-* */
    .pgd-hero__slide.pgd-hero__slide .pgd-hero__cta-wrap {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        max-width: 100% !important;
        width: 100% !important;
        background: #0B457F !important;
        padding: 12px 24px 36px !important;
        order: 3 !important;
        pointer-events: auto !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__slide--pos-top-left .pgd-hero__content,
    .pgd-hero__slide--ctapos-top-left .pgd-hero__cta-wrap,
    .pgd-hero__slide--pos-bottom-left .pgd-hero__content,
    .pgd-hero__slide--ctapos-bottom-left .pgd-hero__cta-wrap { left: 50px !important; }

    .pgd-hero__slide--pos-top-right .pgd-hero__content,
    .pgd-hero__slide--ctapos-top-right .pgd-hero__cta-wrap,
    .pgd-hero__slide--pos-bottom-right .pgd-hero__content,
    .pgd-hero__slide--ctapos-bottom-right .pgd-hero__cta-wrap { right: 50px !important; }

    .pgd-hero__slide--pos-top-left .pgd-hero__content,
    .pgd-hero__slide--pos-top-right .pgd-hero__content,
    .pgd-hero__slide--ctapos-top-left .pgd-hero__cta-wrap,
    .pgd-hero__slide--ctapos-top-right .pgd-hero__cta-wrap { top: 40px !important; }

    .pgd-hero__slide--pos-bottom-left .pgd-hero__content,
    .pgd-hero__slide--pos-bottom-right .pgd-hero__content   { bottom: 70px !important; }
    .pgd-hero__slide--ctapos-bottom-left .pgd-hero__cta-wrap,
    .pgd-hero__slide--ctapos-bottom-right .pgd-hero__cta-wrap { bottom: 40px !important; }

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

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

/* ============================================================
   PGD Modele Hero — dodatkowe style (cena rozbita + omnibus)
   ============================================================ */
.pgd-hero__price-prefix,
.pgd-hero__price-suffix {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    opacity: .9 !important;
}

.pgd-hero__price-amount {
    font-family: "Termina", "Montserrat", sans-serif !important;
    font-weight: 700 !important;
    font-size: 28px !important;
    letter-spacing: .02em !important;
}

.pgd-hero__price-amount--promo {
    color: #ff5252 !important;
}

.pgd-hero__omnibus {
    margin: 8px 0 0 !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    color: var(--pgd-text-color, #ffffff) !important;
    opacity: .75 !important;
    line-height: 1.4 !important;
    max-width: 540px !important;
}

@media (max-width: 768px) {
    .pgd-hero__price-prefix,
    .pgd-hero__price-suffix {
        font-size: 13px !important;
    }
    .pgd-hero__price-amount {
        font-size: 22px !important;
    }
    .pgd-hero__omnibus {
        font-size: 10px !important;
        max-width: 100% !important;
    }
}