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

.post-hero { padding: 120px 0 56px; background: #f5f3ee; border-bottom: 0.5px solid rgba(28,26,22,0.10); }
/* «Факты и традиции» — кадр Босса (Я.Диск Page_Traditions/Traditions_Font.webp, 16:9, 2026-09-29), как шапка /blog.
   Шаблон общий для всех разделов-статей, поэтому кадр — модификатором по адресу раздела (post-hero--<slug>);
   у раздела без своего кадра шапка прежняя, кремовая. Файлы public/images/useful-page/traditions-hero-*. */
/* Шапка — стандарт 2:1 для всех внутренних страниц (Босс 2026-09-30: «не подгонять шапку под пропорции изображения один в один»); кадр — cover, точка фокуса — background-position. */
.post-hero--fakty-i-tradicii {
  position: relative; isolation: isolate;
  aspect-ratio: 2 / 1;
  background-image: url('/images/useful-page/traditions-hero-1920.jpg');
  background-image: image-set(url('/images/useful-page/traditions-hero-1920.webp') type('image/webp'), url('/images/useful-page/traditions-hero-1920.jpg') type('image/jpeg'));
  background-size: cover; background-position: 50% 65%; /* фокус ниже центра — альбом внизу кадра */
}
/* Подложка под текстом плотнее и шире (2026-09-30): в шапке теперь вступление из двух абзацев вместо строки лида,
   концы строк заходили на пёструю часть кадра (контраст 1,9–2,8 на 1024–1280). Замер в браузере: 4,4–5,5. */
.post-hero--fakty-i-tradicii::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(245,243,238,0.95) 0%, rgba(245,243,238,0.9) 45%, rgba(245,243,238,0.55) 66%, rgba(245,243,238,0) 84%);
}
/* Колонка текста внутри кадра шапки. */
@media (min-width: 961px) {
  section.post-hero--fakty-i-tradicii { display: flex; flex-direction: column; padding-bottom: 36px; }
  .post-hero--fakty-i-tradicii > .wrap { flex: 1 1 auto; width: 100%; display: flex; flex-direction: column; align-items: flex-start; }
}
@media (min-width: 1921px) {
  .post-hero--fakty-i-tradicii { background-image: image-set(url('/images/useful-page/traditions-hero-2560.webp') type('image/webp'), url('/images/useful-page/traditions-hero.jpg') type('image/jpeg')); }
}
@media (max-width: 960px) {
  .post-hero--fakty-i-tradicii { background-image: image-set(url('/images/useful-page/traditions-hero-1280.webp') type('image/webp'), url('/images/useful-page/traditions-hero-1280.jpg') type('image/jpeg')); }
}
/* Кадр под текстом (текст на кремовом, фото целиком ниже) — на телефоне и планшете до 960px (было до 760px; с 2026-09-30
   вступление в шапке длинное и на ширине 761–960 заходило на фото без подложки). */
