/*
 * Секция «SEO-текст» — развёрнутый текстовый блок последним экраном коммерческой
 * страницы (главная, витрина /courses/, хабы языков, карточки курсов).
 * Грузится после base.css, УСЛОВНО по слагу шаблона (см. inc/enqueue.php).
 *
 * Почему отдельный файл, а не base.css: секция автономна (свой лейаут, своя
 * типографика длинного текста, свой сворачиватель) и не является сквозным
 * примитивом — в base.css из неё ничего не переиспользуется. Файл маленький
 * (~5 КБ), поэтому дублирование в нескольких записях карты ассетов дешевле,
 * чем рост глобального бандла на каждой странице сайта, включая блог и служебные.
 *
 * Разметка/хуки для developer (реальные тексты подставит он):
 *   .seo-text            — секция целиком (полоса фона + декор)
 *   .seo-title           — H2 секции (id = seo-text-title, aria-labelledby секции)
 *   [data-seo-body]      — контейнер прозы; на него JS вешает кламп на телефоне
 *   [data-seo-toggle]    — кнопка «Читать далее» (в разметке hidden, показывает JS)
 *   .seo-list            — маркированный список (опциональный)
 *
 * Все классы под префиксом seo-* — стили не растекаются на другие страницы.
 *
 * @package easy-peasy
 */

/* ==========================================================================
   ПОЛОСА СЕКЦИИ
   ========================================================================== */
/* Секция вторична по весу и стоит между конверсионным финальным CTA и тёмным
   подвалом. Отделяем её тёплой полосой surface-2 + волосяной линией сверху:
   так текст читается как отдельный «эпилог» страницы, а не как продолжение
   оффера. Вес снижаем размером и воздухом (.section--tight в разметке),
   а НЕ приглушением цвета текста: 2000 знаков серым — это провал по читаемости
   и по контрасту. */
.seo-text{
  position:relative;
  background:var(--surface-2);
  border-top:1px solid var(--line);
  /* декоративное пятно уходит за край — клипаем, иначе горизонтальный скролл */
  overflow:clip;
}

/* Мягкое бренд-свечение в дальнем углу: плоская полоса под подвалом выглядит
   мёртвой. Чистый CSS-градиент, без слоёв и фильтров — на перф не влияет. */
.seo-text::before{
  content:"";
  position:absolute;
  top:-180px;
  inset-inline-end:-140px;
  width:min(420px,52vw);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,var(--brand-soft-glow),transparent 70%);
  pointer-events:none;
}

/* ==========================================================================
   СЕТКА: РЕЛЬС С ЗАГОЛОВКОМ + КОЛОНКА ПРОЗЫ
   ========================================================================== */
/* Мера строки — главный вопрос этой секции. .wrap в теме растянут до --bleed
   (1536px) под маркетинговые гриды; пустить туда сплошной текст нельзя —
   на 1440 это ~150 знаков в строке, вдвое больше комфортных 65–75.
   Решение: не сужать текст потолком внутри широкого контейнера (тогда справа
   зияет пустой коридор), а СОБРАТЬ слаб из двух треков — рельс с заголовком
   и колонка прозы 700px (~68–72 знака при 19px Manrope) — и отцентровать его.
   Тот же приём, что у статьи блога (--bs-text:700px), поэтому длинный текст
   на сайте везде читается одинаково.
   Многоколоночная (CSS columns) газетная вёрстка отброшена сознательно: она
   заставляет читать вниз-вверх-вниз, ломается при сворачивании и на планшете. */
.seo-slab{
  --seo-rail:340px;
  --seo-text-w:700px;
  --seo-gap:clamp(28px,4vw,56px);
  max-width:var(--seo-text-w);
  margin-inline:auto;
}
/* Планшет: одна колонка, но по центру полосы — иначе текст жмётся к левому
   краю широкого .wrap и справа остаётся мёртвое поле. */
