/* ============================================================================
   Блок «Создавайте курсы без ограничений» — редизайн
   ----------------------------------------------------------------------------
   • Префикс классов: .fb-  (изолирован, не конфликтует со style.min.css)
   • Направление: editorial, мягкий светлый стиль
   • Сетка: 4 колонки (7 карточек, широкая 7-я на десктопе)
   • Анимаций нет — статичный блок
   • Зависимости: только этот файл (шрифт Geist подтягивается сайтом,
     при отсутствии используется системный стек)
   ========================================================================== */

.fb-features {
    /* --- Токены блока ------------------------------------------------- */
    --fb-blue:        #3442e1;                 /* основной акцент           */
    --fb-blue-soft:   rgba(52, 66, 225, .08);  /* пастельная плитка/капсула */
    --fb-blue-ink:    #0f172a;                 /* заголовки                 */
    --fb-text:        #252d3e;                 /* основной текст            */
    --fb-muted:       #5b6472;                 /* вторичный текст           */
    --fb-line:        rgba(15, 23, 42, .10);   /* тонкая рамка карточки    */
    --fb-card-bg:     #ffffff;                 /* фон карточки              */
    --fb-canvas:      #f2f5fb;                 /* подложка секции           */
    --fb-radius:      24px;
    --fb-icon-radius: 14px;
    --fb-font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
               "Segoe UI Emoji", "Segoe UI Symbol";

    background: var(--fb-canvas);
    padding: clamp(56px, 7vw, 96px) 0;
    font-family: var(--fb-font);
    color: var(--fb-text);
}

/* Сброс внутри блока, чтобы не зависеть от внешних стилей */
.fb-features,
.fb-features *,
.fb-features *::before,
.fb-features *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.fb-features ul {
    list-style: none;
}
.fb-features p {
    margin: 0;
}

.fb-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(16px, 3vw, 40px);
}

/* --- Шапка секции: editorial, заголовок слева / лида справа --------- */
.fb-head {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(20px, 3vw, 56px);
    align-items: end;
    margin-bottom: clamp(28px, 4vw, 52px);
}

.fb-tag {
    display: inline-block;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--fb-blue-soft);
    color: var(--fb-blue);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.fb-title {
    font-size: clamp(28px, 3.4vw, 46px);
    line-height: 1.12;
    letter-spacing: -.03em;
    font-weight: 500;
    font-style: normal;
    color: var(--fb-blue-ink);
    text-wrap: balance;
}

.fb-lead {
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.55;
    color: var(--fb-muted);
    max-width: 52ch;
    justify-self: end;
    padding-bottom: 4px;
    text-wrap: pretty;
}

/* --- Сетка карточек: 4 колонки -------------------------------------- */
.fb-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.fb-card {
    background: var(--fb-card-bg);
    border: 1px solid var(--fb-line);
    border-radius: var(--fb-radius);
    padding: clamp(20px, 2vw, 28px);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* 7-я карточка занимает две колонки — сетка 4×2 заполнена без дырок */
.fb-card--wide {
    grid-column: span 2;
}

.fb-card__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--fb-icon-radius);
    background: var(--fb-blue-soft);
    color: var(--fb-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fb-card__icon svg {
    width: 24px;
    height: 24px;
    display: block;
}

.fb-card__title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--fb-blue-ink);
    text-wrap: balance;
}

.fb-card__text {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--fb-muted);
    text-wrap: pretty;
}

/* --- Адаптив ---------------------------------------------------------
   ≤1100px : 2 колонки (широкая карточка на всю строку)
   ≤680px  : 1 колонка, шапка в столбик
   -------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .fb-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .fb-head {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 16px;
    }
    .fb-lead {
        justify-self: start;
        padding-bottom: 0;
    }
    .fb-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .fb-card--wide {
        grid-column: auto;
    }
}