/* Flex Section Builder — каркас: контейнеры, темы, отступы, общие примитивы.
   Подключается всегда. Per-component стили — в отдельных файлах. */

.fx-main { width: 100%; overflow-x: clip; }
.fx-builder { width: 100%; }

/* ──────────────────────────────────────────────────────────────────────────
   Скоупленный reset. Нейтрализует протекание глобальных тем-стилей
   (по тегам h2/p/ul/a/.container и т.п.) внутрь секций конструктора.
   Действует только под .fx — глобально ничего не меняет.
   ────────────────────────────────────────────────────────────────────────── */
.fx, .fx * { box-sizing: border-box; }
.fx :where(p, h1, h2, h3, h4, h5, h6, ul, ol, li, figure, blockquote, dl, dd) {
    margin: 0;
    padding: 0;
}
.fx :where(ul, ol) { list-style: none; }
.fx :where(img, svg, video) { max-width: 100%; height: auto; display: block; }
.fx :where(a) { color: inherit; text-decoration: none; }
.fx :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.fx :where(*) { box-shadow: none; }
.fx { font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }

/* ---- секция-обёртка ---- */
.fx {
    position: relative;
    font-family: var(--fx-font-body);
    color: var(--fx-text);
}
.fx :where(h1, h2, h3, h4) {
    font-family: var(--fx-font-head);
    line-height: 1.15;
    margin: 0 0 .5em;
}

/* ---- ширина контейнера ---- */
.fx > .fx-inner,
.fx .fx-inner {
    width: min(var(--fx-container), 100% - var(--fx-gutter) * 2);
    margin-inline: auto;
}
.fx-container-wide > .fx-inner,
.fx-container-wide .fx-inner {
    width: min(var(--fx-container-wide), 100% - var(--fx-gutter) * 2);
}
.fx-container-full > .fx-inner,
.fx-container-full .fx-inner {
    width: 100%;
}

/* ---- вертикальные отступы ---- */
.fx-space-none { padding-block: 0; }
.fx-space-sm { padding-block: clamp(28px, 4vw, 48px); }
.fx-space-md { padding-block: clamp(48px, 7vw, 88px); }
.fx-space-lg { padding-block: clamp(72px, 10vw, 132px); }

/* ---- темы фона ---- */
.fx-theme-light { background: var(--fx-white); color: var(--fx-text); }
/* Чередование фона светлых секций: band-a — белый (по умолчанию),
   band-b — тёплый off-white. Разделяет соседние светлые секции. */
.fx-theme-light.fx-band-a { background: var(--fx-band-a); }
.fx-theme-light.fx-band-b { background: var(--fx-band-b); }
.fx-theme-dark {
    background: var(--fx-grad-dark);
    color: var(--fx-text-invert);
}
.fx-theme-dark :where(h1, h2, h3, h4) { color: #fff; }
.fx-theme-dark a { color: var(--fx-gold-bright); }
.fx-theme-gold {
    background: var(--fx-gold-light);
    color: var(--fx-text);
}

/* ---- общие примитивы ---- */
.fx-eyebrow {
    display: inline-block;
    font-family: var(--fx-font-body);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: .78rem;
    color: var(--fx-gold-dark);
    margin-bottom: 1rem;
}
.fx-theme-dark .fx-eyebrow { color: var(--fx-gold-bright); }

.fx-heading {
    font-size: clamp(1.6rem, 3.2vw, 2.6rem);
    margin: 0 0 1rem;
    text-align: center;
}
.fx-subheading {
    font-size: clamp(1rem, 1.6vw, 1.18rem);
    color: var(--fx-text-muted);
    max-width: none;
    text-align: center;
}
.fx-theme-dark .fx-subheading { color: rgba(244, 241, 234, .82); }

/* ---- кнопки ---- */
.fx-btn {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    padding: .85em 1.7em;
    border-radius: var(--fx-radius-sm);
    font-family: var(--fx-font-body);
    font-weight: 600;
    font-size: .98rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: transform var(--fx-dur) var(--fx-ease), box-shadow var(--fx-dur) var(--fx-ease), background var(--fx-dur);
}
.fx-btn:hover { transform: translateY(-2px); }
.fx-btn--primary {
    background: var(--fx-grad-gold);
    color: #fff;
    box-shadow: var(--fx-shadow-gold);
}
.fx-btn--primary:visited,
.fx-btn--primary:hover,
.fx-btn--primary:focus { color: #fff; }

.fx-btn--secondary {
    background: var(--fx-dark);
    color: #fff;
}
.fx-btn--secondary:visited,
.fx-btn--secondary:hover,
.fx-btn--secondary:focus { color: #fff; }

.fx-btn--ghost {
    background: transparent;
    border-color: var(--fx-gold-accent);
    color: var(--fx-gold-dark);
}
.fx-btn--ghost:visited,
.fx-btn--ghost:hover,
.fx-btn--ghost:focus { color: var(--fx-gold-dark); }
.fx-theme-dark .fx-btn--ghost { color: var(--fx-gold-bright); border-color: var(--fx-gold-bright); }
.fx-theme-dark .fx-btn--ghost:visited,
.fx-theme-dark .fx-btn--ghost:hover,
.fx-theme-dark .fx-btn--ghost:focus { color: var(--fx-gold-bright); }

/* ---- иконка ---- */
.fx-icon { width: 1.5em; height: 1.5em; flex: none; }

/* ---- утилита: сетка карточек ---- */
.fx-grid { display: grid; gap: clamp(16px, 2vw, 28px); }
.fx-grid--2 { grid-template-columns: repeat(2, 1fr); }
.fx-grid--3 { grid-template-columns: repeat(3, 1fr); }
.fx-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
    .fx-grid--3, .fx-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .fx-grid--2, .fx-grid--3, .fx-grid--4 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .fx-btn { transition: none; }
    .fx-btn:hover { transform: none; }
}