/* COMPONENTS —— HEADER */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: var(--header-height-l);
    padding: 0;
    background: var(--grey-bg-black);
    border-bottom: var(--border-width-s) solid var(--grey-text-main);
    transform: translateY(0);
    transition: transform 0.3s ease;
}

body.header-hidden header {
    transform: translateY(-100%);
}

header .content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1600px;
    padding: 0;
    margin: 0 36px 0 64px;
}

header .logo {
    display: block;
    align-items: center;
    width: 40px;  
    height: auto;
    margin: 1px;
    aspect-ratio: 1/1;
    transition: transform 0.5s ease;
}

header .logo:hover {
    transform: scale(1.1);/* Увеличение на 10% */
}

#hamburger {
    display: none;
}

/* COMPONENTS —— HEADER-MENU */
#menu {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

#menu li a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 48px;
    padding: 2px 24px;
    gap: 12px;
    font-family: var(--heading-font);
    font-size: var(--fz-13);
    font-weight: 300;
    text-align: center;
    line-height: 110%;
    letter-spacing: 0px;
    text-transform: uppercase;
    border-radius: 40px;
    color: var(--grey-text-super-light);
    text-decoration: none;
    transition: all 0.3s ease;
}

#menu li a:hover {
    border: 1.25px dashed var(--grey-text-super-light);
    color: var(--grey-text-white);
}

#menu li a#focus-link,
#menu li a#summary-link {
    position: relative;
}

#menu li a#summary-link {
    color: var(--pink-text-white);
    font-weight: 400;
    letter-spacing: 0.5px;
}

#menu li a#focus-link::after,
#menu li a#summary-link::after {
    content: "";
    position: absolute;
    bottom: -11px;
    left: 50%;
    transform: translateX(-50%);
    width: 7px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: var(--pink-accent-main);
    opacity: 1;
    transition: opacity 0.3s ease;
    animation: pulse 1.5s infinite ease-in-out;
}

#menu li a#focus-link:hover,
#menu li a#summary-link:hover {
    border: none;
    color: var(--pink-text-white);
    background: var(--pink-bg-super-dark);
}

#menu li a#focus-link:hover::after,
#menu li a#summary-link:hover::after {
    animation: none;
    opacity: 0;
    transition: opacity 1s ease-out;
}

/* COMPONENTS —— HEADER-MENU —— SUBMENU */
#menu li.has-submenu {
    position: relative;
}

#menu li.has-submenu .chevron-down {
    width: 100%;
    max-width: 14px;
    transition: transform 0.3s ease;
}

#menu li.has-submenu .submenu {
    display: none;
    position: absolute;
    top: 38px;
    list-style: none;
    min-width: max-content;
    padding: 24px 0px 0px 0px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    z-index: 11;
}

#menu li.has-submenu.submenu-last .submenu {
    left: auto;
    right: 0;
}

#menu li.has-submenu .submenu li a {
    display: flex;
    justify-content: start;
    white-space: nowrap;
    padding: 16px 32px 16px 16px;
    background: var(--grey-bg-black);
    border: none;
    border-radius: 0px;
    width: 100%;
    color: var(--grey-text-super-light);
    transform: none;
}

#menu li.has-submenu .submenu li a:hover {
    background: var(--pink-bg-super-dark);
    color: var(--pink-text-white);
    border-radius: 0px;  
}

#menu li.has-submenu:hover .submenu {
    display: flex;
    flex-direction: column;
    justify-content: start;
}

@keyframes pulse {
    0%, 100% {
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateX(-50%) scale(1.6);
        opacity: 0.7;
    }
}

/* COMPONENTS —— LIST */
ul.body {
    display: flex;
    flex-direction: column;
    width: 100%;
    list-style: none;
    margin: 0;
}

ul.body--base {
    gap: var(--text-list-gap-l);
    padding-left: 
        calc(var(--text-list-padding-l) - var(--space-4));
    }

ul.body--secondary {
    padding-left: 44px;
}

ul.body--base li {
    position: relative;
    font-family: var(--main-font);
    font-size: var(--font-size-paragraph);
    color: var(--grey-text-main);
    font-weight: var(--font-weight-li);
    letter-spacing: var(--letter-spacing-li);
    line-height: var(--line-height-paragraph);
    padding-left: calc(var(--text-list-padding-l) - var(--space-4));
}

ul.body--base li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: var(--li-before-padding-top);
    font-size: var(--font-size-li-before);
    color: var(--pink-text-dark);
}

/* COMPONENTS —— UNION LIST */
ul.body--arrows,
ul.body--union {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    min-width: 0;
    padding-left: 0;
}

ul.body--arrows {
    gap: var(--text-list-gap-l);
}

ul.body--union {
    align-items: stretch;
    gap: 0;
}

ul.body--arrows li,
ul.body--union li {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    min-width: 0;
    gap: var(--text-list-gap-l);
    padding-left: 0;
}

ul.body--union > li:not(.body__connector) {
    column-gap: var(--text-list-gap-l);
}

ul.body--arrows li::before,
ul.body--union li::before {
    content: none;
}

ul.body--arrows .body__arrow,
ul.body--union .body__arrow--top,
ul.body--union .body__arrow--btm {
    flex: 0 0 var(--body-arrow-width-l);
    height: auto;
    max-height: 22px;
    max-width: var(--body-arrow-width-l);
    margin-top: var(--body-arrow-offset);
}

