/* настройка хедеров */
.header-main {
    display: none;
}

.header-cont-1 {
    display: none;
}

.header-cont-2 {
    display: flex;
}
/* конец настройки хэдеров */

.atm {
    padding: calc(20px + 48px) 0 100px;
    width: calc(100vw - 20px * 2);

    display: flex;
    flex-direction: column;
    gap: 40px;
}

.atm-title {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.atm-title-t {
    font-size: 64px;
    line-height: 110%;
    font-weight: 500;
    letter-spacing: -0.3px;
    color: var(--color-foreground-primary);

    text-transform: lowercase;
}

.cat-line {
    display: flex;
    height: fit-content;
    gap: 15px;
}

.cat-items {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.cat-items-item {
    display: flex;
    align-items: center;
    justify-content: center;
    
    height: 48px;
    padding: 0 48px;

    border: .8px solid var(--color-foreground-primary);
    border-radius: 24px;

    cursor: pointer;
}

.cat-items-item.active {
    background-color: var(--color-foreground-primary);
}

.cat-items-item.active .cat-items-item-t {
    color: var(--color-background-primary);
}

.cat-items-item-t {
    font-size: 16px;
    line-height: 110%;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--color-foreground-primary);

    text-transform: lowercase;
}

/* Пустая атмосфера */
.atm-empty {
    padding: 200px 0;
    width: 100%;

    display: flex;
    justify-content: center;
    gap: 24px;
}

.atm-empty-icon {
    width: 152px;
    height: 152px;
}

.atm-empty-icon img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.atm-empty-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.atm-empty-content-info {
    display: flex;
    flex-direction: column;
    gap: 16px;

    color: var(--color-foreground-primary);
    text-transform: lowercase; 
    letter-spacing: -0.3px;
    font-weight: 500;
}

.atm-empty-content-info-title {
    font-size: 48px;
    line-height: 110%;

    width: 444px;
}

.atm-empty-content-info-t {
    font-size: 24px;
    line-height: 110%;
}

.atm-empty-btn {
    width: fit-content;
    padding: 0 48px;
}

/* Lightbox для просмотра фото в полный размер */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(241, 236, 229, 0.75);
    z-index: 1000;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox.active {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
}

#lightboxImg {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;

    cursor: pointer;

    width: 48px;
    height: 48px;
    object-fit: contain;
}

/* Стили для галереи */
.atm-images {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.atm-images-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.atm-image-item {
    position: relative;
    width: 100%;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease forwards;
    cursor: pointer;
}

.atm-image-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* Скелетоны */
.skeleton {
    position: relative;
    width: 100%;
    background: linear-gradient(
        90deg,
        var(--color-border-secondary, #90353582) 25%,
        var(--color-background-tertiary, #903535b5) 50%,
        var(--color-border-secondary, #90353582) 75%
    );
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

/* Адаптация на маленькие экраны (< 1920)*/
/* 1440 */
@media screen and (max-width: 1575px) {
    .cat-line {
        align-items: start;
    }

    .cat-items {
        flex-wrap: wrap;
        height: fit-content;
        width: 830px;
    }

    .cat-items-item {
        height: 48px;
    }
}

/* 1280 */
@media screen and (max-width: 1280px) {
    /* Пустой каталог */
    .atm-empty {
        padding: 150px 0;
    }

}

/* 768 */
@media screen and (max-width: 1200px) {
    .atm {
        padding: calc(20px + 48px) 0 64px;
        gap: 32px;
    }

    .atm-title-t {
        font-size: 48px;
        line-height: 110%;
    }

    .cat-line {
        flex-direction: row-reverse;
        gap: 8px;
        justify-content: start;
    }

    .cat-items {
        flex-wrap: nowrap;
        display: flex;
        height: 38px;
        gap: 8px;
        width: calc(100% - 56px - 8px);
    }

    .cat-items-cat .atm-items-item:first-of-type {
        margin-left: 0;
    }

    .cat-items-cat {
        gap: 8px;
        overflow-x: scroll;
        pointer-events: auto;
        flex-wrap: nowrap;
    }

   .cat-items-cat::-webkit-scrollbar {
        height: 0;
    }

    .cat-items-item {
        height: 100%;
        padding: 0 32px;
        flex-shrink: 0;
    }

    .cat-items-item-t {
        font-size: 14px;
        line-height: 110%;
    }

    /* Пустой каталог */
    .atm-empty-icon {
        width: 100px;
        height: 100px;
    }

    .atm-empty-content-info-title {
        font-size: 32px;

        width: 320px;
    }

    .atm-empty-content-info-t {
        font-size: 20px;
    }
}

/* 375 */
@media screen and (max-width: 725px) {
    .atm {
        padding: calc(20px + 32px) 0 64px;
        width: calc(100vw - 12px * 2);

        gap: 16px;
    }

    .atm-title {
        gap: 16px;
    }

    .atm-title-t {
        font-size: 32px;
        line-height: 110%;
    }

    .cat-items-item {
        padding: 0 24px;
    }

    .cat-items-item-t {
        font-size: 14px;
        line-height: 110%;
    }

    /* Пустой каталог */
    .atm-empty {
        padding: 80px 0;
        flex-direction: column;
        align-items: center;
    }

    .atm-empty-content {
        width: 100%;
    }

    .atm-empty-content-info {
        align-items: center;
    }

    .atm-empty-content-info-title {
        font-size: 24px;

        width: 193px;
    }

    .atm-empty-content-info-t {
        font-size: 14px;
        text-align: center;
    }

    .atm-empty-btn {
        width: 100%;
        text-align: center;
    }

    .atm-images {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    
    .atm-images-column {
        gap: 8px;
    }

    .lightbox-close {
        width: 32px;
        height: 32px;
    }
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}