* {
    box-sizing: border-box;
}


:root {
/*  ==========================
    COLORS
    ==========================  */
    --background-color-rgb: 15, 15, 15;
    --background-color-accent-rgb: 150, 70, 255;
    --surface-color-rgb: 50, 50, 50;
    --text-color-rgb: 210, 210, 210;
    --text-color-accent-rgb: 150, 70, 255;
    --link-color-rgb: 0, 100, 255;
/*  ==========================
    SPACING SCALE
    ==========================  */
    --space-xs: 4px;
    --space-s: 8px;
    --space-m: 16px;
    --space-l: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;
/*  ==========================
    TYPOGRAPHY SCALE
    ==========================  */
    --text-2xs: 10px;
    --text-xs: 12px;
    --text-s: 14px;
    --text-m: 16px;
    --text-l: 20px;
    --text-xl: 24px;
    --text-2xl: 32px;
    --text-3xl: 40px;
/*  ==========================
    LINE HEIGHT SCALE
    ==========================  */
    --lh-16: 16px;
    --lh-20: 20px;
    --lh-24: 24px;
    --lh-28: 28px;
    --lh-32: 32px;
    --lh-40: 40px;
    --lh-48: 48px;
/*  ==========================
    TYPOGRAPHY
    ==========================  */
    --heading-1-size: var(--text-3xl);
    --heading-1-lh: var(--lh-48);

    --heading-2-size: var(--text-xl);
    --heading-2-lh: var(--lh-32);

    --heading-3-size: var(--text-m);
    --heading-3-lh: var(--lh-24);

    --body-size: var(--text-m);
    --body-lh: var(--lh-24);

    --label-size: var(--text-s);
    --label-lh: var(--lh-20);
    
    --caption-size: var(--text-xs);
    --caption-lh: var(--lh-16);

    --micro-size: var(--text-2xs);
    --micro-lh: var(--lh-16);
/*  ==========================
    RADIUS SCALE
    ==========================  */
    --radius-xs: 4px;
    --radius-s: 8px;
    --radius-m: 16px;
    --radius-l: 24px;
    --radius-xl: 32px;
/*  ==========================
    LAYOUT
    ==========================  */
    --header-height: 56px;
}


h1,h2,h3 {
    font-family: "Unbounded", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    margin: 0;
}
h1 {
    font-size: var(--heading-1-size);
    line-height: var(--heading-1-lh);
    letter-spacing: -1px;
}
@media (max-width: 768px) {
    h1 {
        font-size: var(--text-xl);
        line-height: var(--lh-32);
        letter-spacing: -0.75px;
    }
}
h2 {    
    font-size: var(--heading-2-size);
    line-height: var(--heading-2-lh);
}
h3 {    
    font-size: var(--heading-3-size);
    line-height: var(--heading-3-lh);
}
body {
    font-family: "Onest", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;

    font-size: var(--body-size);
    line-height: var(--body-lh);

    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;

    color: rgba(var(--text-color-rgb), 1);
    background-color: rgba(var(--background-color-rgb), 1);
}
main {
    flex: 1;
}



button {
    font-family: inherit;
    font-size: var(--body-size);
    line-height: var(--body-lh);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    flex-shrink: 0;

    border: none;
    background: none;
    cursor: pointer;
}



.header {
    position: sticky;
    top: 0;
    z-index: 4;
    width: 100%;
    padding: var(--space-m) var(--space-xl);
    background-color: rgba(var(--background-color-rgb), 1);
}
@media (max-width: 768px) {
    .header {
        position: sticky;
        top: 0;
        padding: var(--space-s) var(--space-m);
    }
}
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo {
    font-family: "Unbounded", sans-serif;
    font-size: var(--body-size);
    line-height: var(--body-lh);

    text-decoration: none;
    text-transform: uppercase;
    
    color: rgba(var(--text-color-rgb), 1);
    transition: color 0.25s ease;
}
.logo:hover {
    color: rgba(var(--text-color-rgb), 0.75);
}
.nav {
    display: flex;
    gap: var(--space-m);
}
.nav-item {
    font-family: "Unbounded", sans-serif;
    font-size: var(--caption-size);
    line-height: var(--caption-lh);
    letter-spacing: 0.25px;
    padding: var(--space-xs) 0;
    text-decoration: none;
    color: rgba(var(--text-color-rgb), 0.5);

    transition: color 0.25s ease;
}
.nav-item:hover {
    text-decoration: none;
    color: rgba(var(--text-color-rgb), 0.75);
}
.nav-item.active {
    text-decoration: none;
    color: rgba(var(--text-color-rgb), 1);
}



