/* ========================================
   СТРАНИЦА «ЦЕНЫ» — членские взносы
   Префиксы: pr- (страница), pm- (прайс), pmm- (окно оплаты)
   v25 · 09.10.2026
   ========================================

   ЧТО БЫЛО ДО ПРАВКИ, замер пяти видов на трёх языках:
   - заголовок страницы 22.62 · 42.2 · 27.2 · 51.2 · 51.2 — ни одного на
     ступени; все шесть плавающих кеглей приходили из ЧЕТЫРЁХ clamp;
   - обложка 275 · 300 · 275 · 300 · 300, доля экрана 33% · 77% · 27% ·
     39% · 33%: на телефоне лёжа три четверти экрана, потому что правила
     низкого горизонтального у «Цен» не было;
   - межстрочных восемь (1 · 1.2 · 1.25 · 1.45 · 1.5 · 1.55 · 1.6 · 1.7),
     шесть мимо лестницы, и два уровня стояли на normal от шрифта;
   - отступов мимо шкалы 72;
   - границ ЧЕТЫРЕ при двух разрешённых: 768 объявлена трижды, плюс
     самодельная 780, плюс 480 и 375;
   - :focus-visible — одно правило на 157 блоков;
   - prefers-reduced-motion — ноль при 24 движущихся правилах;
   - 27 классов обслуживали СТАРЫЙ механизм, живший только на en и kg,
     и ещё 4 были мертвы вовсе.

   ЧТО УБРАНО ОТСЮДА СОВСЕМ:
   - .pr-card*, .pr-badge, .pr-plan-name, .pr-price*, .pr-features,
     .pr-cta-btn*, .pr-modal*, .pr-pay-*, .pr-cta — старая одиночная
     карточка с ценой, вбитой в разметку en/kg, и её окно оплаты.
     Чужие языки переведены на русский механизм, второй набор не нужен.
   - .pr-faq-* — то же понятие, что .ip-faq-* раздела «Инфо», снятое в
     компонент Accordion 38:63. «Цены» подключают css/info-pages.css и
     берут раскрывашку оттуда. ОДНО ОПРЕДЕЛЕНИЕ НА ОДНО ПОНЯТИЕ.
   ======================================== */

/* ---- ОБЛОЖКА ----
   Пол и воздух — общие крутилки раздела, те же, что у восьми соседних.
   Высоту на узких видах держит общее правило css/style.css:5384, куда
   .pr-hero.pr-hero внесён этой же правкой. */

.pr-hero {
    position: relative;
    min-height: var(--oblozhka-pol);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--oblozhka-vozduh) var(--pad-x) var(--oblozhka-vozduh-niz);
    overflow: hidden;
}

.pr-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--modal-bg-heavy) 0%, var(--alpha-black-85) 60%, var(--bg-primary) 100%);
    z-index: 1;
}

.pr-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.35;
}

.pr-hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
}

/* Заголовок и перебивка едут ОДНОЙ связкой: 40↔21, 32↔18, 26↔16 — ровно
   три ступени шкалы на каждом виде, как на остальных девяти разделах */
.pr-hero-title {
    font-size: var(--fs-hero);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin-bottom: var(--space-3);
}

.pr-hero-title span {
    color: var(--accent);
}

.pr-hero-subtitle {
    font-size: var(--fs-hero-sub);
    color: var(--text-secondary);
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.5;
}

/* ---- КОНТЕЙНЕР ---- */
.pr-container {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--section-y) var(--pad-x) var(--section-y);
}

/* ---- БЕСПЛАТНЫЙ ПЕРИОД ----

   Пока в app_settings стоит дата free_access_until и она не прошла,
   платформа открыта всем, кто вошёл. Это самое важное, что страница
   «Цены» может сказать человеку сегодня, поэтому блок стоит ПЕРВЫМ.

   Блок — свойство данных, а не разметки: дата прошла или стёрта в
   админке — он исчезает сам, строки в коде для этого трогать не надо.
   Текст приходит из site_content (ключи pricing_free_title и
   pricing_free_text) и меняется без выкладки. */

.pm-free {
    max-width: 900px;
    margin: 0 auto var(--space-6);
    padding: var(--space-4) var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--alpha-lime-06);
    border: var(--bw-hair) solid var(--alpha-lime-20);
}

.pm-free[hidden] { display: none; }

.pm-free-title {
    font-size: var(--fs-2xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.5;
    color: var(--accent);
    margin-bottom: var(--space-2);
}

.pm-free-text {
    font-size: var(--fs-base);
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
}

/* ---- КАРТОЧКА ПРАЙСА ----
   Поля standalone-карточки — Regular 24 по Card 29:65. Стояло 32/36,
   12/36 и 26/36: три разные пары на одну карточку. */

.pm-card {
    background: var(--surface-glass);
    border: var(--bw-hair) solid var(--alpha-lime-20);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto;
}

.pm-head {
    padding: var(--space-6) var(--space-6) var(--space-3);
}

/* Название карточки — тот же уровень, что заголовок секции на остальных
   шести страницах раздела: 26 на широких, 21 на узких */
.pm-title {
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
}

.pm-sub {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.5;
    margin-top: var(--space-2);
}

.pm-list {
    padding: 0 var(--space-6);
}

.pm-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-4) 0;
    border-bottom: var(--bw-hair) solid var(--border-subtle);
}

