/*
Посадочная /cena (№115). Подключается только из cena.html — классы cena-*, цвета и шрифты из переменных base.css.
Золото --color-accent — только линии и рамки; золотой текст на светлом — --color-accent-dark.
*/

.cena a:not(.btn) {
    color: var(--color-primary);
    text-decoration: underline;
}

.cena a:not(.btn):hover {
    color: var(--color-primary-dark);
}

.cena a:focus-visible,
.cena-faq summary:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: var(--focus-ring);
}

.cena-nowrap {
    white-space: nowrap;
}

.cena-muted {
    color: var(--color-text-muted);
}

.cena-hero {
    max-width: var(--content-max-width);
    margin-bottom: var(--space-32);
}

.cena-hero__lead {
    margin: 0;
    font-size: 20px;
}

.cena-section {
    margin-bottom: var(--space-48);
}

.cena-text {
    max-width: var(--content-max-width);
}

/* Две карточки «бесплатно / за деньги» */
.cena-split {
    display: flex;
    flex-wrap: wrap;
}

.cena-card {
    flex: 1 1 18em;
    max-width: 100%;
    margin: 0 var(--space-24) var(--space-24) 0;
    padding: var(--space-24);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

@supports (inset: 1px) {
    .cena-split {
        gap: var(--space-24);
    }

    .cena-card {
        margin: 0;
    }
}

.cena-card--paid {
    border-top: 4px solid var(--color-accent);
}

.cena-card__label {
    margin: 0 0 var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.cena-card--paid .cena-card__label {
    color: var(--color-accent-dark);
}

.cena-card__price {
    margin: 0 0 var(--space-16);
    font-family: var(--font-family-head);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-primary);
    white-space: nowrap;
}

.cena-card h3 {
    margin-bottom: var(--space-12);
}

.cena-card__lead {
    margin-bottom: var(--space-12);
    color: var(--color-text-muted);
}

/* Списки с галочкой: состав (синяя) и условия (тёмное золото) */
.cena-list,
.cena-check {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cena-list li,
.cena-check li {
    position: relative;
    padding-left: 1.75em;
}

.cena-list li {
    margin-bottom: var(--space-8);
}

.cena-list li:last-child {
    margin-bottom: 0;
}

.cena-list li::before,
.cena-check li::before {
    content: "";
    position: absolute;
    left: 0.35em;
    top: 0.3em;
    width: 0.4em;
    height: 0.75em;
    border: solid var(--color-primary);
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

.cena-check {
    margin-bottom: var(--space-16);
}

.cena-check li {
    margin-bottom: var(--space-16);
    padding-bottom: var(--space-16);
    border-bottom: 1px solid var(--color-border);
}

.cena-check li::before {
    border-color: var(--color-accent-dark);
}

.cena-check strong,
.cena-check span {
    display: block;
}

.cena-check strong {
    margin-bottom: var(--space-4);
}

.cena-check span {
    color: var(--color-text-muted);
}

/* CTA: светло-золотая подложка, золото — только рамкой */
.cena-cta {
    max-width: var(--content-max-width);
    margin-bottom: var(--space-48);
    padding: var(--space-32);
    background: var(--color-accent-bg);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-card);
}

.cena-cta h2 {
    margin-bottom: var(--space-12);
}

.cena-cta p {
    margin-bottom: var(--space-24);
}

/* FAQ на details/summary — без JS */
.cena-faq {
    border-top: 1px solid var(--color-border);
}

.cena-faq details {
    border-bottom: 1px solid var(--color-border);
}

.cena-faq summary {
    position: relative;
    min-height: 44px;
    padding: var(--space-16) 2em var(--space-16) 0;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.cena-faq summary::-webkit-details-marker {
    display: none;
}

.cena-faq summary::after {
    content: "+";
    position: absolute;
    right: 0.25em;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    line-height: 1;
    color: var(--color-primary);
}

.cena-faq details[open] summary::after {
    content: "−";
}

.cena-faq details p {
    margin: 0 0 var(--space-16);
}

/* Закреплённая кнопка — только на мобиле. fixed, а не sticky: overflow-x: hidden на html/body
   из responsive.css ломает sticky. Отступ у body (стили только этой страницы) не даёт бару
   закрыть конец страницы и футер. */
.cena-sticky {
    display: none;
}

@media (max-width: 768px) {
    /* бар = кнопка 52px + отступы + рамка; плюс зазор, чтобы низ футера не упирался в бар */
    body {
        padding-bottom: calc(52px + 2 * var(--space-12) + 1px + var(--space-16));
    }

    .cena-hero__lead {
        font-size: var(--font-size-base);
    }

    .cena-card {
        padding: var(--space-16);
    }

    .cena-card__price {
        font-size: 34px;
    }

    .cena-cta {
        padding: var(--space-24) var(--space-16);
    }

    .cena-sticky {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10;
        padding: var(--space-12) var(--space-16);
        background: var(--color-surface);
        border-top: 1px solid var(--color-border);
        box-shadow: 0 -4px 16px rgba(31, 41, 55, 0.08);
    }

    .cena-sticky .btn {
        height: 52px;
        min-height: 52px;
        padding: 0 var(--space-16);
    }
}

@media print {
    .cena-sticky {
        display: none;
    }
}