.breadcrumbs {
    width: fit-content;
}
.breadcrumbs-list {
    display: flex;
    gap: var(--space-xs);
    padding: 0;
    margin: 0;
    list-style: none;
}
.breadcrumbs-list li {
    display: inline-flex;
}
.breadcrumbs-item a {
    font-size: var(--caption-size);
    line-height: var(--caption-lh);
    text-decoration: none;
    
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--radius-s);

    color: rgba(var(--text-color-rgb), 0.5);
    background-color: rgba(var(--surface-color-rgb), 0.25);

    transition: color 0.25s ease, background-color 0.25s ease;
}
@media (max-width: 768px) {
    .breadcrumbs-item a {
        height: 24px;
        font-size: var(--caption-size);
        line-height: var(--caption-lh);
    }
}
.breadcrumbs-item a:hover {
    color: rgba(var(--text-color-rgb), 0.75);
    background-color: rgba(var(--surface-color-rgb), 0.5);
}




.title-block {
    display: flex;
    flex-direction: column;
    position: relative;
    gap: var(--space-m);
    padding: var(--space-3xl) var(--space-xl);
}
@media (max-width: 768px) {
    .title-block {
        gap: var(--space-m);
        padding: var(--space-2xl) var(--space-m);
    }
}
.title-block .container {
    display: flex;
    flex-direction: column;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    align-items: center;
    gap: var(--space-m);

}
@media (max-width: 768px) {
    .title-block .container {
        max-width: 480px;
    }
}


.collection-updated {
    font-size: var(--caption-size);
    line-height: var(--caption-lh);
    padding: var(--space-xs) var(--space-s);
    width: fit-content;
    border-radius: var(--radius-l);
    color: rgba(var(--text-color-rgb), 0.5);
    box-shadow: inset 0 0 0 1px rgba(var(--surface-color-rgb), 0.75);
}
.item-count {
    /* display: none; */
    font-family: "Unbounded", sans-serif;
    font-size: var(--label-size);
    line-height: var(--label-lh);
    color: rgba(var(--text-color-rgb), 0.5);
}



.about-text {
    padding: 0 var(--space-xl);
    gap: var(--space-m);
}
@media (max-width: 768px) {
    .about-text {
        padding: 0 var(--space-m);
    }
}
.container-text {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 360px;
    width: 100%;
    gap: var(--space-l);
}
.text-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);

    padding-top: var(--space-l);
    border-top: 1px solid rgba(var(--surface-color-rgb), 0.5);

}
.paragraph {
    margin: 0;
}
.sign {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    font-size: var(--label-size);
    line-height: var(--label-lh);
    padding-top: var(--space-l);
    border-top: 1px solid rgba(var(--surface-color-rgb), 0.5);
}
.avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-xl);
}
.sign-text-group {
    display: flex;
    flex-direction: column;
}
.sign-role {
    color: rgba(var(--text-color-rgb), 0.5);
}
.legal {
    font-size: var(--caption-size);
    line-height: var(--caption-lh);
    color: rgba(var(--text-color-rgb), 0.5);
    padding-top: var(--space-l);
    border-top: 1px solid rgba(var(--surface-color-rgb), 0.5);
}

.contacts {
    padding: 0 var(--space-xl);
}
@media (max-width: 768px) {
    .contacts {
        padding: 0 var(--space-m);
    }
}
.contacts-container {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 360px;
    width: 100%;
    gap: var(--space-l);
}
.contacts-link {
    display: flex;
    gap: var(--space-m);
    align-items: center;
    font-size: var(--label-size);
    line-height: var(--label-lh);
    text-decoration: none;
    color: rgba(var(--text-color-rgb), 1);
    padding-top: var(--space-l);
    border-top: 1px solid rgba(var(--surface-color-rgb), 0.5);
}
.contacts-caption {
    color: rgba(var(--text-color-rgb), 0.5);
}
.contacts-link:hover {
    color: rgba(var(--text-color-accent-rgb), 1);
}


.filters {
    position: sticky;
    top: var(--header-height);
    z-index: 3;
    background-color: rgba(var(--background-color-rgb), 1);
}
.filters-container {
    max-width: 1536px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    padding: 0 var(--space-xl) var(--space-m) var(--space-xl);
}
@media (max-width: 768px) {
    .filters-container {
        padding: 0 var(--space-m) var(--space-m) var(--space-m);
        flex-flow: row;
        overflow: auto;
        scrollbar-width: none;
    }
}

.filter {
    font-size: var(--label-size);
    line-height: var(--label-lh);
    padding: var(--space-s) var(--space-m);
    border-radius: var(--radius-xl);
    gap: var(--space-s);

    color: rgba(var(--text-color-rgb), 0.5);
    background-color: rgba(var(--surface-color-rgb), 0.25);

    transition: color 0.25s ease, background-color 0.25s ease;
}
.filter:hover {
    color: rgba(var(--text-color-rgb), 0.75);
    background-color: rgba(var(--surface-color-rgb), 0.5);
}
.filter.active {
    cursor: default;
    color: rgba(var(--text-color-rgb), 1);
    background-color: rgba(var(--surface-color-rgb), 1)
}
.filter .icon {
    width: 20px;
    height: 20px;
    display: block;
    fill: currentColor;
}




