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

/* место под нижнюю панель телефона теперь нужно и здесь — панель есть на всех страницах (partials/float-ui.ejs, 2026-09-26) */
/* карточка без фото (новые форматы 2026-09-26, фото пока нет) — тёмная подложка, иначе светлый текст на светлом фоне */
.fa-card { background: radial-gradient(circle at 70% 25%, #5a4526, #2b241c 60%, #1c1814); }
/* ШАПКА КАТАЛОГА (Босс 2026-09-25): кадр Page_Formats/Formats_page_font.webp 4096×1755 ЦЕЛИКОМ — пропорция шапки = пропорции
   кадра (не 16:9!), сборка tools/make_formats_page_hero.py → make_variants.js. Вуаль слева под текстом, как у /blog и
   /equipment: слева в кадре лаунж, сцена — справа, её вуаль не трогает. */
/* Шапка — стандарт 2:1 для всех внутренних страниц (Босс 2026-09-30: «не подгонять шапку под пропорции изображения один в один»); кадр — cover, точка фокуса — background-position. */
.fa-hero {
  position: relative; isolation: isolate;
  aspect-ratio: 2 / 1; padding: 120px 0 64px;
  background-color: #f5f3ee;
  background-image: url('/images/formats-page/formats-hero-1920.jpg');
  background-image: image-set(url('/images/formats-page/formats-hero-1920.webp') type('image/webp'), url('/images/formats-page/formats-hero-1920.jpg') type('image/jpeg'));
  background-size: cover; background-position: center;
  border-bottom: 0.5px solid rgba(28,26,22,0.10);
}
.fa-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) {
  .fa-hero { background-image: image-set(url('/images/formats-page/formats-hero-2560.webp') type('image/webp'), url('/images/formats-page/formats-hero.jpg') type('image/jpeg')); }
}
@media (max-width: 960px) {
  .fa-hero { background-image: image-set(url('/images/formats-page/formats-hero-1280.webp') type('image/webp'), url('/images/formats-page/formats-hero-1280.jpg') type('image/jpeg')); }
}
@media (max-width: 760px) {
  /* телефон: текст сверху на кремовом, кадр целиком по ширине под ним (высота кадра = 1755/4096 ширины) */
  .fa-hero { aspect-ratio: auto; padding-bottom: calc(50vw + 12px); background-size: auto 50vw; background-position: 50% 100%; }
  .fa-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)); }
}
/* Типографика шапки — 1-в-1 с .blog-hero (views/blog.ejs) и .eq-hero (views/equipment.ejs). */
.fa-hero .fa-crumbs { margin-bottom: 28px; }
.fa-hero .fa-eyebrow { font-size: 0.62rem; font-weight: 500; letter-spacing: 0.22em; color: #9a7a32; margin-bottom: 14px; }
.fa-hero .fa-h1 { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.1; color: #1c1a16; margin: 0 0 16px; }
.fa-hero .fa-lead { font-size: 0.95rem; color: #4a4640; max-width: 520px; line-height: 1.8; margin: 0; }
/* Каталог под шапкой — на паре вертикальных кадров блога (blog-pair-*, сборка tools/make_blog_page_bg.py, общие с /blog). */
.fa {
  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')); }
}

/* ОСНОВНЫЕ СОБЫТИЯ (Босс 2026-10-22) — первым разделом каталога, ПОД полосой групп: девять карточек экрана форматов главной,
   по 3 в ряд, на планшете и телефоне по 2, игровые форматы — последней строкой во всю ширину. Заголовок и отступ до групп —
   как у групп каталога (.fa-group-title, 56px). Рисунок карточки — .fx-card из v3.css (экран форматов главной); переменные,
   от которых карточка считает размеры, на главной задаёт секция .fx, здесь — сам блок. При выборе группы блок скрыт. */
.fa-main {
  --fx-vw: calc(100vw / var(--site-zoom, 1));
  --fx-card-text: clamp(11px, calc(var(--fx-vw) * 0.0072), 14px);
  margin-bottom: 56px;
}
.fa-main[hidden] { display: none; }
.fa-main-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1100px) {
  .fa-main-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* девятая карточка — на всю строку, высотой с соседние ряды */
  .fa-main-grid > .fx-card:last-child { grid-column: 1 / -1; aspect-ratio: 32 / 9; }
}
@media (max-width: 640px) {
  .fa-main-grid { gap: 10px; }
  /* по две в ряд: карточка ближе к квадрату и только название — описание в ширину ~170px не помещается */
  .fa-main .fx-card { aspect-ratio: 4 / 3; padding: 12px; }
  .fa-main .fx-card-title { font-size: 1rem; }
  .fa-main .fx-card-desc { display: none; }
  .fa-main-grid > .fx-card:last-child { aspect-ratio: 8 / 3; }
}

/* ШИРОКАЯ КОЛОНКА 1456px — как у /blog и /events (Босс 2026-09-30, вариант «а»): левый край шапки и карточек
   один на всех внутренних страницах, при переходах заголовок не прыгает. Поля — общие поля .wrap из v3.css (48 / 24 / 16px). */
.fa-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) {
  .fa-hero > .wrap, .fa > .wrap { max-width: none; padding-left: max(96px, calc((100% - 1360px) / 2)); padding-right: max(96px, calc((100% - 1360px) / 2)); }
}