ul.body--union .body__arrow--top {
    margin-top: 0;
}

ul.body--union .body__connector {
    display: flex;
    align-items: flex-start;
    min-height: 0;
    padding: 0;
    margin: 0;
}

ul.body--union .arrows-connector {
    flex: 0 0 var(--arrow-connector-l);
    max-height: var(--arrow-connector-l);
    max-width: var(--body-arrow-width-l);
    margin-top: calc(0.5px * -1);
}

ul.body--union .body__arrow--btm {
    margin-top: calc(0.5px * -1);
}

ul.body--arrows li .paragraph,
ul.body--union li .paragraph {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

/* COMPONENTS —— ORDERED LIST */
ol.body--ordered {
    list-style: none;
    --ordered-marker-width: 0.5rem;
    display: flex;
    flex-direction: column;
    width: 100%;
    row-gap: var(--text-list-gap-l);
    padding-left: var(--ordered-list-padding-l);
    margin: 0;
}

.news__text-info--list > ol.body--ordered:last-of-type {
    margin-bottom: var(--ordered-list-padding-xl);
}

ol.body--ordered li {
    position: relative;
    counter-increment: ordered-list;
    font-family: var(--main-font);
    font-size: var(--font-size-paragraph);
    color: var(--grey-text-main);
    font-weight: var(--font-weight-li);
    letter-spacing: var(--letter-spacing-li);
    line-height: var(--line-height-paragraph);
    width: 100%;
    padding-left: calc(var(--ordered-marker-width) + var(--text-list-gap-xl));
}

ol.body--ordered li::before {
    content: counter(ordered-list) ".";
    position: absolute;
    top: 0;
    left: 0;
    width: var(--ordered-marker-width);
}

/* COMPONENTS —— BUTTONS */
.btn-link {
    font-family: var(--button-font);
    color: var(--grey-text-main);
    font-size: var(--font-size-btn);
    font-weight: 350;
    line-height: 135%;
    letter-spacing: 0;
    text-align: center;
    text-decoration: underline dashed;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
    text-decoration-color: var(--grey-text-super-light);
    text-transform: uppercase;
    padding: var(--btn-padding-y-l) 0;
    max-height: var(--btn-height-l);
    max-width: max-content;
    margin: 0;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 240px;
    max-width: var(--btn-width-max);
    min-height: var(--btn-height-l);
    font-family: var(--button-font);
    font-size: var(--font-size-btn);
    font-weight: var(--font-weight-base);
    line-height: var(--line-height-btn);
    background: none;
    color: var(--grey-text-main);
    border: none;
    text-align: center;
    text-transform: uppercase;
    padding: var(--btn-padding-y-l) var(--btn-padding-x-l);
    margin: 0;
    cursor: pointer;
    transition: 
        background-color 180ms ease, 
        color 180ms ease, 
        transform 180ms ease;
}

.btn--accent {
    background: var(--pink-accent-dark);
    color: var(--pink-text-white);
}

.btn--primary {
    background: var(--pink-bg-black);
    color: var(--pink-text-white);
}

.btn--secondary {
    background: none;
    color: var(--pink-text-black);
    border: var(--border-width-m) solid var(--pink-text-black);
}

.btn:active,
.btn--secondary:active {
    background: none;
    color: var(--pink-text-super-dark);
}

.btn:disabled {
    background: none;
    color: var(--grey-text-super-light);
    border-color: var(--grey-text-super-light);
    cursor: default;
    pointer-events: none;
}

.btn:hover:not(:disabled) {
    background: var(--pink-bg-dark);
}

.btn--secondary:hover:not(:disabled) {
    color: var(--pink-text-white);
    border-color: var(--pink-bg-dark);
}

.btn--secondary[aria-pressed="true"],
.btn--secondary[aria-pressed="true"]:hover:not(:disabled) {
    background: var(--pink-bg-white);
    color: var(--pink-accent-dark);
    border-color: var(--pink-accent-dark);
}

a.btn {
    color: var(--pink-text-white);
    text-decoration: none;
}

.button-text {
    font-family: var(--button-font);
    color: var(--grey-text-main);
    font-size: var(--font-size-btn);
    font-weight: var(--font-weight-base);
    line-height: var(--line-height-btn);
    letter-spacing: -0.2px;
    text-transform: uppercase;
}

.btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--btn-icon-size-xl);
    height: var(--btn-icon-size-xl);
    border-radius: 16px;
}

