/**
 * B01 Slider - Banner Carousel Component
 * CSS ISOLATION: ALL classes prefixed with .saly-ps-
 * NO generic class names like .slider, .btn, .container
 * DESIGN: Figma-based with Spartan font, purple accents (#4B1195)
 */

/* Import Spartan font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Spartan:wght@400;600;700&display=swap');

.saly-ps-block-slider {
    position: relative;
    z-index: 0; /* Create stacking context to isolate internal z-indices from navbar */
    width: 100%;
    margin-bottom: 2rem;
    /* NOTE: CSS variables removed - now inherited from :root (injected by front/head.tpl)
     * This follows the same pattern as B02-B11 blocks.
     * Variables used: --saly-ps-primary-color, --saly-ps-primary-200, --saly-ps-primary-700
     */
    --text-color: #333333;
    /* Shared card frame around the WHOLE block (slider + tabs) — design system .card:
     * white bg, 1px --gray-300 border, --radius-lg, --shadow-sm; overflow clips both rows. */
    background: #ffffff;
    border: 1px solid #EBEEF1;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 50px rgba(51, 51, 51, 0.03);
}

.saly-ps-slider-container {
    position: relative;
    width: 100%;
    /* Both axes clipped: overflow-x:hidden + overflow-y:visible computes to
       overflow-y:auto, i.e. a vertical scroll container — taller banner content
       (HTML banners) produced a scrollbar and exposed off-slide bits below the
       image. Nothing lives outside the container any more (the nav pill is a
       sibling in the block). */
    overflow: hidden;
    border-radius: 0; /* corners handled by the shared card frame on .saly-ps-block-slider */
}

.saly-ps-slider-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.saly-ps-slider-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.saly-ps-slider-slide--active {
    opacity: 1;
    z-index: 1;
}

.saly-ps-slider-slide--transition-slide {
    animation: salyPsSlideIn 0.5s ease-in-out;
}

@keyframes salyPsSlideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.saly-ps-slider-slide-link {
    position: absolute;
    inset: 0;
    z-index: 4; /* covers the whole slide, sits below the text overlay (z-index 5) */
    display: block;
}

.saly-ps-slider-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* TEXT OVERLAY - Figma Design */
.saly-ps-slider-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 32px;
    display: flex;
    align-items: flex-end;
    z-index: 5;
    pointer-events: none; /* Only CTA is clickable */
}

.saly-ps-slider-content {
    max-width: 702px;
    pointer-events: none; /* let clicks fall through to the whole-slide link; only the CTA re-enables them */
}

.saly-ps-slider-title {
    font-family: 'Spartan', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 56px;
    letter-spacing: -0.72px;
    color: var(--text-color);
    margin: 0 0 16px 0;
}

.saly-ps-slider-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    background: var(--saly-ps-primary-color, #4B1195);
    color: white;
    font-family: 'Spartan', sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: -0.24px;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.3s ease;
    outline: none !important;
    position: relative;
    z-index: 6; /* above the whole-slide link (z-index 4) and overlay (5) */
    pointer-events: auto; /* keep the CTA independently clickable */
}

