/* =============================================================
   COMPONENT / SLIDER
   
   Галерея-карусель. Слайды переставляются через transform:
   translateX (обычно через JS).
   ============================================================= */

.media-container {
    position: relative;
    display: grid;
}

/* Область видимости — обрезает всё, что за пределами */
.viewport {
    display: grid;
    max-width: 100%;
    overflow: hidden;
}

/* Дорожка со слайдами */
.track {
    display: grid;
    grid-auto-flow: column;
    transition: transform var(--duration-slower) var(--ease-default);
}

/* Один слайд */
.media-item {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
}

.media-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-2xl);
    object-fit: cover;
}

/* ---------------------------------------------------------
   КНОПКИ НАВИГАЦИИ
   --------------------------------------------------------- */

.nav-btn {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-control);
    margin: 2px;
    z-index: var(--z-raised);
    cursor: pointer;
    display: flex;
    border: none;
    outline: none;
    transition:
        background-color var(--duration-slow) var(--ease-default),
        box-shadow var(--duration-slow) var(--ease-default);
}

.nav-btn:hover,
.nav-btn:focus {
    box-shadow: var(--shadow-control-hover);
}

.nav-btn:active {
    box-shadow: var(--shadow-control-active);
}

/* Варианты */
.nav-btn.light {
    background: rgba(255, 255, 255, .6);
}

.nav-btn.light:hover {
    background: rgba(255, 255, 255, .8);
}

.nav-btn.dark {
    background: rgba(255, 255, 255, .2);
}

.nav-btn.dark:hover {
    background: rgba(255, 255, 255, .3);
}

.nav-btn .icon {
    fill: var(--text-primary);
}

/* Позиционирование */
.nav-btn.prev {
    left: var(--space-3);
}

.nav-btn.next {
    right: var(--space-3);
}

.nav-btn.center {
    top: 50%;
    transform: translateY(-50%);
}

/* ---------------------------------------------------------
   АДАПТИВ
   --------------------------------------------------------- */

@media (max-width: 767px) {
    .nav-btn {
        width: 40px;
        height: 40px;
    }

    /* Переопределяем только переменную */
    .nav-btn .icon {
        --icon-size: var(--icon-sm);
    }

    .nav-btn.prev {
        left: var(--space-1);
    }

    .nav-btn.next {
        right: var(--space-1);
    }
}