.catalog-grid {
    max-width: 1536px;
    padding: 0 var(--space-xl) var(--space-xl) var(--space-xl);
    gap: var(--space-m);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1280px) {
    .catalog-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 1024px) {
    .catalog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .catalog-grid {
        grid-template-columns: repeat(1, 1fr);
        padding: 0 var(--space-m);
    }
}


.item {
    position: relative;
    display: block;
    border-radius: var(--radius-m);
    overflow: hidden;
    cursor: pointer;
}
/* Чтобы происходило скрытие карточек, 
когда применен какой-то фильтр */
.item[hidden] {
    display: none;
}
.item-img {
    position: relative;
    aspect-ratio: 4/5;
}
.item-img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.item:hover .item-img img {
    transform: scale(1.05);
}
.item-overlay {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    bottom: 0;
    width: 100%;
    height: 100%;
    padding: var(--space-m);
    
    background: linear-gradient(
    to top,
    rgba(var(--background-color-rgb), 0.75),
    rgba(var(--background-color-rgb), 0));

    opacity: 0;
    transition: opacity 0.5s ease;
}
/* Ховер только на экранах, где подключен курсор */
@media (hover: hover) {
  .item:hover .item-overlay {
      opacity: 1;
  }
  .item:hover .item-title {
      transform: translateY(0%);
  }
}
.item-title {
    color: rgba(var(--text-color-rgb), 1);

    transform: translateY(100%);
    transition: transform 0.5s ease;
}
.item-badge {
    position: absolute;
    top: var(--space-m);
    left: var(--space-m);
    z-index: 1;
    
    font-family: "Unbounded", sans-serif;
    font-size: var(--micro-size);
    line-height: var(--micro-lh);
    
    color: rgba(var(--text-color-rgb), 1);
    background-color: rgba(var(--badge-color-rgb), 1);

    padding: 0 var(--space-xs);
    border-radius: var(--radius-xs);
}
.item-source-link {
    font-size: var(--label-size);
    line-height: var(--label-lh);
    text-decoration: underline;
    text-underline-offset: var(--space-xs);
    text-decoration-color: rgba(var(--text-color-rgb), 0.25);
    color: rgba(var(--text-color-rgb), 0.5);

    transition: text-decoration-color 0.25s ease, color 0.25s ease;
}
.item-source-link:hover {
    text-decoration-color: rgba(var(--text-color-accent-rgb), 0.5);
    color: rgba(var(--text-color-accent-rgb), 1);
}



.button-container {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 0 var(--space-xl) var(--space-xl) var(--space-xl);
}
.button-container[hidden] {
    display: none;
}
.button-load {
    font-size: var(--label-size);
    line-height: var(--label-lh);
    padding: var(--space-m) var(--space-xl);
    border-radius: var(--radius-xl);

    color: rgba(var(--text-color-rgb), 1);
    background-color: rgba(var(--background-color-accent-rgb), 1);

    transition: opacity 0.25s ease;
}
.button-load:hover {
    opacity: 0.75;
}


/* --- FOCUS STATE --- */
.item:focus-visible,
.nav-item:focus-visible,
.filter:focus-visible,
.button-load:focus-visible,
.gallery-next:focus-visible,
.gallery-prev:focus-visible,
.breadcrumbs-item:focus-visible,
.swiper-pagination-bullet:focus-visible,
.logo:focus-visible {
    outline: 2px solid rgba(var(--badge-color-rgb), 1);
    outline-offset: 2px;
}




/* --- Кнопка гамбургера --- */