.saly-ps-slider-cta:hover,
.saly-ps-slider-cta:focus {
    background: var(--saly-ps-primary-color, #4B1195);
    outline: none !important;
}

/* ============ NAV PILL (arrows + tabs) — floats over the banner ============
   Centred at the bottom of the slider, content-sized (never full-width), white
   glass surface (backdrop blur) so it reads on any banner. Layout:
   [‹] [tab | tab | tab …] [›] — each part optional per builder config. */
.saly-ps-slider-nav {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: stretch;
    max-width: calc(100% - 32px);
    height: 44px;
    padding: 0 4px;
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(51, 51, 51, 0.12);
    overflow: hidden;
}

.saly-ps-slider-nav[hidden] {
    display: none; /* JS: fewer than two visible slides → nothing to navigate */
}

/* Arrows: flat icon buttons at the pill's ends */
.saly-ps-slider-arrow {
    flex: 0 0 40px;
    width: 40px;
    height: 100%;
    background: transparent;
    border: none;
    color: var(--text-color, #333333);
    padding: 0;
    cursor: pointer;
    border-radius: 0; /* square inside the pill — only the pill itself is rounded */
    transition: background-color 0.15s ease, color 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.saly-ps-slider-arrow:hover {
    background: rgba(51, 51, 51, 0.06);
    color: var(--saly-ps-primary-700, #3D10BE);
}

.saly-ps-slider-arrow:focus {
    outline: none;
}

.saly-ps-slider-arrow[hidden] {
    display: none;
}

.saly-ps-slider-arrow svg {
    stroke: currentColor;
    width: 18px;
    height: 18px;
}

/* Tabs strip inside the pill: content-sized, scrolls sideways when the names
   overflow the available width (JS keeps the active tab in view). Centred with
   auto margins on the first/last tab so a centred strip that overflows is still
   scrollable from its first tab (justify-content:center would clip it). */
.saly-ps-slider-tabs {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    padding: 0 2px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.saly-ps-slider-tabs::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
}

.saly-ps-slider-tab:first-child {
    margin-left: auto;
}

.saly-ps-slider-tab:last-child {
    margin-right: auto;
}

.saly-ps-slider-tab {
    flex: 0 0 auto;
    min-width: 0;
    padding: 0 14px;
    background: transparent;
    border: none;
    border-radius: 0; /* square — the brand underline runs edge to edge */
    font-family: 'Spartan', sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: -0.24px;
    color: #4E4F55; /* --gray-900 inactive */
    cursor: pointer;
    transition: color 0.12s ease, background-color 0.12s ease;
    white-space: nowrap;
    text-align: center;
    outline: none !important;
    /* brand underline drawn as an inset shadow so it stays inside the pill */
    box-shadow: inset 0 -2px 0 transparent;
}

.saly-ps-slider-tab:hover:not(.saly-ps-slider-tab--active),
.saly-ps-slider-tab:focus:not(.saly-ps-slider-tab--active) {
    background: rgba(51, 51, 51, 0.05);
    color: var(--text-color, #333333);
    outline: none !important;
}

.saly-ps-slider-tab--active {
    background: transparent;
    color: var(--saly-ps-primary-700, #3D10BE);
    box-shadow: inset 0 -2px 0 var(--saly-ps-primary-color, #5E2CED);
}

/* Legacy hooks kept for the front's z-index override / no longer rendered */
.saly-ps-slider-tabs-wrapper,
.saly-ps-slider-tabs-scroll {
    display: none;
}

/* Responsive */
@media (max-width: 768px) {
    .saly-ps-slider-overlay {
        padding: 16px;
    }

    .saly-ps-slider-title {
        font-size: 24px;
        line-height: 32px;
        margin-bottom: 12px;
    }

    .saly-ps-slider-cta {
        font-size: 11px;
        padding: 8px 12px;
    }

    /* The nav pill stays on mobile (the builder's "Pokaż zakładki" applies to
       every viewport) — a little denser. The dots are only the fallback when the
       block was configured without tabs. */
    .saly-ps-slider-nav {
        bottom: 10px;
        height: 40px;
        max-width: calc(100% - 20px);
    }

    .saly-ps-slider-arrow {
        flex-basis: 36px;
        width: 36px;
    }

    .saly-ps-slider-tab {
        padding: 0 12px;
        font-size: 12px;
    }

    .saly-ps-block-slider:not(:has(.saly-ps-slider-nav--with-tabs)) .saly-ps-slider-indicators {
        display: flex;
        bottom: 10px;
    }
}

/* DEVICE TARGETING — a block whose slides are all hidden at the current
   breakpoint (see data-ps-devices in layout-grid.css) collapses entirely.
   B01_Slider.js sets the modifier class; the :has() rules are the no-JS /
   pre-init safety net. */
.saly-ps-block-slider--no-visible-slides {
    display: none !important;
}

@media (max-width: 767px) {
    .saly-ps-block-slider:not(:has(.saly-ps-slider-slide[data-ps-devices~="mobile"])) {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .saly-ps-block-slider:not(:has(.saly-ps-slider-slide[data-ps-devices~="tablet"])) {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .saly-ps-block-slider:not(:has(.saly-ps-slider-slide[data-ps-devices~="desktop"])) {
        display: none !important;
    }
}

/* Mobile viewport simulation for test-runner environment */
.viewport-mobile .saly-ps-block-slider:not(:has(.saly-ps-slider-nav--with-tabs)) .saly-ps-slider-indicators {
    display: flex !important;
    bottom: 10px;
}

.saly-ps-slider-html-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.saly-ps-slider-html-content iframe {
    width: 100%;
    height: 100%;
    border: none;
}