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

/* место под нижнюю панель телефона теперь нужно и здесь — панель есть на всех страницах (partials/float-ui.ejs, 2026-09-26) */
/* Шапка и сетка — как у /poleznoe (views/useful-index.ejs): кремовая шапка без кадра, карточки .fa-card каталога форматов. */
.ul-hero { padding: 120px 0 56px; background: #f5f3ee; border-bottom: 0.5px solid rgba(28,26,22,0.10); }
/* «Каталог ресторанов» — кадр Босса (Я.Диск Page_CatalogRest/Catalog_rest_font.webp, 2026-09-29): вечерний зал, панорама
   4096×1478 (2,77:1). Кадр ТЁМНЫЙ — кремовая вуаль легла бы на него серой мутью, поэтому здесь вуаль тёмная и текст
   светлый; пропорция шапки = пропорции кадра, на телефоне кадр целиком под текстом на тёмной подложке.
   Модификатор по адресу раздела (ul-hero--<slug>): у другого каталога без своего кадра шапка прежняя.
   Файлы public/images/useful-page/restaurants-hero-*. */
/* Шапка — стандарт 2:1 для всех внутренних страниц (Босс 2026-09-30: «не подгонять шапку под пропорции изображения один в один»); кадр — cover, точка фокуса — background-position. */
.ul-hero--restorany {
  position: relative; isolation: isolate;
  aspect-ratio: 2 / 1;
  background-color: #16130f;
  background-image: url('/images/useful-page/restaurants-hero-1920.jpg');
  background-image: image-set(url('/images/useful-page/restaurants-hero-1920.webp') type('image/webp'), url('/images/useful-page/restaurants-hero-1920.jpg') type('image/jpeg'));
  background-size: cover; background-position: center;
  border-bottom: 0;
}
.ul-hero--restorany::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(22,19,15,0.86) 0%, rgba(22,19,15,0.70) 34%, rgba(22,19,15,0.20) 62%, rgba(22,19,15,0) 78%);
}
.ul-hero--restorany .fa-eyebrow { color: #e6c77a; }
.ul-hero--restorany .fa-h1 { color: #f5f3ee; }
.ul-hero--restorany .fa-lead,
.ul-hero--restorany .post-body,
.ul-hero--restorany .post-body p { color: rgba(245,243,238,0.84); }
.ul-hero--restorany .site-crumbs,
.ul-hero--restorany .site-crumbs a,
.ul-hero--restorany .site-crumbs span { color: rgba(245,243,238,0.72); }
.ul-hero--restorany .site-crumbs a:hover { color: #e6c77a; }
@media (min-width: 1921px) {
  .ul-hero--restorany { background-image: image-set(url('/images/useful-page/restaurants-hero-2560.webp') type('image/webp'), url('/images/useful-page/restaurants-hero.jpg') type('image/jpeg')); }
}
@media (max-width: 960px) {
  .ul-hero--restorany { background-image: image-set(url('/images/useful-page/restaurants-hero-1280.webp') type('image/webp'), url('/images/useful-page/restaurants-hero-1280.jpg') type('image/jpeg')); }
}
@media (max-width: 760px) {
  .ul-hero--restorany { aspect-ratio: auto; padding-bottom: calc(50vw + 12px); background-size: auto 50vw; background-position: 50% 100%; }
  .ul-hero--restorany::before { background: linear-gradient(to top, rgba(22,19,15,0) 0, rgba(22,19,15,0) calc(50vw - 60px), rgba(22,19,15,1) calc(50vw + 12px)); }
}
.ul-hero .fa-lead { margin-bottom: 0; }
/* вводный текст из тела файла раздела — под лидом, стили текста статьи блога (.post-body), без её полей */
.ul-hero .post-body { max-width: 620px; margin: 20px 0 0; padding: 0; }
.fa-card { background: radial-gradient(circle at 70% 25%, #5a4526, #2b241c 60%, #1c1814); }
/* подпись над названием: «Ресторан · Сочи» */
.ul-card-kind { font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #e6c77a; }
.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: 104px 0 40px; } .ul-hero--restorany { padding-bottom: calc(36.1vw + 12px); } }
.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)); }
}