/* ---------- Ad slots ---------- */
.ad-slot-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  min-width: 0;
}

.ad-slot {
  width: 100%;
  max-width: var(--ad-max-w);
  min-width: 0;
  flex-shrink: 1;
  aspect-ratio: var(--ad-w) / var(--ad-h);
  display: flex;
  border: 2px dashed var(--color-slate-soft);
  border-radius: var(--radius);
  background: var(--color-bg-soft);
}

.ad-slot-inner {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  text-align: center;
  padding: var(--space-1) var(--space-2) var(--space-3);
}

.ad-slot-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11.5px;
  color: var(--color-slate);
  margin-top: var(--space-2);
}

.ad-slot-tier {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-navy);
  letter-spacing: 0.03em;
}

.ad-slot-status {
  font-size: 9.5px;
  font-weight: 700;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  margin-top: var(--space-1);
}

.ad-slot-status.is-occupied {
  color: var(--color-danger);
  background: var(--color-danger-bg);
}

.ad-slot-status.is-available {
  color: var(--color-success);
  background: var(--color-success-bg);
}

/* Mobile-first: базово видна мобильная версия слота, десктопная — с 1024px.
   Видимость возвращаем именно flex, а не block: эти модификаторы висят на том
   же элементе, что и .ad-slot, и block перебил бы его display:flex, из-за чего
   подпись перестаёт центрироваться по вертикали. */
.ad-slot--desktop { display: none; }
.ad-slot--mobile-only { display: flex; }

/* Desktop sidebar ad slots vs. their mobile inline echoes: exactly one of
   each pair is ever visible at a time, toggled at 1024px — matching the
   breakpoint where .home-sidebar / .news-sidebar / .directory-sidebar
   themselves collapse into a stacked mobile column. Using the same
   breakpoint here avoids a gap where the sidebar has already collapsed
   but still shows desktop-sized ad boxes. Этот инвариант обязателен:
   если двигать брейкпоинт сайдбаров, двигать и этот. */
.ad-desktop-slot {
  display: none;
}

.ad-mobile-inline-slot {
  display: flex;
  justify-content: center;
  margin: var(--space-6) 0;
}

.mobile-footer-ads {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--grid-gap);
  margin-top: var(--space-6);
}

.mobile-footer-ads .ad-mobile-inline-slot {
  margin: 0;
  width: 100%;
}

@media (min-width: 1024px) {
  .ad-slot--desktop { display: flex; }
  .ad-slot--mobile-only { display: none; }
  .ad-desktop-slot { display: block; }
  .ad-mobile-inline-slot { display: none; }
  .mobile-footer-ads { display: none; }
}

/* Inside a 2-column card grid, an inline ad should break out to full width */
.news-grid .ad-mobile-inline-slot,
.car-grid .ad-mobile-inline-slot {
  grid-column: 1 / -1;
}

/* ---------- Section heading row ---------- */
/* Отбивка между двумя смысловыми блоками внутри одной секции —
   заметно больше внутренних отступов, чтобы группы читались раздельно
   (design.md §1, закон близости). */
.section-head--spaced {
  margin-top: var(--space-16);
}

/* Надзаголовок и заголовок слева, кнопка действия справа.
   Сетка, а не флекс: во флексе кнопка выравнивалась по всему левому блоку
   (надзаголовок + заголовок + его нижний отступ), и её центр оказывался
   ниже центра заголовка — на 21px на главной и на 17px на остальных
   страницах. Кнопка заметно провисала. В сетке она стоит в одной строке
   с самим заголовком и центрируется по нему, а надзаголовок живёт в
   своей строке сверху.

   display: contents у обёртки нужен, чтобы надзаголовок и заголовок
   стали ячейками сетки: разметка на 16 страницах остаётся прежней.
   Обёртка есть всегда, кнопка и надзаголовок — нет; пустая строка без
   элементов имеет нулевую высоту, так что варианты «без кнопки» и
   «без надзаголовка» работают сами собой. */
/* ---------- Положение шапки: общее правило ----------
   Клиент десять раз подряд просил опустить надзаголовок и заголовок секции —
   сначала на главной, потом в новостях, потом в справочнике. Геометрия ниже
   снята с News, которую он одобрил, и теперь это поведение по умолчанию:
   новая страница получает его сама, руками двигать шапку не нужно.

   Что складывается в итог (замерено на 1440): от края верхнего баннера до
   букв надзаголовка 21.4px, между буквами надзаголовка и заголовка 6.1px,
   от букв заголовка до контента 10.8px.

   Сдвиг надзаголовка и кнопки — относительный, а не отступом: отступ утащил
   бы за собой заголовок, кнопку и весь контент, а двигаться должны только
   надписи. Коробка строки при этом остаётся на месте, поэтому надзаголовок
   и заголовок стоят близко — это и есть нужный вид.

   Два исключения, оба настроены вручную и по просьбе: Directory возвращает
   себе 24px сверху и снизу (css/pages/directory.css), Home — нижние 24px и
   собственные сдвиги обеих шапок (css/pages/home.css). */
