/* ============================================================
   Посадочная страница (single-bufet_landing.php).

   Своих визуальных решений файл не вводит: страница собрана из принятых примитивов
   (.page/.crumb/.phead — base.css, лента .merch — catalog.css, полоса .ctaband — cta.css,
   перечисление .psteps/.pstep — process.css, пилюли .catnav__pill — catalog.css).
   Здесь только текстовая колонка содержимого, ритм между блоками и подчинение штатных
   блоков редактора токенам темы.

   ВНИМАНИЕ (docs/CLAUDE.md): базовые правила идут ВЫШЕ медиазапросов. Дописанное в конец
   файла правило молча отменяет мобильную ветку — специфичность у пары одинаковая, и решает
   порядок. В Task 5 так умерли пять мобильных правил сразу.
   ============================================================ */

/* ---- текстовая колонка содержимого -------------------------------------
   Ширина по тексту, а не по контейнеру: строка длиннее ~68 знаков читается тяжело.
   Служебная .prose (560px) для лендинга узка — она рассчитана на политику и оферту,
   а здесь журнальная подача с подзаголовками и картинками. */
.landing__body { margin-bottom: clamp(36px, 5vw, 72px); color: var(--ink-2); font-size: var(--fs-body); line-height: var(--lh-body); }
/* Первый абзац — лид: тот же приём, что на странице раздела, где лид набран --fs-lead.
   Весь текст лидовым кеглем читался бы как объявление, а не как статья. */
.landing__body > p:first-child { font-size: var(--fs-lead); line-height: 1.45; color: var(--ink-2); margin-bottom: 1.1em; }
.landing__body > * { max-width: 68ch; }
.landing__body > :first-child { margin-top: 0; }
.landing__body > :last-child { margin-bottom: 0; }
.landing__body p { margin: 0 0 .7em; }
.landing__body h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--ink); margin: 1.4em 0 .4em; }
.landing__body h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); color: var(--ink); margin: 1.2em 0 .35em; }
.landing__body ul, .landing__body ol { padding-left: 22px; margin: 0 0 1em; }
.landing__body li { margin-bottom: .35em; }
.landing__body strong { color: var(--ink); }
.landing__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---- штатные блоки редактора --------------------------------------------
   Тип записи живёт в блочном редакторе (решение 24 в docs/DECISIONS.md), поэтому
   изображение и галерея приходят его блоками. Радиусы и подписи — те же, что у плиты
   изделия, чтобы редакторская вставка не выглядела чужой на фоне карточек. */
.landing__body figure { margin: clamp(28px, 4vw, 48px) 0; }
/* max-width, а НЕ width: изображение, вставленное размером «Миниатюра» или с обтеканием,
   должно остаться тем размером, который выбрал редактор. Принудительные 100% растягивали
   схему на 150 px во всю колонку и отменяли обтекание. */
.landing__body img { display: block; max-width: 100%; height: auto; border-radius: var(--r-3); }
.landing__body figcaption { margin-top: 10px; font-size: var(--fs-cap); color: var(--ink-3); }
.landing__body .wp-block-image,
.landing__body .wp-block-gallery,
.landing__body .wp-block-embed { max-width: none; }
/* Раскладку галереи НЕ переопределяем. Своя сетка ломала штатную: ядро задаёт вложенным
   figure `width: calc(50% - gap)` правилом специфичности 0,3,1, и внутри grid-ячейки
   картинка занимала половину половины — четыре кадра в четверть ширины с пустотами
   (замерено: ячейка 500 px, фигура 246 px). Штатная раскладка сама респонсивна и знает
   про число колонок, выбранное в редакторе; нам остаются отступ и радиус. */