.pm-row:last-child { border-bottom: none; }

.pm-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--fs-base);
    line-height: 1.5;
}

.pm-note {
    display: block;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 400;
    margin-top: var(--space-2);
    line-height: 1.5;
}

.pm-right {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
}

.pm-val {
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: 1.5;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Сумма пришла из базы — она и есть товар строки */
.pm-val.set {
    font-size: var(--fs-lg);
    font-weight: 800;
    color: var(--accent);
}

/* Плашка — Badge 27:53: высота 24, 11 Medium, поля 0/8 */
.pm-tag {
    display: inline-flex;
    align-items: center;
    height: 24px;
    margin-left: var(--space-2);
    vertical-align: middle;
    background: var(--alpha-lime-12);
    color: var(--accent);
    font-size: var(--fs-2xs);
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-full);
}

.pm-foot {
    padding: var(--space-6);
    border-top: var(--bw-hair) solid var(--border-subtle);
}

.pm-foot h4 {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1.5;
    color: var(--accent);
    margin-bottom: var(--space-4);
}

.pm-feats {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3) var(--space-6);
}

.pm-feats li {
    position: relative;
    padding-left: var(--space-6);
    color: var(--text-secondary);
    font-size: var(--fs-base);
    line-height: 1.5;
}

/* ГАЛОЧКА-МАРКЕР ЖИВЁТ В `style.css` — одно определение на три списка
   (цены, спонсоры, что даём). Своя копия здесь перекрыла бы общую. */

/* Главное действие карточки. Высоту держит СВОЙСТВО, а не поля — иначе
   она едет за межстрочным содержимого (Button 17:82). Было 41 на узких */
.pm-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin-top: var(--space-6);
    padding: 0 var(--space-6);
    border-radius: var(--radius-full);
    border: var(--bw-hair) solid var(--accent);
    background: var(--accent);
    color: var(--accent-on);
    font-size: var(--fs-base);
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
    text-align: center;
    transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}

.pm-btn:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    transform: translateY(-1px);
}

.pm-btn:focus { outline: none; }

.pm-btn:focus-visible {
    outline: var(--bw-thick) solid var(--accent);
    outline-offset: 2px;
}

/* Состояние членства над кнопкой: до какого числа оплачено */
.pm-state {
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--alpha-lime-06);
    border: var(--bw-hair) solid var(--alpha-lime-20);
    color: var(--accent);
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}

.pm-state[hidden] { display: none; }

/* Турнирный взнос — не тариф, а факт: у каждого турнира он свой */
.pm-entry {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-6);
    max-width: 900px;
    margin: var(--space-6) auto 0;
    padding: var(--space-4) var(--space-6);
    border: var(--bw-hair) dashed var(--border-light);
    border-radius: var(--radius-lg);
}

.pm-entry-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--fs-base);
    line-height: 1.5;
}

.pm-entry-sub {
    display: block;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 400;
    margin-top: var(--space-2);
    line-height: 1.5;
}

.pm-entry-val {
    flex-shrink: 0;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: var(--fs-base);
    line-height: 1.5;
    white-space: nowrap;
}

/* ---- ВОПРОСЫ ----
   Сама раскрывашка живёт в css/info-pages.css (.ip-faq-*): это один
   компонент на весь раздел, Accordion 38:63. Здесь — только заголовок
   секции и подпись под ним. */

.pr-faq-title {
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: var(--space-3);
    text-align: center;
}

.pr-faq-title span { color: var(--accent); }

.pr-faq-lead {
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--fs-base);
    line-height: 1.5;
    /* МЕРА СТРОКИ, А НЕ СВОЁ ЧИСЛО: на 640 подпись (84 знака) ломалась на
       две строки уже на десктопе — померено, нужно 711. 80ch при кегле 16
       даёт около 800 и держит строку одной, не выпуская её за меру. */
    max-width: 80ch;
    margin: 0 auto var(--space-6);
}

.pr-faq-lead a { color: var(--accent); }

/* Между турнирным взносом и вопросами нужен воздух */
.pm-entry + .pr-faq-title { margin-top: var(--space-10); }

/* ---- ОКНО ВЫБОРА ПЕРИОДА И СПОСОБА ОПЛАТЫ ----
   Modal 26:143: ширину выбирают ЧИСЛОМ ПОЛЕЙ, не типом содержимого.
   Здесь два периода, четыре способа и кнопка — это md 520. Стояло 460.
   Поля 20 у шапки, тела и подвала. Стояло 32. */

.pmm-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: var(--alpha-black-85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
}

.pmm-overlay[hidden] { display: none; }

.pmm {
    background: var(--bg-card);
    border: var(--bw-hair) solid var(--border-light);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--space-4);
    position: relative;
}