.btn__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* COMPONENTS —— TABS */
.tabs-gallery {
    display: flex;
    justify-content: center;
    width: 100%;
    min-width: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tabs-gallery--project {
    position: sticky;
    top: var(--header-height-l);
    z-index: 5;
    background-color: var(--grey-bg-main);
    padding: var(--space-16) 0;
}

.tabs-gallery::-webkit-scrollbar {
    display: none;
}

.tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-height: var(--btn-height-l);
    border: var(--border-width-m) solid var(--grey-text-super-light);
    background: transparent;
    color: var(--grey-text-light);
    font-family: var(--button-font);
    font-size: var(--font-size-btn);
    font-weight: var(--font-weight-base);
    line-height: var(--line-height-btn);
    text-transform: uppercase;
    white-space: normal;
    text-align: center;
    padding: var(--btn-padding-y-l) var(--btn-padding-x-l);
    cursor: pointer;
    margin: 0;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.tab--left {
    margin-right: calc(var(--border-width-m) * -1);
}

.tab--right {
    margin-left: calc(var(--border-width-m) * -1);
}

.tab:hover {
    color: var(--pink-text-black);
    border-color: var(--pink-text-super-dark);
}

.tab[aria-selected="true"] {
    position: relative;
    z-index: 1;
    background-color: var(--pink-bg-white);
    color: var(--pink-accent-dark);
    border-color: var(--pink-accent-dark);
    box-shadow: 
        0 10px 6px -4px rgba(131, 127, 135, 0.18);
}

.tab[aria-selected="false"]:hover {
    color: var(--pink-text-black);
    border-color: var(--pink-text-super-dark);
}

.tab:focus-visible {
    position: relative;
    z-index: 2;
}

.tab:active {
    transform: translateY(1px);
}

/* COMPONENTS —— SWITCHER */
.segmented-switcher {
    display: inline-grid;
    grid-template-columns: repeat(3, max-content);
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0;
    margin-bottom: var(--gallery-padding-xl);
    border: none;
}

.segmented-switcher__option {
    position: relative;
    display: flex;
    min-width: 0;
    margin-left: calc(var(--border-width-m) * -1);
    cursor: pointer;
}

.segmented-switcher__option:first-of-type {
    margin-left: 0;
}

.segmented-switcher__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
}

.segmented-switcher__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tag-height-l);
    padding: var(--tag-padding-y-l) var(--tag-padding-x-l);
    border: var(--border-width-m) solid var(--grey-text-super-light);
    background: transparent;
    color: var(--grey-text-light);
    font-family: var(--button-font);
    font-size: var(--font-size-tag);
    font-weight: var(--font-weight-base);
    line-height: var(--line-height-tag);
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease;
}

.segmented-switcher__option:hover .segmented-switcher__label {
    position: relative;
    z-index: 1;
    border-color: var(--pink-text-super-dark);
    color: var(--pink-text-black);
}

.segmented-switcher__input:checked + .segmented-switcher__label {
    position: relative;
    z-index: 2;
    border-color: var(--pink-accent-dark);
    background: var(--pink-bg-white);
    color: var(--pink-accent-dark);
}

.segmented-switcher__input:focus-visible + .segmented-switcher__label {
    position: relative;
    z-index: 3;
    outline: 2px solid var(--pink-accent-dark);
    outline-offset: 2px;
}

/* COMPONENTS —— TAGS */
.tags-gallery {
    display: inline-flex;
    align-items: stretch;
    justify-content: flex-start;
    width: max-content;
    flex-wrap: wrap;
    max-width: 100%;
    margin-inline-start: calc(var(--space-2) * -1);
}

.tag {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: var(--tag-height-l);
    padding: var(--tag-padding-y-l) var(--tag-padding-x-l);
    margin-left: calc(var(--border-width-m) * -1);
    border: var(--border-width-m) solid var(--grey-text-super-light);
    background: transparent;
    color: var(--grey-text-light);
    font-family: var(--button-font);
    font-size: var(--font-size-tag);
    font-weight: var(--font-weight-base);
    line-height: var(--line-height-tag);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease;
}

.tag:first-child {
    margin-left: 0;
}

.tag:hover {
    z-index: 1;
    border-color: var(--pink-text-super-dark);
    color: var(--pink-text-black);
}

.tag:focus-visible {
    z-index: 2;
}

.tag[aria-current="page"],
.tag[aria-current="page"]:hover {
    z-index: 1;
    border-color: var(--pink-accent-dark);
    background: var(--pink-bg-white);
    color: var(--pink-accent-dark);
}

/* COMPONENTS —— ITEM NUMBER */
.item-number,
.text-info__year {
    display: block;
    align-self: start;
    height: auto;
    overflow: hidden;
    font-family: var(--main-font);
    font-size: var(--font-size-item-number);
    font-weight: var(--font-weight-number);
    line-height: var(--line-height-item-number);
    letter-spacing: var(--letter-spacing-quant);
    text-align: right;
    color: var(--grey-text-super-light);
}

.item-number {
    min-width: var(--item-number-width-l);
    color: var(--grey-text-super-light);
}

/* COMPONENTS —— YEAR */
.text-info__year {
    font-size: var(--font-size-year);
    font-weight: var(--font-weight-base);
    text-align: center;
    align-self: center;
    min-width: var(--year-item-width-l);
    width: fit-content;
}

/* COMPONENTS —— INDEX QUANT */
.index__quant {
    display: flex;
    align-items: center;
    align-self: center;
    overflow: hidden;
    justify-content: center;
    width: var(--scheme-index-height-l);
    height: var(--scheme-index-height-l);
    border-radius: var(--border-radius-img-s);
    color: var(--scheme-blue-500);
    background-color: var(--scheme-blue-200);
    font-family: var(--main-font);
    text-align: center;
    font-size: var(--font-size-index);
    font-weight: var(--font-weight-index);
    line-height: var(--line-height-index);
    letter-spacing: 0;
}

.index__quant--inverse {
    border-color: var(--color-border-inverse);
    color: var(--color-text-inverse);
}

