/**
 * Общий компонент "карточки" (паттерн A) — см. plan-block-constructor.md.
 * Первая пара, на которой обкатан: advantages / community/goals-objectives.
 * variant="flat|responsive" воспроизводит реальное расхождение между ними
 * (см. plan-block-constructor-audit.md) — не унифицировано намеренно.
 */

.cards-grid__card {
    padding: 28px;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    background-color: #fff;
    text-align: left;
}
.cards-grid__card--sm {
    padding: 24px;
}

.cards-grid__card-head h5 {
    display: flex;
    margin-bottom: 36px;
}

.cards-grid__card-number {
    padding: 0 36px 0 0;
}
.cards-grid__card-number--neutral {
    color: rgba(26, 26, 26, 0.40);
}
.cards-grid__card-number--accent {
    color: rgba(1, 56, 233, 0.40);
}

.cards-grid__card-footer {
    color: rgba(26, 26, 26, 0.80);
    text-align: left;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 19.2px */
    letter-spacing: -0.32px;
}

.cards-grid__card-footer ul {
    margin: 0;
    padding: 0;
}

.cards-grid__card-footer li {
    list-style-type: square;
    display: list-item;
    margin-left: 17px;
    padding-left: 46px;
}

.cards-grid__card-footer li::marker {
    content: '■';
    font-size: 20px;
    color: rgba(26, 26, 26, 0.40);
}

.cards-grid .img-fluid {
    margin-bottom: 30px;
}

/* --- head-style="title-illustration" (rd-cards/saas-cards) --- */

.cards-grid__card-illustration-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 20px;
}

.cards-grid__card-illustration-tags .badge {
    margin: 0;
}

/**
 * Обёртка тег+заголовок+описание, ТОЛЬКО когда карточка использует
 * headStyle="title-illustration" (модификатор на .cards-grid__card-content
 * из блейда) — flex-колонка с flex:1 на голове выравнивает старт
 * иллюстрации по самой длинной карточке в ряду, см. комментарий в
 * cards-grid.blade.php над этой веткой.
 */
