/* ============================================
   CERTS.CSS — галерея дипломов и сертификатов
   + модалка-лайтбокс.
   Изолированный модуль. Префикс .certs- и .certs__
   Модалка: .cert-modal
   ============================================ */

/* ============================================
   ПЕРЕМЕННЫЕ
   ============================================ */
.certs {
    /* ── Размеры миниатюр ── */
    --certs-slide-w: 150px;          /* ширина одной миниатюры */
    --certs-slide-h: 210px;          /* высота одной миниатюры */
    --certs-gap: 20px;               /* отступ между миниатюрами */
    --certs-radius: 8px;             /* скругление миниатюр — лёгкое */

    /* ── Сколько видимых ── */
    --certs-visible: 5;              /* на десктопе */

    /* ── Отступы секции ── */
    --certs-padding-top: 60px;
    --certs-padding-bottom: 60px;
    --certs-title-margin: 40px;      /* от заголовка до карусели */

    /* ── Стрелки ── */
    --certs-arrow-size: 44px;
    --certs-arrow-offset: -22px;     /* вынос стрелок за пределы карусели */

    /* ── Ховер/переходы ── */
    --certs-transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* ── Модалка ── */
    --cert-modal-bg: rgba(30, 22, 18, 0.92);
    --cert-modal-fade: 0.25s;
    --cert-modal-scale: 0.96;
}

/* ============================================
   СЕКЦИЯ
   ============================================ */