/* COMPONENTS —— GRAPH —— LOGO */
.logo-combine {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    max-width: 180px;
    gap: 16px;
    margin: 0;
    transition: transform 0.5s ease;
}

.logo-combine .logo__stanok {
    width: 55px;
    height: auto;
    aspect-ratio: 17/10;
    object-fit: contain;
}

.logo-combine .logo {
    display: block;
    width: 64px;
    height: auto;
    margin-left: 4px;
}

.logo-combine h3 { /* cross */
    text-align: center;
    font-weight: 300;
    color: var(--grey-text-main);
    padding-bottom: 2px;
}

.logo-combine--inverse h3 {
    color: var(--grey-text-white);
}

/* COMPONENTS —— GRAPH —— ICONS */
.heading__icn {
    width: var(--headline-icn-l);
}

/* COMPONENTS —— GRAPH —— IDENT */
.ident-triangle-left, 
.ident-triangle-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100px;
    height: 40px;
}

/* COMPONENTS —— BREADCRUMBS */
.breadcrumbs {
    position: sticky;
    top: var(--header-height-l);
    z-index: 6;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-height: var(--header-height-l);
    margin: 0;
    padding: 0;
    background: var(--grey-bg-main);
    border-bottom: var(--border-width-m) solid var(--grey-text-super-light);
    transform: translateY(0);
    transition: top 0.3s ease;
}

body.header-hidden .breadcrumbs {
    top: 0;
}

.breadcrumbs .inner {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    max-width: var(--container-width-max);
    padding: calc(var(--container-padding-xl) / 4) var(--container-padding-x-xl);
}

/* COMPONENTS —— BREADCRUMBS —— MENU */
#nav-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 0;
    padding: 0;
}

#nav-menu li {
    max-height: var(--btn-icon-size-l);
}

#nav-menu li a {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 24px;
    padding: 0;
    font-family: var(--main-font);
    font-size: var(--fz-16);
    font-weight: 300;
    line-height: 132%; /* 19.8px */
    letter-spacing: -0.3px;
    text-decoration: none;
    color: var(--grey-text-super-light);
    margin: 0;
}

#nav-menu li a:hover {
    color:var(--grey-text-white);
}

#nav-menu .chevron-right {
    width: 100%;
    max-width: var(--btn-icon-size-l);
    transition: transform 0.3s ease;
}

.breadcrumbs #nav-menu li a {
    color: var(--grey-text-light);
}

.breadcrumbs #nav-menu li a:hover {
    color: var(--grey-text-main);
}

/* COMPONENTS —— BASE —— HEADINGS */
.heading {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--heading-gap-l);
    width: 100%;
    padding-bottom: var(--space-8);
}

.heading--start {
    justify-content: flex-start;
    gap: var(--headline-gap-l);
    padding-bottom: 0;
}

.heading h1 {
    white-space: nowrap;
}

.heading h1.inverse {
    color: var(--grey-text-white);
}

.heading h1.alt {
    width: 100%;
    color: var(--pink-accent-dark);
    white-space: nowrap;
}

.heading .subheading-4 {
    font-weight: 300;
    letter-spacing: -0.5px;
    color: var(--grey-text-light);
    padding-left: 2px;
}

.heading .text-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin: 0;
}

.heading .heading-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: nowrap;
    width: 100%;
    gap: 18px;
    margin: 0;
}

.heading__img-cover {
    position: absolute;
    top: var(--container-padding-x-l);
    left: var(--container-padding-x-l);
    z-index: 1;
}

/* COMPONENTS —— INFOGRAPH */
.infograph-scale {
    display: grid;
    grid-template-columns: repeat(2, 2fr);
    column-gap: var(--content-gap-l);
    align-self: center;
    width: 80%;
}

.infograph-scale__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-self: stretch;
    justify-self: stretch;
    row-gap: var(--infograph-scale-item-gap-l);
    width: 100%;
    min-width: 0;
}

.infograph__scale-bar {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--infograph-segment-gap);
    width: 100%;
    height: var(--infograph-segment-height);
}

.infograph__scale-segment {
    display: block;
    min-width: 2px;
    background: var(--pink-accent-dark);
}

.infograph__scale-legend {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
}

.infograph__scale-quant {
    display: block;
    align-self: start;
    height: auto;
    font-family: var(--main-font);
    font-size: var(--font-size-item-scale);
    font-weight: var(--font-weight-number);
    line-height: var(--line-height-item-number);
    letter-spacing: var(--letter-spacing-base);
    text-align: center;
    color: var(--grey-text-main);
}

/* COMPONENTS —— PHOTO CARD MINI */
.photo-card-mini {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
}

.photo-card-mini__media {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--grey-bg-light);
    border-radius: 0 var(--border-radius-img-l);
}

.photo-card-mini img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease, filter 0.25s ease;
}

.photo-card-description {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
    padding: var(--text-block-padding-l) var(--text-block-padding-xs) 0;
}

.photo-card-description p {
    text-align: right;
}

.photo-card-source,
.img-source-info {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    align-self: start;
    justify-content: start;
    width: 100%;
    column-gap: var(--text-info-gap-s);
}

.img-source-info {
    justify-content: end;
}

.photo-card-source .subtext,
.img-source-info .subtext {
    color: var(--grey-text-light);
}