@media (max-width: 960px) {
  .post-hero--fakty-i-tradicii { aspect-ratio: auto; padding-bottom: calc(50vw + 12px); background-size: 100% auto; background-position: 50% calc(100% + 2.1875vw); }
  .post-hero--fakty-i-tradicii::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)); }
}
.post-hero h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 400; color: #1c1a16; line-height: 1.1; margin-bottom: 16px; max-width: 780px; }
.post-hero .excerpt { font-size: 1rem; color: #4a4640; max-width: 640px; line-height: 1.8; font-style: italic; }
/* Вступление раздела-карточек — в шапке вместо лида (Босс 2026-09-30); раньше жило под шапкой блоком .ft-intro. */
.post-hero-intro { max-width: 640px; }
.post-hero-intro p { font-size: 1rem; line-height: 1.8; color: #4a4640; margin: 0 0 12px; }
.post-hero-intro p:last-child { margin-bottom: 0; }


.post-cta { background: #1c1a16; padding: 48px; margin: 48px 0; text-align: center; }
.post-cta h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.8rem; color: #fff; margin-bottom: 12px; font-weight: 400; }
.post-cta p { font-size: 0.85rem; color: rgba(255,255,255,0.55); margin-bottom: 24px; }
.post-back { display: inline-flex; align-items: center; gap: 8px; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #8a8480; text-decoration: none; margin-bottom: 40px; border-bottom: 0; }
.post-back:hover { color: #9a7a32; }
/* у раздела-карточек поля шапки — общие поля .wrap (как у карточек под ней), у текстовой статьи — 24px */
@media (max-width: 960px) { .post-hero:not(.post-hero--cards) .wrap { padding: 0 24px; } }
@media (max-width: 640px) { .post-cta { padding: 36px 20px; } }
/* ── Раскладка «карточки» (layout: cards) ── */
.ft {
  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;
}
/* ШИРОКАЯ КОЛОНКА 1456px — как у /blog и /events (Босс 2026-09-30, вариант «а»): левый край шапки и карточек
   один на всех внутренних страницах, при переходах заголовок не прыгает. Поля — общие поля .wrap из v3.css (48 / 24 / 16px). */
.post-hero--cards > .wrap, .ft > .wrap { max-width: 1456px; } /* было: карточки 1320px, шапка 1160px — не на одной линии */
.ft-note p { font-size: 1rem; line-height: 1.8; color: #4a4640; margin: 0 0 14px; }
.ft-group { margin-bottom: 56px; }
.ft-note { max-width: 760px; margin: -6px 0 22px; }
.ft-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ft-card {
  position: relative; padding: 28px 26px 26px; border-radius: 10px;
  background: rgba(255,255,255,0.9); border: 1px solid rgba(154,122,50,0.28);
  box-shadow: 0 10px 28px rgba(28,26,22,0.07);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ft-card::before { content: ''; position: absolute; left: 26px; top: 0; width: 36px; height: 2px; background: var(--gold); border-radius: 0 0 2px 2px; }
@media (hover: hover) { .ft-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(28,26,22,0.11); border-color: rgba(154,122,50,0.5); } }
.ft-card-title { margin: 0 0 12px; font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 1.5rem; line-height: 1.15; color: #1c1a16; }
.ft-card-text p { margin: 0; font-size: 0.92rem; line-height: 1.75; color: #4a4640; }
.ft-card-text p + p { margin-top: 10px; }
/* Заключительный текст раздела — с 2026-09-29 на светлом фоне, без тёмной плашки и кнопки (плашка снята: под ней экран
   связи подвала, выходил дубль). Раньше .ft-cta + белый текст на #1c1a16. */
.ft-outro { margin: 16px 0 0; text-align: center; }
.ft-outro p { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; line-height: 1.3; color: #1c1a16; margin: 0 auto; max-width: 720px; }
.ft-outro a { color: var(--gold-text); }
@media (prefers-reduced-motion: reduce) { .ft-card { transition: none; } }
@media (max-width: 1100px) { .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .ft { padding: 32px 0 48px; }
  .ft-grid { grid-template-columns: 1fr; gap: 12px; }
  .ft-card { padding: 22px 20px 20px; }
  .ft-card::before { left: 20px; }
  .ft-group { margin-bottom: 40px; }
  .ft-outro p { font-size: 1.3rem; }
}
/* v3 резервирует низ под нижнюю панель «Позвонить / Telegram / Заявка» главной — здесь её нет, иначе под подвалом пустая полоса */
/* место под нижнюю панель телефона теперь нужно и здесь — панель есть на всех страницах (partials/float-ui.ejs, 2026-09-26) */
/* Поля широкой колонки на экранах шире 960px — не меньше 96px (2026-09-30): иначе на ноутбуках 961–1551px плавающие кнопки
   «Наверх» (слева, 24–84px) и мессенджеры (справа) ложились на край контента. Колонка контента — до 1360px, по центру;
   при 1920 край тот же, что был (280px), на 1440 — 96px. На ≤960 — общие поля .wrap (24 / 16px). */
@media (min-width: 961px) {
  .post-hero--cards > .wrap, .ft > .wrap { max-width: none; padding-left: max(96px, calc((100% - 1360px) / 2)); padding-right: max(96px, calc((100% - 1360px) / 2)); }
}