.nav-toggle {
    display: none; /* скрыта на десктопе */
    
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    
    width: 40px;
    height: 40px;
    padding: var(--space-s);
    
    background: none;
    border: none;
    cursor: pointer;
}
.nav-toggle-line {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background-color: rgba(var(--text-color-rgb), 1);
    
    transform-origin: center;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
/* Анимация в крестик когда меню открыто */
.nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* --- MOBILE NAV --- */

@media (max-width: 768px) {
    .nav {
        z-index: 3;
        position: fixed;
        width: 100%;
        top: var(--header-height);
        left: 0;
        right: 0;
        bottom: 0;              /* растягиваем до низа экрана */
        
        display: flex;
        flex-direction: column;
        gap: 0;
        
        padding: var(--space-m);
        background-color: rgba(var(--background-color-rgb), 1);
        
        overflow: hidden;
        pointer-events: none;

        transform: translateY(100%);
        opacity: 0;
    }

    .nav.open {
        pointer-events: auto;
        justify-content: center;
        overflow-y: auto; /* если ссылок много — меню само скроллится */

        transform: translateY(0);
        opacity: 1;
    }
    
    .nav-toggle {
        display: flex;
    }

    .nav-item {
        justify-content: center;
        align-items: center;
        display: inline-flex;
        width: 100%;
        font-size: var(--text-xl);
        line-height: var(--lh-32);
    }
}
body.menu-open {
  overflow: hidden;
}



/* SWIPER */
.gallery-next,
.gallery-prev {
    height: 100%;
    padding: var(--space-m);
    border-radius: var(--radius-xl);
    color: rgba(var(--text-color-rgb), 0.5);
    transition: color 0.25s ease, background-color 0.25s ease;
}
.gallery-next:hover,
.gallery-prev:hover {
    color: rgba(var(--text-color-rgb), 1);
    background-color: rgba(var(--surface-color-rgb), 0.5);
}
@media (max-width: 768px) {
    .gallery-next,
    .gallery-prev {
        display: none;
    }
}
.gallery-next .icon,
.gallery-prev .icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
}


.pagination {
    text-align: center;
}
.swiper-pagination-bullet {
    --swiper-pagination-bullet-width: 16px;
    --swiper-pagination-bullet-height: 2px;
    --swiper-pagination-bullet-border-radius: 4px;

    --swiper-theme-color: rgba(var(--text-color-rgb), 1);
    --swiper-pagination-bullet-inactive-color: rgba(var(--text-color-rgb), 0.25);
    --swiper-pagination-bullet-inactive-opacity: 1;
    --swiper-pagination-bullet-horizontal-gap: 2px;
}



.gallery {
    padding: 0 var(--space-xl) var(--space-xl) var(--space-xl);
}
@media (max-width: 768px) {
    .gallery {
        padding: 0 var(--space-m) var(--space-m) var(--space-m);
    }
}
.gallery-container {
    display: flex;
    align-items: center;
    max-width: fit-content;
    margin: 0 auto;
    gap: var(--space-m);
}
.item-gallery {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 4/5;
    border-radius: var(--radius-m);
    overflow: hidden;
}
.item-gallery .swiper-wrapper {
    height: 100%;
}
.item-gallery .swiper-slide {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
}
.item-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}



.footer {
    padding: var(--space-4xl) var(--space-xl) var(--space-xl) var(--space-xl);
}
.footer-container {
    display: flex;
    flex-direction: column;
    /* gap: var(--space-4xl); */
    padding: 0 var(--space-xl);
    border-radius: var(--radius-m);
    background: rgba(var(--surface-color-rgb), 0.5);
}
.footer-head {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-xl) 0;
}
.logo-footer {
    font-size: var(--text-l);
    line-height: var(--lh-32);
}
.tg-btn {
    font-family: "Unbounded", sans-serif;
    font-size: var(--caption-size);
    line-height: var(--caption-lh);
    color: rgba(var(--text-color-rgb), 1);
    text-decoration: none;
    display: flex;
    width: fit-content;
    padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-m);
    align-items: center;
    gap: var(--space-s);
    outline: 1px solid rgba(var(--text-color-rgb), 1);
    border-radius: var(--radius-xl);

    transition: color 0.25s ease, outline 0.25s ease;
}
.tg-btn:hover {
    color: rgba(var(--text-color-accent-rgb), 1);
    outline: 1px solid rgba(var(--background-color-accent-rgb), 1);
}
.tg-icon {
    width: 24px;
    height: 24px;
    display: block;
    fill: currentColor;
}
.footer-bottom {
    font-family: "Unbounded", sans-serif;
    font-size: var(--micro-size);
    line-height: var(--micro-lh);
    color: rgba(var(--text-color-rgb), 0.5);

    display: flex;
    justify-content: space-between;
    padding: var(--space-xl) 0;
    border-top: 1px solid rgba(var(--surface-color-rgb), 0.5);
    width: 100%;
}
.personal-link {
    text-decoration: none;
    color: rgba(var(--text-color-rgb), 0.5);
}
.personal-link:hover {
    color: rgba(var(--text-color-accent-rgb), 1);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: var(--space-s);
    text-decoration-color: rgba(var(--text-color-accent-rgb), 0.5);
}
@media (max-width: 768px) {

    .footer {
        padding: var(--space-4xl) var(--space-m) var(--space-m) var(--space-m);
    }

    .footer-container {
        padding: 0 var(--space-m);
    }

    .footer-head {
        flex-direction: column;
        gap: var(--space-m);
        align-items: center;
    }

    .footer-bottom {
        flex-direction: column;
        gap: var(--space-s);
        align-items: center;
    }

}