.photo-card__overlay,
.photo-card--sqr__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--grey-bg-super-dark);
    border-radius: 0 var(--border-radius-img-l);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.photo-card__zoom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--btn-height-l);
    height: var(--btn-height-l);
    transform: scale(0.92);
    transition: transform 0.25s ease;
}

.photo-card-mini:hover .photo-card__overlay,
.photo-card-mini:focus-visible .photo-card__overlay {
    opacity: 1;
}

.photo-card-mini:hover .photo-card-mini__media img,
.photo-card-mini:focus-visible .photo-card-mini__media img {
    transform: scale(1.04);
    filter: brightness(0.92);
}

.photo-card-mini:hover .photo-card__zoom,
.photo-card-mini:focus-visible .photo-card__zoom {
    transform: scale(1);
}

@media (max-width: 1279.9px) {
/*  ADAPTIVE —— COMPONENTS —— HEADER & MENU | MEDIUM */
    header {
        height: var(--header-height-m);
    }

    header .content-wrapper {
        padding: 2px 12px 2px 28px;
        margin: 0;
    }

    header .logo {
        width: 32px;
    }

    #menu li a {
        height: 44px;
        font-size: var(--fz-10);
        line-height: 120%; /* 14,4px */
        padding: 2px 20px;
    }

    #menu li.has-submenu .chevron-down {
        max-width: 12px;
    }

    #menu li.has-submenu .submenu {
        top: 23px;
    }

    #menu li a#focus-link::after,
    #menu li a#summary-link::after {
        width: 6px;
        bottom: -5.5px;
    }

/*  ADAPTIVE —— COMPONENTS —— LIST | MEDIUM */
    ul.body--base {
        gap: var(--text-list-gap-m);
        padding-left: var(--text-list-padding-m);
    }

    ul.body-base li {
        padding-left: var(--text-list-padding-m);
    }

/*  ADAPTIVE —— COMPONENTS —— UNION LIST | MEDIUM */
    ul.body--arrows,
    ul.body--union {
        --body-arrow-width: 36px;
    }

    ul.body--arrows {
        gap: var(--text-list-gap-m);
    }

    ul.body--arrows li,
    ul.body--union li {
        gap: var(--text-list-gap-m);
    }

    ul.body--union > li:not(.body__connector) {
        column-gap: var(--text-list-gap-m);
    }

    ul.body--arrows .body__arrow,
    ul.body--union .body__arrow--top,
    ul.body--union .arrows-connector,
    ul.body--union .body__arrow--btm {
        flex: 0 0 var(--body-arrow-width-m);
        max-width: var(--body-arrow-width-m);
    }

/*  ADAPTIVE —— COMPONENTS —— BUTTONS | MEDIUM */
    .btn-link {
        text-decoration-thickness: 1px;
        text-underline-offset: 5px;
        padding: var(--btn-padding-y-m) 0;
        max-height: var(--btn-height-m);
    }

    .btn {
        max-width: var(--btn-width-medium);
        min-height: var(--btn-height-m);
        padding: var(--btn-padding-y-m) var(--btn-padding-x-m);
    }

/*  ADAPTIVE —— COMPONENTS —— TABS | MEDIUM */
    .tab {
        min-height: var(--btn-height-m);
        padding: var(--btn-padding-y-m) var(--btn-padding-x-m);
    }

    .tabs-gallery--project {
        top: var(--header-height-m);
        padding: var(--space-12) 0;
    }

/*  ADAPTIVE —— COMPONENTS —— SWITCHER | MEDIUM */
    .segmented-switcher {
        margin-bottom: var(--gallery-padding-l);
    }

/*  ADAPTIVE —— COMPONENTS —— TAG | MEDIUM */
    .tag {
        min-height: var(--tag-height-m);
        padding: var(--tag-padding-y-m) var(--tag-padding-x-m);
    }

/*  ADAPTIVE —— COMPONENTS —— ITEM NUMBER | MEDIUM */
    .item-number {
        min-width: var(--item-number-width-m);
    }

/*  ADAPTIVE —— COMPONENTS —— YEAR | MEDIUM */
    .text-info__year {
        min-width: var(--year-item-width-m);
    }

/*  ADAPTIVE —— COMPONENTS —— GRAPH —— LOGO | MEDIUM */
    .logo {
        width: 48px;
    }

    .logo-combine {
        max-width: 124px;
        gap: 10px;
        padding-bottom: 0;
    }

    .logo-combine .logo {
        width: 48px;
        margin-left: 2px;
    }

    .logo-combine .logo__stanok {
        margin-top: 2px;
        width: 42px;
        height: 48px;
    }

    .logo-combine h3 {
        font-size: var(--fz-17);
        line-height: 135%;
        padding-bottom: 0;
    }

/*  ADAPTIVE —— COMPONENT —— ICONS | MEDIUM */
    .heading__icn {
        width: var(--headline-icn-m);
    }

/*  ADAPTIVE -- COMPONENTS —— BREADCRUMBS | MEDIUM */
    .breadcrumbs {
        top: var(--header-height-m);
        max-height: var(--header-height-m);
    }

    .breadcrumbs .inner {
        max-width: var(--container-width-med);
        padding: calc(var(--container-padding-l) / 4) var(--container-padding-x-l);
    }

