/**
 * «[формат]» (Threat Intelligence, макет 18.08) — см. format-cards.blade.php.
 * Сверено с Figma (bxN3hERIbSkzfRMwzibAfu, node 2862:18180/2862:18209)
 * 2026-09-13: белая карточка (не бордер на прозрачном), синий 40px
 * заголовок, чёрная 20px эйбрау-капс, абзац описания, полноширинная
 * кнопка — .footer прижат к низу карточки (margin-top:auto), чтобы теги
 * и кнопка были на одной линии у обеих карточек независимо от длины
 * описания (в макете это абсолютный грид с фиксированными отступами,
 * здесь — эквивалент через flex).
 */
/**
 * Заголовок блока (плейсхолдер "[формат]" в title) — по умолчанию <h2>
 * наследует общий крупный стиль секций (~56px, см. cards-grid.blade.php —
 * там это уместно, у "Преимущества" и т.п. заголовок реально большой).
 * У format-cards в Figma (node 2862:18179) это, наоборот, маленькая
 * подпись-плейсхолдер — 16px, обычным начертанием (Medium, не uppercase),
 * чёрный 80%, с отступом ~24px до карточек (top карточки 2558 минус top
 * подписи 2518 минус её высота строки ~16px при leading-none). Без этого
 * переопределения заголовок выглядел неуместно огромным и почти
 * вплотную к карточкам (жалоба пользователя 2026-09-15).
 */
.format-cards > h2 {
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    color: rgba(26, 26, 26, 0.8);
    margin-bottom: 24px;
}

.format-cards__col {
    margin-bottom: 24px;
}

.format-cards__card {
    position: relative;
    height: 100%;
    background: #fff;
    padding: 28px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

.format-cards__corner-mark {
    position: absolute;
    top: 28px;
    right: 28px;
    width: 8px;
    height: 8px;
    background: #1A1A1A;
}

.format-cards__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
}

.format-cards__icon {
    flex: none;
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.format-cards__title {
    margin: 0;
    font-weight: 500;
    font-size: 40px;
    line-height: 1;
    letter-spacing: -2.4px;
    color: #0138E9;
}

.format-cards__eyebrow {
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    color: #1A1A1A;
    margin-bottom: 8px;
}

.format-cards__description {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.4px;
    color: rgba(26, 26, 26, 0.8);
    margin: 0;
}

.format-cards__footer {
    margin-top: auto;
    padding-top: 32px;
}

.format-cards__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 20px;
}

.format-cards__tags .badge {
    margin: 0;
}

/**
 * Main_button (Figma) — h44/radius 5/16px Medium. Bootstrap-дефолт .btn
 * даёт 38px/radius 6/400 (сверено вживую через getComputedStyle 2026-09-13
 * при добавлении того же компонента в rd-cards/saas-cards — тот же
 * шаблонный пробел здесь, не исправлялся раньше). Тот же приём геометрии,
 * что и у .cards-grid__card-cta-btn (cards-grid.css) — не унифицировано
 * в общий класс, т.к. .format-cards и .cards-grid — разные CSS-файлы с
 * независимой загрузкой.
 */
.format-cards__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 16px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 500;
}

/**
 * Маркер "▪" + невидимое зеркало (см. format-cards.blade.php) — не часть
 * строки "▪ Текст" (центрирует всю строку, лейбл съезжает вправо от
 * истинного центра) и не position:absolute с фиксированным left (на
 * узкой кнопке текст наезжает на маркер — см. комментарий у
 * `.cards-grid__card-cta-marker` в cards-grid.css, тот же Main_button).
 */
.format-cards__btn-marker {
    flex: none;
}

@media (max-width: 768px) {
    .format-cards__card {
        padding: 24px;
    }
    .format-cards__title {
        font-size: 32px;
    }
}

@media (max-width: 480px) {
    .format-cards__title {
        font-size: 26px;
    }
}