/* ─────────────────────────────────────────────────────────────
   Карточки тарифов Maru Family

   Строки карточки принадлежат общей сетке (subgrid): название,
   описание, цена, строка списания, кнопка и список идут отдельными
   рядами. За счёт этого цена и кнопка стоят на одной линии у всех
   тарифов, как бы ни различалась длина заголовка и описания —
   раньше каждая карточка выравнивалась сама по себе.

   Имена классов новые: старые правила .tariffs-item остаются
   нетронутыми, чтобы переход не задел другие места сайта.
   ───────────────────────────────────────────────────────────── */

/* Селектор повторяет старый .tariffs-b .tariffs-container .tariffs-wrapper
   из tariffs.css: тот объявляет контейнер флексом, и при меньшей
   специфичности display оставался flex — карточки объявляли subgrid,
   но выравнивать было не по чему, ряды не совпадали. Отрицательные поля
   оттуда же снимаются: их роль выполняет gap. */
.tariffs-b .tariffs-container .tariffs-wrapper {
    display: grid;
    /* Колонка ограничена 420px и вся сетка центрируется: на широком экране
       две карточки в половину экрана каждая выглядели тяжело, а строки
       списка растягивались далеко за комфортную длину. */
    grid-template-columns: repeat(2, minmax(0, 420px));
    justify-content: center;
    /* Раздельно, а не gap: 20px. Строки сетки наследуются карточкой через
       subgrid, и общий gap добавлялся к каждому её внутреннему интервалу:
       заданные 6px между названием и описанием превращались на экране в 26,
       20px до цены — в 40. Ритм, набранный в этом файле, до экрана не
       доезжал вовсе. */
    column-gap: 20px;
    row-gap: 0;
    margin: 0;
    /* Шесть рядов: имя, описание, цена, списание, кнопка, список. */
    grid-template-rows: auto auto auto auto auto auto;
    align-items: stretch;
}

.tariff-card {
    position: relative;
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    padding: 24px;
    border: 1px solid #E3E0DB;
    border-radius: 20px;
    background: #FFFFFF;
    color: #171F26;
}

/* Акцентный тариф: сплошная тёмная заливка вместо цветной рамки —
   на светлой странице она читается быстрее любого бордера. */
.tariff-card--hi {
    background: #171F26;
    border-color: #171F26;
    color: #FFFFFF;
}

/* ── Бейдж ── */
.tariff-card__badge {
    position: absolute;
    top: 0;
    right: 24px;
    transform: translateY(-50%);
    padding: 5px 13px;
    border-radius: 100px;
    background: #EDB04A;
    color: #1B1206;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .03em;
    white-space: nowrap;
}

.tariff-card:not(.tariff-card--hi) .tariff-card__badge {
    background: #E7E3DC;
    color: #5B6570;
}

/* ── Название и описание ── */
.tariff-card__name {
    margin: 0;
    font-size: 23px;
    font-weight: 700;
    line-height: 30px;
}

.tariff-card__desc {
    margin: 8px 0 0;
    font-size: 14.5px;
    line-height: 20px;
    color: #4A555F;
}

.tariff-card--hi .tariff-card__desc {
    color: #C9CFD5;
}

/* ── Цена ── */
.tariff-card__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 9px;
    margin: 24px 0 0;
}

.tariff-card__old {
    font-size: 24px;
    font-weight: 700;
    color: #78838C;
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}

.tariff-card--hi .tariff-card__old {
    color: #98A0A8;
}

.tariff-card__value {
    font-size: 40px;
    font-weight: 800;
    line-height: 44px;
    /* Крупные цифры набираются плотнее текста, иначе между ними дыры. */
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.tariff-card__per {
    font-size: 15px;
    font-weight: 600;
    color: #4A555F;
}

.tariff-card--hi .tariff-card__per {
    color: #C9CFD5;
}

.tariff-card__promo {
    padding: 3px 9px;
    border-radius: 100px;
    background: rgba(29, 107, 79, .10);
    color: #1D6B4F;
    font-size: 12px;
    font-weight: 800;
}

.tariff-card--hi .tariff-card__promo {
    background: rgba(237, 176, 74, .18);
    color: #EDB04A;
}

/* Строка списания: «€126 сразу за год, вместо €180». Пустой она бывает
   у помесячного плана — ряд всё равно занимает место, иначе кнопки в
   соседних карточках разъедутся. */
.tariff-card__billed {
    margin: 8px 0 0;
    font-size: 13.5px;
    line-height: 20px;
    color: #78838C;
}

.tariff-card--hi .tariff-card__billed {
    color: #98A0A8;
}

/* ── Кнопка ── */
.tariff-card__cta {
    margin-top: 24px;
    align-self: start;
}

.tariff-card__cta .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    /* Половина внешнего радиуса карточки — обычное соотношение вложенных
       скруглений; на 10px кнопка выглядела жёстче окружения. */
    border-radius: 12px;
}

/* Прозрачная кнопка внутри тёмной карточки была бы невидима, но такой
   пары не возникает: тёмной становится только карточка с жёлтой кнопкой. */
.tariff-card:not(.tariff-card--hi) .tariff-card__cta .btn--transparent {
    border: 1.5px solid #E3E0DB;
    color: #171F26;
}

.tariff-card:not(.tariff-card--hi) .tariff-card__cta .btn--transparent:hover {
    border-color: #171F26;
    background: rgba(23, 31, 38, .03);
}

/* ── Список ── */
/* Шестая строка сетки: список и сноска. Колонка, чтобы сноску можно было
   прижать к низу — иначе она вставала сразу за списком и пустота под ней
   оставалась прежней. */