/* Закрытие было целью 15x26 — в неё не попадает палец. Button 17:82:
   цель нажатия всегда 44 */
.pmm-close {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: var(--fs-xl);
    line-height: 1;
    cursor: pointer;
}

.pmm-close:hover { color: var(--text-primary); }

.pmm-close:focus-visible {
    outline: var(--bw-thick) solid var(--accent);
    outline-offset: 2px;
}

.pmm-title {
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
    margin-bottom: var(--space-4);
    padding-right: 44px;
}

.pmm-label {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1.5;
    color: var(--accent);
    margin-bottom: var(--space-3);
}

.pmm-opts {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

/* ВЫБРАННОЕ МЕНЯЕТ ТОЛЬКО ГРАНИЦУ — правило самого Card 29:65:
   «do not also change the fill, or selection and hover become
   indistinguishable». Стояли и граница, и заливка */
.pmm-opt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    min-height: 44px;
    /* КЕГЛЬ ЗАДАЁТСЯ, А НЕ ДОСТАЁТСЯ ОТ БРАУЗЕРА. У кнопки свой умолчальный
       размер: прогон намерил 13.33 — ступени такой нет. То же правило, что
       у межстрочного: «normal» и «не задано» — это ссылка на настройку
       браузера, а не значение. */
    font-size: var(--fs-base);
    line-height: 1.5;
    padding: var(--space-4);
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition-base);
}

.pmm-opt:hover { border-color: var(--border-light); }
.pmm-opt.on { border-color: var(--accent); }

.pmm-opt:focus-visible {
    outline: var(--bw-thick) solid var(--accent);
    outline-offset: 2px;
}

.pmm-opt-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--fs-base);
    line-height: 1.5;
}

.pmm-opt-sub {
    display: block;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 400;
    line-height: 1.5;
    margin-top: var(--space-2);
}

.pmm-opt-val {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: var(--fs-sm);
    line-height: 1.5;
    white-space: nowrap;
}

.pmm-opt.on .pmm-opt-val { color: var(--accent); }

/* Способы оплаты стали КНОПКАМИ: были div, и с клавиатуры в них не
   попасть вовсе. Нажатие даёт уведомление «скоро» */
.pmm-ways {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.pmm-way {
    min-height: 44px;
    padding: var(--space-3);
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: transparent;
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.5;
    position: relative;
    cursor: pointer;
    transition: border-color var(--transition-base);
}

.pmm-way:hover { border-color: var(--border-light); }

.pmm-way:focus-visible {
    outline: var(--bw-thick) solid var(--accent);
    outline-offset: 2px;
}

/* Плашка «скоро» — Badge 27:53, 11 Medium. Цвет был --text-dim: 3.14 на
   фоне, мимо AA, и решение 06.10 убирает его из текста */
.pmm-way-soon {
    position: absolute;
    top: -8px;
    right: var(--space-2);
    display: inline-flex;
    align-items: center;
    height: 20px;
    background: var(--bg-card);
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--radius-full);
    padding: 0 var(--space-2);
    font-size: var(--fs-2xs);
    font-weight: 500;
    line-height: 1;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pmm-go {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-full);
    border: none;
    background: var(--accent);
    color: var(--accent-on);
    font-size: var(--fs-base);
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
}

.pmm-go:focus-visible {
    outline: var(--bw-thick) solid var(--accent);
    outline-offset: 2px;
}

.pmm-hint {
    display: block;
    margin-top: var(--space-3);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.5;
    text-align: center;
}

/* ========================================
   УЗКИЕ ВИДЫ — только две границы, 992 и 640
   ======================================== */

@media (max-width: 992px) {
    /* Название карточки и заголовок вопросов — тот же уровень, что
       заголовок секции на остальных шести страницах раздела */
    .pm-title,
    .pr-faq-title {
        font-size: var(--fs-lg);
    }

    .pm-val.set {
        font-size: var(--fs-md);
    }

    .pm-head,
    .pm-list,
    .pm-foot {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .pm-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .pm-feats {
        grid-template-columns: 1fr;
    }

    .pm-entry {
        flex-direction: column;
        gap: var(--space-3);
    }
}

@media (max-width: 640px) {
    .pr-container {
        padding: var(--section-y-sm) var(--pad-x) var(--section-y);
    }

    .pm-note,
    .pm-entry-sub {
        font-size: var(--fs-xs);
    }

    .pmm-overlay {
        padding: var(--space-4);
    }

    .pmm {
        padding: var(--space-4);
    }

    .pmm-ways {
        grid-template-columns: 1fr;
    }
}

/* Телефон лёжа: обложка забирала 77% экрана. Эталон раздела — то же
   правило, что у турниров: пола нет, воздух узкий, КЕГЛИ НЕ ТРОГАЮТСЯ */
@media (max-height: 500px) and (orientation: landscape) {
    .pr-hero {
        min-height: 0;
        padding: var(--section-y-sm) var(--pad-x) var(--section-y-sm);
    }
}