/* ============================================================
   ABM Partner — ПЕРВЫЙ ЭКРАН (СЛАЙДЕР)
   Первый экран прижат к вьюпорту, пока его не накрыла следующая
   секция. Когда вторая секция закрыла первый экран целиком,
   hero «отпускается» (hero--released) и уезжает вверх вместе со
   страницей — он больше не рисуется под всем сайтом.
   ============================================================ */

.hero {
    position: relative;
    z-index: var(--z-hero);
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: var(--color-hero-bg);
}

/* ===== Состояние «прижат» =====
   Десктоп: position: fixed — первый экран не уезжает, пока его
   не накроет следующая секция. Разметка при этом не меняется:
   у секции есть отрицательный margin, компенсирующий высоту hero,
   поэтому переключение не дёргает страницу.
   ВАЖНО: единицы dvh/svh вместо vh — на мобиле адресная строка
   меняет высоту вьюпорта, и статичный 100vh даёт расхождение
   с реальным hero (второй экран «прыгает» в момент переключения). */
.hero--pinned {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
}

.hero--pinned + .section--overlap {
    margin-top: calc(100vh - 2.5rem);
    margin-top: calc(100svh - 2.5rem);
    margin-top: calc(100dvh - 2.5rem);
}

/* ===== Состояние «отпущен» =====
   Второй экран накрыл первый целиком: отклеиваем hero от
   вьюпорта — он уезжает вверх вместе со страницей и больше не
   рисуется под всем сайтом. Оба положения в потоке, поэтому
   переключение не двигает раскладку, а точка переключения вне
   вьюпорта — визуально бесшовно.
   Правило с двойным классом стоит в конце файла — оно должно
   побеждать и .hero--pinned, и мобильный sticky. */
/* Мобилка/тач: JS-пин (fixed) и перелёт hero выключены (hero.js).
   fixed дёргается вместе с адресной строкой: высота вьюпорта гуляет
   во время скролла и второй экран «прыгает». Вместо этого hero
   липнет через CSS-sticky: он стоит у верхнего края, пока секция
   услуг (z-index выше, отрицательный margin) наезжает на него —
   визуально тот же наезд, что в десктопе, но нативным скроллом без
   JS-перелётов. Sticky не зависит от resize адресной строки и не
   требует дорогих перерисовок fixed-фона каждый кадр. */
@media (max-width: 53.75rem), (pointer: coarse) {
    .hero {
        position: sticky;
        top: 0;
        z-index: var(--z-hero);
        min-height: 100vh;
        min-height: 100svh;
        min-height: 100dvh;
    }
    /* Страховка, если класс hero--pinned всё же выставился:
       fixed на мобиле запрещён, остаёмся в sticky. */
    .hero--pinned {
        position: sticky;
        top: 0;
        height: auto;
    }
    .hero--pinned + .section--overlap {
        margin-top: -2.5rem;
    }
}

/* ============================================================
   СЛАЙДЕР
   ============================================================ */
.hero__slider {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero__slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    z-index: 0;
    --hero-glass-bg: transparent;
    --hero-glass-blur: blur(0px);
    --hero-glass-bg-hover: transparent;
    --hero-glass-blur-hover: blur(0px);
    --hero-overlay-opacity: 0;
    transition:
        opacity 0.65s ease,
        visibility 0.65s ease;
}

.hero__slide--active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

/* ===== Затемнение изображения =====
   Псевдоэлемент на каждом слайде. Включается настройкой слайда
   только для мобильных, только для десктопа или для всех. */
.hero__slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(0, 0, 0, 0.35);
    opacity: var(--hero-overlay-opacity);
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.hero__slide--overlay-all {
    --hero-overlay-opacity: 1;
}

@media (max-width: 53.75rem), (pointer: coarse) {
    .hero__slide--overlay-mobile {
        --hero-overlay-opacity: 1;
    }
}

@media (min-width: 53.75rem) and (pointer: fine) {
    .hero__slide--overlay-desktop {
        --hero-overlay-opacity: 1;
    }
}

/* Фон слайда */
.hero__media {
    position: absolute;
    inset: 0;
    background: var(--color-hero-bg);
}

.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
    transition: opacity 0.6s ease;
}

/* Пока картинка грузится — не показываем её «кусками».
   Без JS картинки видны сразу. */
.js .hero__media img {
    opacity: 0;
}

.js .hero__media--loaded img {
    opacity: 1;
}

.hero__container {
    position: relative;
    z-index: 3;
    width: 100%;
    padding-bottom: 2.5rem;
}

/* Контент слайда */
.hero__content {
    position: relative;
    z-index: 10;
    max-width: 40rem;
    opacity: 0;
    padding: 1.25rem;
    border-radius: var(--radius-sm);
    background: transparent;
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    transition:
        opacity 0.6s ease,
        background 0.4s ease,
        backdrop-filter 0.4s ease;
}

