/* ========================================
   Diagnozy 12 - Lista usług (slider)
   1rem = 10px

   Desktop: 2.5 slajdów (2 pełne + peek)
   Mobile:  1 slajd
   Gap:     zawsze
   ======================================== */

/* --- Sekcja ---
   min-width: 0 zapobiega rozlewaniu się Splide
   w flex-parentu (.tus-layout-grid).
   overflow: clip obcina peek bez tworzenia scroll-box. */

.lista-uslug-section {
    padding: 1rem 1.6rem;
    background: var(--color-white);
    min-width: 0;
    max-width: 100%;
    overflow: clip;
}

.lista-uslug-container {
    max-width: 120rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    min-width: 0;
}

/* Splide flex-chain: zapobiegamy rozlewaniu inline widths */
.lista-uslug-splide,
.lista-uslug-splide .splide__track,
.lista-uslug-splide .splide__list {
    min-width: 0;
    max-width: 100%;
}

/* --- Header (tytuł + opis) --- */

.lista-uslug-header {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    text-align: center;
}

.lista-uslug-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 2.8rem;
    line-height: 1.3;
    letter-spacing: -0.042rem;
    color: #1F1F1F;
    margin: 0;
}

.lista-uslug-desc {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.5;
    color: #3B3D45;
    margin: 0;
}

/* --- Splide overflow ---
   Bazowo track musi mieć overflow:hidden (splide-core.min.css tego nie daje).
   Na desktopie otwieramy overflow żeby peek (0.5 slajdu) był widoczny —
   sekcja z overflow:clip obcina nadmiar. */

.lista-uslug-splide .splide__track {
    overflow: hidden;
}

@media (min-width: 1025px) {
    .lista-uslug-splide {
        overflow: visible;
    }

    .lista-uslug-splide .splide__track {
        overflow: visible;
    }
}

/* --- Karta usługi --- */

.lista-uslug-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #E4E7F0;
    border-radius: 2rem;
    overflow: hidden;
    height: 100%;
    background: var(--color-white);
    transition: box-shadow 0.3s ease;
}

.lista-uslug-card:hover {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* Obrazek */

.lista-uslug-card-image {
    width: 100%;
    height: 18.6rem;
    overflow: hidden;
}

.lista-uslug-card-image a {
    display: block;
    width: 100%;
    height: 100%;
}

.lista-uslug-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.lista-uslug-card:hover .lista-uslug-card-image img {
    transform: scale(1.05);
}

/* Body karty */

.lista-uslug-card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    gap: 1.6rem;
    padding: 1.6rem 1.2rem;
}

.lista-uslug-card-text {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.lista-uslug-card-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 1.3;
    letter-spacing: -0.024rem;
    color: #1F1F1F;
    margin: 0;
}

.lista-uslug-card-desc {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.5;
    color: #3B3D45;
    margin: 0;
}

/* Link "Zobacz ofertę →" */

.lista-uslug-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.5;
    color: var(--color-primary) !important;
    text-decoration: underline;
    transition: opacity 0.3s ease;
}

.lista-uslug-card-link:hover {
    opacity: 0.7;
}

.lista-uslug-card-link svg {
    flex-shrink: 0;
}

/* --- Strzałki nawigacji --- */

.lista-uslug-arrows {
    display: flex;
    justify-content: center;
    gap: 1.6rem;
    padding-top: 4rem;
}

.lista-uslug-arrows .splide__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #199ACC;
    width: 4rem;
    height: 4rem;
    transition: opacity 0.3s ease;
}

.lista-uslug-arrows .splide__arrow:hover {
    opacity: 0.7;
    background: none !important;
}

.lista-uslug-arrows .splide__arrow:focus {
    background: unset !important;
}

.lista-uslug-arrows .splide__arrow:disabled {
    opacity: 0.3 !important;
    cursor: default;
}

.lista-uslug-arrows .splide__arrow svg {
    display: block;
    width: 3.2rem;
    height: 3.2rem;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 1024px) {
    .lista-uslug-section {
        padding: 3.2rem 4.8rem;
    }

    .lista-uslug-title {
        font-size: 2.6rem;
    }

    .lista-uslug-arrows {
        display: none;
    }

    /* Splide dots */
    .lista-uslug-splide .splide__pagination {
        display: flex;
        justify-content: center;
        gap: 0.8rem;
        padding: 2rem 0 0;
        list-style: none;
        margin: 0;
    }

    .lista-uslug-splide .splide__pagination__page {
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 50%;
        background: #D1D5DB;
        border: none;
        padding: 0;
        cursor: pointer;
        transition: background 0.2s ease, transform 0.2s ease;
    }

    .lista-uslug-splide .splide__pagination__page.is-active {
        background: var(--color-primary, #199ACC);
        transform: scale(1.25);
    }
}

@media (max-width: 768px) {
    .lista-uslug-section {
        padding: 3.2rem 2.4rem;
        background: unset;
    }

    .lista-uslug-title {
        font-size: 2.2rem;
        letter-spacing: -0.033rem;
    }
}

@media (max-width: 480px) {
    .lista-uslug-section {
        padding: 2.4rem 1.6rem;
    }

    .lista-uslug-card-image {
        height: 14rem;
    }
}