/* ============================================================
   bufet — журнал, поиск и 404.
   Макетов этих страниц в утверждённом варианте C нет (design_2 содержит
   главную, каталог и карточку изделия) — собрано из принятых примитивов:
   .plate, .news__date/.news__title/.news__excerpt, .btn, .input, .eyebrow.
   Отступления записаны в docs/PARITY-CHECK.md.

   ВНИМАНИЕ: базовые правила идут ВЫШЕ медиазапросов. В проекте нет
   !important, специфичность у пары «.jgrid / .jgrid в @media» одинаковая,
   и решает порядок — блок, дописанный в конец файла, молча отменит
   мобильную ветку.
   ============================================================ */

/* ---- сетка карточек -------------------------------------- */
.jgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3.2vw, 48px); }
/* колонок не больше, чем карточек: «Читайте также» короче трёх оставлял пустую ячейку */
.jgrid--1 { grid-template-columns: 1fr; }
.jgrid--2 { grid-template-columns: repeat(2, 1fr); }

.jcard { min-width: 0; }
.jcard__link { display: block; }
.jcard__plate { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-2); overflow: hidden; margin-bottom: 20px; }
.jcard__plate .plate { position: absolute; inset: 0; transition: transform var(--dur-slow) var(--ease); }
.jcard:hover .jcard__plate .plate { transform: scale(1.04); }
.jcard:hover .news__title { color: var(--accent); }

/* Плашка типа результата — только на поиске: выдача разнородна. */
.jcard__kind { display: inline-block; margin-right: 10px; padding: 2px 10px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-deep); font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px; }

/* ---- статья ----------------------------------------------- */
/* Тело статьи набрано тем же классом, что тело посадочной страницы: правила
   штатных блоков редактора описаны один раз в landing.css. Разъехавшись,
   статья и лендинг набирались бы по-разному без единой причины. */
.jentry { margin-bottom: clamp(56px, 7vw, 96px); }
/* Нижний отступ — по замечанию заказчика: блок «Читайте также» упирался в полосу заявки
   вплотную. Собственного отступа у него не было вовсе, а `.shell.page` их не раздаёт
   (см. комментарий там же): у остальных блоков страницы отступ свой, и общий сложился бы
   с ним. Шкала — та же, что у верхнего отступа этого же блока. */
.jentry__more { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px); border-top: 1px solid var(--line); }
.jentry__more .sec-title { margin-bottom: 40px; }

/* ---- форма поиска ----------------------------------------- */
.sform { display: flex; gap: 12px; align-items: center; max-width: 620px; margin-bottom: clamp(32px, 4vw, 56px); }
.sform .input { flex: 1 1 auto; }
.sform .btn { flex: 0 0 auto; }

/* ---- пагинация -------------------------------------------- */
/* Нижний отступ по той же причине, что у .jentry__more: постраничная навигация — последний
   блок архива журнала, и без него она упиралась в подвал. */
.pager { margin-top: clamp(48px, 6vw, 80px); margin-bottom: clamp(40px, 5vw, 72px); }
.pager .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.pager .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px; border-radius: var(--r-pill); font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--line); transition: color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.pager a.page-numbers:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.pager .page-numbers.current { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.pager .page-numbers.dots { box-shadow: none; min-width: 24px; padding: 0; }

/* ---- 404 --------------------------------------------------- */
.err__text { max-width: 46ch; color: var(--ink-2); margin: 0 0 28px; }
.err__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: clamp(56px, 7vw, 96px); }

/* ---- контакты ---------------------------------------------- */
/* Страница «Контакты»: слева способы связи, справа карта. Раскладка — та же
   пара колонок, что у блока «Мастерская» (.feature__grid), значения токенами. */
.contacts { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 4.5vw, 72px); align-items: start; margin-bottom: clamp(56px, 7vw, 96px); }
.contacts__list { display: flex; flex-direction: column; }
.contacts__row { padding: 20px 0; border-top: 1px solid var(--line); }
.contacts__row:first-child { padding-top: 0; border-top: 0; }
.contacts__row:last-child { border-bottom: 1px solid var(--line); }
.contacts__label { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-cap); color: var(--ink-3); margin: 0 0 6px; }
.contacts__value { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); line-height: var(--lh-snug); color: var(--ink); margin: 0; }
.contacts__value a { transition: color var(--dur) var(--ease); }
.contacts__value a:hover { color: var(--accent); }
.contacts__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.contacts__map { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-3); overflow: hidden; box-shadow: var(--sh-1); background: linear-gradient(140deg, var(--plate-a), var(--plate-b)); }
.contacts__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- мобильный слой ---------------------------------------- */
@media (max-width: 1024px) {
  .jgrid:not(.jgrid--1) { grid-template-columns: repeat(2, 1fr); }
  .contacts { grid-template-columns: 1fr; }
  .contacts__map { aspect-ratio: 3 / 2; }
}

@media (max-width: 767px) {
  /* тот же скоуп, что у ветки ≤1024: голый .jgrid она перебила бы специфичностью */
  .jgrid:not(.jgrid--1) { grid-template-columns: 1fr; }
  .jgrid { gap: 32px; }
  .sform { flex-direction: column; align-items: stretch; }
  .sform .btn { justify-content: center; }
  .err__actions .btn { width: 100%; justify-content: center; }
  .contacts__map { aspect-ratio: 1 / 1; }
}