/*
 * Секция «Статьи»: карусель карточек со scroll-snap и прогресс-баром (js/slider.js).
 * Видно карточек: 2 (mobile/tablet), 4 (desktop ≥1280). Без JS — нативная прокрутка с полосой,
 * прогресс-бар скрыт; после инициализации полоса прокрутки трека прячется, прогресс-бар её заменяет.
 */
.articles {
    --articles-per-view: 2;
    --article-teaser-padding: 12px;
    --article-teaser-letter-spacing: var(--letter-spacing-tight);
    --article-teaser-mask: ellipse(78% 100% at 71% 0);   /* «волна» снизу обложки */
}

/* ---------- Трек карусели ---------- */
/*
 * Трек выходит в боковые поля контейнера на ширину зазора между карточками: тени карточек
 * не обрезаются прокруткой, первая карточка остаётся на линии контента (scroll-padding),
 * а следующая карточка не выглядывает узкой полоской из-за края (gutter ≥ зазора).
 */
ul.articles__track {
    position: relative;                          /* offsetLeft карточек — относительно трека */
    display: grid;
    grid-auto-columns: calc(
        (100% - (var(--articles-per-view) - 1) * var(--slider-gap)) / var(--articles-per-view)
    );
    grid-auto-flow: column;
    gap: var(--slider-gap);
    margin: calc(-1 * var(--space-s)) calc(-1 * var(--slider-gap)) 0;
    padding: var(--space-s) var(--slider-gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--slider-gap);
    scrollbar-color: var(--color-sky) transparent;
    scrollbar-width: thin;
    list-style: none;
}

/* Перетаскивание ползунка: без привязки, иначе трек «прыгает» между карточками */
.articles__track[data-slider-dragging] {
    scroll-snap-type: none;
}

/* Скрипт подключился — полосу прокрутки заменяет прогресс-бар */
[data-slider-ready] .articles__track {
    scrollbar-width: none;
}

[data-slider-ready] .articles__track::-webkit-scrollbar {
    display: none;
}

.articles__item {
    display: flex;
    min-width: 0;
    scroll-snap-align: start;
}

/* ---------- Карточка статьи ---------- */
.article-teaser {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-medium);
    background-color: var(--color-card);
    box-shadow: var(--shadow-tile);
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.article-teaser__media {
    aspect-ratio: var(--article-teaser-media-ratio);
    overflow: hidden;
    background: var(--gradient-frame);
    clip-path: var(--article-teaser-mask);
}

.article-teaser__media > picture {
    height: 100%;
}

.article-teaser__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-medium);
}

.article-teaser__title {
    flex: 1;
    padding: var(--space-xs) var(--article-teaser-padding) var(--article-teaser-padding);
    font-family: var(--font-body);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-body);
    letter-spacing: var(--article-teaser-letter-spacing);
    overflow-wrap: break-word;
}

/* Короткая голубая линия над заголовком */
.article-teaser__title::before {
    content: "";
    display: block;
    width: var(--decor-line-width);
    max-width: 100%;
    height: var(--decor-line-thickness);
    margin-bottom: var(--space-xs);
    border-radius: var(--radius-pill);
    background: var(--gradient-primary);
}

.article-teaser__link {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

/* Вся карточка — зона клика ссылки заголовка */
.article-teaser__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.article-teaser__link:focus-visible {
    outline: none;
}

.article-teaser__link:focus-visible::after {
    outline: 2px solid var(--color-focus);
    outline-offset: -2px;
    border-radius: var(--radius-medium);
}

.article-teaser:focus-within {
    box-shadow: var(--shadow-glow);
}

@media (hover: hover) {
    .article-teaser:hover {
        box-shadow: var(--shadow-glow);
        transform: translateY(-2px);
    }

    .article-teaser:hover .article-teaser__link {
        color: var(--color-blue);
    }

    .article-teaser:hover .article-teaser__image {
        transform: scale(1.04);
    }
}

/* ---------- Прогресс-бар: линия с круглым ползунком ---------- */
.articles__progress {
    position: relative;
    width: 100%;
    max-width: var(--slider-progress-max-width);
    height: var(--slider-thumb-size);
    margin: var(--space-m) auto 0;
    cursor: pointer;
    touch-action: pan-y;
}

.articles__progress[hidden] {
    display: none;
}

.articles__progress::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 50%;
    height: var(--slider-rail-thickness);
    border-radius: var(--radius-pill);
    background-color: var(--color-sky);
    transform: translateY(-50%);
}

.articles__thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--slider-thumb-size);
    height: var(--slider-thumb-size);
    border: 2px solid var(--color-surface);
    border-radius: 50%;
    background: var(--gradient-frame);
    box-shadow: var(--shadow-tile);
    cursor: grab;
    touch-action: none;
    will-change: transform;
    transition: box-shadow var(--transition-fast);
}

.articles__thumb:active {
    cursor: grabbing;
}

.articles__thumb:focus-visible {
    box-shadow: var(--shadow-glow-strong);
}

@media (hover: hover) {
    .articles__thumb:hover {
        box-shadow: var(--shadow-glow);
    }
}

@media (min-width: 768px) {
    .articles {
        --article-teaser-padding: var(--space-m);
        --article-teaser-letter-spacing: var(--letter-spacing-wide);
    }

    .articles__progress {
        margin-top: var(--space-l);
    }
}

@media (min-width: 1280px) {
    .articles {
        --articles-per-view: 4;
    }
}