/* ==========================================================================
   MetProm — BASE
   Адаптация дизайн-системы PIR Group
   Палитра: #FFFFFF #F7F7F7 #232223 #AE3C39 #692224
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Модульная система (как в PIR)
   -------------------------------------------------------------------------- */
:root {
    /* --- Модуль (базовая единица 1vw → rem) --- */
    --base-size: 1vw;
    --fz-modifier: 0.6955;

    /* --- Контейнер --- */
    --p-container: 2rem;
    --w-container: 100%;
    --m-m-container: calc(-1 * var(--p-container));
    --m-m-container-half: calc(var(--m-m-container) / 2);

    /* --- Line-height --- */
    --lh-default: 110%;

    /* --- Размеры шрифтов --- */
    --fz-h1: 8rem;
    --fz-h2: 6rem;
    --fz-h3: 4rem;
    --fz-h4: 3.2rem;
    --fz-button: 3.2rem;
    --fz-mini-button: 2.4rem;
    --fz-quote: 3rem;
    --fz-big-txt: 2.4rem;
    --lh-big-txt: 120%;
    --fz-txt: 2rem;
    --lt-txt: -0.1rem;
    --fz-mini-txt: 1.6rem;
    --fz-description: 1.2rem;
    --fz-regular: var(--fz-txt);

    /* --- Отступы блоков --- */
    --mt-block-regular: 20rem;
    --mt-block-18: 18rem;
    --mt-block-12: 12rem;
    --mt-block-8: 8rem;
    --mt-block-6: 6rem;
    --mt-block-4: 4rem;
    --pd-block-n: 10rem;
    --pd-block: 10rem 0;
    --pd-block-full: 20rem 0;

    /* --- Границы --- */
    --bw-regular: .2rem;
    --bc-regular: var(--line);
    --border-regular: .2rem solid var(--line);

    /* --- Сетка --- */
    --width-left-grid: calc(33.3333% + 1rem);
    --width-grid-left-regular: calc(33.3333% - 1rem);
    --width-grid-right-regular: 66.666666%;

    /* --- Скорости --- */
    --tr: 0.3s;
    --tr-regular: all var(--tr);
    --tr-fast: 0.2s;
    --tr-slow: 0.5s;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* --------------------------------------------------------------------------
   2. Палитра MetProm
   -------------------------------------------------------------------------- */
:root {
    /* Основные */
    --white: #FFFFFF;
    --light: #F7F7F7;
    --graphite: #232223;
    --accent: #AE3C39;
    --accent-deep: #692224;

    /* Семантика */
    --fg-accent: var(--accent);           /* было --fg-orange */
    --fg-accent-deep: var(--accent-deep); /* НОВЫЙ токен для hover */
    --fg-bg: var(--light);                /* было #DADBDD */
    --fg-black: var(--graphite);          /* было #111111 */
    --fg-white: var(--white);

    /* Вспомогательные */
    --fg-gray: #343F48;
    --fg-gray-light: #798A9C;
    --fg-gray-light-2: #BFC0C1;
    --fg-blue: #8FBCFF;
    --fg-red: #FF0000;

    /* Границы (адаптация) */
    --line: var(--fg-gray-light-2);
    --line-soft: rgba(35, 34, 35, .08);
    --line-light: #E4E4E4;

    /* Прозрачные акценты */
    --accent-soft: rgba(174, 60, 57, .12);
    --accent-soft-2: rgba(174, 60, 57, .22);
    --accent-glow: rgba(174, 60, 57, .35);
    --deep-soft: rgba(105, 34, 36, .18);
}

/* --------------------------------------------------------------------------
   3. Адаптивные переопределения (как в PIR)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    :root {
        --fz-h1: 6.5rem;
        --fz-modifier: 1.323894;
        --pd-block: 5.5rem 0;
        --pd-block-full: 10rem 0;
        --mt-block-regular: 14rem;
        --mt-block-12: 8rem;
        --width-left-grid: 0;
        --width-grid-left-regular: 100%;
        --width-grid-right-regular: 100%;
    }
}

@media (max-width: 575px) {
    :root {
        --fz-h1: 5.55rem;
        --fz-h2: 4rem;
        --fz-h3: 3.2rem;
        --fz-button: 2.4rem;
        --fz-txt: 1.8rem;
        --lt-txt: -0.05rem;
        --fz-mini-txt: 1.4rem;
        --fz-quote: 2.2rem;
        --mt-block-8: 6rem;
        --fz-modifier: 2.666666;
    }
}

@media (max-width: 359px) {
    :root {
        --fz-modifier: 3.125;
    }
}

/* --------------------------------------------------------------------------
   4. Базовый html
   -------------------------------------------------------------------------- */
html {
    overscroll-behavior: none;
    font-size: calc(var(--fz-modifier) * var(--base-size));
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--light);
}

/* --------------------------------------------------------------------------
   5. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
}

html, body {
    width: 100%;
    height: 100%;
}

body {
    color: var(--fg-black);
    font-family: var(--ff-regular);
    font-size: var(--fz-regular);
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
    overscroll-behavior: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    background: var(--fg-bg);
    overflow-x: hidden;
}

input, button, textarea, select {
    font: inherit;
    color: inherit;
}

button {
    color: inherit;
    cursor: pointer;
    background: inherit;
}

button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

input[type=submit] { cursor: pointer; }

a, a:link, a:visited {
    color: inherit;
    text-decoration: none;
}

ul li { list-style: none; list-style-position: inside; }
ol li { list-style-position: inside; }

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

img, svg { object-fit: contain; }

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

strong { font-weight: 700; }

/* --------------------------------------------------------------------------
   6. Скроллбар
   -------------------------------------------------------------------------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--fg-bg); }
::-webkit-scrollbar-thumb {
    background: var(--fg-gray-light-2);
    border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background: var(--fg-accent); }

::selection {
    background: var(--fg-accent);
    color: var(--fg-white);
}
::-moz-selection {
    background: var(--fg-accent);
    color: var(--fg-white);
}

/* --------------------------------------------------------------------------
   7. Обёртка и контейнер
   -------------------------------------------------------------------------- */
