/* /offer/Offer.mobile.css */
/* MOBILE overrides: только <=768.
   Тут же фикс back-link (чтобы не заезжал на карточку и был кликабельным). */

body[data-page="offer"] .offer-hero {
    /* место под back-link как на /hello + safe-area */
    padding-top: calc(54px + env(safe-area-inset-top));
}

/* back-link: фиксируем над карточкой, как системный элемент */
body[data-page="offer"] .back-link {
    position: absolute;
    left: calc(12px + env(safe-area-inset-left));
    top: calc(16px + env(safe-area-inset-top));
    z-index: 3;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    height: 28px;
    padding: 0 10px 0 11px;

    border-radius: 999px;
    text-decoration: none;

    background: #1e212cab;
    border: 1px solid rgba(255, 255, 255, 0.096);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);

    color: rgba(255, 255, 255, 0.75);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;

    opacity: .65;

    transform: translateZ(0);
    will-change: transform, opacity, background-color, border-color;
    transition:
        transform .18s ease,
        opacity .18s ease,
        background-color .18s ease,
        border-color .18s ease;
}

body[data-page="offer"] .back-link:active {
    transform: translateX(-3px) scale(0.98);
    opacity: 1;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.10);
}

body[data-page="offer"] .back-arrow {
    width: 7px;
    height: 7px;
    border-left: 2px solid rgba(255, 255, 255, 0.753);
    border-bottom: 2px solid rgba(255, 255, 255, 0.753);
    transform: rotate(45deg);
    margin-top: 1px;
}

body[data-page="offer"] .back-text {
    opacity: .9;
}

/* accessibility */
@media (prefers-reduced-motion: reduce) {
    body[data-page="offer"] .back-link {
        transition: none;
    }

    body[data-page="offer"] .back-link:active {
        transform: none;
    }
}

/* карточка чуть компактнее на мобиле */
body[data-page="offer"] .offer-card {
    padding: 18px;
    border-radius: 20px;
}

/* заголовки/текст чуть меньше */
body[data-page="offer"] .offer-title {
    font-size: 22px;
}

body[data-page="offer"] .offer-sub {
    font-size: 14px;
}

body[data-page="offer"] .p,
body[data-page="offer"] .list {
    font-size: 14px;
}

/* TOC: в 1 колонку */
body[data-page="offer"] .toc-grid {
    grid-template-columns: 1fr;
}

/* якоря: чуть больше отступ под хедер на мобиле */
body[data-page="offer"] .sec {
    scroll-margin-top: 110px;
}

/* чтобы absolute back-link позиционировался от секции */
body[data-page="offer"] .offer-hero {
    position: relative;
}

body[data-page="offer"] .toc-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
}

/* =========================================
   OFFER — MOBILE WIDTH OVERRIDE
   ========================================= */

body[data-page="offer"] .offer-hero {
    padding-left: calc(7px + env(safe-area-inset-left));
    padding-right: calc(7px + env(safe-area-inset-right));
}

/* TOC контейнер — оставить, но сделать тише */
body[data-page="offer"] .offer-toc {
    padding: 12px;
    /* было 14 */
    background: rgba(0, 0, 0, .18);
    /* было .24 */
    border-color: rgba(255, 255, 255, .05);
    /* было .07 */
}

/* заголовок чуть спокойнее */
body[data-page="offer"] .toc-title {
    opacity: .9;
}

/* TOC — строже скругление на мобилке */
body[data-page="offer"] .offer-toc {
    border-radius: 12px;
    /* было 20 */
}

/* TOC items — строже скругление на мобилке */
body[data-page="offer"] .toc-link {
    border-radius: 10px;
    /* было 14 */
}

/* TOC items — приглушить обводку на мобилке */
body[data-page="offer"] .toc-link {
    border-color: rgba(255, 255, 255, 0.05);
    /* было 0.06 */
}

/* Offer title — крупнее на мобилке */
body[data-page="offer"] .offer-title {
    font-size: 26px;
    /* было 28 */
    line-height: 1.1;
    /* чуть плотнее */
}

/* Divider between TOC and document content */
body[data-page="offer"] .offer-body::before {
    content: "";
    display: block;

    height: 1px;
    margin: 15px 4px 14px;

    background: rgba(255, 255, 255, 0.08);
}

/* Paragraph numbering — tighten spacing on mobile */
body[data-page="offer"] .n {
    min-width: 30px;
    /* было 38 */
}

/* Paragraph numbering — visual navigation */
body[data-page="offer"] .n {
    color: rgba(245, 194, 91, 0.884);
}

/* Section title — structural separation */
body[data-page="offer"] .sec-title {
    display: flex;
    gap: 8px;

    font-size: 17px;          /* было 16 */
    line-height: 1.3;

    color: rgba(231, 231, 231, 0.95);
}

/* =========================================
   FIX: badges (Версия / Формат) всегда в 1 строку на iOS
   ========================================= */

body[data-page="offer"] .offer-badges {
    flex-wrap: nowrap;
    /* запрет переноса */
    overflow-x: auto;
    /* если не влезает — скролл по X */
    -webkit-overflow-scrolling: touch;
    /* плавный скролл iOS */
    scrollbar-width: none;
    /* Firefox: спрятать скроллбар */
}

body[data-page="offer"] .offer-badges::-webkit-scrollbar {
    display: none;
    /* Safari/iOS: спрятать скроллбар */
}

body[data-page="offer"] .offer-badge {
    flex: 0 0 auto;
    /* не сжимать до переноса/ломания */
    white-space: nowrap;
    /* текст внутри плашки не переносится */
}