/* VIS Sponsor Logo Styles v2.5.0 */
:root {
    --vis-sl-line: rgba(0,0,0,0.12);
    --vis-sl-tier-color: #1d2935;
    --vis-sl-tier-alpha: 0.2;
}

.vis-sl-wrapper { position: relative; padding: 20px 0; width: 100%; z-index: 1; }

/* Header */
.vis-sl-header { margin-bottom: 2rem; }
.vis-sl-title { margin: 0 0 0.5rem; font-weight: 700; color: inherit; line-height: 1.2; }
.vis-sl-subtitle { margin: 0; opacity: 0.8; }

/* --- STYLE DLA GRID / SLIDER / MARQUEE --- */
.vis-sl-grid { display: flex; flex-wrap: wrap; justify-content: var(--vis-sl-align, flex-start); gap: var(--vis-sl-gap, 16px); }
.vis-sl-wrapper .s-card { 
    position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16/9;
    border-radius: 12px; background: #fff; border: 1px solid var(--vis-sl-line); cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02); transition: all .25s ease;
}

/* --- NOWOŚĆ: PREMIUM 3D RING CAROUSEL --- */
.vis-sl-3d-container {
    position: relative; width: 100%; min-height: 600px; display: flex; align-items: center; justify-content: center;
    overflow: visible; background: transparent; -webkit-font-smoothing: antialiased;
}

.vis-sl-floor-shadow {
    position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%) rotateX(90deg);
    width: 600px; height: 150px; background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,0.04) 0%, transparent 100%);
    pointer-events: none; z-index: 0;
}

.vis-sl-scene {
    position: relative; width: 100%; height: 400px; perspective: 2500px;
    display: flex; align-items: center; justify-content: center; z-index: 1;
}

.vis-sl-carousel {
    position: relative; width: 200px; height: 150px; transform-style: preserve-3d;
    transform: rotateX(var(--v-tilt)) rotateY(0deg);
    animation: rotate3dRing var(--v-speed) infinite linear;
    transition: animation-play-state 0.3s ease;
}

.vis-sl-carousel:hover { animation-play-state: paused; }

.item-wrapper { position: absolute; inset: 0; transform-style: preserve-3d; backface-visibility: hidden; }

/* Karta wewnątrz pierścienia */
.vis-sl-carousel .s-card {
    display: flex; flex-direction: column; width: 100%; height: 100%; background: #ffffff;
    border-radius: 14px; border: 1px solid rgba(0,0,0,0.06); padding: 15px; text-decoration: none;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06); transform: translateZ(0); will-change: transform;
    transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.item-wrapper:hover .s-card {
    transform: translateZ(60px); 
    box-shadow: 0 20px 60px rgba(193, 31, 42, 0.15);
    border-color: rgba(193, 31, 42, 0.2);
}

.vis-sl-carousel .card-header {
    font-weight: 700; font-size: 10px; color: #999; text-transform: uppercase;
    letter-spacing: 2px; margin-bottom: 10px; text-align: center;
}

.vis-sl-carousel .screenshot-placeholder {
    width: 100%; flex-grow: 1; background: #f8f8f8; border-radius: 6px;
    overflow: hidden; display: flex; align-items: center; justify-content: center;
}

.vis-sl-carousel img { width: 100%; height: 100%; object-fit: contain; padding: 10px; box-sizing: border-box; }

@keyframes rotate3dRing {
    from { transform: rotateX(var(--v-tilt)) rotateY(0deg); }
    to { transform: rotateX(var(--v-tilt)) rotateY(360deg); }
}

/* Tooltip & Modal z Twojej poprzedniej wersji zachowane poniżej... */
.vis-sl-global-tooltip { /* ... */ }
.vis-sl-modal.modal { /* ... */ }

/* ==========================================================================
   NOWE PODEJŚCIE DLA MOBILE: PŁASKA SIATKA (FLAT GRID FALLBACK)
   ========================================================================== */

/* Na wszelki wypadek upewniamy się, że stare maski są ukryte */
.mobile-mask-wrapper::before,
.mobile-mask-wrapper::after {
    display: none !important;
}

@media (max-width: 767px) {
    /* 1. Resetujemy układ 3D i uwalniamy wysokość */
    .vis-sl-3d-container {
        transform: none !important;
        min-height: auto !important;
        margin: 0 !important;
        padding: 20px 0;
        display: block;
    }

    /* 2. Ukrywamy niepotrzebny cień podłogi */
    .vis-sl-floor-shadow {
        display: none !important;
    }

    /* 3. Wyłączamy perspektywę sceny */
    .vis-sl-scene {
        perspective: none !important;
        height: auto !important;
        display: block;
    }

    /* 4. ZAMIENIAMY KARUZELĘ W SIATKĘ (Grid) */
    .vis-sl-carousel {
        width: 100% !important;
        height: auto !important;
        transform: none !important;
        animation: none !important; /* Wyłączamy kręcenie na mobile */
        display: grid !important;
        grid-template-columns: repeat(2, 1fr); /* 2 kolumny kafelków */
        gap: 15px; /* Odstęp między kafelkami */
        padding: 0 15px;
    }

    /* 5. Uwalniamy kafelki z okręgu 3D (resetujemy absolute i transform) */
    .item-wrapper {
        position: relative !important;
        inset: auto !important;
        transform: none !important; /* Usuwamy przesunięcia 3D */
    }

    /* 6. Ustawiamy estetyczny wygląd płaskiej karty */
    .vis-sl-carousel .s-card {
        transform: none !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.15) !important; /* Delikatny, płaski cień */
        height: 120px; /* Stała wysokość dla proporcji */
    }

    .item-wrapper:hover .s-card {
        transform: translateY(-5px) !important; /* Delikatne uniesienie przy dotknięciu, zamiast wystrzału 3D */
        box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
    }

    .vis-sl-carousel .card-header {
        font-size: 9px;
        margin-bottom: 8px;
    }
}

/* ==========================================================================
   PRZYCISK "WIĘCEJ" I UKRYWANIE KAFELKÓW NA MOBILE
   ========================================================================== */

@media (max-width: 767px) {
    /* Ukrywamy wszystkie kafelki od 7 w górę (czyli zostawiamy max 3 wiersze) 
       tylko wtedy, gdy karuzela ma klasę .is-collapsed */
    .vis-sl-carousel.is-collapsed .item-wrapper:nth-child(n+7) {
        display: none !important;
    }

    /* Stylizacja przycisku "Więcej" */
    .vis-sl-load-more {
        display: block;
        width: fit-content;
        margin: 30px auto 10px;
        padding: 12px 35px;
        background: transparent;
        border: 2px solid #ffffff;
        color: #ffffff;
        border-radius: 50px;
        font-size: 14px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: inherit;
    }

    .vis-sl-load-more:hover {
        background: #ffffff;
        color: #b400b4; /* Zmieni kolor tekstu na fiolet po kliknięciu/najechaniu */
    }
}

/* Gwarancja, że przycisk NIGDY nie pokaże się na komputerze (tam mamy pełne 3D) */
@media (min-width: 768px) {
    .vis-sl-load-more {
        display: none !important;
    }
}