.landing__body .wp-block-gallery figure { margin: 0; }
.landing__body .wp-block-quote { margin: clamp(28px, 4vw, 48px) 0; padding-left: 22px; border-left: 2px solid var(--accent); font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.landing__body .wp-block-quote p { font-size: var(--fs-h4); }
.landing__body .wp-block-quote cite { display: block; margin-top: 10px; font-family: var(--font-body); font-style: normal; font-weight: 400; font-size: var(--fs-cap); color: var(--ink-3); }
/* Разделитель штатным <hr>: без правила браузер рисует объёмную серую линию,
   чужую в наборе с одной тонкой линией --line во всей теме. */
.landing__body .wp-block-separator { max-width: 68ch; margin: clamp(32px, 4vw, 56px) 0; border: 0; border-top: 1px solid var(--line); }

/* ---- блок компонента главной, вынесенный на внутреннюю страницу ------------
   `.landing__kids` — «Почему детская отдельный разговор» на посадочной странице,
   `.studio__block` — этапы и цифры условий на страницах студии («О мастерской»,
   «Как работаем»). В обоих случаях внутри стоит компонент главной (.psteps из
   process.css, .stats__grid из stats.css), которому там отступы даёт его секция
   (.process, .stats) вместе с фоном и собственным .shell. Здесь секции нет —
   значит нужен ровно вертикальный ритм и ничего больше.

   Правила общие намеренно: два разных отступа вокруг одного и того же компонента
   на соседних страницах видны глазом. */
.landing__kids,
.studio__block { padding-bottom: clamp(40px, 6vw, 72px); }
.landing__kids .sec-title,
.studio__block .sec-title { margin-bottom: clamp(24px, 3vw, 40px); }

/* ---- перелинковка: соседи на лендинге, лендинги на разделе, соседи у страниц студии ----
   ТРИ вызывателя — один примитив и одна пара правил. `.landing-nav` (spoke↔spoke и spoke→hub)
   стоит на посадочной странице, `.landing-links` (hub→spoke) — на странице раздела,
   `template-parts/studio/links.php` печатает его же на «О мастерской» и «Как работаем»
   (там ссылки заданы прямо: дерева у страницы студии нет). Все три страницы кончаются
   одинаково: полноширинная .ctaband, затем .shell с этим блоком.
   Расходиться им нельзя — посетитель видит одну и ту же вещь.

   Верхний отступ НЕНУЛЕВОЙ и появился по замеру, а не по вкусу: у .ctaband
   (cta.css) есть внутренний padding, но нет нижнего margin, а .shell даёт только боковые
   отступы — при `padding-block: 0 …` надзаголовок вставал в 9 px от кобальтовой полосы
   и читался как прилипший. Значение — принятый в этом файле ритм (.landing__kids,
   .landing__body), а не новое число. */
.landing-nav,
.landing-links { padding-block: clamp(40px, 6vw, 72px) var(--section-y); }
/* Надзаголовок — принятый примитив .eyebrow (base.css), а не своя шкала: два разных
   надзаголовка на одной странице (0.74rem/0.2em у .phead и ленты против собственных
   0.76rem/0.12em) видны глазом и не переживают правку токена --fs-eyebrow. */
.landing-nav .eyebrow,
.landing-links .eyebrow { margin: 0 0 16px; }
/* margin-bottom обнуляем, а горизонтальную прокрутку на телефоне НЕ дублируем:
   мобильная ветка .catnav уже описана в catalog.css и матчится сюда как есть. */
.landing-nav .catnav,
.landing-links .catnav { margin-bottom: 0; }
/* Подъём в раздел — переход другого рода, чем ссылка на соседа: тот же примитив,
   заполненный акцентом, как активная пилюля в мобильном макете. */
.catnav__pill--up { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* Медиазапросов у компонента нет намеренно. Кегль лида на телефоне уменьшать НЕ нужно:
   нижняя граница clamp у --fs-lead (1.18rem) уже крупнее корпусного --fs-body (1.075rem),
   и «1rem по аналогии с .catlead» делает лид МЕЛЬЧЕ обычного абзаца — ровно это и вышло
   при первой правке, поймано замером. Мобильную раскладку пилюль даёт ветка .catnav
   в catalog.css, галереи — штатные стили ядра. */