/* =============================================================================
   Provider Slider Block
   ============================================================================= */

.provider-slider-block {
    padding: 3rem 1.5rem;
    max-width: 1200px;
    margin: 0 auto;


    /* ── Heading ───────────────────────────────────────────────────────────── */

    & .provider-slider-block__heading {
        text-align: center;
        font-size: clamp( 1.4rem, 3vw, 1.8rem );
        margin: 0 0 0.5rem;
        color: var( --charcoal );
    }

    & .provider-slider-block__divider {
        display: block;
        width: 40px;
        height: 2px;
        background: var( --moss );
        margin: 0 auto 2rem;
    }


    /* ── Track wrap — extra padding for arrows ─────────────────────────────── */

   /* ── Track wrap — extra padding for arrows ─────────────────────────────── */

    & .provider-slider-block__track-wrap {
        position: relative;
        /* Increased padding slightly to give the negative-positioned arrows room to breathe */
        padding: 0 4rem; 
    }


    /* ── CTA ───────────────────────────────────────────────────────────────── */

    & .provider-slider-block__cta {
        text-align: center;
        margin-top: 2rem;
    }

    & .provider-slider-block__cta-btn {
        display: inline-block;
        padding: 0.65rem 2rem;
        border: 2px solid var( --moss );
        color: var( --moss );
        font-weight: 600;
        font-size: 0.95rem;
        border-radius: 99px;
        text-decoration: none;
        transition: background 0.2s, color 0.2s;

        &:hover {
            background: var( --moss );
            color: var( --white );
        }
    }
}


/* =============================================================================
   Splide arrow overrides — push outside the card area
   ============================================================================= */

.js-provider-slider {
    position: relative;
    overflow: visible !important; /* Prevents arrows from being clipped when pushed outside */

    /* Adding 'button' increases specificity to beat Splide's default CSS */
    & button.splide__arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: transparent;
        border: none;
        width: 3rem;
        height: 3rem;
        opacity: 0.7;
        transition: opacity 0.2s, outline 0.2s;
        z-index: 10; /* Forces arrows above everything */

        &:hover {
            opacity: 1;
        }

        /* Clear focus state for keyboard navigation */
        &:focus-visible {
            outline: 2px solid var( --moss );
            outline-offset: 2px;
            opacity: 1;
        }

        & svg {
            fill: var( --charcoal );
            width: 1.5rem !important; /* Forces the SVG size */
            height: 1.5rem !important;
        }
    }

    & button.splide__arrow--prev {
        left: -3.5rem; 
        /* Keep it centered vertically, but flip it horizontally */
        transform: translateY(-50%) scaleX(-1); 
    }

    & button.splide__arrow--next {
        right: -3.5rem; 
    }
}


/* =============================================================================
   Provider Card
   ============================================================================= */

.provider-card {
    background: var( --warm-grey );
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;


    /* ── Photo ─────────────────────────────────────────────────────────────── */

    & .provider-card__photo-wrap {
        position: relative;
        overflow: hidden;
        aspect-ratio: 1;

        &:hover .provider-card__photo {
            transform: scale( 1.03 );
        }

        &:hover .provider-card__photo-bar {
            width: 100%;
        }
    }

    & .provider-card__photo {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
        display: block;
        transition: transform 0.3s ease;
    }

    & .provider-card__photo-bar {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 6px;
        width: 50px;
        background: var( --opa-green );
        transition: width 0.3s ease;
    }


    /* ── Info ──────────────────────────────────────────────────────────────── */

    & .provider-card__info {
        padding: 1rem;
        display: flex;
        flex-direction: column;
        flex: 1;
        gap: 0.25rem;
    }

    & .provider-card__name {
        font-size: 1rem;
        font-weight: 700;
        margin: 0;
        line-height: 1.3;
        color: var( --charcoal );
    }

    & .provider-card__title {
        font-size: 0.85rem;
        color: var( --charcoal );
        margin: 0;
    }

    & .provider-card__specialties {
        list-style: none;
        font-weight: 400;
        padding: 0;
        margin: 0.25rem 0 0;
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
        flex: 1;

        & li {
            font-size: 0.85rem;
            color: var( --charcoal );
            line-height: 1.4;
        }
    }

    & .provider-card__btn {
        display: inline-block;
        margin-top: 0.75rem;
        padding: 0.35rem 1.25rem;
        border: 2px solid var( --charcoal );
        color: var( --charcoal );
        font-size: 0.85rem;
        font-weight: 600;
        border-radius: 99px;
        text-decoration: none;
        align-self: flex-start;
        transition: background 0.2s, color 0.2s;

        &:hover {
            background: var( --charcoal );
            color: var( --white );
        }
    }
}


/* =============================================================================
   Responsive
   ============================================================================= */

@media ( max-width: 768px ) {

    .provider-slider-block {
        padding: 2rem 1rem;

        & .provider-slider-block__track-wrap {
            padding: 0 2.5rem;
        }
    }
}

@media ( max-width: 480px ) {

    .provider-slider-block {

        & .provider-slider-block__track-wrap {
            padding: 0 2rem;
        }
    }
}

/* =============================================================================
   Provider Slider — Static grid  (≤ 4 providers)
   ============================================================================= */

/* Remove the arrow-gutter padding when there's no slider */
.provider-slider-block__track-wrap--static {
    padding: 0;
}

.provider-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* centres 1–3 cards rather than leaving a gap on the right */
    gap: 1.5rem;
}

/* Match slider's desktop perPage: 4  →  width = ( 100% − 3 × 1.5rem ) ÷ 4 */
.provider-grid__item {
    flex: 0 0 calc( 25% - 1.125rem );
    min-width: 0; /* prevents card content from blowing out the flex item */
}

@media ( max-width: 1024px ) {
    .provider-grid__item {
        flex: 0 0 calc( 33.333% - 1rem );
    }
}

@media ( max-width: 768px ) {
    .provider-grid__item {
        flex: 0 0 calc( 50% - 0.75rem );
    }
}

@media ( max-width: 480px ) {
    .provider-grid__item {
        flex: 0 0 100%;
    }
}