.hero__slide--active .hero__content {
    opacity: 1;
}

/* ===== «Стеклянная» подложка =====
   Класс .hero__content--glass добавляет JS после паузы. Внешний вид
   задают переменные слайда, поэтому настройка работает для мобильных,
   десктопа или всех устройств. В режиме инверсии слайд прозрачный,
   а подложка появляется только при наведении курсора. */
.hero__content--glass {
    background: var(--hero-glass-bg);
    -webkit-backdrop-filter: var(--hero-glass-blur);
    backdrop-filter: var(--hero-glass-blur);
}

.hero__content--glass:hover {
    background: var(--hero-glass-bg-hover);
    -webkit-backdrop-filter: var(--hero-glass-blur-hover);
    backdrop-filter: var(--hero-glass-blur-hover);
    transition:
        opacity 0.6s ease,
        background 0.2s ease,
        backdrop-filter 0.2s ease;
}

.hero__slide--glass-all {
    --hero-glass-bg: rgba(0, 0, 0, 0.17);
    --hero-glass-blur: blur(16px);
}

.hero__slide--glass-invert.hero__slide--glass-all {
    --hero-glass-bg: transparent;
    --hero-glass-blur: blur(0px);
    --hero-glass-bg-hover: rgba(0, 0, 0, 0.17);
    --hero-glass-blur-hover: blur(16px);
}

@media (max-width: 53.75rem), (pointer: coarse) {
    .hero__slide--glass-mobile {
        --hero-glass-bg: rgba(0, 0, 0, 0.17);
        --hero-glass-blur: blur(16px);
    }
    .hero__slide--glass-invert.hero__slide--glass-mobile {
        --hero-glass-bg: transparent;
        --hero-glass-blur: blur(0px);
        --hero-glass-bg-hover: rgba(0, 0, 0, 0.17);
        --hero-glass-blur-hover: blur(16px);
    }
}

@media (min-width: 53.75rem) and (pointer: fine) {
    .hero__slide--glass-desktop {
        --hero-glass-bg: rgba(0, 0, 0, 0.17);
        --hero-glass-blur: blur(16px);
    }
    .hero__slide--glass-invert.hero__slide--glass-desktop {
        --hero-glass-bg: transparent;
        --hero-glass-blur: blur(0px);
        --hero-glass-bg-hover: rgba(0, 0, 0, 0.17);
        --hero-glass-blur-hover: blur(16px);
    }
}

/* На сенсорных экранах hover нет: инвертированная подложка
   не должна «залипать» после касания. */
@media (hover: none) {
    .hero__slide--glass-invert.hero__slide--glass-all,
    .hero__slide--glass-invert.hero__slide--glass-mobile,
    .hero__slide--glass-invert.hero__slide--glass-desktop {
        --hero-glass-bg-hover: transparent;
        --hero-glass-blur-hover: blur(0px);
    }
}

.hero__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h1-hero);
    font-weight: var(--fw-h1-hero);
    letter-spacing: var(--ls-h1-hero);
    line-height: var(--lh-h1-hero);
    margin: 0 0 var(--space-xl);
    color: var(--color-white);
}

.hero__year {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding-left: 1.25rem;
    font-size: var(--fs-base);
    font-weight: 400;
    letter-spacing: 0.135em;
    color: var(--color-surface-warm);
}

.hero__desc {
    font-size: var(--fs-base);
    line-height: var(--lh-lg);
    color: var(--color-white-soft);
    max-width: 32.875rem;
}

.hero__desc p,
.hero__desc ul,
.hero__desc ol {
    margin: 0 0 0.75em;
}

.hero__desc :last-child {
    margin-bottom: 0;
}

.hero__desc ul,
.hero__desc ol {
    padding-left: 1.25em;
}

.hero__desc li + li {
    margin-top: 0.35em;
}

.hero__desc a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: var(--space-lg);
}

.hero__tags .hero__pretitle {
    margin-bottom: 0;
}

.hero__pretitle {
    display: inline-block;
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    background: var(--color-hero-plate);
    color: var(--color-white-soft);
    padding: 0.3125rem 0.75rem;
    border-radius: var(--radius-pill);
    margin-bottom: var(--space-lg);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

.hero__legend {
    position: absolute;
    bottom: 3.2rem;
    right: 2.5rem;
    z-index: 10;
    font-size: var(--fs-base);
    font-weight: 300;
    color: var(--color-cream-soft);
    letter-spacing: 0.135em;
    font-family: var(--font-heading);
}

/* ============================================================
   УПРАВЛЕНИЕ: ПРЕВЬЮ-КАРТОЧКИ
   ============================================================ */
.hero__controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6.25rem;
    z-index: 10;
}