.section-head {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--space-4);
  align-items: center;
  margin-bottom: 0;
}

.section-head > div {
  display: contents;
}

.section-head .eyebrow {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  top: var(--space-4);
  left: var(--space-1);
}

/* Восемь малых разделов (Jobs, Events, Shopping, Entertainment, Weather,
   Real Estate, City Map, Q&A) держат надзаголовок на 6px правее общего
   правила — просьба клиента 27.09.2026. 4 + 6 = 10px, значение вне шкалы,
   поэтому записано счётом, а не числом (design.md §1.1).
   News и Pricing пользуются тем же общим правилом и сознательно остаются на
   4px: клиента спросили, он выбрал не трогать их.
   Класс, а не список body[data-page=…]: девятый малый раздел копируют с одной
   из этих страниц, и класс приедет вместе с разметкой. Восемь копий самого
   правила по страничным файлам делать нельзя — §9. */
.section-head--sub .eyebrow {
  left: calc(var(--space-1) + 6px);
}

/* Свой нижний отступ заголовку здесь не нужен: отбивку до контента держит
   margin-bottom самой шапки, а лишние 12px как раз и сдвигали кнопку. */
.section-head h1,
.section-head h2 {
  grid-column: 1;
  grid-row: 2;
  margin-bottom: 0;
}

/* Мобильно кнопка идёт под заголовком — так же, как раньше её переносил
   flex-wrap. В одну строку с заголовком на 375px она сжала бы его до
   двух слов. */
.section-head .btn {
  grid-column: 1;
  grid-row: 3;
  justify-self: start;
  margin-top: var(--space-4);
  position: relative;
  top: calc(-1 * var(--space-1));
}

@media (min-width: 640px) {
  .section-head {
    grid-template-columns: 1fr auto;
  }
  .section-head .btn {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
  }
  /* Events, Shopping, Entertainment, Real Estate, Q&A: кнопка на 10px ниже
     общего правила (−4 + 10 = 6px) — просьба клиента 27.09.2026. Только с
     640px, где кнопка стоит в строке заголовка; ниже она уже отдельной
     строкой над чипами, и сдвиг лёг бы на них. Класс, а не пять копий
     правила по страничным файлам — §9. */
  .section-head--btn-low .btn {
    top: calc(-1 * var(--space-1) + 10px);
  }
  /* Events, Shopping, Entertainment, Real Estate, Q&A: кнопка ещё на 8px
     ниже, чем была (просьба клиента 28.09.2026). Через translate, а не top — он
     складывается с уже заданными top/left, и правило одно для страниц с
     --btn-low и без него. Jobs класса не носит: там кнопка стоит в строке
     сортировки. */
  .section-head .btn {
    translate: var(--head-btn-dx, 0) var(--head-btn-dy, 0);
  }
  .section-head--btn-down {
    --head-btn-dy: var(--space-2);
  }
  /* Weather и разделы после неё (Real Estate, City Map, Q&A): кнопка на
     12px левее — просьба клиента 28.09.2026. На Weather и City Map клиент
     потом вернул кнопку на прежнюю высоту — там только этот класс, без
     --btn-down. */
  .section-head--nudge {
    --head-btn-dx: -12px;
  }
}

/* Там же: надзаголовок и заголовок «на миллиметр» правее — на 4px, на всех
   ширинах (на телефоне сдвиг текста ничему не мешает, в отличие от кнопки). */
.section-head--nudge .eyebrow,
.section-head--nudge h1 {
  translate: var(--space-1) 0;
}

/* ---------- News card ---------- */
.news-card {
  display: flex;
  flex-direction: column;
}

