/*
 * assets/css/pages/pricing.css — /pricing/
 *
 * Только то, чего нет в components.css/base.css: тёмный hero-контейнер этой конкретной
 * страницы и сетка карточек пакетов. Кнопки, бейджи, аккордеон, карточки — общие компоненты,
 * здесь не переопределяются. Только var(--am-*), см. CONTRACT.md §10.
 */

/* -------------------------------------------------------------------------------------
 * Hero — единственное место на странице с эйбро-лейблом (не над каждой секцией подряд).
 * ----------------------------------------------------------------------------------- */

.am-pricing__hero {
    /* Тот же приём, что .am-home-hero/.am-catalog-hero: панель edge-to-edge до max-width
     * страницы, центр — auto-margin. Горизонтальный инсет текста даёт СВОЙ padding-inline
     * у .am-pricing__hero-inner (класс am-container в pricing.php) — здесь его не дублируем,
     * иначе текст получит двойной отступ. */
    background: var(--am-grad-hero);
    color: var(--am-text-on-dark);
    border-radius: var(--am-r-2xl);
    max-width: var(--am-container);
    margin-inline: auto;
    padding-block: var(--am-pad-section);
    box-shadow: var(--am-sh-hero);
    animation: am-fade-up-in var(--am-dur-hero) var(--am-ease-out-soft);
}

.am-pricing__hero-inner {
    max-width: var(--am-container-text);
}

.am-pricing__hero .am-eyebrow {
    color: var(--am-action);
    margin-bottom: var(--am-s-3);
}

.am-pricing__hero-title {
    color: var(--am-white);
    text-wrap: balance;
}

.am-pricing__hero-lead {
    margin-top: var(--am-s-4);
    color: var(--am-text-on-dark-muted);
    text-wrap: pretty;
}

.am-pricing__hero-note {
    margin-top: var(--am-s-4);
    color: var(--am-text-on-dark-subtle);
}

/* -------------------------------------------------------------------------------------
 * Что такое токен / правила списания — проза ограничена по ширине строки (components.css
 * не содержит --am-measure-обёртку сама, .am-prose уже её задаёт из base.css).
 * ----------------------------------------------------------------------------------- */

.am-pricing__explain h2,
.am-pricing__rules h2,
.am-pricing__faq h2 {
    text-wrap: balance;
}

.am-pricing__packages-lead {
    margin-top: var(--am-s-2);
    max-width: 56ch;
}

/* -------------------------------------------------------------------------------------
 * Пакеты
 * ----------------------------------------------------------------------------------- */

.am-pricing__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--am-s-4);
    margin-top: var(--am-s-6);
}

.am-pricing__pkg {
    display: flex;
    flex-direction: column;
    gap: var(--am-s-2);
    position: relative;
}

.am-pricing__pkg--featured {
    border-color: var(--am-link);
    box-shadow: var(--am-sh-raised);
}

.am-pricing__pkg-badge {
    align-self: flex-start;
}

.am-pricing__pkg-name {
    font-weight: var(--am-fw-bold);
    color: var(--am-text-label);
}

.am-pricing__pkg-price {
    font-size: var(--am-fs-h1);
    font-weight: var(--am-fw-black);
    letter-spacing: var(--am-ls-heading);
    color: var(--am-text);
    line-height: var(--am-lh-tight);
}

.am-pricing__pkg-tokens {
    font-weight: var(--am-fw-semi);
    color: var(--am-link-hover);
}

.am-pricing__pkg-rate {
    font-size: var(--am-fs-2xs);
    color: var(--am-text-subtle);
}

.am-pricing__pkg-convert {
    margin-top: var(--am-s-2);
    padding-left: var(--am-s-4);
    list-style: disc;
    color: var(--am-text-muted);
    font-size: var(--am-fs-xs);
    display: flex;
    flex-direction: column;
    gap: var(--am-s-1);
}

.am-pricing__pkg-cta {
    margin-top: var(--am-s-3);
    width: 100%;
}

/* Своя сумма — форма в той же сетке .am-pricing__grid, наследует .am-pricing__pkg целиком.
 * Кнопка отдельно прибита к низу: высота формы «дышит» вслед за текстом превью токенов. */
.am-pricing__pkg--custom .am-pricing__pkg-cta {
    margin-top: auto;
}

.am-pricing__grid-note {
    margin-top: var(--am-s-4);
    max-width: 60ch;
}

/* -------------------------------------------------------------------------------------
 * Правила списания — две карточки-объяснения, не сетка «иконка+заголовок+текст» ради
 * количества: ровно два реальных правила, каждое со своей формулировкой (CONTRACT §11).
 * ----------------------------------------------------------------------------------- */

.am-pricing__rules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--am-s-4);
    margin-top: var(--am-s-5);
    margin-bottom: var(--am-s-4);
}

/* -------------------------------------------------------------------------------------
 * Ссылка внутри прозы — axe link-in-text-block (serious): a { text-decoration:none } в
 * base.css убирает единственное отличие ссылки от текста, кроме цвета. Ссылка на оферту
 * (блок «Как списываются токены») живёт в .am-small абзаце с текстом вокруг.
 * ----------------------------------------------------------------------------------- */

.am-pricing__rules .am-small a {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* -------------------------------------------------------------------------------------
 * FAQ — .am-faq (parts/faq.php), та же минимальная обвязка, что в tool.css/home.css/group.css.
 * ----------------------------------------------------------------------------------- */

.am-faq {
    margin-top: 0;
}

.am-faq__heading {
    margin-bottom: var(--am-s-4);
}

@media (prefers-reduced-motion: reduce) {
    .am-pricing__hero {
        animation: none;
    }
}