/**
 * Flora — общий слой ширины текстовых страниц.
 *
 * Единственный источник правды по горизонтальным отступам «читальных» страниц
 * (О компании, Доставка, Оферта, Правила, Возврат, Политика, Согласие,
 * Контакты, Партнёры, Вакансии, Упаковка, Фото, Видео, Реквизиты).
 *
 * Зачем файл вообще нужен. CSS этих страниц лежит ВНУТРИ шаблонов, в inline
 * <style> шорткода, то есть в теле документа — он выигрывает по позиции у
 * любого файла из <head>. Поэтому перекрыть их «сверху» нельзя, но можно
 * подсунуть значения: CSS-переменные НАСЛЕДУЮТСЯ, а не перекрываются
 * специфичностью, и достают до inline-блоков. Шаблоны потребляют токены
 * отсюда, а не хардкодят свои 15/20/25/40px.
 *
 * До введения слоя ширина текста на 430px разъезжалась от 64% (О компании)
 * до 89% (Видео): отступы складывались из гуттера .col-full (22.65px),
 * контейнера страницы и секции.
 */

:root {
    /* Отступ от края экрана до текста. Мобильный стандарт — 16px (iOS margin). */
    --flora-text-gutter: 16px;
    /* Внутренний отступ цветных блоков-карточек (баннеры, врезки). */
    --flora-text-block-pad: 18px;
    /* Зазор между декоративной левой линейкой раздела и текстом. Линейка —
       смысловой маркер раздела, поэтому она остаётся; вплотную к ней текст
       читаться не должен. */
    --flora-text-rule-gap: 13px;
    /* Предел ширины колонки; на мобиле не участвует, страховка для широких экранов. */
    --flora-text-max: 1000px;
}

@media (min-width: 769px) {
    :root {
        --flora-text-gutter: 24px;
        --flora-text-block-pad: 32px;
    }
}

/**
 * Гуттер даёт РОВНО ОДИН элемент в цепочке. Storefront вешает на .col-full
 * margin-inline ~22.65px, который складывался с отступами шаблона; на текстовых
 * страницах он больше не нужен — свой отступ страница задаёт токеном.
 */
@media (max-width: 768px) {
    body.flora-textpage .col-full {
        /* Гуттер даёт САМ слой, а не тема и не шаблон. Это отказоустойчиво:
           страница, у контейнера которой своего отступа нет (например «Видео»),
           не может уехать текстом в край экрана. Шаблоны, наоборот, свой
           горизонтальный отступ обнуляют, чтобы он не складывался с этим. */
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
        padding-left: var(--flora-text-gutter);
        padding-right: var(--flora-text-gutter);
        box-sizing: border-box;
    }
}

/**
 * Примитив для новых текстовых страниц: одна обёртка, один отступ, читаемая
 * ширина. Существующие страницы переводятся на токены выше без смены разметки.
 */
.flora-textpage-wrap {
    width: 100%;
    max-width: var(--flora-text-max);
    margin-inline: auto;
    padding-inline: var(--flora-text-gutter);
    box-sizing: border-box;
}


/* ==========================================================================
   Переходный слой для страниц, чьи шаблоны ещё не переведены на токены.

   Селектор body.flora-textpage даёт специфичность (0,2,1) против (0,1,0) у
   inline-правил шаблона, поэтому слой выигрывает без !important, несмотря на то
   что inline-CSS идёт позже по документу. По мере того как шаблон переводится
   на токены (как сделано в flora-aboutus-page.php), его классы отсюда убираются.
   ========================================================================== */

@media (max-width: 768px) {
    /* Контейнер страницы своего бокового отступа не добавляет: единственный
       отступ уже дал .col-full выше. Иначе они складываются. */
    body.flora-textpage .fp-container,
    body.flora-textpage .fo-container,
    body.flora-textpage .fph-page,
    body.flora-textpage .fpk-page,
    body.flora-textpage .fc-wrap {
        padding-left: 0;
        padding-right: 0;
    }

    /* Внутренние блоки — единый отступ по токену вместо 12/16/20/24/25/40px. */
    body.flora-textpage .fp-card,
    body.flora-textpage .fre-section,
    body.flora-textpage .fo-section,
    body.flora-textpage .fph-intro,
    body.flora-textpage .ft-section,
    body.flora-textpage .fc-msg-banner,
    body.flora-textpage .delivery-section,
    body.flora-textpage .flora-policy-wrapper,
    body.flora-textpage .flora-consent-wrapper,
    body.flora-textpage .flora-contact-info,
    body.flora-textpage .fre-info-card {
        padding-left: var(--flora-text-block-pad);
        padding-right: var(--flora-text-block-pad);
    }
}

@media (max-width: 600px) {
    /* Телефоны: внешняя карточка страницы распрямляется — её белый фон совпадает
       с фоном страницы, поэтому рамка, тень и скругление только режут ширину.
       Верхняя и нижняя границы остаются: на документных страницах (политика,
       согласие) они читаются как линейки документа. Внутренние карточки-блоки
       (.fre-info-card, .fp-card-stats и т.п.) остаются карточками. */
    body.flora-textpage .fre-section,
    body.flora-textpage .fo-section,
    body.flora-textpage .ft-section,
    body.flora-textpage .delivery-section {
        padding-right: 0;
        border-radius: 0;
        border-right: 0;
        box-shadow: none;
    }

    /* Левую линейку НЕ убираем — она размечает разделы документа. Но её не
       должны касаться ни текст, ни абсолютно спозиционированные маркеры
       списков (li::before с left:0 — зелёные галочки на правилах и возвратах:
       без зазора они садились ровно на линейку). */
    body.flora-textpage .fo-section,
    body.flora-textpage .ft-section,
    body.flora-textpage .fre-section {
        padding-left: var(--flora-text-rule-gap);
    }

    /* Доставка: линейка тонкая (2px) и собственный отступ внутреннего блока
       уже больше 50px — добавочный зазор был бы лишней тратой ширины. */
    body.flora-textpage .delivery-section {
        padding-left: 0;
    }

    /* Политика и Согласие: рамку документа на телефоне убираем ЦЕЛИКОМ.
       Она рисуется как border: 3px double, то есть двумя линиями, и съедает
       ширину без пользы; вдобавок при частичном снятии (право + скругление)
       рамка визуально не смыкалась. Освободившееся место отдаём тексту. */
    body.flora-textpage .flora-policy-wrapper,
    body.flora-textpage .flora-consent-wrapper {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding-left: 0;
        padding-right: 0;
    }
}
