/* ============================================================
   ABM Partner — СЛОЙ РАСКЛАДКИ
   Контейнер, оболочка секций, общие заголовки секций.
   ============================================================ */

/* ===== Контейнер =====
   Одна ширина для всех секций; на узких экранах — только поля. */
.container {
    width: 100%;
    max-width: 100%;
    padding-inline: calc(var(--gutter) * 0.5);
    margin-inline: auto;
}

@media (min-width: 36rem) {   /* 576px */
    .container { max-width: 33.75rem; }  /* 540px */
}
@media (min-width: 48rem) {   /* 768px */
    .container { max-width: 45rem; }     /* 720px */
}
@media (min-width: 62rem) {   /* 992px */
    .container { max-width: 60rem; }     /* 960px */
}
@media (min-width: 75rem) {   /* 1200px */
    .container { max-width: var(--container-max); }
}

/* ===== Оболочка секции =====
   Секции лежат в общем потоке и перекрывают закреплённый hero.
   z-index выше hero — второй экран «наезжает» на первый. */
.section {
    position: relative;
    z-index: var(--z-section);
    background: var(--color-bg);
    padding-block: var(--pad-section);
}

/* Подложка секции */
.section--tinted {
    background: var(--color-bg-tint);
}

/* ===== Секция, наезжающая на первый экран =====
   Отрицательный margin поднимает секцию услуг на 2.5rem — она
   перекрывает нижний край hero и создаёт «нахлёст» между первым
   и вторым экраном. Пока hero прижат (fixed), та же компенсация
   задаётся в hero.css, чтобы раскладка не прыгала. */
.section--overlap {
    margin-top: -2.5rem;
    border-start-start-radius: var(--radius-2xl);
    border-start-end-radius: var(--radius-2xl);
}

/* ============================================================
   ВНУТРЕННИЕ СТРАНИЦЫ
   Общая полоса-герой под шапкой и тёплая подложка секции.
   Единый фон и затемнение для всех разделов, кроме главной.
   ============================================================ */
.page-hero {
    position: relative;
    z-index: var(--z-hero);
    min-height: calc(
        var(--header-offset) * 2
        + var(--header-height)
        + 2.5rem
    );
    overflow: hidden;
    background-color: var(--color-hero-bg);
    background-image: url("../images/hero.webp");
    background-repeat: no-repeat;
    background-position: center 62%;
    background-size: cover;
}

.page-hero::after {
    /*content: "";*/
    position: absolute;
    inset: 0;
    background: linear-gradient(
        45deg,
        rgba(76, 25, 119, 0.49) 0%,
        rgba(42, 141, 246, 0.31) 100%
    );
    pointer-events: none;
}

.page-article,
.page-news,
.page-article .article,
.page-news .news {
    background: var(--color-bg-tint);
}

/* ===== Заголовок секции ===== */
.section__title {
    font-size: var(--fs-h2);
    font-weight: var(--fw-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
    color: var(--color-ink);
    margin: 0 0 var(--gap-section-title);
}

/* Модификатор: заголовок идёт вплотную к первому абзацу */
.section__title--tight {
    margin-bottom: var(--gap-section-title-tight);
}

/* ===== Предтайтл ===== */
.section__pretitle {
    display: flex;
    align-items: center;
    gap: 0.9em;
    margin: 0 0 var(--gap-pretitle);
    text-transform: uppercase;
    letter-spacing: 0.27em;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--color-ink);
}

/* Короткая черта перед предтайтлом */
.section__pretitle::before {
    content: "";
    flex: none;
    width: 2.25rem;
    height: 1.5px;
    background: var(--color-ink-soft);
}

/* На узких экранах предтайтл скрыт — он декоративный */
@media (max-width: 53.75rem) {  /* 860px */
    .section__pretitle {
        display: none;
    }
}

/* ============================================================
   SPLIT — общий блок «медиа + текст»
   Используется секциями «О компании» и «Помощь детям»:
   слева иллюстрация, справа текст. На узких экранах колонки
   складываются в одну.
   ============================================================ */
.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--gap-columns);
}

.split__visual {
    position: relative;
    perspective: 68.75rem;
}

.split__photo {
    position: relative;
    margin: 0;
    border-radius: clamp(1.25rem, 3vw, 2.125rem);
    overflow: hidden;
    transform: rotate(-2deg);
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
    will-change: transform;
}

.split__photo img {
    display: block;
    width: 100%;
    height: auto;
    animation: split-breathe 14s ease-in-out infinite alternate;
    transform-origin: 50% 40%;
}

@keyframes split-breathe {
    from { transform: scale(1); }
    to   { transform: scale(1.07) translate(1.2%, -1%); }
}

.split__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.18), transparent 40%);
    pointer-events: none;
}

/* Плоское фото (без наклона) */
.split__photo--flat {
    transform: none;
}

.split__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.split__text {
    font-size: var(--fs-lg);
    line-height: var(--lh-lg);
    color: var(--color-ink-soft);
}

.split__cta {
    margin-top: var(--space-xl);
    align-self: flex-end;
}

@media (max-width: 61.25rem) {  /* 980px */
    .split {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(1.25rem, 4vw, 2rem);
    }
    .split__visual {
        max-width: 37.5rem;
        width: 100%;
        margin-inline: auto;
    }
}