/* Плитка каталога: тройки «широкая + квадрат + квадрат» (чётная тройка — наоборот). */

:root {
    --cat-gap: var(--simple-padding);
    --cat-card-radius: var(--block-radius);

    /* ширина ряда плитки — та же формула, что у старой «шахматки» в catalog.css */
    --cat-row-width: calc(100 * var(--vw) - 2 * var(--page-h-padding) + 2 * var(--simple-padding) - var(--scrollbar-width));
    --cat-unit: calc(var(--cat-row-width) / 4);

    /* высота картинки одна на все карточки ряда: квадрат получается 1:1, широкая ~2:1 */
    --cat-media-h: calc(var(--cat-unit) - 2 * var(--cat-gap));
}

.cat-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 0 calc(-1 * var(--cat-gap) / 2);
}

.cat-card {
    padding: calc(var(--cat-gap) / 2);
    box-sizing: border-box;
}

.cat-card--wide { width: 50%; }
.cat-card--sq   { width: 25%; }

.cat-card__panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: calc(var(--cat-gap) / 2);
    box-sizing: border-box;
    overflow: hidden;
}

/* Картинка: высота задана одна на все карточки, ширина — от формы. */
.cat-card__media {
    position: relative;
    display: block;
    width: 100%;
    height: var(--cat-media-h);
    overflow: hidden;
    background-color: #e6e6e6;

    /* поперёк карточки листаем сами, вдоль — обычный скролл страницы */
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.cat-card__slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    transform: translateX(100%);
    transition: transform .35s ease;
    pointer-events: none;
}

/* Кадр въезжает с той стороны, куда листают; .is-left — слева, без класса — справа.
   .no-anim — переставить кадр за край мгновенно, перед въездом. */
.cat-card__slide.is-left { transform: translateX(-100%); }
.cat-card__slide.active  { transform: none; }
.cat-card__slide.no-anim { transition: none; }

.cat-card__layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    transition: transform .4s ease;
}

.cat-card__media:hover .cat-card__slide.active .cat-card__layer { transform: scale(1.03); }

/* Точки-пагинация поверх картинки */
.cat-card__dots {
    position: absolute;
    left: 50%;
    bottom: calc(var(--cat-gap) / 2);
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 3;
}

.cat-card__dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .55);
    cursor: pointer;
    transition: background-color .2s linear;
}

.cat-card__dot.active { background-color: #fff; }

/* Подпись под картинкой */
.cat-card__caption {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*padding: calc(var(--cat-gap) * .9) calc(var(--cat-gap) * .8);*/
    font-size: .85em;
    padding: calc(var(--block-radius) * .5) calc(var(--block-radius) - 15px);;
}

.cat-card__caption a { color: inherit; }

.cat-card__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--cat-gap);
}

.cat-card__title {
    text-transform: uppercase;
    letter-spacing: .04em;
}

.cat-card__count {
    color: var(--grey-color);
    white-space: nowrap;
}

/* подпись страницы модели — по центру, с парами «ключ / значение» */
.cat-card__caption.centered { text-align: center; }

.cat-card__caption.centered .cat-card__title { margin-bottom: .4em; }

.cat-card__props { margin: 0; }
.cat-card__prop { margin-top: .35em; }
.cat-card__prop dt { font-weight: 600; }
.cat-card__prop dd { margin: 0; color: var(--grey-color); }

/* Полный список фото для просмотра — на странице видны только плитки */
.cat-photo-src { display: none; }

/* Полноэкранный просмотр */
.cat-lightbox {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: var(--body-back-color);
    z-index: 1000;
}

.cat-lightbox__slider {
    width: 100%;
    height: 100%;
    padding: var(--page-h-padding) var(--simple-padding) calc(var(--page-h-padding) / 2);
    box-sizing: border-box;
}

.cat-lightbox .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cat-lightbox .swiper-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--cat-card-radius);
}

/* Стартовое положение; точное — по середине просвета под картинкой — ставит catalog_new.js */
.cat-lightbox__dots.swiper-pagination {
    bottom: calc(var(--page-h-padding) / 4);
}

.cat-lightbox .swiper-pagination-bullet {
    width: 8px; height: 8px;
    background-color: #c9c9c9;
    opacity: 1;
}

.cat-lightbox .swiper-pagination-bullet-active { background-color: var(--grey-color); }

.cat-lightbox__close {
    position: absolute;
    top: var(--modal-cross-margin);
    right: var(--modal-cross-margin);
    width: var(--modal-cross-width);
    cursor: pointer;
    z-index: 1002;
}

.cat-lightbox__close svg { width: 100%; height: auto; }

.cat-lightbox__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--modal-cross-width);
    cursor: pointer;
    z-index: 1001;
    opacity: .5;
    transition: opacity .2s linear;
}

.cat-lightbox__btn:hover { opacity: 1; }
.cat-lightbox__btn--prev { left: var(--simple-padding); }
.cat-lightbox__btn--next { right: var(--simple-padding); }
.cat-lightbox__btn svg { width: 100%; height: auto; }
.cat-lightbox__btn--prev .arrow { /*transform: rotate(180deg);*/ }

/* ------------------------------------------------------------------ новости
   Та же плитка, что в каталоге, но без троек: в ряду два длинных элемента. */
.cat-grid--news .cat-card { width: 50%; }

.cat-grid--news .cat-card__media {
    height: auto;
    aspect-ratio: 2 / 1;
}

/* заголовок — не больше двух строк, дата держится у первой строки */
.cat-grid--news .cat-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25em;
}

/* Низ страницы — одна кнопка «На главную» */
.cat-bottom-nav {
    /*margin-top: calc(var(--cat-gap) * 2);*/
    margin-top: var(--block-radius);
    margin-bottom: var(--block-radius);
    text-align: center;
}

/* ------------------------------------------------------------------ планшет */
@media (max-width: 1199px) {
    .cat-card--wide { width: 50%; }
    .cat-card--sq   { width: 25%; }
    .cat-card__caption { font-size: .8em; }
}

/* ------------------------------------------------------------------ мобильный */
@media (max-width: 899px) {
    /* две карточки в ряд, обе квадратные */
    .cat-card--wide,
    .cat-card--sq { width: 50%; }
    .cat-card__media { height: calc(var(--cat-row-width) / 2 - 2 * var(--cat-gap)); }
}

@media (max-width: 600px) {
    .cat-card--wide,
    .cat-card--sq { width: 100%; }
    .cat-grid--news .cat-card { width: 100%; }
    .cat-card__media { height: calc(var(--cat-row-width) * .62); }
    .cat-card__caption { font-size: 1em; }
    .cat-lightbox__btn { display: none; }
}