/*  ADAPTIVE —— COMPONENTS —— BREADCRUMBS —— MENU | MEDIUM */
    #nav-menu {
        gap: 12px;
    }

    #nav-menu li a {
        font-size: var(--fz-13);
        line-height: 120%;
        min-height: 20px;
    }

    #nav-menu .chevron-right {
        width: 100%;
        max-width: 20px;
    }

/*  ADAPTIVE —— COMPONENTS —— BASE —— HEADINGS | MEDIUM */
    .heading {
        max-width: 1280px;
        padding-bottom: 2px;
        flex-wrap: wrap;
        row-gap: 24px;
    }

    .heading h1,
    .heading h1.alt {
        line-height: 108%;
        letter-spacing: -1px;
        padding-bottom: 0;
    }

    .heading .subheading-4 {
        font-size: var(--fz-17); 
        line-height: 135%; /* 24px */
        letter-spacing: -0.25px;
    }

    .heading .text-info {
        min-width: 688px;
        max-width: 700px;
    }

    .heading .heading-wrapper {
        gap: 12px;
    }

/*  ADAPTIVE —— COMPONENTS —— INFOGRAPH | MEDIUM */
    .infograph-scale {
        column-gap: var(--content-gap-m);
    }

    .infograph-scale__item {
        row-gap: var(--infograph-scale-item-gap-m);
    }

/* ADAPTIVE -- PHOTO CARD MINI | MEDIUM */
    .photo-card-mini__media,
    .photo-card__overlay {
        border-radius: 0 var(--border-radius-img-m);
    }

    .photo-card-description {
        padding-top: var(--text-block-padding-m);
    }
}

@media (max-width: 967.9px) {
/*  ADAPTIVE —— COMPONENTS —— ORDERED LIST | MEDIUM */
    ol.body--ordered {
        row-gap: var(--text-list-gap-m);
        padding-left: var(--ordered-list-padding-m);
        margin-bottom: var(--ordered-list-padding-l);
    }

    ol.body--ordered li {
        padding-left: var(--text-list-gap-l);
    }

/*  ADAPTIVE —— COMPONENTS —— SWITCHER | S-MEDIUM */
    .segmented-switcher__label {
        min-height: var(--tag-height-m);
        padding: var(--tag-padding-y-m) var(--tag-padding-x-m);
    }

/*  ADAPTIVE —— COMPONENTS —— INDEX QUANT | MEDIUM */
    .index__quant {
        width: var(--scheme-index-height-m);
        height: var(--scheme-index-height-m);
    }

/*  ADAPTIVE —— COMPONENTS —— GRAPH —— LOGO | S-MEDIUM */
    .logo {
        width: 40px;
    }

    .logo-combine .logo {
        width: 40px;
    }

/*  ADAPTIVE —— COMPONENTS —— BASE —— HEADINGS | M-SMALL */
    .heading--start {
        gap: var(--headline-gap-m);
    }

    .heading .title {
        justify-content: center;
        flex-direction: column;
    }

    .heading .text-info {
        align-items: center;
        min-width: 630px;
        max-width: fit-content;
        gap: 16px;
    }

    .heading__img-cover {
        top: var(--container-padding-x-m);
        left: var(--container-padding-x-m);
    }

/*  ADAPTIVE —— COMPONENTS —— INFOGRAPH | MEDIUM */
    .infograph-scale {
        align-self: start;
        width: 100%;
    }
}

@media (max-width: 880px) {
/*  ADAPTIVE —— COMPONENTS —— MOBILE MENU */
    #menu {
        display: none; /* изначально скрыто */
        flex-direction: column;
        position: absolute;
        width: 100%;
        top: var(--header-height-s);
        left: 0;
        right: 0;
        background: var(--grey-bg-black);
        box-shadow: none;
        padding: 0;
        margin: 0;
    }

    #hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: 32px;
        height: 24px;
        z-index: 20;
    }

    #hamburger .bar {
        width: 100%;
        height: 2px;
        background-color: var(--grey-text-white);
    }

    #menu li a,
    #menu li.has-submenu .submenu li a {
        display: flex;
        justify-content: space-between;
        text-align: left;
        min-height: 48px;
        padding: 0 16px;
        border: none !important;
        background: transparent;
        color: var(--grey-text-super-light) !important;
        transition: none !important; 
        transform: none !important;
    }

    #menu li a:hover,
    #menu li.has-submenu .submenu li a:hover {
        background: none;
        color: var(--grey-text-super-light);
        transform: none !important;
    }

    #menu li.has-submenu {
        position: relative;
        display: flex;
        flex-direction: column;
    }

    #menu li.has-submenu:hover .submenu {
        display: none !important;
    }

    #menu li.has-submenu .submenu {
        display: none; /* открытие через JS */
        position: static;
        width: 100%;
        margin: 0 !important;
        padding: 0 16px;
        box-shadow: none;
    }

    #menu li.has-submenu.submenu-open .submenu {
        display: flex !important;
        flex-direction: column;
    }

    #menu li.has-submenu.submenu-open > a .chevron-down {
        transform: rotate(180deg);
    }
}

@media (max-width: 767.9px) {
/*  ADAPTIVE —— COMPONENTS —— HEADER & MENU  | SMALL */
    header {
        max-width: 100vw;
        height: var(--header-height-s);
        padding: 0 var(--container-padding-x-s);
    }

    header .content-wrapper {
        padding: 0;
        margin: 0;
    }
    
    header .logo {
        width: 28px;
    }

    #hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: 32px;
        height: 24px;
        padding: 2px 4px;
        z-index: 20;
    }

    #hamburger .bar {
        width: 100%;
        max-height: 2px;
        background-color: var(--grey-text-white);
    }

    #menu.open {
        display: flex; /* показываем по клику на бургер */
    }

