/* "Serveis" carousel (home). Desktop reproduces the Figma layout (node
4366:12814): a title fixed in place, top-aligned with the carousel and
occupying half the container, with the rest of that space empty at rest
— the card track starts pushed to the right so only one card plus part
of the next shows, clear of the title. The title sits on top of the
carousel (z-index) but is pointer-events:none so it never blocks card
clicks, and fades from opacity 1 to 0.3 (never fully gone) as carousel.js
drives the track left from page scroll plus mouse drag added on top.
Below 992px, none of that choreography makes sense, so it falls back to
a plain swipeable row. Plain CSS (not SCSS) so it loads only when this
block is on the page, via the PathCSS block header. */
.serveis-carousel {
    position: relative;
}

.serveis-carousel__title-inner h2 {
    margin: 0;
}

@media (max-width: 991.98px) {
    .serveis-carousel__title {
        margin-bottom: 2rem;
    }

    .serveis-carousel__track-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .serveis-carousel__track {
        display: flex;
        gap: 1rem;
    }

    .serveis-carousel__item {
        flex: 0 0 80%;
    }
}

@media (min-width: 992px) {
    .serveis-carousel {
        overflow-x: hidden;
    }

    .serveis-carousel__title {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 2;
        pointer-events: none; /* sits on top of the carousel but must never block card clicks */
    }

    .serveis-carousel__title-inner {
        max-width: 50%;
        will-change: opacity;
    }

    .serveis-carousel__track-wrap {
        position: relative;
        z-index: 1;
        cursor: grab;
    }

    .serveis-carousel__track-wrap.is-dragging {
        cursor: grabbing;
    }

    .serveis-carousel__track {
        display: flex;
        gap: 20px;
        will-change: transform;
        user-select: none;
    }

    .serveis-carousel__item {
        flex: 0 0 clamp(320px, 28vw, 473px);
    }

    .serveis-carousel__item .photo-card,
    .serveis-carousel__item .photo-card__img {
        -webkit-user-drag: none;
    }
}