.cards-grid__card-content--illustration {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.cards-grid__card-title-illustration-head {
    flex: 1 1 auto;
}

.cards-grid__card-title--illustration {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 1;
    letter-spacing: -0.06em;
    color: #1A1A1A;
    margin: 0 0 8px;
}

.cards-grid__card-description--illustration {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: rgba(26, 26, 26, 0.8);
    margin-bottom: 20px;
}

/**
 * Экспортированный из Figma PNG (диаграмма/скриншот) УЖЕ включает фон
 * #EFEFEF и внутренние отступы — здесь только рамка/масштабирование, без
 * своего background. aspect-ratio (560:410 — соотношение сторон карточки
 * в макете на 1920), не фиксированный height: колонка сетки уже на 1280px
 * заметно уже, чем 616px из макета, а фикс-height дал бы леттербоксинг.
 * object-fit:contain, не cover — на диаграммах есть подписи по краям
 * (SOC/ENTERPRISE AI/...), обрезать нельзя.
 */
.cards-grid__card-illustration {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 560 / 410;
    object-fit: contain;
    border-radius: 4px;
    margin: 0 0 20px;
}

/**
 * Гуттеры сетки rd-cards/saas-cards — Figma даёт ровно 16px и по
 * горизонтали, и по вертикали между карточками (сверено по x/y карточек
 * в метаданных, 2026-09-13), не Bootstrap-дефолтный 24px (12px+12px на
 * колонку). Свой row-class, не трогая .cards-grid__row/-col по умолчанию
 * — они общие для 9 других шаблонов. `margin-bottom` на колонке нужен
 * ВСЕГДА (не только на брейкпоинтах, как у cards-grid__row--flat/
 * --responsive) — у rd-cards/saas-cards ровно 6 карточек, 2 ряда по 3 уже
 * на 1920px, у остальных cards-grid-шаблонов на десктопе обычно один ряд.
 */
.cards-grid__row--illustration {
    margin-left: -8px;
    margin-right: -8px;
}

.cards-grid__row--illustration > .cards-grid__col {
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 16px;
}

/* --- footer-type="ctas" (rd-cards/saas-cards, card.ctas — то же поле, что format-cards) --- */

.cards-grid__card-footer--ctas {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/**
 * Main_button (Figma-компонент, используется и у format-cards, и здесь) —
 * h44/radius 5/16px Medium — Bootstrap-дефолт `.btn` даёт 38px/radius 6/
 * 400 (сверено вживую через getComputedStyle). Проект переопределяет
 * ТОЛЬКО фон/цвет через .btn-primary — геометрию под макет добавляем тут,
 * не в глобальном .btn-primary (используется по всему сайту, включая
 * хедер, трогать его геометрию не входит в эту задачу).
 *
 * flex: 1 0 auto + white-space:nowrap, НЕ `w-100`/min-height (2026-09-15
 * фикс): при двух кнопках 50/50 текст вроде "Перейти к решению" на
 * промежуточных разрешениях (768-991px и 1400-~1650px, где сетка уже 3
 * в ряд, а карточка всё ещё недостаточно широкая) физически не помещался
 * в кнопку и переносился на 2 строки — на 1443px (макет — 1 строка) это
 * было особенно заметно. Раньше это решалось `min-height` (кнопка росла
 * под 2-строчный текст) — сам факт переноса не устранялся. Basis `auto`
 * (не фикс. px) — считает реальную ширину текста конкретной кнопки, не
 * магическое число; `flex-shrink:0` вместе с `flex-wrap:wrap` на
 * `.cards-grid__card-footer--ctas` заставляет браузер САМ переносить
 * кнопку целиком на новую строку (на всю ширину, `flex-grow:1`), если
 * обеим не хватает места рядом — вместо переноса текста внутри одной.
 * Так у single-CTA карточек (одна кнопка) сохраняется прежнее поведение
 * `w-100` (кнопка растёт на всю ширину footer) без самого класса.
 */
.cards-grid__card-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1 0 auto;
    height: 44px;
    padding: 8px 16px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

/**
 * Маркер "▪" + невидимое зеркало той же "▪" (см. cards-grid.blade.php) —
 * НЕ часть текстовой строки "▪ Текст" (тогда центрируется вся строка, а
 * читаемый лейбл визуально съезжает вправо от истинного центра кнопки —
 * поймано по жалобе "текст не по центру" на /saas 2026-09-13) и НЕ
 * position:absolute с фиксированным left (тогда на узкой кнопке — 2 CTA
 * в ряд на карточке — центрированный текст наезжает на маркер, поймано
 * сразу после первой попытки фикса). Зеркало держит зазор с обеих сторон
 * текста одинаковым при любой ширине кнопки без риска наложения.
 */
.cards-grid__card-cta-marker {
    flex: none;
}

/**
 * Контурный вариант Main_button (первая из двух кнопок — обычно внешняя
 * ссылка вроде github, см. footer-type="ctas" в cards-grid.blade.php) —
 * своего готового класса в проекте не было (только Bootstrap-дефолтные
 * .btn-outline-*, ни один не привязан к --color-brand). Переопределяем
 * --bs-btn-* custom-properties (не голые color/background) — простой
 * `color:`/`border-color:` проигрывает состоянию :hover, которое в
 * Bootstrap читает именно эти переменные (тот же паттерн, что и у
 * штатного .btn-outline-primary, см. bootstrap.min.css).
 */
.btn-outline-brand {
    --bs-btn-color: var(--color-brand);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--color-brand);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-brand);
    --bs-btn-hover-border-color: var(--color-brand);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--color-brand);
    --bs-btn-active-border-color: var(--color-brand);
}

/* --- bg="gradient-blue" (customer-care/technical-support, stages-of-implementation) --- */