@media(min-width:768px){
  .seo-slab{max-width:calc(var(--seo-text-w) + 60px)}
}
@media(min-width:1080px){
  .seo-slab{
    display:grid;
    grid-template-columns:minmax(0,var(--seo-rail)) minmax(0,calc(var(--seo-text-w) + var(--seo-gap)));
    gap:var(--seo-gap);
    justify-content:center;
    align-items:start;
    max-width:none;
  }
  /* Волосяная линия между колонками — «поле тетради». Без неё рельс с коротким
     заголовком висит в пустоте слева от длинного текста и читается как дыра
     в макете, а не как вторая колонка. */
  .seo-col{
    padding-inline-start:var(--seo-gap);
    border-inline-start:1px solid var(--line);
  }
}
@media(min-width:1280px){
  .seo-slab{--seo-rail:380px}
}

/* Рельс: eyebrow + H2 + акцентная черта. На больших экранах липнет — пока
   читаешь длинный текст, заголовок раздела остаётся перед глазами. */
.seo-rail{display:flex;flex-direction:column;gap:14px;margin-bottom:26px}
@media(min-width:1080px){
  .seo-rail{
    margin-bottom:0;
    position:sticky;
    top:calc(var(--eps-header-h) + 28px);
    /* Оптическая подгонка: у первой строки прозы половина интерлиньяжа (~8px)
       уходит над буквами, поэтому геометрически выровненная по верху колонки
       черта визуально висит выше текста. Сдвигаем рельс на эту половину. */
    padding-top:8px;
  }
}
.seo-rule{
  width:56px;height:4px;border-radius:var(--r-pill);
  background:var(--grad-brand);
  order:-1; /* черта над eyebrow — «начало главы» */
}

/* H2 секции. Семантически это H2 (иерархия страницы не ломается), но по кеглю
   он МЕНЬШЕ маркетинговых .sec-title выше: ранг задаём размером и воздухом. */
.seo-title{
  font-size:clamp(1.3rem,1.05rem + 1.05vw,1.85rem);
  font-weight:800;line-height:1.2;letter-spacing:-.01em;
  text-wrap:balance;overflow-wrap:break-word;
  /* hyphens тут НЕЛЬЗЯ: в узком рельсе браузер рвёт слова («ино-странных»),
     и заголовок выглядит сломанным. Переносы решает text-wrap:balance. */
}

/* ==========================================================================
   ПРОЗА
   ========================================================================== */
/* Кегль на телефоне 17px (не 16): это единственный на странице блок сплошного
   чтения, и +1px тут заметно снижает утомляемость. Интерлиньяж 1.72 — верх
   рекомендованного диапазона 1.5–1.75, как у статьи блога.
   Цвет — полный --text (ink), а не --text-muted: приглушать длинный текст
   нельзя, вторичность даёт лейаут. Контраст ink на surface-2: 13.9:1 (светлая),
   14.6:1 (тёмная) — с запасом выше AA. */
.seo-body{
  /* Высота свёрнутого превью. Единственный источник правды: JS читает эту же
     переменную (assets/js/pages/seo-text.js), поэтому CSS и скрипт не разъедутся.
     28em ≈ 480px на телефоне — это полный первый абзац плюс начало второго:
     мысль дочитывается до конца, и видно, что текст продолжается. */
  --seo-clamp:28em;
  /* Высота растушёвки у нижней кромки. Держим короткой: чем длиннее градиент,
     тем больше живого текста читается полупрозрачным. */
  --seo-fade:3.5em;
  font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);
  line-height:1.72;
  color:var(--text);
}
.seo-body > * + *{margin-top:1.15em}
.seo-body p{overflow-wrap:break-word}
/* Первый абзац крупнее — «вход» в текст, глазу есть за что зацепиться. */
.seo-lede{font-size:1.08em;font-weight:500}

/* H3 внутри текста: на ступень ниже .seo-title, тем же шрифтом заголовков. */
.seo-body h3{
  font-family:var(--font-head);
  font-size:clamp(1.02rem,.95rem + .4vw,1.2rem);
  font-weight:800;line-height:1.3;
  margin-top:1.65em;
  scroll-margin-top:calc(var(--eps-header-h) + var(--eps-scroll-gap));
}

