/* ===== TARIFFS =====
   AICODE-NOTE: На оригинале карточки — БЕЛЫЕ с лавандовой пиксельной рамкой,
   3 колонки × 2 ряда на десктопе. CTA — узкая белая пилюля с лавандовой рамкой.
   AICODE-NOTE: Секция сжата по вертикали, чтобы уложиться в ~2 экрана на десктопе.
   Бюджет высоты: меньше паддингов, плотнее буллеты, компактнее блок «цена+CTA». */

.tariffs {
    padding: var(--sp-2xl) 0;
    background: var(--color-bg-light);
}

/* AICODE-NOTE: Заголовок секции — Press Start 2P, как на magicfitness.pro.
   Размеры/line-height синхронизированы с оригиналом: 16/21/24/36px, lh 1.2.
   font-weight НЕ задаём: у Google-шного Press Start 2P только weight 400,
   указание 700 даёт браузерный fake-bold и «колкое/грубое» начертание. */
.tariffs__title {
    font-family: var(--font-pixel);
    font-weight: 400;
    font-size: 16px;
    text-align: center;
    margin-bottom: var(--sp-lg);
    line-height: 1.2;
    color: var(--color-text);
}

.tariffs__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-lg);
    max-width: 1100px;
    margin: 0 auto;
}

/* AICODE-NOTE: Вертикальный отступ между рядами карточек (все ряды одинаковой структуры) */
.tariffs__grid + .tariffs__grid {
    margin-top: var(--sp-lg);
}

/* --- Card (pixel-frame wrapper, WHITE) ---
   AICODE-NOTE: На мобиле паддинги ужаты (sp-md/sp-sm), иначе на 390px
   текст фич слишком сжимается к центру. На планшете+ переопределяется. */
.tariff-card {
    --frame-w: 3px;
    --frame-step: 8px;
    --frame-color: var(--color-primary);
    --frame-bg: #ffffff;
    padding: var(--sp-md) var(--sp-sm);
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.tariff-card__header {
    text-align: center;
    margin-bottom: var(--sp-sm);
    padding-top: var(--sp-xs);
}

.tariff-card__name {
    font-family: var(--font-pixel);
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--color-text);
}

/* AICODE-NOTE: Подзаголовок — мягкое описание «для кого» (нужен только в доп. карточках
   «Только планка» и «План тренировок»). У остальных карточек этот элемент просто не рендерится. */
.tariff-card__subtitle {
    margin: var(--sp-sm) 0 0;
    padding: 0 var(--sp-xs);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--color-text-muted);
    text-align: center;
    font-style: italic;
}

/* --- Features list --- */
.tariff-card__features {
    flex: 1;
    margin-bottom: var(--sp-md);
    list-style: none;
    padding: 0;
}

.tariff-card__feature {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 4px 0;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    line-height: 1.4;
    color: var(--color-text);
}

/* Yellow coin bullet — простой жёлтый кружок как в оригинале */
.tariff-card__feature::before {
    content: '';
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    margin-top: 5px;
    background: var(--color-coin);
    border-radius: 50%;
    box-shadow:
        inset -1px -1px 0 0 var(--color-coin-shade),
        inset 1px 1px 0 0 rgba(255, 255, 255, 0.5);
}

/* --- Price (pixel PNG) ---
   AICODE-NOTE: Все PNG цен имеют одинаковую натуральную высоту (35px),
   но разную ширину (от 275 до 313px). Чтобы визуально все цены были
   одного размера на всех карточках, задаём ФИКСИРОВАННЫЙ бокс под цену
   (width × height) и используем object-fit: contain — картинка вписывается
   внутрь, сохраняя пропорции. За эталон взята «Фуллпак (4 недели)» → price_42k.png (275×35). */
.tariff-card__price {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--sp-sm) 0 var(--sp-md);
}

.tariff-card__price-img {
    display: block;
    /* AICODE-NOTE: На мобиле ценник ≈ 200px (~25px высотой), иначе PNG
       растягивается на всю ширину узкой карточки и смотрится «разъехавшимся».
       На планшете+ размер увеличивается в @media ниже. */
    height: 25px;
    width: 196px; /* 25 * (275/35) ≈ 196 — пропорция эталона 275:35 */
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    image-rendering: pixelated;
}


/* --- CTA button — WHITE pill with LAVENDER pixel border ---
   AICODE-NOTE: Ширина кнопки зафиксирована одна на все карточки, чтобы пилюли
   выглядели идентично. Ширину подобрали под самый длинный текст
   («хочу программу ТРЕНИРОВОК») с небольшим запасом на хвосты рамки. */