.cards-grid--gradient-blue {
    background: linear-gradient(258deg, #273EB2 -40.13%, #327AFA 50.28%, #1871A3 108.32%);
    color: #ffffff;
}
.cards-grid--gradient-blue h2 {
    color: #ffffff;
}

/* --- head-style="standalone" (number + marker on its own line, title as h4 below) --- */

.cards-grid__card-marker {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 20px;
    margin-bottom: 48px;
}
.cards-grid__card-marker .cards-grid__card-number {
    padding: 0;
}
.cards-grid__card-square {
    font-size: 20px;
    line-height: 1;
}
.cards-grid__card-square--neutral {
    color: rgba(26, 26, 26, 0.40);
}
.cards-grid__card-square--accent {
    color: rgba(1, 56, 233, 0.40);
}
.cards-grid__card-title {
    color: rgba(26, 26, 26, 0.80);
}

/* --- marker-icon="svg" (about-us/accompany) --- */

.cards-grid__card-square--svg svg {
    display: block;
}

/* --- title-size="sm" (about-us/accompany) — наследует глобальный h5 --- */

.cards-grid__card-title--sm {
    margin-bottom: 14px;
}

/* --- head-style="image-marker" (image + accent title + trailing square —
   community/links-resources) --- */

.cards-grid__card-head--image-marker {
    display: flex;
    justify-content: start;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
    text-transform: uppercase;
    padding-bottom: 48px;
}
.cards-grid__card-head--image-marker .cards-grid__card-square {
    display: flex;
    justify-content: flex-end;
    flex: auto;
}
.cards-grid__card-title--accent {
    color: #0138E9;
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 40px */
    letter-spacing: -2.4px;
    text-transform: none;
    padding: 0 0 0 8px;
}
@media (max-width: 1024px) {
    .cards-grid__card-head--image-marker {
        padding-bottom: 24px;
    }
    .cards-grid__card-title--accent {
        font-size: 32px;
        letter-spacing: -1.92px;
    }
}
@media (max-width: 500px) {
    .cards-grid__card-title--accent {
        font-size: 24px;
        letter-spacing: -1.44px;
        margin-top: 8px;
    }
}

/* --- head-style="image-title" (image, then plain global h4 title —
   programma-obucheniya/directions) --- */

.cards-grid__card-head--image-only {
    display: flex;
    width: 100%;
    padding-bottom: 22px;
}

/* --- head-style="title-marker" (title + trailing square, no number — delivery-options) --- */

.cards-grid__card-head--marker-trailing {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 40px;
    text-transform: unset;
    text-align: left;
    margin-bottom: 24px;
}
.cards-grid__card-head--marker-trailing .cards-grid__card-square {
    font-size: 16px;
    margin: -17px 0 0 0;
}
@media (max-width: 400px) {
    .cards-grid__card-head--marker-trailing {
        font-size: 32px;
    }
}

/* --- footer-type="cta" (badges/small_text + статичная кнопка модалки — delivery-options) --- */

.cards-grid__card-footer--cta {
    color: inherit;
}
.cards-grid__card-footer--cta p {
    margin: 0 0 10px 0;
}
.cards-grid__card-footer--cta .small-text {
    font-size: 12px;
}
.cards-grid__card-footer--cta button {
    margin-top: 16px;
}

/* --- footer-type="link" (description+tags together, small_text + real
   <a> link — community/links-resources) --- */

.cards-grid__card-footer--link {
    /* display:contents — .cards-grid__card-footer-body/.cards-grid__card-small-text/
       кнопка становятся прямыми flex-детьми .cards-grid__card, как box-content/
       box-footer были прямыми детьми .box в оригинале. Без этого высота
       .cards-grid__card-footer-body в процентах резолвится от лишнего
       промежуточного контейнера, а не от карточки — сверено вживую, реальный
       баг, не косметика (computed ratio к высоте карточки съезжал с 0.51 до 0.40). */
    display: contents;
    color: inherit;
}
.cards-grid__card-description-text p {
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 24px */
    letter-spacing: -0.4px;
}
.cards-grid__card-description-text h4 {
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 20px */
    text-transform: uppercase;
    min-height: 42px;
}
.cards-grid__card-tags {
    margin-bottom: 8px;
}
.cards-grid__card-small-text {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    margin-bottom: 16px;
}
@media (max-width: 1440px) {
    .cards-grid__card-description-text p {
        font-size: 18px;
    }
}
@media (max-width: 1024px) {
    .cards-grid__card-description-text p {
        font-size: 18px;
        letter-spacing: -0.36px;
    }
    .cards-grid__card-tags {
        margin-bottom: 16px;
    }
    .cards-grid__card-small-text {
        margin-bottom: 16px;
    }
}
@media (max-width: 500px) {
    .cards-grid__card-description-text h4 {
        font-size: 16px;
    }
    .cards-grid__card-description-text p {
        font-size: 16px;
        letter-spacing: -0.32px;
    }
}

/* --- footer-type="courses" (small_text + <hr> + двухколоночный список
   курсов — programma-obucheniya/directions) --- */

.cards-grid__card-footer--courses {
    color: inherit;
}
.cards-grid__card-footer-description {
    min-height: 46px;
}
.cards-grid__card-courses {
    display: table;
    width: 100%;
}
.cards-grid__card-courses-row {
    display: table-row;
    border-top: 1px solid rgba(26, 26, 26, 0.4);
}
.cards-grid__card-courses-label,
.cards-grid__card-courses-links {
    display: table-cell;
    width: 50%;
    vertical-align: top;
    padding: 8px 0 8px 0;
}
.cards-grid__card-courses-label {
    width: 13%;
}
.cards-grid__card-courses-link {
    padding-bottom: 5px;
}
.cards-grid__card-courses-link a {
    color: #1A1A1A;
    font-size: 16px;
    line-height: 100%; /* 16px */
    letter-spacing: -0.32px;
}
@media (max-width: 768px) {
    .cards-grid__card-courses-label,
    .cards-grid__card-courses-links {
        width: 21%;
    }
}
@media (max-width: 414px) {
    .cards-grid__card-courses-label,
    .cards-grid__card-courses-links {
        display: block;
        width: 100%;
    }
}

/* --- head-style="large-title" + footer-type="price" (cost-with-cards) --- */

.cards-grid__card-title--lg {
    display: flex;
    justify-content: space-between;
    font-size: 64px;
    text-transform: unset;
    text-align: left;
    margin-bottom: 28px;
    line-height: 110%; /* 70.4px */
    letter-spacing: -2.56px;
}

.cards-grid__card-divider {
    border-bottom: 1px dashed #A3A3A3;
}
.cards-grid__card-content .cards-grid__card-divider {
    margin: 0;
}
.cards-grid__card-footer--price .cards-grid__card-divider {
    margin: 0 0 24px 0;
}

.cards-grid__card-item-title {
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 20px */
    text-transform: uppercase;
    padding: 24px 0 24px 0;
    display: block;
}

.cards-grid__card-description h4 {
    padding: 0 0 24px 0;
    margin: 0;
    letter-spacing: -1.44px;
}
.cards-grid__card-description h4:last-child {
    padding: 0 0 20px 0;
}

.cards-grid__card-list ul {
    padding: 0 0 0 18px;
    margin-bottom: 24px;
}
.cards-grid__card-list li {
    list-style: none;
    position: relative;
    padding-left: 25px;
    padding-bottom: 20px;
}
.cards-grid__card-list li:last-child {
    padding-bottom: 0;
}
.cards-grid__card-list li p {
    font-size: 20px;
    margin: 0;
}
.cards-grid__card-list li .sublist {
    padding-top: 13px;
}
.cards-grid__card-list .sublist {
    margin-top: -4px;
}
.cards-grid__card-list .sublist::before {
    top: 14%;
}
.cards-grid__card-list li::before {
    content: '';
    position: absolute;
    left: -16px;
    top: 25%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background-image: url('../../img/list-mark.svg');
    background-size: contain;
    background-repeat: no-repeat;
}
.cards-grid__card-list li span {
    list-style-type: disc;
    display: list-item;
    margin: 0 0 0 27px;
}
.cards-grid__card-list li span::marker {
    padding: 0;
}

.cards-grid__card-footer--price {
    color: inherit;
}
.cards-grid__price-block {
    display: grid;
    grid-template-columns: 1fr 2fr;
}
.cards-grid__price-title {
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 20px */
    text-transform: uppercase;
    margin-top: 10px;
}
.cards-grid__price-value {
    font-size: 36px;
    font-style: normal;
    font-weight: 500;
    line-height: 105%; /* 37.8px */
    letter-spacing: -1.44px;
}

.cards-grid__page-cta {
    margin: 36px 0 0 0;
    width: 16%;
    height: 44px;
    padding: 7px 0 0 0;
}

@media (max-width: 1600px) {
    .cards-grid__price-value {
        font-size: 31px;
    }
}
@media (max-width: 1280px) {
    .cards-grid__price-value {
        font-size: 28px;
        letter-spacing: -1.12px;
        padding-top: 4px;
    }
    .cards-grid__card-title--lg {
        font-size: 56px;
        letter-spacing: -2.24px;
    }
    .cards-grid__card-list li p {
        font-size: 18px;
        line-height: 120%; /* 21.6px */
        letter-spacing: -0.36px;
    }
}
@media (max-width: 1000px) {
    .cards-grid__row--cols-2 .cards-grid__col {
        margin-bottom: 16px;
    }
}
@media (max-width: 768px) {
    .cards-grid__card-title--lg {
        font-size: 40px;
        letter-spacing: -1.6px;
    }
    .cards-grid__price-value {
        text-align: right;
    }
    .cards-grid__row--cols-2 .cards-grid__col:last-child {
        margin-bottom: 0;
    }
    .cards-grid__page-cta {
        width: 48%;
        margin: 49px 0 0 0;
    }
}
@media (max-width: 500px) {
    .cards-grid__card-title--lg {
        font-size: 28px;
        letter-spacing: -1.12px;
    }
    .cards-grid__card-list li p {
        font-size: 16px;
        letter-spacing: -0.32px;
    }
    .cards-grid__price-block {
        grid-template-columns: auto;
    }
    .cards-grid__price-title {
        font-size: 20px;
        margin-bottom: 20px;
    }
    .cards-grid__price-value {
        font-size: 22px;
        letter-spacing: -0.88px;
        text-align: left;
    }
    .cards-grid__page-cta {
        width: 100%;
        margin: 28px 0 0 0;
    }
    .cards-grid__card-description h4 i {
        display: inline-flex;
    }
}

/* --- title-divider (programma-obucheniya/sertifikatsiya-i-obuchenie) —
   позиционирующая обёртка над уже глобальным .line-vert (general.css);
   высота/отступы — пер-шаблонный residual --- */

.cards-grid__title-divider {
    position: relative;
    text-align: center;
}
.cards-grid__title-divider .line-vert {
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

/* --- variant="flat" (advantages) --- */

.cards-grid__title--flat {
    padding-bottom: 36px;
}
@media (max-width: 600px) {
    .cards-grid__title--flat {
        font-size: 28px;
        font-style: normal;
        font-weight: 500;
        line-height: 110%; /* 30.8px */
        letter-spacing: -1.12px;
    }
}

.cards-grid__row--flat {
    justify-content: center;
}
@media (max-width: 1600px) {
    .cards-grid__row--flat .cards-grid__col {
        width: 30%;
    }
    .cards-grid__row--flat .cards-grid__col {
        margin-bottom: 16px;
    }
}
@media (max-width: 1280px) {
    .cards-grid__row--flat .cards-grid__col {
        width: 50%;
    }
}
@media (max-width: 600px) {
    .cards-grid__row--flat .cards-grid__col {
        width: 100%;
    }
    .cards-grid .mobile-img {
        margin-bottom: 40px;
    }
}

/* --- variant="responsive" (community/goals-objectives) --- */

.cards-grid__title--responsive {
    margin-bottom: 36px;
    font-size: 64px;
    font-style: normal;
    font-weight: 500;
    line-height: 110%; /* 70.4px */
    letter-spacing: -2.56px;
    text-align: center;
}
@media (max-width: 1280px) {
    .cards-grid__title--responsive {
        font-size: 56px;
        font-style: normal;
        font-weight: 400;
        line-height: 110%; /* 61.6px */
        letter-spacing: -2.24px;
    }
}
@media (max-width: 1024px) {
    .cards-grid__title--responsive {
        font-size: 40px;
        font-style: normal;
        font-weight: 500;
        line-height: 110%; /* 44px */
        letter-spacing: -1.6px;
        margin-bottom: 24px;
    }
}
@media (max-width: 768px) {
    .cards-grid__title--responsive br {
        display: none;
    }
    .cards-grid__title--responsive {
        margin-bottom: 28px;
    }
}
@media (max-width: 600px) {
    .cards-grid__title--responsive {
        font-size: 28px;
        font-style: normal;
        font-weight: 500;
        line-height: 110%; /* 30.8px */
        letter-spacing: -1.12px;
    }
}

.cards-grid__row--responsive {
    justify-content: center;
}
@media (max-width: 1600px) {
    .cards-grid__row--responsive .cards-grid__col {
        width: 30%;
    }
}
@media (max-width: 1280px) {
    .cards-grid__row--responsive {
        justify-content: left;
    }
    .cards-grid__row--responsive .cards-grid__col {
        width: 50%;
        margin-bottom: 16px;
    }
}
@media (max-width: 600px) {
    .cards-grid__row--responsive .cards-grid__col {
        width: 100%;
    }
}

/* --- общее для обоих вариантов, зависит только от размера/брейкпоинта --- */

@media (max-width: 1280px) {
    .cards-grid__card-head h5 {
        margin-bottom: 42px;
    }
}
@media (max-width: 1024px) {
    .cards-grid__card-head h5 {
        margin-bottom: 8px;
    }
}
@media (max-width: 600px) {
    .cards-grid__card-head h5 {
        margin-bottom: 12px;
    }
}