/* ============================================================
   journal.css — ленты журнала (Task 5): /articles, /articles/{category}
   (рестайл SEO-донора), /advices.html, /news.html.

   .journal-grid/.journal-card(+__cover/__body/__tag/__title/__meta) —
   тот же паттерн карточки, что и «Свежее в журнале» на главной
   (templates/v3/pages/home.php), но продублирован здесь: каждая v3-страница
   грузит только свой pages/*.css (см. article.css — тот же принцип), а
   home.css подключён только на главной. Разметку карточки объединяет общий
   партиал templates/v3/pages/articles/_article_card.php.
   ============================================================ */

.journal-page { padding-top: 20px; padding-bottom: 48px; }

/* ---- крошки (см. .art-crumbs/.cat-breadcrumbs — тот же паттерн) ---- */
.jr-crumbs { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 16px; }
.jr-crumbs a:hover { color: var(--ink-2); }
.jr-crumbs__sep { margin: 0 6px; }
.jr-crumbs__current { color: var(--ink-2); }

/* ---- заголовок + счётчик ---- */
.jr-topbar { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.jr-title { font-size: 32px; font-weight: 900; }
.jr-count { font-size: 14px; color: var(--muted); font-weight: 700; }

/* ---- чипы фильтров ---- */
.jr-filters { margin-bottom: 24px; }
.chip.jr-reset { background: #fff; color: var(--terra); }

/* ---- сетка карточек ---- */
.journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.journal-card { display: block; position: relative; background: var(--surface); border-radius: var(--r-block); overflow: hidden; }
.journal-card:hover .journal-card__title { color: var(--terra); }
/* ♡ (Stage 5, Task 2, task-2-brief.md: .js-fav-article) — та же позиция/приём,
   что и .gc__fav у карточки товара (catalogue.css); .is-fav — favorites.js. */
.journal-card__fav {
  position: absolute; top: 12px; right: 14px; font-size: 15px; color: #d9c6ac; z-index: 2;
  background: none; border: 0; cursor: pointer; line-height: 1;
}
.journal-card__fav.is-fav { color: var(--terra); }
.journal-card__cover {
  height: 160px; font: 11px ui-monospace, monospace; text-transform: uppercase; letter-spacing: .5px;
  position: relative; text-align: center; padding: 0 12px;
}
.journal-card__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Фолбэк-подпись обложки (advices/index.php) — по умолчанию скрыта: пока
   <img> грузится/загрузилась успешно, поверх неё НИЧЕГО не показываем
   (фикс round 1 — раньше подпись держалась поверх фото на z-index/DOM-
   порядке, что штамповало текст поверх реально загрузившихся картинок).
   Класс .is-broken вешает onerror самого <img> — только тогда подпись
   становится видимой, а картинка скрывается. */
.jr-cover-photo__fallback { display: none; }
.journal-card__cover.is-broken .jr-cover-photo__fallback { display: block; }
.journal-card__cover.is-broken img { display: none; }
.journal-card__body { padding: 18px 20px 20px; }
.journal-card__tag { font-size: 11.5px; font-weight: 800; color: var(--terra); text-transform: uppercase; letter-spacing: 1px; }
.journal-card__title { font-weight: 800; font-size: 16px; line-height: 1.35; margin: 7px 0 10px; color: inherit; }
.journal-card__meta { font-size: 12.5px; color: var(--muted); font-weight: 700; }

.jr-empty { background: #fff; border-radius: var(--r-card); padding: 40px; text-align: center; color: var(--muted); }

/* ---- «Показать ещё» ---- */
.jr-more-wrap { display: flex; justify-content: center; margin-top: 28px; }

/* ---- пагинация (постраничная — /articles/{category}, /news.html) ---- */
.jr-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 28px; flex-wrap: wrap; }
.jr-page-btn {
  min-width: 38px; height: 38px; padding: 0 10px; border-radius: var(--r-pill); background: #fff;
  border: 2px solid #e8d9c5; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13.5px; color: var(--ink-2);
}
.jr-page-btn:hover { border-color: var(--terra); color: var(--terra); }
.jr-page-btn--active { background: var(--terra); border-color: var(--terra); color: #fff; }
.jr-page-btn--active:hover { color: #fff; }
.jr-page-btn--disabled { opacity: .4; pointer-events: none; }
.jr-page-ellipsis { color: var(--muted); font-weight: 800; padding: 0 4px; }

/* ---- мобильная версия ---- */
@media (max-width: 768px) {
  .journal-page { padding-top: 12px; }
  .jr-title { font-size: 22px; }
  .jr-topbar { margin-bottom: 14px; }
  .jr-filters { margin-bottom: 16px; }

  .journal-grid { display: flex; flex-direction: column; gap: 10px; }
  .journal-card { display: flex; gap: 12px; align-items: center; border-radius: 18px; padding: 12px; }
  .journal-card__cover { width: 84px; height: 64px; flex: none; padding: 0; }
  .journal-card__body { padding: 0; }
  .journal-card__title { margin: 3px 0 0; font-size: 13.5px; }
  .journal-card__meta { display: none; }
}