/* News slider (mod_newslist_slider + news_latest) */

.news-slider {
    --news-slider-radius: 1rem;
    --news-slider-space: 1.5rem;
    --news-slider-card-bg: oklch(98.5% 0.004 240);
    --news-slider-text: oklch(32% 0.05 240);
    --news-slider-button-bg: oklch(37% 0.06 240 / 0.7);
    --news-slider-button-text: oklch(98.5% 0.004 240);
    --news-slider-arrow: oklch(97% 0.004 240);

    position: relative;

    .empty {
        display: none;
    }

    & .news-slider__track {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        border-radius: var(--news-slider-radius);

        &::-webkit-scrollbar {
            display: none;
        }

        &:focus-visible {
            outline: 2px solid var(--news-slider-arrow);
            outline-offset: 4px;
        }
    }

    & .news-slider__slide {
        scroll-snap-align: start;
    }

    /* Prev / next buttons (desktop only, like the original) */
    & .news-slider__arrow {
        display: none;
        position: absolute;
        inset-block-start: 50%;
        translate: 0 -50%;
        inline-size: 2.5rem;
        block-size: 2.5rem;
        padding: 0.5rem;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: var(--news-slider-arrow);
        cursor: pointer;

        &:hover,
        &:focus-visible {
            background: oklch(100% 0 0 / 0.12);
        }

        & svg {
            display: block;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
        }

        @media (min-width: 1024px) {
            display: block;
        }
    }

    & .news-slider__arrow--prev {
        inset-inline-end: calc(100% + 1rem);
    }

    & .news-slider__arrow--next {
        inset-inline-start: calc(100% + 1rem);
    }
}

/* Card layout of a single news item (default news_latest markup) */
.news-slider .layout_latest {
    display: grid;
    align-content: start;
    block-size: 100%;
    padding-block-end: var(--news-slider-space);
    background: var(--news-slider-card-bg);
    color: var(--news-slider-text);
    border-radius: var(--news-slider-radius);
    overflow: hidden;

    & > :not(figure) {
        margin: 0;
        padding-inline: var(--news-slider-space);
    }

    & figure {
        order: -1;
        margin: 0 0 var(--news-slider-space);

        & img {
            display: block;
            inline-size: 100%;
            block-size: 100%;
            object-fit: cover;
        }
    }

    & .info {
        font-size: 0.875rem;
    }

    & h2 {
        margin-block-end: var(--news-slider-space);
        font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
        font-weight: 300;
        line-height: 1.25;

        & a {
            color: inherit;
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }
    }

    & .more {
        margin-block-start: var(--news-slider-space);
    }

    /* "Read more" as a pill button (the arrow comes from the news template) */
    & .more a {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1.25rem;
        border-radius: 1.5rem;
        background: var(--news-slider-button-bg);
        color: var(--news-slider-button-text);
        font-size: 0.9375rem;
        line-height: 1.5;
        text-decoration: none;
        transition: background-color 0.2s ease;

        /* Hide the article title Contao adds for screen readers */
        & .invisible {
            position: absolute;
            inline-size: 1px;
            block-size: 1px;
            overflow: hidden;
            clip-path: inset(50%);
            white-space: nowrap;
        }

        &:hover,
        &:focus-visible {
            background: oklch(from var(--news-slider-button-bg) calc(l - 0.08) c h / 1);
        }

        &:focus-visible {
            outline: 2px solid var(--news-slider-button-bg);
            outline-offset: 2px;
        }
    }

    /* Image on the left, text on the right */
    @media (min-width: 768px) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
        grid-template-rows: auto auto auto 1fr;
        padding-block: var(--news-slider-space);

        & figure {
            grid-column: 1;
            grid-row: 1 / -1;
            margin: calc(-1 * var(--news-slider-space)) var(--news-slider-space) calc(-1 * var(--news-slider-space)) 0;
        }

        & > :not(figure) {
            grid-column: 2;
            padding-inline: 0 var(--news-slider-space);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .news-slider .more a {
        transition: none;
    }
}