.news-card-photo {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.news-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-card-body {
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.news-card-meta {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--text-xs);
  color: var(--color-slate);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}

.news-card-meta .cat {
  color: var(--color-accent);
}

.news-card-body h3 {
  margin-bottom: var(--space-2);
}

.news-card-body h3 a {
  color: var(--color-navy);
}

.news-card-body h3 a:hover {
  color: var(--color-accent);
}

.news-card-excerpt {
  color: var(--color-slate);
  font-size: var(--text-xs);
  flex: 1;
}

.news-card-more {
  margin-top: var(--space-2);
  font-weight: 700;
  font-size: var(--text-xs);
  color: var(--color-accent);
}

.news-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.news-card-footer .news-card-more {
  margin-top: 0;
  white-space: nowrap;
}

.news-card-author {
  font-size: var(--text-xs);
  color: var(--color-slate);
  font-style: italic;
}

/* ---------- Category filter ----------
   Чипы фильтра: Jobs, Events, Shopping, Entertainment, Q&A. Справочник ушёл
   на список рубрик в боковой колонке и этот компонент больше не использует. */
.category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.category-filter button {
  min-height: 44px;
  border: 1.5px solid var(--color-slate-soft);
  background: var(--color-white);
  color: var(--color-navy);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}

.category-filter button:hover {
  border-color: var(--color-accent);
}

.category-filter button.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

/* ---------- Sidebar widgets (home) ---------- */
.widget {
  background: var(--color-white);
  border: 1px solid var(--color-slate-soft);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--space-4);
}

.widget-head {
  background: var(--color-navy);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: var(--space-2) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.widget-head-tag {
  font-family: var(--font-body);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--text-xs);
  color: #9fb0c3;
}

.widget-body {
  padding: var(--card-pad);
}

/* Stat grid (AllSeattle at a Glance) */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.stat-tile {
  background: var(--color-bg-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-2);
  text-align: center;
}

.stat-tile .num {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--text-lg);
  color: var(--color-accent);
}

.stat-tile .label {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-slate);
  margin-top: var(--space-1);
  line-height: 1.3;
}

/* Exchange-rate ticker */
.ticker-row {
  display: grid;
  grid-template-columns: 1fr auto 18px;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-slate-soft);
  font-size: var(--text-xs);
}

.ticker-row:last-child { border-bottom: none; }

.ticker-pair {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ticker-value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--color-navy);
}

.ticker-change {
  font-size: var(--text-xs);
  text-align: right;
}

.ticker-change.up { color: var(--color-success); }
.ticker-change.down { color: var(--color-danger); }

/* Job board teaser */
.job-teaser p {
  font-size: var(--text-xs);
  color: var(--color-slate);
  margin-bottom: var(--space-3);
}

.badge-soon {
  display: inline-block;
  background: var(--color-danger-bg);
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

/* City transit rows */
.transit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px dashed var(--color-slate-soft);
  font-size: var(--text-xs);
}

.transit-row:last-child { border-bottom: none; }

.status-pill {
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
}

.status-pill.status-good {
  color: var(--color-success);
  background: var(--color-success-bg);
}

.status-pill.status-warn {
  color: #92400e;
  background: #fef3c7;
}

/* ---------- Car card ---------- */
.car-card {
  display: flex;
  flex-direction: column;
}

.car-card-photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg-soft);
}

.car-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.car-card-body {
  padding: var(--card-pad);
}

.car-card-price {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--color-accent);
  font-size: var(--text-lg);
  margin-bottom: var(--space-1);
}

.car-card-title {
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.car-card-specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-slate);
}

/* ---------- Package badges (pricing / feature matrix helpers) ---------- */
.pkg-badge-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: var(--space-1);
}

/* ---------- Multi-step form ---------- */
.form-stepper {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.form-stepper .step-dot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-slate);
}

.form-stepper .step-dot .num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--color-slate-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-slate);
}

.form-stepper .step-dot.active .num {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-white);
}

.form-stepper .step-dot.done .num {
  border-color: var(--color-success);
  background: var(--color-success);
  color: var(--color-white);
}

.form-stepper .step-dot.active { color: var(--color-navy); }

.form-step { display: none; }
.form-step.active { display: block; }

.form-step-actions {
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  margin-top: var(--space-6);
  gap: var(--space-3);
}

.form-step-actions .btn { width: 100%; }

@media (min-width: 640px) {
  .form-step-actions { flex-direction: row; }
  .form-step-actions .btn { width: auto; }
}

.photo-preview-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.photo-preview-row img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-slate-soft);
}

.review-list {
  background: var(--color-bg-soft);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-4);
}

.review-list .row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px dashed var(--color-slate-soft);
  font-size: var(--text-xs);
}

.review-list .row:last-child { border-bottom: none; }
.review-list .row span:first-child { color: var(--color-slate); }
.review-list .row span:last-child { font-weight: 600; text-align: right; }

/* ---------- Gallery (auto detail) ---------- */
.gallery-main {
  aspect-ratio: 16/10;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-bg-soft);
  margin-bottom: var(--space-3);
  position: relative;
}

.gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(13,27,42,0.55);
  color: #fff;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  font-size: var(--text-base);
}

.gallery-nav.prev { left: var(--space-2); }
.gallery-nav.next { right: var(--space-2); }

.gallery-thumbs {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.gallery-thumbs img {
  width: 74px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: 0.6;
  border: 2px solid transparent;
}

.gallery-thumbs img.active {
  opacity: 1;
  border-color: var(--color-accent);
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
}

.spec-table tr {
  border-bottom: 1px dashed var(--color-slate-soft);
}

.spec-table td {
  padding: var(--space-2) var(--space-1);
  font-size: var(--text-xs);
}

.spec-table td:first-child {
  color: var(--color-slate);
  width: 42%;
}

.spec-table td:last-child {
  font-weight: 700;
}

/* ---------- Contest ---------- */
.contest-card {
  border: 2px solid var(--color-accent);
  position: relative;
  overflow: visible;
}

.contest-card-photo {
  aspect-ratio: 4/3;
  overflow: hidden;
}

.contest-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contest-card-body {
  padding: var(--card-pad);
  text-align: center;
}

.contest-vote-count {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--text-lg);
  color: var(--color-accent);
  margin: var(--space-1) 0 var(--space-2);
}

.contest-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent);
  color: #fff;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.contest-teaser {
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #fff 0%, #fff2f1 100%);
  padding: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}

/* ---------- Строка компании ----------
   Живёт здесь, а не в css/pages/directory.css: тот же компонент рисуется на
   двух страницах — в справочнике и в блоке «Directory of enterprises» раздела
   Auto. Копия стиля под второе место была бы «разный стиль у однотипных
   компонентов» (design.md §9). Разметку строки собирают bizRowTemplate() в
   js/pages/directory.js и его копия в js/pages/auto-catalog.js. */
.biz-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.biz-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4);
  border: 1px solid var(--color-slate-soft);
  border-radius: var(--radius);
  background: var(--color-white);
}

/* Подложка по тарифу — так в макете отмечены платные размещения. Оттенки
   объявлены в tokens.css, а не подобраны на глаз. Premium — золотой по просьбе
   пользователя: он же верхний тариф, и на показе золото читается как «дороже»
   быстрее, чем второй красный. */
.biz-row--premium {
  background: var(--color-gold-tint);
  border-color: var(--color-gold);
}

/* Плашка тарифа в строке — тоже золотая, по просьбе пользователя. Правило
   заужено до строки справочника: класс .badge-premium общий с pricing.html,
   где плашка остаётся красной, пока не попросят обратного.
   Текст на ней тёмный, и это не выбор стиля: белый на золоте даёт 2.36:1,
   а 14px bold по AA требует 4.5. Navy даёт 7.38 — заодно больше, чем 4.23
   у нынешней красной плашки, которая порог не держит. */
.biz-row--premium .badge-premium {
  background: var(--color-gold);
  color: var(--color-navy);
}

.biz-row--lux {
  background: var(--color-navy-tint);
}

/* Lux в блоке предприятий на Auto — ярко-золотой, по просьбе клиента. Правило
   заужено до этого списка (#auto-firms): в справочнике Lux остаётся на
   синеватой подложке, просьба была с тегом #auto-firms. Плашку не трогаем —
   клиент попросил оставить её как есть, тёмной с белыми буквами (17.39:1). */
#auto-firms .biz-row--lux {
  background: var(--color-gold-bright-tint);
  border-color: var(--color-gold-bright);
}

.biz-row-thumb {
  width: 72px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.biz-row-body {
  min-width: 0;
}

.biz-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.biz-row-views {
  font-size: var(--text-xs);
  color: var(--color-slate);
}

.biz-row-upsell {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-accent);
}

/* Название — span, а не заголовок (design.md §6): строк пятнадцать, и h3
   подряд ломали бы оглавление страницы. Начертание задаём здесь, чтобы строка
   выглядела ровно так же, как выглядела заголовком. */
.biz-row-name {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: 1.25;
  color: var(--color-navy);
  margin-bottom: var(--space-1);
}

.biz-row-cat {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.biz-row-desc {
  font-size: var(--text-xs);
  color: var(--color-slate);
  max-width: 75ch;
  margin-bottom: var(--space-2);
}

.biz-row-contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-navy);
}

.biz-row-contact a {
  font-weight: 600;
}

@media (min-width: 768px) {
  .biz-row {
    grid-template-columns: 96px 1fr;
  }
  .biz-row-thumb {
    width: 96px;
  }
}

