/* ── Карусель: scroll-snap + кнопки ──────────────────────────────────────────
 * Розмітка: .carousel > .carousel__head + ul.carousel__track > li.carousel__item.
 * Кількість у кадрі — модифікатором .carousel--cols-N, поведінка — js/pages/home.js.
 */
.carousel {
    --per-view: 1;
    --carousel-gap: var(--space-5);
}
.carousel--cols-2 { --per-view: 2; }
.carousel--cols-3 { --per-view: 3; }
.carousel--cols-4 { --per-view: 4; }

.carousel__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}

/* Заголовок по центру, кнопки справа */
.carousel__head--center {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-bottom: var(--space-7);
    text-align: center;
}
.carousel__head--center::before { content: ''; }
.carousel__nav--end { justify-self: end; }

.carousel__tools { display: flex; align-items: center; gap: var(--space-6); }

.carousel__nav { display: flex; gap: var(--space-2); }

.carousel__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--color-heading);
    border: 1px solid var(--color-border-strong);
    border-radius: 50%;
    transition: color var(--transition), background-color var(--transition), border-color var(--transition), opacity var(--transition);
}
.carousel__btn:hover:not(:disabled) { color: var(--color-on-primary); background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.carousel__btn:disabled { opacity: .35; cursor: default; }

.carousel__track {
    position: relative; /* абсолютні дочірні (screen-reader-text) не мають розтягувати сторінку */
    display: flex;
    gap: var(--carousel-gap, var(--space-5));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }

.carousel__item {
    flex: 0 0 calc((100% - (var(--per-view, 1) - 1) * var(--carousel-gap, var(--space-5))) / var(--per-view, 1));
    min-width: 0;
    scroll-snap-align: start;
}

/* ── Посилання зі стрілкою ──────────────────────────────────────────────── */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--color-primary);
}
.link-arrow__icon { transition: transform var(--transition); }
.link-arrow:hover .link-arrow__icon { transform: translateX(4px); }

/* ── Адаптив ────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .carousel--cols-4 { --per-view: 3; }
    .carousel--cols-3 { --per-view: 2; }
}

@media (max-width: 767px) {
    .carousel { --carousel-gap: var(--space-4); }
    .carousel--cols-4,
    .carousel--cols-3 { --per-view: 2; }
    .carousel--cols-2 { --per-view: 1; }
    .carousel__head--center { grid-template-columns: minmax(0, 1fr) auto; margin-bottom: var(--space-6); text-align: left; }
    .carousel__head--center::before { display: none; }
    .carousel__btn { width: 40px; height: 40px; }
    .carousel__head:not(.carousel__head--center) { flex-wrap: wrap; align-items: center; row-gap: var(--space-3); margin-bottom: var(--space-5); }
    .carousel__head:not(.carousel__head--center) > :first-child { flex: 1 1 100%; }
    .carousel__tools { flex: 1 1 100%; justify-content: space-between; gap: var(--space-4); }
}