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

/* Фоны страницы блога — ТЗ-папка «Page_Blog» (Босс 2026-09-25): шапка — Blog_page_font.webp (стол с ноутбуком и
   микрофоном у окна, 4096×2305; сборка tools/make_page_hero.py, без ретуши; прежний кадр FON1 с «выключенным»
   планшетом снят — blog-hero4 в истории git), под статьями — два вертикальных кадра (FON2 | FON3) БОК К БОКУ: задуманы одной картинкой, правый край
   FON2 продолжается в левый край FON3. Пара повторяется вниз сколько нужно (статей будет много); стыки
   (FON2|FON3 и низ→верх на повторе) сглажены при сборке — tools/make_blog_page_bg.py.
   Файлы: public/images/blog-page/blog-hero5-*, blog-pair-*. */
/* Шапка — стандарт 2:1 для всех внутренних страниц (Босс 2026-09-30: «не подгонять шапку под пропорции изображения один в один»); кадр — cover, точка фокуса — background-position. */
.blog-hero {
  position: relative; isolation: isolate;
  /* ⚠️ Пропорция шапки = пропорции кадра (16:9) — картинка видна ЦЕЛИКОМ, без обрезки (Босс 2026-09-25: «отдалить
     план»). Раньше шапка была ниже кадра (2.5:1), cover резал верх и низ — выглядело как приближение. */
  aspect-ratio: 2 / 1; padding: 120px 0 64px;
  background-color: #f5f3ee;
  background-image: url('/images/blog-page/blog-hero5-1920.jpg');
  background-image: image-set(url('/images/blog-page/blog-hero5-1920.webp') type('image/webp'), url('/images/blog-page/blog-hero5-1920.jpg') type('image/jpeg'));
  background-size: cover; background-position: center;
  border-bottom: 0.5px solid rgba(28,26,22,0.10);
}
/* светлая вуаль слева — под текстом шапки: кадр яркий, но на столе тёмные предметы */
.blog-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%);
}
.blog-body {
  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;
  display: flow-root; /* поля фильтра и сетки (сверху и 80px снизу) остаются внутри — фон доходит до подвала */
}
/* Старые правила .blog-grid в v3.css (от снятого экрана блога главной) давали сетке серую подложку — пустая
   клетка последнего ряда серела, — а на телефоне серую «ленту» с полями −16px и прокруткой вбок. На кремовом
   фоне это почти не было видно, на картинке — видно; гасим здесь (бэклог «мёртвые .blog-grid»). */