.hero__preview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9375rem;
    border-radius: var(--radius-md);
    padding: 1.25rem;
}

.hero__preview-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 5.625rem;
    flex: 0 0 5.625rem;
    border-radius: 0.625rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    cursor: pointer;
    color: var(--color-white);
    font-size: var(--fs-xs);
    opacity: 0.5;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    transition:
        opacity var(--dur-base) ease,
        background var(--dur-base) ease;
}

.hero__preview-card:hover,
.hero__preview-card--active {
    opacity: 1;
}

.hero__preview-card:focus-visible {
    outline: 2px solid var(--color-cream);
    outline-offset: 2px;
    opacity: 1;
}

.hero__preview-card > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.hero__preview-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    line-height: 0;
    /*background: rgba(255, 255, 255, 0.12);*/
}

.hero__preview-thumb {
    width: 100%;
    height: 100%;
    border-radius: 0.4375rem;
    object-fit: cover;
    display: block;
}

/* Полоса прогресса автопрокрутки */
.hero__preview-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: var(--color-hero-bar);
    border-radius: 2px;
}

.hero__preview--autoplay .hero__preview-card--active .hero__preview-bar {
    animation: hero-progress var(--hero-progress-duration, 10000ms) linear forwards;
}

@keyframes hero-progress {
    from { width: 0; }
    to   { width: 100%; }
}

/* ============================================================
   ВЫСОТНАЯ АДАПТАЦИЯ (мобила/тач)
   Сверху резервируем место под фиксированную шапку, снизу — под
   превью-карточки слайдера: текст центрируется в оставшейся зоне
   и не наезжает на карточки на низких экранах.
   ============================================================ */
@media (max-width: 53.75rem), (pointer: coarse) {
    .hero__slide {
        align-items: center;
        padding-top: 6rem;
        padding-bottom: 13.125rem;
    }
    .hero__container {
        padding-bottom: 0;
    }
    .hero__title {
        font-size: min(var(--fs-h1-hero), 7vh);
        margin-bottom: clamp(0.75rem, 2.6vh, var(--space-xl));
    }
    .hero__desc {
        line-height: 1.55;
    }
    .hero__actions {
        margin-top: clamp(0.75rem, 2.6vh, var(--space-xl));
    }
    /* Один слайд: панели переключения нет, нижний отступ не нужен. */
    .hero--single .hero__slide {
        padding-bottom: 2rem;
    }
}

/* Низкие телефоны: превью-карточки опускаются ближе к краю, заголовок,
   предтайтл и межстрочный ритм поджимаются — контент остаётся в кадре. */
@media (max-width: 53.75rem) and (max-height: 43.75rem),
       (pointer: coarse) and (max-height: 43.75rem) {
    .hero__slide {
        padding-top: 5.25rem;
        padding-bottom: 11.875rem;
    }
    .hero__controls {
        bottom: 5rem;
    }
    .hero__title {
        font-size: min(var(--fs-h1-hero), 6.2vh);
    }
    .hero__pretitle {
        margin-bottom: var(--space-sm);
    }
    .hero__desc {
        line-height: 1.45;
    }
    .hero--single .hero__slide {
        padding-bottom: 1.5rem;
    }
}

/* Очень низкие экраны (ландшафт телефона): превью-карточки убираем,
   чтобы текст гарантированно не перекрывался, и отдаём высоту контенту. */
@media (max-width: 53.75rem) and (max-height: 35rem),
       (pointer: coarse) and (max-height: 35rem) {
    .hero__slide {
        padding-top: 4.5rem;
        padding-bottom: 1.5rem;
    }
    .hero__controls {
        display: none;
    }
    .hero__title {
        font-size: min(var(--fs-h1-hero), 6.4vh);
        margin-bottom: var(--space-sm);
    }
    .hero__actions {
        margin-top: var(--space-md);
    }
}

/* Легенда на узких экранах не нужна */
@media (max-width: 40rem) {  /* 640px */
    .hero__legend {
        display: none;
    }
}

/* ============================================================
   ДОСТУПНОСТЬ
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .hero__slide,
    .hero__slide::after,
    .hero__content,
    .hero__content--glass:hover,
    .hero__media img {
        transition: none;
    }
    .hero__preview--autoplay .hero__preview-card--active .hero__preview-bar {
        animation: none;
    }
}

/* ============================================================
   ФИНАЛЬНОЕ СОСТОЯНИЕ
   Первый экран накрыт вторым — hero возвращается в поток и
   больше не рисуется под всем сайтом. Правило идёт последним,
   чтобы перебить и .hero--pinned, и мобильный sticky.
   ============================================================ */
.hero.hero--released {
    position: relative;
}