.tariff-card__body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Зазор между списком и сноской — gap'ом, не margin'ом сноски:
       margin перебивал бы её margin-top: auto, и прижатие к низу
       переставало работать. */
    gap: 24px;
}

.tariff-card__feats {
    margin: 24px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid #EFEDE9;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tariff-card--hi .tariff-card__feats {
    border-top-color: rgba(255, 255, 255, .13);
}

.tariff-feat {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14.5px;
    line-height: 20px;
}

.tariff-feat__mark {
    flex: none;
    /* Чётный размер: на 19px край кружка попадал на полпиксель и мылился. */
    width: 20px;
    height: 20px;
    margin-top: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(29, 107, 79, .12);
    color: #1D6B4F;
}

.tariff-card--hi .tariff-feat__mark {
    background: rgba(237, 176, 74, .20);
    color: #EDB04A;
}

.tariff-feat__text b {
    font-weight: 700;
}

.tariff-feat__note {
    display: block;
    margin-top: 2px;
    font-size: 13.5px;
    line-height: 19px;
    font-weight: 400;
    color: #78838C;
}

.tariff-card--hi .tariff-feat__note {
    color: #98A0A8;
}

/* Пункт «не входит»: гасится целиком, вместе с меткой. */
.tariff-feat--off {
    color: #78838C;
}

.tariff-feat--off .tariff-feat__mark {
    background: #F0EEEA;
    color: #A7A29B;
}

.tariff-card--hi .tariff-feat--off {
    color: #98A0A8;
}

.tariff-card--hi .tariff-feat--off .tariff-feat__mark {
    background: rgba(255, 255, 255, .08);
    color: #98A0A8;
}

@media only screen and (max-width: 860px) {
    /* Одна колонка — выравнивать между карточками нечего, subgrid снимается. */
    .tariffs-b .tariffs-container .tariffs-wrapper {
        grid-template-columns: minmax(0, 420px);
        grid-template-rows: none;
    }

    .tariff-card {
        grid-row: auto;
        display: flex;
        flex-direction: column;
    }

    /* В колоночном флексе align-self: start не даёт блоку кнопки
       растянуться: он сжимался по содержимому, и кнопка занимала 206px
       из 297 доступных, прижатая к левому краю. */
    .tariff-card__cta {
        align-self: stretch;
    }

    .tariff-card__value {
        font-size: 34px;
        line-height: 38px;
    }
}

/* ─────────────────────────────────────────────────────────────
   Заголовок блока и переключатель периода
   ───────────────────────────────────────────────────────────── */

/* В остальных разделах между заголовком и подзаголовком 8px, а дальше
   24px до контента. Здесь под заголовком стояло 50px — подзаголовок
   висел в стороне от него и читался как отдельный абзац. */
.tariffs-b .tariffs-container .title {
    margin-bottom: 8px;
}

/* Переключатель периода: скругление до пилюли — форма, которую подсказывает
   сама метафора переключателя, и та же, что у бейджей на карточках.
   Правила family-специфичные: файл грузится только здесь, у maru.expert
   переключатель остаётся прежним. */
.tariffs-b .tariffs-tabs-toggle {
    /* Подзаголовок стоит впритык — 24px от текста до переключателя
       читались как продолжение абзаца, а не начало нового блока.
       Маргины здесь схлопываются, поэтому значение задаёт весь просвет. */
    margin-top: 56px;
}

.tariffs-b .tariffs-tabs-toggle ul {
    border-radius: 100px;
}

.tariffs-b .tariffs-tabs-toggle .tariffs-tabs-toggle-item {
    display: inline-flex;
    align-items: center;
    /* 44px — минимальная зона нажатия; было 38px по контенту. */
    min-height: 44px;
    padding: 10px 20px;
    border-radius: 100px;
}

/* Метка экономии: тот же зелёный, что у галочек в списке. Прежний #22C55E
   светлее и ярче всего остального на странице — он перетягивал внимание
   с цены, ради которой переключатель и нужен. */
.tariffs-b .tariffs-tabs-toggle .tariffs-tabs-toggle-item .discount {
    height: auto;
    margin-left: 10px;
    padding: 3px 9px;
    border-radius: 100px;
    background: rgba(29, 107, 79, .12);
    color: #1D6B4F;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 18px;
}

/* ─────────────────────────────────────────────────────────────
   Сноска внизу карточки
   ───────────────────────────────────────────────────────────── */

/* margin-top: auto прижимает блок к низу карточки: он занимает пустоту,
   которая остаётся у тарифа с коротким списком, вместо того чтобы липнуть
   к последнему пункту. */
.tariff-card__foot {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: auto;
    padding: 16px;
    border-radius: 14px;
    background: #F6F5F3;
    font-size: 13.5px;
    line-height: 19px;
    color: #4A555F;
}

.tariff-card--hi .tariff-card__foot {
    background: rgba(255, 255, 255, .06);
    color: #C9CFD5;
}

.tariff-card__foot-ic {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #EFE7D8;
    color: #9A7434;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tariff-card--hi .tariff-card__foot-ic {
    background: rgba(237, 176, 74, .18);
    color: #EDB04A;
}

.tariff-card__foot-text b {
    display: block;
    margin-bottom: 2px;
    color: #171F26;
    font-size: 14px;
    font-weight: 700;
}

.tariff-card--hi .tariff-card__foot-text b {
    color: #FFFFFF;
}

@media only screen and (max-width: 860px) {
    /* На узком экране карточка заканчивается по содержимому — прижимать
       нечего, отступ уже даёт gap контейнера. */
    .tariff-card__foot {
        margin-top: 0;
    }
}