.blog-grid { background: none; border: 0; }
@media (max-width: 640px) {
  .blog-grid { margin-left: 0; margin-right: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
  .blog-grid > * { flex: initial; scroll-snap-align: none; min-width: auto; }
}
@media (min-width: 1921px) {
  .blog-hero { background-image: image-set(url('/images/blog-page/blog-hero5-2560.webp') type('image/webp'), url('/images/blog-page/blog-hero5.jpg') type('image/jpeg')); }
}
@media (max-width: 960px) {
  .blog-hero { background-image: image-set(url('/images/blog-page/blog-hero5-1280.webp') type('image/webp'), url('/images/blog-page/blog-hero5-1280.jpg') type('image/jpeg')); }
  .blog-body { 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: 760px) {
  /* на телефоне кадр целиком по ширине внизу шапки, текст — над ним на кремовом; верх кадра (светлые шторы)
     растворяется в креме, без резкой границы */
  .blog-hero { aspect-ratio: auto; padding-bottom: calc(50vw + 12px); background-size: 100% auto; background-position: 50% calc(100% + 3.125vw); }
  .blog-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)); }
}
.blog-hero .label { display: block; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: #9a7a32; margin-bottom: 14px; }
.blog-hero h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 400; color: #1c1a16; line-height: 1.1; margin-bottom: 16px; }
.blog-hero p { font-size: 0.95rem; color: #4a4640; max-width: 520px; line-height: 1.8; }
/* ⚠️ РЯД КАРТОЧЕК ШИРЕ ОБЩЕГО КОНТЕЙНЕРА (Босс 2026-09-25: «размер карточек побольше, пошире»). Общий .wrap —
   1160px, карточка в три колонки выходила 354px при 1920. Здесь контейнер 1456px (как у экрана «Мой подход») —
   карточка ~453px, кегли и поля подняты вместе с ней. Фильтр живёт в том же .wrap — левый край у него и у сетки
   общий. Шапка (крошки, заголовок, лид) — на том же контейнере, чтобы текст стоял по левому краю карточек
   (Босс 2026-09-25: «выровняй шапку по карточкам»); поля у обоих — не меньше 96px на экранах шире 960px (правило
   в конце файла, 2026-09-30: плавающие кнопки ложились на контент), на ≤960 — общие поля .wrap из v3.css (24 / 16px).
   С 2026-09-30 та же широкая колонка — у всех внутренних страниц с карточками (Босс, вариант «а»). */
.blog-hero > .wrap, .blog-body > .wrap { max-width: 1456px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 56px; margin-bottom: 80px; }
.blog-card { position: relative; overflow: hidden; background: #fff; border: 0.5px solid rgba(28,26,22,0.10); padding: 0; display: flex; flex-direction: column; gap: 0; text-decoration: none; color: inherit; }
.blog-card[hidden] { display: none; }
.blog-card-meta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.blog-card-cat { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #9a7a32; }
/* border/padding/margin — гасим легаси .blog-card-date из v3.css (дата там была подвалом карточки с линией сверху):
   здесь дата в строке мета, линия над ней и сдвиг вниз были лишними (Босс 2026-09-25: «убери линию над датой») */
.blog-card-date { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #8a8480; border-top: 0; padding-top: 0; margin-top: 0; }
.blog-card-time { font-size: 0.68rem; color: #9a7a32; padding: 2px 8px; border: 0.5px solid rgba(154,122,50,0.3); }
.blog-card h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 400; line-height: 1.2; color: #1c1a16; }
.blog-card p { font-size: 0.95rem; color: #4a4640; line-height: 1.75; flex: 1; }
/* «Читать» внизу карточки снята (Босс 2026-09-25): при наведении — золотая дымка на всю карточку и овальная
   «Читать» по центру, тот же рисунок, что у карточек форматов (.fa-card-hover / .fx-card-hover в v3.css).
   Клавиатуре то же показывает :focus-visible. */
.blog-card-hover {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  opacity: 0; transition: opacity .28s;
  background: linear-gradient(rgba(230,199,122,.34), rgba(154,122,50,.44));
  backdrop-filter: blur(1px);
}
.blog-card-btn {
  padding: 14px 32px; border-radius: 999px; background: #e6c77a; color: #1c1a16;
  font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; white-space: nowrap; box-shadow: 0 10px 28px rgba(0,0,0,.35);
  transform: translateY(8px) scale(.96); transition: transform .28s;
}
.blog-card:hover .blog-card-hover, .blog-card:focus-visible .blog-card-hover { opacity: 1; }
.blog-card:hover .blog-card-btn, .blog-card:focus-visible .blog-card-btn { transform: none; }
.blog-card:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .blog-card-hover, .blog-card-btn { transition: none; } }
@media (hover: none) {
  /* на тачскрине кнопки нет ВООБЩЕ (Босс 2026-09-25: «человек просто нажимает на блок со статьёй — кнопки быть не
     должно»): вся карточка — ссылка, тап по ней открывает статью. display: none, а не opacity — иначе телефон
     «залипает» в :hover после тапа и на миг показывает дымку. Отличие от карточек форматов — сознательное. */
  .blog-card-hover { display: none; }
}
/* классы вместо инлайн-атрибутов style (CSP без 'unsafe-inline') */



/* две колонки уже с 1100px (как у каталога /formats): в три колонки крупная карточка там сжималась до ~300px */
@media (max-width: 1100px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card { padding: 32px 24px; }
  .blog-card h2 { font-size: 1.45rem; }
}
/* 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) {
  .blog-hero > .wrap, .blog-body > .wrap { max-width: none; padding-left: max(96px, calc((100% - 1360px) / 2)); padding-right: max(96px, calc((100% - 1360px) / 2)); }
}

/* Обложка события и отдельная непрозрачная текстовая часть. */
.blog-card { border-color: #ddd5c7; border-radius: 8px; box-shadow: 0 8px 24px rgba(39,30,15,.06); }
.blog-card-cover { position: relative; overflow: hidden; }
.blog-card-cover img { display: block; width: 100%; height: auto; object-fit: contain; transition: none; }
.blog-card-cover-label { position: absolute; left: 20px; bottom: 18px; padding: 7px 12px; background: #fff; color: #59451f; font: 500 13px/1.4 'Jost',sans-serif; border-radius: 3px; }
.blog-card-content { display: flex; flex: 1; flex-direction: column; gap: 16px; padding: 28px; background: #fff; }
.blog-card-content .blog-card-date { font-size: 12px; color: #625b50; letter-spacing: .04em; }
.blog-card-content .blog-card-time { font-size: 12px; color: #66501f; border-color: #d4c3a0; }
.blog-card-content h2 { font-size: clamp(28px, 2.2vw, 36px); line-height: 1.15; margin: 0; }
.blog-card-content p { margin: 0; color: #4a4338; font-size: 16px; line-height: 1.7; }
.blog-card-hover { background: rgba(68,46,8,.25); backdrop-filter: none; }
@media (hover:hover) { .blog-card:hover .blog-card-cover img { transform: none; } }
@media (max-width:640px) { .blog-grid { gap: 24px; } .blog-card { padding: 0; } .blog-card-content { padding: 24px; } .blog-card-content h2 { font-size: 30px; } }
@media (prefers-reduced-motion:reduce) { .blog-card-cover img { transition: none; } }