/*  Ссылки в столбик, тянутся на всю ширину */
    #menu li {
        width: 100%;
        list-style: none;
    }

    #menu li a,
    #menu li.has-submenu .submenu li a {
        display: flex;
        justify-content: space-between;
        text-align: left;
        min-height: 48px;
        padding: 0 16px;
        border: none !important;
        background: transparent;
        color: var(--grey-text-super-light) !important;
        transition: none !important; 
        transform: none !important;
    }

    #menu li a:hover,
    #menu li.has-submenu .submenu li a:hover {
        background: none;
        color: var(--grey-text-super-light);
        transform: none !important;
    }

/*  Подменю */
    #menu li.has-submenu {
        position: relative;
        display: flex;
        flex-direction: column;
    }

/*  Отключаем открытие подменю по :hover на мобилке */
    #menu li.has-submenu:hover .submenu {
        display: none !important;
    }

/*  Структура подменю на мобилке */
    #menu li.has-submenu .submenu {
        display: none; /* открытие через JS */
        position: static;
        width: 100%;
        margin: 0 !important;
        padding: 0 16px;
        box-shadow: none;
    }

    #menu li.has-submenu.submenu-open .submenu {
        display: flex !important;
        flex-direction: column;
    }

/*  Поворот стрелки */
    #menu li.has-submenu.submenu-open > a .chevron-down {
        transform: rotate(180deg);
    }

/*  Убираем индикатор у вакансий на мобилке */
    #menu li a#focus-link {
        border-radius: 0 !important;
        background: none !important;
    }

    #menu li a#focus-link:hover {
        border: none !important;
        background: none !important;
        transform: none !important;
    }

    #menu li a#focus-link::after {
        animation: none !important;
        opacity: 0 !important;
        transition: none !important;
        transform: none !important;
    }

/*  ADAPTIVE —— COMPONENTS —— LIST | SMALL */
    ul.body--base {
        gap: var(--text-list-gap-s);
        padding-left: var(--text-list-padding-s);
    }

    ul.body--base li {
        padding-left: var(--text-list-padding-s);
    }

/*  ADAPTIVE —— COMPONENTS —— UNION LIST | SMALL */
    ul.body--arrows {
        gap: var(--text-list-gap-s);
    }

    ul.body--arrows li,
    ul.body--union li {
        gap: var(--text-list-gap-s);
    }

    ul.body--union > li:not(.body__connector) {
        column-gap: var(--text-list-gap-s);
    }

    ul.body--arrows .body__arrow,
    ul.body--union .body__arrow--top,
    ul.body--union .arrows-connector,
    ul.body--union .body__arrow--btm {
        flex: 0 0 var(--body-arrow-width-s);
        max-width: var(--body-arrow-width-s);
    }

    ul.body--union .body__arrow--top {
        margin-top: var(--body-arrow-offset-min);
    }

    ul.body--union .body__connector {
        align-self: center;
    }

    ul.body--union .arrows-connector {
        margin-top: calc(2.5px * -1);
        margin-bottom: calc(1.5px * -1);
    }

    ul.body--union .body__arrow--btm {
        margin-top: var(--body-arrow-offset-min);
    }

/*  ADAPTIVE —— COMPONENTS —— ORDERED LIST | SMALL */
    ol.body--ordered {
        row-gap: var(--text-list-gap-s);
        padding-left: var(--ordered-list-padding-m);
        margin-bottom: var(--ordered-list-padding-xs);
    }

/*  ADAPTIVE —— COMPONENTS —— BUTTONS | SMALL */
    .btn-link {
        text-decoration-thickness: 1px;
        text-underline-offset: 5px;
        padding: var(--btn-padding-y-m) 0;
        max-height: var(--btn-height-m);
    }

    .btn {
        max-width: var(--btn-width-small);
        min-height: var(--btn-height-s);
        padding: var(--btn-padding-y-s) var(--btn-padding-x-s);
    }

    .btn--secondary {
        border: var(--border-width-s) solid var(--pink-text-black);
    }

/*  ADAPTIVE —— COMPONENTS —— TABS | SMALL */
    .tabs-gallery--project {
        top: var(--header-height-s);
        padding: var(--space-8) 0;
    }

    .tab {
        min-height: var(--btn-height-s);
        border: var(--border-width-s) solid var(--grey-text-super-light);
        padding: var(--btn-padding-y-s) var(--btn-padding-x-s);
    }

    .tab--right {
        margin-left: calc(var(--border-width-s) * -1);
    }

/*  ADAPTIVE —— COMPONENTS —— SWITCHER | SMALL */
    .segmented-switcher {
        max-width: 100%;
        justify-content: flex-start;
        margin-bottom: var(--gallery-padding-m);
        overflow-x: auto;
        scrollbar-width: none;
    }

    .segmented-switcher::-webkit-scrollbar {
        display: none;
    }

    .segmented-switcher__label {
        min-height: var(--tag-height-s);
        padding: var(--tag-padding-y-m) var(--tag-padding-x-s);
    }