.tariff-card__cta {
    --frame-w: 3px;
    --frame-step: 6px;
    --frame-color: var(--color-primary);
    --frame-bg: #ffffff;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    max-width: 280px;
    min-height: 44px;
    font-family: var(--font-pixel);
    font-size: var(--fs-xs);
    padding: 10px var(--sp-md);
    color: var(--color-text);
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast);
    text-align: center;
    text-decoration: none;
    line-height: 1.4;
    margin-top: auto;
    text-transform: lowercase;
    isolation: isolate;
}

.tariff-card__cta:hover {
    --frame-bg: var(--color-primary);
    color: #ffffff;
}

/* AICODE-NOTE: Микротекст-реасурранс под CTA карточки тарифа.
   Шрифт — body (Montserrat), т.к. пиксельный Press Start 2P в таком мелком
   размере плохо читается. Цвет — muted, чтобы не конкурировать с CTA.
   Центрируется по ширине кнопки (align-self + max-width), отступ сверху
   маленький — визуально «приклеен» к кнопке. */
.tariff-card__cta-note {
    display: block;
    align-self: center;
    width: 100%;
    max-width: 280px;
    margin: 6px auto 0;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-text-muted);
    text-align: center;
    text-transform: lowercase;
    letter-spacing: 0.01em;
}

/* ===== Featured card (Фуллпак 12 недель) =====
   AICODE-NOTE: Обёртка .tariff-card-wrap--featured нужна исключительно ради
   свечения. filter: drop-shadow на самой карточке работает слабо, так как
   на ней стоит clip-path от .pixel-frame (Chrome рендерит тень внутри той
   же клип-маски). Вынося filter на незаклиппленного родителя, мы получаем
   чёткую тень по пиксельному силуэту карточки. Подсветка внутри — через
   изменённый --frame-bg. */
.tariff-card-wrap {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.tariff-card-wrap > .tariff-card {
    flex: 1;
}

/* AICODE-NOTE: Свечение усилено (итерация «сделай флагман доминирующим»):
   альфа ≈ +15% (0.70→0.82, 0.40→0.48), радиусы расширены (10→14px, 24→34px),
   добавлен третий, самый широкий слой для мягкого «ореола» вокруг карточки.
   Цель — чтобы глаз зрителя сразу шёл на центральную карточку ряда. */
.tariff-card-wrap--featured {
    filter:
        drop-shadow(0 0 14px rgba(139, 123, 192, 0.82))
        drop-shadow(0 6px 34px rgba(139, 123, 192, 0.48))
        drop-shadow(0 0 60px rgba(139, 123, 192, 0.22));
}

.tariff-card--featured {
    --frame-bg: #f6eeff;
    --frame-color: var(--color-primary);
}

/* Бейдж "лучший результат ты получишь тут".
   Использует общий pixel-frame (pixel-консистентность со всем сайтом),
   сплошная заливка цветом hero-секции (accent) — тот же розовый, что на hero
   и в кружках-бейджах результатов — поэтому визуально «мэчится». */
.tariff-card__badge {
    --frame-w: 3px;
    --frame-step: 5px;
    --frame-color: var(--color-accent);
    --frame-bg: var(--color-accent);
    display: inline-block;
    align-self: center;
    margin: 0 auto var(--sp-sm);
    padding: 8px 14px 7px;
    font-family: var(--font-pixel);
    font-size: 9px;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-align: center;
    color: #ffffff;
    text-transform: lowercase;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.18);
}

/* AICODE-NOTE: Контрастный CTA для флагмана.
   Все остальные карточки → белая пилюля с лавандовой рамкой (тихо).
   Флагман → ЗАЛИВКА лавандовым (primary) + белый текст = максимальный контраст
   среди CTA-пилюль ряда. При hover переходит на accent (розовый) — тот же цвет,
   что и бейдж «лучший результат тут», создаётся визуальная связка.
   Увеличенная max-width на всех брейкпоинтах добавляет визуального «веса». */
.tariff-card--featured .tariff-card__cta {
    --frame-color: var(--color-primary);
    --frame-bg: var(--color-primary);
    color: #ffffff;
    max-width: 320px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.18);
}

.tariff-card--featured .tariff-card__cta:hover {
    --frame-color: var(--color-accent);
    --frame-bg: var(--color-accent);
    color: #ffffff;
}

/* Увеличенный ценник для флагмана (на каждом брейкпоинте свой размер,
   поскольку дефолт для .tariff-card__price-img переопределяется в media-queries
   ниже — специфичность ".tariff-card--featured .tariff-card__price-img"
   побеждает, но чтобы ценник рос на больших экранах, дублируем правило
   в каждом медиа-запросе). */