.wrapper {
    position: relative;
}
.wrapper:not(:has(.tabs__sticky)) {
    overflow: hidden;
}

body.body--lock {
    position: relative;
    overflow: hidden;
}

.container {
    max-width: calc(var(--w-container) + 2 * var(--p-container));
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--p-container);
    padding-right: var(--p-container);
}

/* --------------------------------------------------------------------------
   8. Типографика (Bebas Neue для заголовков)
   -------------------------------------------------------------------------- */
h1, .fz-h1 {
    font-size: var(--fz-h1);
    line-height: 100%;
    font-weight: 700;
    font-family: var(--ff-regular);
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

h2, .fz-h2 {
    font-size: var(--fz-h2);
    font-weight: 700;
    line-height: 100%;
    font-family: var(--ff-regular);
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

h3, .fz-h3 {
    font-size: var(--fz-h3);
    font-weight: 700;
    line-height: 100%;
    font-family: var(--ff-regular);
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

h4, .fz-h4 {
    font-size: var(--fz-h4);
    font-weight: 700;
    line-height: 100%;
    font-family: var(--ff-regular);
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

a.fz-h4 { line-height: 80%; }

/* Body-текст (Arial / Inter) */
.fz-mini-txt {
    font-family: var(--ff-arial);
    letter-spacing: -0.08rem;
    font-size: var(--fz-mini-txt);
    line-height: var(--lh-default);
}
.fz-mini-txt._inter { font-family: var(--ff-inter); }

.fz-txt {
    font-family: var(--ff-arial);
    letter-spacing: -0.08rem;
    font-size: var(--fz-txt);
    line-height: var(--lh-default);
}

.fz-description {
    font-family: var(--ff-arial);
    letter-spacing: -0.04rem;
    font-size: var(--fz-description);
    line-height: 110%;
}

.fz-button {
    font-weight: 700;
    font-size: var(--fz-button);
    line-height: var(--lh-default);
    font-family: var(--ff-regular);
}

@media (max-width: 575px) {
    .fz-mini-txt { letter-spacing: -0.05rem; }
    .fz-txt { letter-spacing: -0.05rem; }

    .fz-h2--mobile {
        font-size: var(--fz-h2);
        font-weight: 700;
        line-height: 100%;
    }
    .fz-h3--mobile {
        font-size: var(--fz-h3);
        font-weight: 700;
        line-height: 100%;
    }
    .fz-button--mobile {
        font-weight: 700;
        font-size: var(--fz-button);
        line-height: var(--lh-default);
    }
    .fz-txt--mobile {
        font-family: var(--ff-arial);
        letter-spacing: -0.05rem;
        font-size: var(--fz-txt);
        line-height: var(--lh-default);
    }
}

/* --------------------------------------------------------------------------
   9. Секции и паддинги
   -------------------------------------------------------------------------- */
.section { padding: var(--pd-block); }
.section--full { padding: var(--pd-block-full); }

.page-padding {
    padding: 8rem 0 0;
}
.page-padding section:last-child { padding-bottom: 0; }

@media (max-width: 991px) {
    .page-padding { padding: 4rem 0 0; }
}

.pd-last-0 .callback { padding-bottom: 0; }

.mt-top { margin-top: var(--mt-block-regular); }

.mlr-half {
    --count: calc(var(--m-m-container) / 2);
    --padding: calc(var(--p-container) / 2);
    margin-left: var(--count);
    margin-right: var(--count);
}
.mlr-half--pd {
    padding-left: var(--padding) !important;
    padding-right: var(--padding) !important;
}

/* --------------------------------------------------------------------------
   10. Сетка default-grid (левая колонка-подпись + правый контент)
   -------------------------------------------------------------------------- */
.default-grid {
    display: flex;
    gap: 2rem;
}
.default-grid__left {
    width: var(--width-grid-left-regular);
}
.default-grid__right {
    width: var(--width-grid-right-regular);
}
.default-grid--row {
    flex-direction: column;
}
.default-grid--row .default-grid__left,
.default-grid--row .default-grid__right {
    width: 100%;
}

@media (max-width: 991px) {
    .default-grid { flex-direction: column; }
}

/* --------------------------------------------------------------------------
   11. Фоновая графика — вертикальные линии (в PIR: .lines)
   -------------------------------------------------------------------------- */
.lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    pointer-events: none;
    z-index: 1;
    padding: 0 var(--p-container);
    max-width: calc(var(--w-container) + 2 * var(--p-container));
    margin: 0 auto;
    right: 0;
}
.lines__col {
    flex: 1;
    height: 100%;
    border-right: 1px solid var(--line-soft);
}
.lines__col:first-child {
    border-left: 1px solid var(--line-soft);
}
.lines--3 .lines__col { max-width: 25%; }

/* Скрываем на мобильных */
@media (max-width: 991px) {
    .lines { display: none; }
}

/* --------------------------------------------------------------------------
   12. Утилиты
   -------------------------------------------------------------------------- */
.item--cover {
    position: relative;
    overflow: hidden;
}
.item--cover img {
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.big__line {
    min-height: 1rem;
    background: var(--fg-bg);
}
.big__line + .page-padding {
    padding: 6rem 0 0;
    border-top: var(--border-regular);
}
.big__line + .article {
    border-top: var(--border-regular);
}