/*  ADAPTIVE —— COMPONENTS —— TAG | SMALL */
    .tags-gallery {
        flex-wrap: wrap;
        width: 100%;
        max-width: 100%;
        margin-inline-start: 0;
    }

    .tag {
        min-height: var(--tag-height-s);
        border: var(--border-width-s) solid var(--grey-text-super-light);
        padding: var(--tag-padding-y-s) var(--tag-padding-x-s);
        margin-left: 0;
    }

/*  ADAPTIVE —— COMPONENTS —— ITEM NUMBER | SMALL */
    .item-number {
        min-width: var(--item-number-width-s);
    }

/*  ADAPTIVE —— COMPONENTS —— YEAR | SMALL */
    .text-info__year {
        min-width: var(--year-item-width-s);
    }

/*  ADAPTIVE —— COMPONENTS —— INDEX QUANT | SMALL */
    .index__quant {
        width: var(--scheme-index-height-s);
        height: var(--scheme-index-height-s);
    }

/*  ADAPTIVE —— COMPONENTS —— GRAPH —— LOGO | MEDIUM */
    .logo {
        width: 32px;
        padding: 0;
        margin: 4px 0 2px 0;
    }

    .logo-combine {
        max-width: 88px;
        gap: 5px;
        padding-bottom: 0;
        margin-top: 2px;
    }

    .logo-combine .logo {
        width: 32px;
        min-width: 32px;
        margin-left: 2px;
    }

    .logo-combine .logo__stanok {
        width: 34px;
        height: 20px;
    }

    .logo-combine--inverse h3 {
        font-size: var(--fz-14);
    }

/*  ADAPTIVE —— COMPONENT —— ICONS | SMALL */
    .heading__icn {
        width: var(--headline-icn-s);
    }

/*  ADAPTIVE —— COMPONENTS —— BREADCRUMBS | SMALL */
    .breadcrumbs {
        top: var(--header-height-s);
        max-height: var(--header-height-s);
    }

    .breadcrumbs .inner {
        padding: calc(var(--container-padding-m) / 4) var(--container-padding-x-s);
    }

/*  ADAPTIVE —— COMPONENTS —— BREADCRUMBS-MENU | SMALL */
    #nav-menu {
        gap: 8px;
    }

    #nav-menu li a {
        font-size: var(--fz-10);
        line-height: 120%;
        min-height: 16px;
    }

    #nav-menu .chevron-right {
        max-width: 16px;
    }

/*  ADAPTIVE —— COMPONENTS —— BASE —— HEADINGS | SMALL */
    .heading {
        min-width: 320px;
        max-width: 736px;
        gap: 8px 32px;
        padding-bottom: var(--text-block-padding-s);
    }

    .heading__img-cover {
        top: var(--container-padding-x-s);
        left: var(--container-padding-x-s);
    }

    .heading--start {
        gap: var(--headline-gap-m);
    }

    .heading h1,
    .heading h1.alt {
        font-size: var(--fz-32);
        line-height: 105%;
        letter-spacing: -0.5px;
        width: fit-content;
    }

    .heading .subheading-4 {
        font-size: var(--fz-15); 
        line-height: 125%;
        padding-left: 1px;
    }

    .heading .title {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
        min-width: 320px;
        max-width: 736px;
        gap: 8px 32px;
    }

    .heading .text-info {
        align-items: flex-start;
        min-width: 320px;
        gap: 2px;
    }

    .heading .heading-wrapper {
        gap: 0 8px;
        flex-wrap: wrap;
    }

/*  ADAPTIVE —— COMPONENTS —— INFOGRAPH | SMALL */
    .infograph-scale {
        grid-template-columns: minmax(0, 1fr);
        column-gap: var(--content-gap-s);
        row-gap: var(--content-gap-xs);
    }

    .infograph-scale__item {
        row-gap: var(--infograph-scale-item-gap-s);
    }

/*  ADAPTIVE —— PHOTO-CARD MINI | SMALL */
    .photo-card-mini__media,
    .photo-card__overlay {
        border-radius: 0 var(--border-radius-img-s);
    }

    .photo-card-description {
        padding-top: var(--text-block-padding-s);
    }
}

@media (max-width: 479.9px) {
/*  ADAPTIVE —— COMPONENTS —— LIST | X-SMALL */
    ul.body--base {
        gap: var(--text-list-gap-s);
        padding-left: 0;
    }

/*  ADAPTIVE —— COMPONENTS —— TABS | X-SMALL*/
    .tabs-gallery--project {
        padding: var(--space-8) 0.5px;
    }

    .tab {
        padding: var(--btn-padding-y-s) var(--btn-padding-x-xs);
    }

/*  ADAPTIVE —— COMPONENTS —— SWITCHER | X-SMALL*/
    .segmented-switcher {
        grid-template-columns: repeat(3, 1fr);
    }

    .segmented-switcher__option {
        min-width: fit-content;
        width: 100%;
        margin-top: calc(var(--border-width-m) * -1);
    }

    .segmented-switcher__option:first-of-type {
        margin-top: 0;
    }

    .segmented-switcher__label {
        width: 100%;
    }

/*  ADAPTIVE —— COMPONENTS —— INFOGRAPH | X-SMALL */
    .infograph-scale {
        row-gap: var(--content-gap-xxs);
    }
}