/* Ссылки видны как ссылки: цвет + подчёркивание. Одинаково со статьёй блога.
   Контраст --blue на surface-2: 6.9:1 (светлая тема), 7.4:1 (тёмная). */
.seo-body a{
  color:var(--blue);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;
  text-decoration-color:color-mix(in srgb,var(--blue) 45%,transparent);
  transition:text-decoration-color .16s ease,color .16s ease;
}
.seo-body a:hover{text-decoration-color:var(--blue)}
.seo-body strong{font-weight:700}

/* Список: точка с бренд-градиентом и мягким ореолом. Маркер декоративен,
   смысл несёт текст пункта, поэтому цвет ничего не кодирует. */
.seo-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.62em}
.seo-list li{position:relative;padding-left:30px;line-height:1.66}
.seo-list li::before{
  content:"";position:absolute;left:5px;top:.62em;
  width:8px;height:8px;border-radius:50%;
  background:var(--grad-brand);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 14%,transparent);
}

/* ==========================================================================
   СВОРАЧИВАНИЕ (только телефон, прогрессивное улучшение)
   ========================================================================== */
/* Зачем: на 360px 2200 знаков — это 8–10 экранов прокрутки между последним CTA
   и подвалом с контактами и навигацией. На десктопе тот же текст занимает
   ~1,5 экрана в узкой колонке, и лишний клик там не окупается — поэтому кламп
   живёт ТОЛЬКО до 768px.
   Как сделано: текст всегда целиком в HTML (никакого display:none в разметке),
   лишнее подрезается max-height + mask-image, кнопка появляется только когда
   JS убедился, что текст реально длинный. Без JS — полный текст и никакой
   кнопки. Маска (а не градиентная плашка поверх) выбрана намеренно: она
   не зависит от цвета фона и одинаково работает в светлой и тёмной теме. */
.seo-body.is-clamped{
  max-height:var(--seo-clamp);
  overflow:clip;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - var(--seo-fade)),transparent);
  mask-image:linear-gradient(to bottom,#000 calc(100% - var(--seo-fade)),transparent);
}
/* Раскрытие/сворачивание анимируем max-height в пикселях (значение ставит JS),
   иначе переход к auto не анимируется вовсе. При prefers-reduced-motion
   глобальное правило base.css срезает длительность до нуля. */
.seo-body.is-collapsible{transition:max-height .32s ease}

.seo-toggle{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  margin-top:18px;min-height:44px;padding:11px 22px;
  font-family:var(--font-body);font-weight:700;font-size:.95rem;line-height:1.1;
  color:var(--text);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-pill);
  box-shadow:var(--sh-sm);cursor:pointer;
  transition:border-color .18s ease,box-shadow .18s ease,color .18s ease;
}
/* [hidden] обязан побеждать display:inline-flex — иначе кнопка видна без JS. */
.seo-toggle[hidden]{display:none}
.seo-toggle:hover{border-color:color-mix(in srgb,var(--primary) 45%,var(--line));color:var(--accent-strong);box-shadow:var(--sh-md)}
/* Явное кольцо: глобальное :focus-visible из base.css имеет специфичность 0-1-0
   и проигрывает .seo-toggle:hover — у пользователя клавиатуры, чья мышь лежит
   на кнопке, фокус-кольцо пропадало бы. */
.seo-toggle:focus-visible{box-shadow:var(--ring);border-color:color-mix(in srgb,var(--primary) 45%,var(--line))}
.seo-toggle:active{transform:translateY(1px)}
.seo-toggle svg{width:18px;height:18px;flex:none;transition:transform .22s ease}
.seo-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
/* Подпись переключается разметкой, а не JS-строкой: перевод остаётся в PHP. */
.seo-toggle .seo-t-less{display:none}
.seo-toggle[aria-expanded="true"] .seo-t-more{display:none}
.seo-toggle[aria-expanded="true"] .seo-t-less{display:inline}

@media(min-width:768px){
  /* Страховка: даже если JS не успел снять класс при смене ширины, на планшете
     и выше текст всегда полный. */
  .seo-body.is-clamped{max-height:none;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .seo-toggle{display:none}
}