/*
 * Секция «Комплексный подход»: пункты зигзагом вдоль центральной оси и «пузыри» с цифрами.
 *
 * Mobile (<768): общая сетка из двух колонок; <ol> пунктов и <ul> «пузырей» — subgrid поверх
 * неё и делят строки: «пузырь» N стоит в строке пункта N, в его пустой половине
 * (нечётные — слева, чётные — справа). «Пузырей» больше, чем пунктов, — лишние встают
 * в свои строки ниже; число строк (--approach-rows) задаёт шаблон.
 * Tablet/desktop (≥768): «пузыри» — слой поверх таймлайна, места по порядковому номеру
 * (как в макете): 1 — слева вверху, 2 — справа у второго пункта, 3 и 4 — внизу.
 */
.approach {
    --approach-axis-width: 4px;
    --approach-axis-gap: var(--space-s);         /* от оси до текста пункта */
    --approach-marker-size: 1rem;
    --approach-marker-offset: 1.625rem;          /* от оси до ближнего края точки */
    --approach-row-gap: var(--space-m);
    --approach-row-min: 0;
    --approach-bubble-size: 5.5rem;
    --approach-bubble-width: calc(var(--approach-bubble-size) * 1.3);   /* пояснение шире круга */
}

.approach__body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(var(--approach-rows, 1), minmax(var(--approach-row-min), auto));
    column-gap: calc(2 * var(--approach-axis-gap));
    row-gap: var(--approach-row-gap);
}

/* ol.* / ul.* — перебивают сброс списков с role="list" из reset.css */
ol.approach__features,
ul.approach__stats {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Пункт таймлайна: текст в одной половине, точка — в другой, отрезок оси — по центру */
.approach__feature {
    position: relative;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
}

.approach__feature::before,
.approach__feature::after {
    content: "";
    position: absolute;
    inset-block: 0;
    left: 50%;
    width: var(--approach-axis-width);
    margin-left: calc(var(--approach-axis-width) / -2);
    border-radius: var(--radius-pill);
    background: var(--color-track);
}

/* Градиентная «заливка» отрезка: при прокрутке растёт сверху вниз */
.approach__feature::after {
    background: var(--gradient-track);
    transform-origin: top;
    transition: transform var(--duration-appear) var(--ease-out);
}

.approach__marker {
    position: relative;
    grid-row: 1;
    align-self: center;
    width: var(--approach-marker-size);
    height: var(--approach-marker-size);
    border-radius: 50%;
    background: var(--color-track);
}

.approach__marker::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--gradient-primary);
    transition: opacity var(--duration-appear) var(--ease-out) calc(var(--duration-appear) / 2);
}

.approach__feature-body {
    grid-row: 1;
    min-width: 0;
}

/* Нечётные: точка слева от оси, текст справа */
.approach__feature:nth-child(odd) .approach__marker {
    grid-column: 1;
    justify-self: end;
    margin-inline-end: calc(var(--approach-marker-offset) - var(--approach-axis-gap));
}

.approach__feature:nth-child(odd) .approach__feature-body {
    grid-column: 2;
}

/* Чётные: текст слева, выровнен к оси; точка справа */
.approach__feature:nth-child(even) .approach__marker {
    grid-column: 2;
    justify-self: start;
    margin-inline-start: calc(var(--approach-marker-offset) - var(--approach-axis-gap));
}

.approach__feature:nth-child(even) .approach__feature-body {
    grid-column: 1;
    text-align: end;
}

.approach__feature-title {
    font-family: var(--font-heading);
    font-size: var(--font-size-section-title);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    letter-spacing: 0;
}

.approach__feature-text {
    margin-top: var(--space-xs);
    font-size: var(--font-size-text-large);
}

/* «Пузырь»: градиентный круг, значение и подпись белые, пояснение — тёмное в нижней части */
.approach__stat {
    --appear-from: translateY(var(--space-m)) scale(0.8);

    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: var(--approach-bubble-width);
    height: var(--approach-bubble-size);
    padding-top: calc(var(--approach-bubble-size) * 0.12);
    font-size: var(--font-size-small);
    line-height: 1.2;
    text-align: center;
}

.approach__stat::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 50%;
    width: var(--approach-bubble-size);
    height: var(--approach-bubble-size);
    margin-left: calc(var(--approach-bubble-size) / -2);
    border-radius: 50%;
    background: var(--gradient-bubble);
}

