/* =========================================================================
   03-base.css
   Базовые стили: body, .page, .container, .section, заголовки, kicker, link.
   Mobile-first.
   ========================================================================= */

@layer base {

    html {
        font-size: 100%;
    }

    body {
        font-family: var(--font-sans);
        font-size: var(--fs-15);
        line-height: var(--lh-base);
        color: var(--color-ink);
        background-color: var(--color-surface);
        font-weight: 400;
        overflow-x: hidden;
    }

    body.no-scroll,
    body.menu-open {
        overflow: hidden;
    }

    .page {
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
    }

    main {
        flex: 1 0 auto;
    }

    /* === Контейнер === */
    .container {
        width: 100%;
        max-width: var(--container);
        margin-inline: auto;
        padding-inline: var(--container-pad-inline);
    }

    /* === Секции === */
    .section {
        padding-block: var(--section-pad-block);
    }

    .section--soft {
        background: var(--color-surface-soft);
    }

    .section--dark {
        color: var(--color-ink-on-dark);
        background: var(--color-navy-950);
    }

    /* === Заголовки === */
    .section-kicker {
        display: inline-block;
        margin-block-end: 14px;
        color: var(--color-gold-500);
        font-size: var(--fs-12);
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .section-title {
        margin: 0;
        color: var(--color-ink);
        font-family: var(--font-serif);
        font-weight: 400;
        line-height: var(--lh-tight);
        letter-spacing: -0.02em;
        font-size: clamp(1.875rem, 4.5vw + 1rem, 3.625rem);
    }

    .section-title--small {
        font-size: clamp(1.75rem, 2.4vw + 1rem, 2.875rem);
    }

    .section-title em {
        display: block;
        color: var(--color-gold-400);
        font-style: italic;
    }

    .section-copy {
        margin-block-start: 16px;
        color: var(--color-ink-muted);
        font-size: var(--fs-15);
        line-height: var(--lh-base);
        max-inline-size: 60ch;
    }

    /* === Шапка секции (заголовок + ссылка справа) === */
    .section-head {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-block-end: 32px;
    }

    .section-link {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        align-self: flex-start;
        color: var(--color-ink);
        font-size: var(--fs-14);
        font-weight: 600;
        transition: color var(--duration-fast) var(--ease-out);
    }

    .section-link::after {
        content: "→";
        color: var(--color-gold-500);
        font-size: var(--fs-18);
        transition: transform var(--duration-base) var(--ease-out);
    }

    .section-link:hover,
    .section-link:focus-visible {
        color: var(--color-gold-500);
    }

    .section-link:hover::after,
    .section-link:focus-visible::after {
        transform: translateX(4px);
    }

    /* === Заголовок-секция (intro в 2 колонки с подзаголовком) === */
    .section-intro {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .title-line {
        inline-size: 46px;
        block-size: 2px;
        background: var(--color-gold-500);
        border-radius: 2px;
    }

    /* === Изображения-плейсхолдеры === */
    .placeholder {
        display: block;
        inline-size: 100%;
        block-size: auto;
        background: var(--color-ivory-200);
    }
}