/* Стили страницы /poleznoe.
   Перенесены из встроенного <style> в views/useful-index.ejs (2026-09-26). Подключаются только на этой
   странице, тем же местом в <head>, где стоял блок, — порядок каскада прежний.
   Правки внешнего вида этой страницы — здесь, не в шаблоне. */

/* v3 резервирует низ под нижнюю панель «Позвонить / Telegram / Заявка» главной — здесь её нет, иначе под подвалом пустая полоса */
/* место под нижнюю панель телефона теперь нужно и здесь — панель есть на всех страницах (partials/float-ui.ejs, 2026-09-26) */
/* ШАПКА «ПОЛЕЗНОГО» — типографика как у каталога /formats (.fa-eyebrow/.fa-h1/.fa-lead из v3.css). */
/* С 2026-09-29 — кадр Босса (Я.Диск Page_Poleznoe/Poleznoe_Font.webp, 16:9), как шапки /blog и /equipment: пропорция шапки =
   пропорции кадра (виден целиком), светлая вуаль слева под текстом, на телефоне кадр целиком под текстом.
   Сборка: tools/make_page_hero.py → make_variants.js, файлы public/images/useful-page/poleznoe-hero-*. */
/* Шапка — стандарт 2:1 для всех внутренних страниц (Босс 2026-09-30: «не подгонять шапку под пропорции изображения один в один»); кадр — cover, точка фокуса — background-position. */
.ul-hero {
  position: relative; isolation: isolate;
  aspect-ratio: 2 / 1; padding: 120px 0 56px;
  background-color: #f5f3ee;
  background-image: url('/images/useful-page/poleznoe-hero-1920.jpg');
  background-image: image-set(url('/images/useful-page/poleznoe-hero-1920.webp') type('image/webp'), url('/images/useful-page/poleznoe-hero-1920.jpg') type('image/jpeg'));
  background-size: cover; background-position: center;
  border-bottom: 0.5px solid rgba(28,26,22,0.10);
}
.ul-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(245,243,238,0.94) 0%, rgba(245,243,238,0.84) 34%, rgba(245,243,238,0.25) 62%, rgba(245,243,238,0) 78%);
}
@media (min-width: 1921px) {
  .ul-hero { background-image: image-set(url('/images/useful-page/poleznoe-hero-2560.webp') type('image/webp'), url('/images/useful-page/poleznoe-hero.jpg') type('image/jpeg')); }
}
@media (max-width: 960px) {
  .ul-hero { background-image: image-set(url('/images/useful-page/poleznoe-hero-1280.webp') type('image/webp'), url('/images/useful-page/poleznoe-hero-1280.jpg') type('image/jpeg')); }
}
@media (max-width: 760px) {
  .ul-hero { aspect-ratio: auto; padding-bottom: calc(50vw + 12px); background-size: 100% auto; background-position: 50% calc(100% + 3.125vw); }
  .ul-hero::before { background: linear-gradient(to top, rgba(245,243,238,0) 0, rgba(245,243,238,0) calc(50vw - 70px), rgba(245,243,238,1) calc(50vw + 12px)); }
}
.ul-hero .fa-lead { margin-bottom: 0; }
/* Обложки карточек — кадры шапок самих разделов (Босс 2026-09-29: «у карточек используй их шапки-фоны»), поле cover
   в content/useful/<раздел>.md. Карточка квадратная, кадр 16:9 режется по центру; у «Фактов и традиций» в центре
   светлая дымка, а альбом и свечи справа — кадр сдвинут вправо (класс fa-card--<адрес раздела>). */
.fa-card--fakty-i-tradicii .fa-card-img { object-position: 85% 50%; }
/* Карточки — те же .fa-card, что в каталоге форматов. Без картинки — тёмная подложка, иначе светлый текст на светлом фоне. */
.fa-card { background: radial-gradient(circle at 70% 25%, #5a4526, #2b241c 60%, #1c1814); }
/* Под шапкой — пара вертикальных кадров блога, как у каталога /formats (сборка tools/make_blog_page_bg.py). */
.fa {
  padding: 56px 0 72px;
  background-color: #f5f3ee;
  background-image: url('/images/blog-page/blog-pair.jpg');
  background-image: image-set(url('/images/blog-page/blog-pair-1920.webp') type('image/webp'), url('/images/blog-page/blog-pair.jpg') type('image/jpeg'));
  background-size: 100% auto; background-repeat: repeat-y; background-position: center top;
}
@media (max-width: 960px) {
  .fa { background-image: image-set(url('/images/blog-page/blog-pair-1280.webp') type('image/webp'), url('/images/blog-page/blog-pair-1280.jpg') type('image/jpeg')); }
}
@media (max-width: 640px) { .ul-hero { padding-top: 104px; } }
.ul-empty { color: var(--mid); font-size: 15px; }

/* ШИРОКАЯ КОЛОНКА 1456px — как у /blog и /events (Босс 2026-09-30, вариант «а»): левый край шапки и карточек
   один на всех внутренних страницах, при переходах заголовок не прыгает. Поля — общие поля .wrap из v3.css (48 / 24 / 16px). */
.ul-hero > .wrap, .fa > .wrap { max-width: 1456px; }
/* Поля широкой колонки на экранах шире 960px — не меньше 96px (2026-09-30): иначе на ноутбуках 961–1551px плавающие кнопки
   «Наверх» (слева, 24–84px) и мессенджеры (справа) ложились на край контента. Колонка контента — до 1360px, по центру;
   при 1920 край тот же, что был (280px), на 1440 — 96px. На ≤960 — общие поля .wrap (24 / 16px). */
@media (min-width: 961px) {
  .ul-hero > .wrap, .fa > .wrap { max-width: none; padding-left: max(96px, calc((100% - 1360px) / 2)); padding-right: max(96px, calc((100% - 1360px) / 2)); }
}