.certs {
    padding: var(--certs-padding-top) 0 var(--certs-padding-bottom);
    background: var(--white, #FFFCF9);
}

.certs__title {
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
    font-weight: 700;
    text-align: center;
    color: var(--text-dark, #4A3B32);
    margin-bottom: var(--certs-title-margin);
    letter-spacing: -0.3px;
}

/* ============================================
   КАРУСЕЛЬ — контейнер
   ============================================ */
.certs__carousel {
    position: relative;
    max-width: var(--container-max, 1240px);
    margin: 0 auto;
    padding: 0 var(--container-padding, 30px);
}

.certs__viewport {
    /* Лента прокручивается нативно. На iOS это даёт родную инерцию
       и «чуткость» жеста — JS в прокрутку не вмешивается. */
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;      /* доводка до слайда — средствами браузера */
    overscroll-behavior-x: contain;     /* прокрутка ленты не «уезжает» на страницу */
    scrollbar-width: none;              /* Firefox */
    -ms-overflow-style: none;           /* старый Edge */
    /* Чтобы при протяжке не выделялся текст */
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.certs__viewport::-webkit-scrollbar {
    display: none;                      /* Safari/Chrome: полоса не нужна */
}

.certs__track {
    display: flex;
    gap: var(--certs-gap);
    /* Сдвиг задаётся прокруткой контейнера, а не transform —
       так работает нативная инерция и scroll-snap */
}

/* ============================================
   МИНИАТЮРА
   ============================================ */
.certs__slide {
    flex: 0 0 auto;
    width: var(--certs-slide-w);
    height: var(--certs-slide-h);
    /* Лента останавливается ровно на слайде */
    scroll-snap-align: start;
    padding: 0;
    border: 1px solid rgba(74, 59, 50, 0.08);
    border-radius: var(--certs-radius);
    background: var(--secondary, #F6E3D4);
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition:
        transform var(--certs-transition),
        box-shadow var(--certs-transition),
        border-color var(--certs-transition);
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    color: inherit;
}

.certs__slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;                    /* грамота видна целиком */
    object-position: center;
    display: block;
    padding: 6px;                           /* лёгкий отступ от рамки */
    box-sizing: border-box;
    background: var(--white, #FFFCF9);      /* светлая подложка внутри */
    transition: transform var(--certs-transition);
    pointer-events: none;
}

.certs__slide:hover {
    transform: translateY(-4px);
    border-color: var(--accent, #E8A87C);
    box-shadow: 0 12px 28px -10px rgba(74, 59, 50, 0.25);
}

.certs__slide:hover img {
    transform: scale(1.05);
}

.certs__slide:active {
    transform: translateY(-2px) scale(0.98);
}

.certs__slide:focus-visible {
    outline: 2px solid var(--accent, #E8A87C);
    outline-offset: 3px;
}
/* Горизонтальная миниатюра: ширина и высота «переворачиваются» */
.certs__slide--landscape {
    width: var(--certs-slide-h);    /* 210px */
    height: var(--certs-slide-w);   /* 150px */
}

/* ============================================
   СТРЕЛКИ НАВИГАЦИИ КАРУСЕЛИ
   ============================================ */
.certs__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--certs-arrow-size);
    height: var(--certs-arrow-size);
    border-radius: 50%;
    border: 1px solid rgba(232, 168, 124, 0.4);
    background: var(--white, #FFFCF9);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition:
        background var(--certs-transition),
        transform var(--certs-transition),
        box-shadow var(--certs-transition),
        opacity var(--certs-transition);
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 4px 16px -4px rgba(74, 59, 50, 0.15);
}

.certs__arrow:hover {
    background: var(--secondary, #F6E3D4);
    box-shadow: 0 8px 24px -6px rgba(74, 59, 50, 0.25);
}

.certs__arrow:active {
    transform: translateY(-50%) scale(0.92);
}

.certs__arrow:focus-visible {
    outline: 2px solid var(--accent, #E8A87C);
    outline-offset: 3px;
}

.certs__arrow[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.certs__arrow--prev { left: var(--certs-arrow-offset); }
.certs__arrow--next { right: var(--certs-arrow-offset); }

.certs__arrow-icon {
    display: block;
    width: 18px;
    height: 18px;
    background: var(--text-dark, #4A3B32);
}

.certs__arrow--prev .certs__arrow-icon {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.certs__arrow--next .certs__arrow-icon {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* ============================================
   МОДАЛКА-ЛАЙТБОКС
   ============================================ */
.cert-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 9999);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--cert-modal-fade, 0.25s) ease,
                visibility 0s linear var(--cert-modal-fade, 0.25s);
}

.cert-modal.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--cert-modal-fade, 0.25s) ease,
                visibility 0s linear 0s;
}

.cert-modal[hidden] {
    display: none;
}

.cert-modal__backdrop {
    position: absolute;
    inset: 0;
    background: var(--cert-modal-bg, rgba(30, 22, 18, 0.92));
    cursor: pointer;
    /* Backdrop-filter даёт лёгкое размытие фона под модалкой — приятная деталь */
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* ── Тело модалки: лента кадров во всю ширину ──
   Прокручивается нативно: свайп и инерцию (в том числе на iOS) делает
   браузер, как в галерее фотографий. */
.cert-modal__body {
    position: relative;
    z-index: 1;
    max-width: 100vw;
    max-height: 100vh;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;      /* инерция на iOS */
    scroll-snap-type: x mandatory;          /* кадр встаёт по центру экрана */
    overscroll-behavior-x: contain;         /* лента не «уезжает» на страницу */
    scrollbar-width: none;
    -ms-overflow-style: none;
    transform: scale(var(--cert-modal-scale, 0.96));
    transition: transform var(--cert-modal-fade, 0.25s) cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Кадры выключены из потока жестов, пока лента закрыта */
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.cert-modal__body::-webkit-scrollbar {
    display: none;
}

/* В открытом состоянии transform убираем совсем: постоянный transform
   на скролл-контейнере мешает нативной инерции на iOS. */
.cert-modal.is-open .cert-modal__body {
    transform: none;
    pointer-events: auto;
}

.cert-modal__track {
    display: flex;
    height: 100%;
}

.cert-modal__slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    box-sizing: border-box;
    scroll-snap-align: center;
}

.cert-modal__slide img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 4px;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5);
    user-select: none;
    -webkit-user-drag: none;
}

/* ── Кнопка закрытия ── */
.cert-modal__close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 3;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--certs-transition), transform var(--certs-transition);
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

.cert-modal__close:hover {
    background: rgba(255, 255, 255, 0.22);
}

.cert-modal__close:active {
    transform: scale(0.92);
}

.cert-modal__close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.cert-modal__close-icon {
    display: block;
    width: 20px;
    height: 20px;
    background: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* ── Стрелки навигации в модалке ── */
.cert-modal__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--certs-transition), transform var(--certs-transition);
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

.cert-modal__arrow:hover {
    background: rgba(255, 255, 255, 0.22);
}

.cert-modal__arrow:active {
    transform: translateY(-50%) scale(0.92);
}

.cert-modal__arrow:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.cert-modal__arrow--prev { left: 20px; }
.cert-modal__arrow--next { right: 20px; }

.cert-modal__arrow-icon {
    display: block;
    width: 22px;
    height: 22px;
    background: #fff;
}

.cert-modal__arrow--prev .cert-modal__arrow-icon {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.cert-modal__arrow--next .cert-modal__arrow-icon {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Блокируем скролл body, когда модалка открыта */
body.cert-modal-open {
    overflow: hidden;
}

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

/* ── Планшет (≤ 992px): 3 видимых ── */
@media (max-width: 992px) {
    .certs {
        --certs-visible: 3;
        --certs-arrow-size: 40px;
        --certs-arrow-offset: -14px;
        --certs-padding-top: 50px;
        --certs-padding-bottom: 50px;
    }

    .cert-modal__body {
        padding: 30px;
    }
}

/* ── Мобильный (≤ 768px): 2 видимых ── */
@media (max-width: 768px) {
    .certs {
        --certs-visible: 2;
        --certs-slide-w: 140px;
        --certs-slide-h: 196px;
        --certs-gap: 14px;
        --certs-arrow-size: 38px;
        --certs-arrow-offset: -8px;
        --certs-padding-top: 40px;
        --certs-padding-bottom: 40px;
        --certs-title-margin: 28px;
    }

    .certs__carousel {
        padding: 0 16px;
    }

    /* Стрелки в модалке — меньше и ниже */
    .cert-modal__arrow {
        width: 44px;
        height: 44px;
    }

    .cert-modal__arrow--prev { left: 10px; }
    .cert-modal__arrow--next { right: 10px; }

    .cert-modal__close {
        top: 12px;
        right: 12px;
        width: 42px;
        height: 42px;
    }

    /* Отступы держим на кадре, а не на ленте: у скролл-контейнера
       padding ломает расчёт шага (кадр = 100% ширины контента). */
    .cert-modal__slide {
        padding: 64px 12px 36px;   /* сверху — место под крестик */
    }
}

/* ── Маленький мобильный (≤ 480px) ── */
@media (max-width: 480px) {
    .certs {
        --certs-slide-w: 130px;
        --certs-slide-h: 182px;
        --certs-gap: 12px;
    }
}

/* ============================================
   ДОСТУПНОСТЬ: prefers-reduced-motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .certs__track,
    .certs__slide,
    .certs__slide img,
    .certs__arrow,
    .cert-modal,
    .cert-modal__body,
    .cert-modal__close,
    .cert-modal__arrow {
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   СЧЁТЧИК «{текущий} из {всего}» (микротекст, TZ §6.5)
   Живёт прямо в .cert-modal, чтобы не зависеть от
   масштабирования .cert-modal__body.
   ============================================ */
.cert-modal__counter {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 3;
    margin: 0;
    padding: 6px 18px;
    border-radius: 60px;
    background: rgba(0, 0, 0, 0.35);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    white-space: nowrap;
    pointer-events: none;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

@media (max-width: 480px) {
    .cert-modal__counter {
        bottom: 14px;
        font-size: 0.82rem;
        padding: 5px 14px;
    }
}

/* ============================================
   ПЕРЕТАСКИВАНИЕ МЫШЬЮ (десктоп)
   На тач-устройствах прокрутку делает браузер, поэтому курсор-«лапку»
   показываем только там, где есть настоящая мышь. Пока тянем —
   снап отключён, иначе браузер дёргал бы ленту обратно к кадру.
   ============================================ */
@media (hover: hover) and (pointer: fine) {
    .certs__viewport,
    .cert-modal__body {
        cursor: grab;
    }

    .certs__viewport.is-dragging,
    .cert-modal__body.is-dragging {
        cursor: grabbing;
    }
}

.certs__viewport.is-dragging,
.cert-modal__body.is-dragging {
    scroll-snap-type: none;
}

/* ============================================
   ЛЕНТА С РАСТВОРЕНИЕМ ПО КРАЯМ
   Вариант для страниц-тем: лента «выходит из размытия» слева и справа,
   а не обрезается рамкой. Маска не мешает ни прокрутке, ни снапу —
   она влияет только на прозрачность.
   ============================================ */
.certs--fade-edges {
    --certs-edge-fade: 56px;
}

.certs--fade-edges .certs__viewport {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 var(--certs-edge-fade),
        #000 calc(100% - var(--certs-edge-fade)),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 var(--certs-edge-fade),
        #000 calc(100% - var(--certs-edge-fade)),
        transparent 100%
    );
}

@media (max-width: 768px) {
    .certs--fade-edges {
        --certs-edge-fade: 34px;
    }
}