.approach__stat:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: start;
}

.approach__stat:nth-child(even) {
    grid-column: 1 / -1;
    justify-self: end;
}

.approach__stat-value {
    font-family: var(--font-heading);
    font-size: var(--font-size-section-title);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    letter-spacing: 0;
}

.approach__stat-value,
.approach__stat-caption {
    color: var(--color-on-accent);
}

.approach__stat-caption {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0;
}

.approach__stat-text {
    margin-top: 0.15em;
}

/* Состояния прокрутки (js/appear.js): без JS всё «зажжено» сразу */
.js-appear .approach__feature:not(.is-active)::after {
    transform: scaleY(0);
}

.js-appear .approach__feature:not(.is-active) .approach__marker::after {
    opacity: 0;
}

@media (min-width: 768px) {
    .approach {
        --approach-axis-gap: 1.75rem;            /* 28px */
        --approach-marker-size: 2.1875rem;       /* 35px */
        --approach-marker-offset: 2.3125rem;     /* 37px */
        --approach-row-gap: 2.1875rem;           /* 35px между отрезками оси */
        --approach-row-min: 5.375rem;            /* 86px — высота отрезка */
        --approach-bubble-size: 8.625rem;        /* 138px */
        --approach-bubble-width: calc(var(--approach-bubble-size) * 0.9);   /* пояснение переносится внутри круга */
        --approach-stat-1-top: -2.5rem;          /* первый «пузырь» приподнят над первым пунктом */
        --approach-stat-2-top: calc(var(--approach-bubble-size) * 0.75);
        --approach-tail: calc(var(--approach-bubble-size) + 2.25rem);   /* место под 3-й и 4-й «пузыри» */
        --approach-text-max-width: 25rem;        /* 400px — в макете пояснение переносится */
    }

    /* Сетка на всю высоту — только у таймлайна; «пузыри» — отдельный слой */
    .approach__body {
        position: relative;
        display: block;
    }

    ol.approach__features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        grid-auto-rows: minmax(var(--approach-row-min), auto);
        column-gap: calc(2 * var(--approach-axis-gap));
        row-gap: var(--approach-row-gap);
    }

    .approach__feature-text {
        max-width: var(--approach-text-max-width);
        margin-top: var(--space-s);
    }

    /* Текст чётных пунктов прижат к оси */
    .approach__feature:nth-child(even) .approach__feature-text {
        margin-inline-start: auto;
    }

    ul.approach__stats {
        position: absolute;
        inset: 0;
        display: block;
    }

    .approach__stat {
        position: absolute;
        font-size: var(--font-size-body);
    }

    .approach__stat:nth-child(1) {
        top: var(--approach-stat-1-top);
        left: 2%;
    }

    .approach__stat:nth-child(2) {
        top: var(--approach-stat-2-top);
        right: 0;
    }

    /* 3-й — справа у последнего пункта; если последний пункт справа (нечётный) — ниже него */
    .approach__stat:nth-child(3) {
        right: 13%;
        bottom: calc(var(--approach-bubble-size) * 0.6);
    }

    .approach__body:has(.approach__feature:nth-child(odd):last-child) .approach__stat:nth-child(3) {
        bottom: 0;
    }

    .approach__stat:nth-child(4) {
        bottom: 0;
        left: 28%;
    }

    /* Высота под «пузыри», если пунктов мало */
    .approach__body:has(.approach__stat:nth-child(2)) {
        min-height: calc(var(--approach-stat-2-top) + var(--approach-bubble-size));
    }

    .approach__body:has(.approach__stat:nth-child(3)) {
        padding-bottom: var(--approach-tail);
    }
}

@media (min-width: 1280px) {
    .approach {
        --approach-axis-width: 5px;
        --approach-axis-gap: var(--space-l);     /* 40px */
        --approach-marker-size: 2.625rem;        /* 42px */
        --approach-marker-offset: 4.375rem;      /* 70px */
        --approach-row-min: 6.5625rem;           /* 105px */
        --approach-bubble-size: 10.4375rem;      /* 167px */
        --approach-bubble-width: calc(var(--approach-bubble-size) * 0.85);
        --approach-stat-1-top: -5rem;            /* в макете первый «пузырь» на уровне заголовка */
        --approach-stat-2-top: calc(var(--approach-bubble-size) * 0.6);
    }
}