/* ---------- Modal (share-news, choose-package, contact-seller) ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13,27,42,0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
  overflow-y: auto;
  z-index: 200;
  opacity: 1;
  visibility: visible;
}

.modal-overlay.hidden {
  opacity: 0;
  visibility: hidden;
}

.modal {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  max-width: 520px;
  width: 100%;
  padding: var(--space-8) var(--space-6);
  position: relative;
  box-shadow: var(--shadow-lg);
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  border: none;
  background: var(--color-bg-soft);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: var(--text-base);
  cursor: pointer;
  color: var(--color-slate);
  line-height: 1;
}

.modal-close:hover {
  background: var(--color-slate-soft);
}

body.modal-open {
  overflow: hidden;
}

/* ---------- Contest strip ----------
   Тонкая полоса между фото-баннером и контентом — на месте бывшей полосы
   иконок достопримечательностей. Та была чистой декорацией (design.md §7),
   эта ведёт на страницу конкурса. */
#contest-strip {
  padding-top: var(--space-4);
}

.contest-strip {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 64px;
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-slate-soft);
  border-radius: var(--radius);
}

.contest-strip:hover {
  border-color: var(--color-accent);
}

.contest-strip-thumb {
  width: 72px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex: none;
}

.contest-strip-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.contest-strip-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.contest-strip-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contest-strip-more {
  display: none;
  margin-left: auto;
  flex: none;
  font-weight: 700;
  font-size: var(--text-xs);
  color: var(--color-accent);
}

/* ---------- Compact newsfeed ----------
   Плотный хвост ленты: заголовки строками вместо карточек. Структура взята
   из макета клиента, оформление — из наших токенов: никакого синего
   подчёркнутого текста (design.md §9, §4). */
.news-list {
  border-top: 1px solid var(--color-slate-soft);
}

.news-list-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-slate-soft);
}

.news-list-thumb {
  width: 72px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.news-list-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.news-list-meta {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-slate);
}

.news-list-meta .cat {
  color: var(--color-accent);
}

.news-list-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: 1.25;
  color: var(--color-navy);
}

.news-list-row:hover .news-list-title {
  color: var(--color-accent);
}

.news-list-excerpt {
  font-size: var(--text-xs);
  color: var(--color-slate);
  max-width: 65ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 640px) {
  .contest-strip-more { display: block; }
}

@media (min-width: 768px) {
  .news-list-row { grid-template-columns: 96px 1fr; }
  .news-list-thumb { width: 96px; }
}

/* ---------- Общая раскладка «контент + липкий сайдбар» ----------
   Восемь разделов повторяли бы блок из directory.css слово в слово, а
   design.md §9 запрещает разный стиль у однотипных компонентов. Раскладка
   живёт здесь одна, страницы добавляют к ней только ширину своих колонок. */
.side-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
  align-items: start;
}

/* Без этого колонка грида раздувается под свой контент (min-width: auto),
   и внутренний горизонтальный скроллер растягивает всю страницу. */
.side-layout > * {
  min-width: 0;
}

.side-rail {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--grid-gap);
  position: static;
}

.side-rail > * {
  flex: 1 1 260px;
  min-width: 0;
}

/* Баннер 728x90 над контентом. Нижнего отступа нет: шапка секции идёт
   вплотную, см. правило её положения выше. Directory возвращает себе 24px. */
.ad-slot-top {
  margin-bottom: 0;
  display: flex;
  justify-content: center;
}

.result-count {
  color: var(--color-slate);
  font-size: var(--text-xs);
  margin-bottom: var(--space-4);
}

@media (min-width: 1024px) {
  .side-layout {
    grid-template-columns: 1fr 300px;
  }
  .side-rail {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    /* Реклама уезжает вместе со страницей, как на главной. Пользователь
       попросил, чтобы при скролле двигались не только новости, но и баннеры;
       липкий сайдбар держал их на месте. Не «чинить» обратно без просьбы. */
  }
  .side-rail > * {
    flex: 0 0 auto;
  }
}

/* Компактная строка «название + пометка» для виджетов в сайдбаре.
   Используется и главной (Job Board), и разделом Entertainment
   (Tonight in Seattle), поэтому лежит здесь, а не в CSS одной страницы. */
.mini-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-slate-soft);
}

.mini-row:last-child {
  border-bottom: none;
}

.mini-row-title {
  font-weight: 700;
  font-size: var(--text-xs);
  color: var(--color-navy);
}

.mini-row:hover .mini-row-title {
  color: var(--color-accent);
}

.mini-row-note {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-accent);
  white-space: nowrap;
}