.tariff-card--featured .tariff-card__price-img {
    /* AICODE-NOTE: На мобиле флагманский ценник заметно выше обычных карточек
       (32 vs 25 px), но остаётся в пределах ширины карточки (~251px < 390px).
       На планшете+ каждая брейк-точка задаёт свои размеры. */
    height: 32px;
    width: 251px; /* 32 * (275/35) */
}

/* ===== Starter card (Фуллпак 4 недели) =====
   AICODE-NOTE: Мягкий «стартовый» вариант: такая же конструкция, как у флагмана,
   но визуально тише. Фон — БЕЛЫЙ (как у всех обычных карточек), акцент
   создаётся только бейджем «хороший старт» и чуть увеличенной шириной.
   Подсветки/свечения нет — это прерогатива флагмана 12-нед. */
.tariff-card--starter {
    --frame-bg: #ffffff;
    --frame-color: var(--color-primary);
}

/* Бейдж «хороший старт» — менее контрастный, чем «лучший результат» у 12-нед.
   Используем primary-light (лавандовый пастельный) вместо accent (розовый),
   чтобы визуально мэтчиться со всем сайтом (те же лавандовые рамки), но
   не перетягивать внимание на себя. */
.tariff-card__badge--starter {
    --frame-color: var(--color-primary-light);
    --frame-bg: var(--color-primary-light);
    color: #ffffff;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

/* Бейдж «с другом» для карточки «Вдвоём веселее».
   Намеренно тот же цвет, что и у бейджа «хороший старт» (--starter):
   пастельный лавандовый (primary-light). Это «второстепенные» тарифы
   одного ряда, которые не должны спорить с флагманом 12-нед (у того
   розовый accent), поэтому визуально их делаем «в одной команде». */
.tariff-card__badge--friend {
    --frame-color: var(--color-primary-light);
    --frame-bg: var(--color-primary-light);
    color: #ffffff;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

/* Бейдж «самостоятельно» для карточек «Только планка» и «План тренировок».
   Это самостоятельные тарифы без сопровождения — сигналим мягким лавандовым
   (тот же primary-light, что у --starter/--friend), чтобы не перетягивать
   внимание с флагмана и образовывать единое «второстепенное» семейство. */
.tariff-card__badge--solo {
    --frame-color: var(--color-primary-light);
    --frame-bg: var(--color-primary-light);
    color: #ffffff;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

/* AICODE-NOTE: Бейджи «тест-драйв» и «стабильный результат» — для карточек
   4 и 12 недель в рядах «Питание» и «Тренировки». Визуально относим их
   к тому же «лавандовому семейству» второстепенных бейджей (primary-light),
   что и --starter/--friend/--solo: они коммуницируют позиционирование тарифа,
   но не спорят с флагманом 12-нед Фуллпак по визуальному весу. */
.tariff-card__badge--test-drive,
.tariff-card__badge--stable {
    --frame-color: var(--color-primary-light);
    --frame-bg: var(--color-primary-light);
    color: #ffffff;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

/* ========== Responsive ========== */

/* AICODE-NOTE: Мобильный reorder карточек тарифов (до 767px).
   Все 9 карточек лежат в 3 отдельных гридах (tariffs-grid-1/2/3). Чтобы
   пересортировать их поперёк этих гридов, на мобилке мы:
   1) превращаем сами гриды в display: contents (их дети «всплывают» наверх
      и становятся прямыми детьми .container, как будто обёртки-ряда нет);
   2) сам .container делаем flex-колонкой с тем же вертикальным gap;
   3) каждой карточке выдаём индивидуальный order под нужный мобильный порядок.
   На планшете/десктопе (min-width: 768px) ниже всё перекрывается обратно
   на grid с 3 колонками. */
@media (max-width: 767px) {
    .tariffs > .container {
        display: flex;
        flex-direction: column;
        gap: var(--sp-lg);
    }

    .tariffs__grid {
        display: contents;
    }

    /* Отменяем margin между рядами — вертикальный ритм теперь задаёт gap выше */
    .tariffs__grid + .tariffs__grid {
        margin-top: 0;
    }

    /* Мобильный порядок:
       1. Фуллпак (4 недели)
       2. Фуллпак (12 недель)
       3. Питание (4 недели)
       4. Питание (12 недель)
       5. Только планка (4 недели)
       6. Тренировки (4 недели)
       7. Тренировки (12 недель)
       8. Вдвоём веселее (4 недели)     ← переехала с 3-й позиции
       9. План тренировок (4 недели) */
    .tariffs__title                     { order: 0; }
    #tariffs-grid-1 > :nth-child(1)     { order: 1; } /* Фуллпак 4 */
    #tariffs-grid-1 > :nth-child(2)     { order: 2; } /* Фуллпак 12 */
    #tariffs-grid-2 > :nth-child(1)     { order: 3; } /* Питание 4 */
    #tariffs-grid-2 > :nth-child(2)     { order: 4; } /* Питание 12 */
    #tariffs-grid-2 > :nth-child(3)     { order: 5; } /* Только планка */
    #tariffs-grid-3 > :nth-child(1)     { order: 6; } /* Тренировки 4 */
    #tariffs-grid-3 > :nth-child(2)     { order: 7; } /* Тренировки 12 */
    #tariffs-grid-1 > :nth-child(3)     { order: 8; } /* Вдвоём веселее */
    #tariffs-grid-3 > :nth-child(3)     { order: 9; } /* План тренировок */
}

@media (min-width: 768px) {
    /* 3 колонки точно как в оригинале на десктопе */
    .tariffs__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sp-md);
    }

    /* AICODE-NOTE: В первом ряду иерархия такая:
       — центр (Фуллпак 12 нед, --featured) — самая широкая, «звезда ряда».
       — слева  (Фуллпак  4 нед, --starter) — чуть шире обычных карточек,
         но уже флагмана. «Хороший старт», второй по приоритету.
       — справа (Вдвоём веселее) — обычная ширина. */
    #tariffs-grid-1 {
        grid-template-columns: 1.12fr 1.28fr 1fr;
    }

    /* Третий ряд: 3 карточки, симметрично рядам 1 и 2. Наследует grid-template-columns. */

    .tariffs__title {
        font-size: 24px;
    }

    .tariff-card {
        padding: var(--sp-lg) var(--sp-sm);
    }

    .tariff-card__feature {
        font-size: var(--fs-xs);
        padding: 3px 0;
        line-height: 1.4;
    }

    .tariff-card__subtitle {
        font-size: 0.6875rem;
    }

    .tariff-card__badge {
        font-size: 10px;
        padding: 9px 16px 8px;
    }

    .tariff-card--featured .tariff-card__price-img {
        height: 51px;
        width: 401px; /* 51 * (275/35) — +~15% к прежнему 44/346 */
    }
}

@media (min-width: 1024px) {
    .tariffs {
        padding: var(--sp-2xl) 0;
    }

    /* AICODE-NOTE: Увеличенный margin-bottom у заголовка нужен, чтобы
       розовое свечение (box-shadow) карточек тарифов не «наезжало» на
       текст заголовка. На десктопе ореол у карточек крупнее, поэтому
       используем --sp-2xl вместо --sp-lg. */
    .tariffs__title {
        font-size: 36px;
        margin-bottom: var(--sp-2xl);
    }

    .tariffs__grid {
        gap: var(--sp-lg);
    }

    .tariffs__grid + .tariffs__grid {
        margin-top: var(--sp-lg);
    }

    .tariff-card {
        padding: var(--sp-lg) var(--sp-md);
    }

    .tariff-card__price-img {
        height: 36px;
        width: 283px; /* 36 * (275/35) ≈ 283 — сохраняем пропорцию эталона */
    }

    .tariff-card__cta {
        max-width: 300px;
        min-height: 48px;
    }

    .tariff-card__feature {
        font-size: var(--fs-sm);
        padding: 4px 0;
        line-height: 1.4;
    }

    .tariff-card__badge {
        font-size: 11px;
        padding: 10px 18px 9px;
    }

    .tariff-card--featured .tariff-card__price-img {
        height: 60px;
        width: 472px; /* 60 * (275/35) — +~15% к прежнему 52/409 */
    }

    .tariff-card--featured .tariff-card__cta {
        max-width: 340px;
    }
}

@media (min-width: 1440px) {
    .tariffs {
        padding: var(--sp-3xl) 0;
    }

    .tariffs__grid {
        max-width: 1300px;
        gap: var(--sp-lg);
    }


    .tariff-card {
        padding: var(--sp-lg) var(--sp-lg);
    }

    .tariff-card__name {
        font-size: var(--fs-md);
        line-height: 1.5;
    }

    .tariff-card__feature {
        font-size: var(--fs-base);
        line-height: 1.45;
        padding: 5px 0;
    }

    .tariff-card__price-img {
        height: 44px;
        width: 346px; /* 44 * (275/35) ≈ 346 — сохраняем пропорцию эталона */
    }

    .tariff-card__cta {
        font-size: var(--fs-sm);
        padding: 12px var(--sp-lg);
        max-width: 340px;
        min-height: 52px;
    }

    .tariff-card__badge {
        font-size: 12px;
        padding: 11px 20px 10px;
    }

    .tariff-card--featured .tariff-card__price-img {
        height: 62px;
        width: 487px; /* 62 * (275/35) — +~15% к прежнему 54/424 */
    }

    .tariff-card--featured .tariff-card__cta {
        max-width: 390px;
    }
}