/* Списки и служебные страницы темы (inc/lists.php): то, чего нет в assets/css/journal.css дизайн-системы.
   Гигантское слово любой рубрики с предметом, вкладки и рубрики ссылками, даты с годом, «Предыдущая» в навигации.
   Цвета и шрифты — только токенами дизайн-системы. */

/* ---------- рубрика: гигантское слово и предмет ---------- */
/* размер слова подбирается по ширине колонки: --fit — длина самой длинной строки вместе с предметом, в em (считает us_l_word) */
.j-thero__in { container-type: inline-size; }
.j-word--fit { font-size: min(12.6vw, 204px); font-size: min(12.6vw, 204px, 100cqi / var(--fit)); }
.j-word--lines .j-word__t { line-height: .92; }
.j-word__l { display: block; position: relative; width: fit-content; }
/* в счётчиках рубрики — годы («2018»): они шире даты «15.10» из макета, цифры чуть мельче, чтобы три колонки не вылезали за поле */
.j-thero__in .j-facts b { font-size: clamp(30px, 3.5vw, 60px); }

/* предмет касается только краёв букв и промежутков: стоит справа от первой строки и не заходит на буквы.
   --bl — базовая линия строки от её верха (замер: .80em при межстрочном .86, .83em при .92) */
.j-word--fit { --bl: .8em; }
.j-word--lines { --bl: .83em; }
.j-cut { position: absolute; z-index: 3; pointer-events: none; filter: drop-shadow(0 .1em .12em rgba(0, 0, 0, .6)); }
.j-cut img { display: block; width: 100%; height: auto; }
.j-cut--m { display: none; }
.j-cut--globe { left: calc(100% + .06em); top: calc(var(--bl) - 1.08em); width: 1.18em; }
.j-cut--tour { left: calc(100% + .02em); top: -.52em; width: 2.2em; }
/* у кастрюли и будильника низ срезан ровно — срез стоит на базовой линии, как будильник у «Календаря» */
.j-cut--pot { left: calc(100% + .04em); top: calc(var(--bl) - 1.255em); width: 1.74em; }
.j-cut--clock { left: calc(100% + .07em); top: calc(var(--bl) - 1.024em); width: .95em; }
/* вокруг кастрюли — зерно с прямоугольной границей: края гасим, низ (срез) оставляем */
.j-cut--pot img { -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 95%, transparent), linear-gradient(transparent, #000 6%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 95%, transparent), linear-gradient(transparent, #000 6%); mask-composite: intersect; }
/* кадр из cut-tour.webp: только нижний кед (x 425–760, y 690–910 из 1323×910) */
.j-cut--shoe { left: calc(100% + .05em); top: calc(var(--bl) - .94em); width: 1.5em; aspect-ratio: 335 / 220; overflow: hidden; }
.j-cut--shoe img { position: absolute; left: -126.87%; top: -313.64%; width: 394.93%; max-width: none; height: auto; }
/* кадр из cut-tour.webp: только микрофон — как .j-mic рубрики «Концерты» */
.j-cut--mic { left: calc(100% + .02em); top: -.5em; width: 1.6em; aspect-ratio: 320 / 277; }
.j-cut--mic img { position: absolute; left: -46.875%; top: -193.14%; width: 413.44%; max-width: none; height: auto;
  clip-path: polygon(11.94% 80.77%, 12.55% 75.82%, 14.74% 73.30%, 19.80% 70.77%, 29.86% 61.76%, 33.03% 59.78%, 34.85% 59.56%, 35.00% 64.29%, 34.01% 65.05%, 32.96% 67.25%, 24.34% 83.52%, 21.92% 85.05%, 19.80% 86.81%, 17.38% 88.35%, 14.36% 87.14%, 12.85% 85.49%); }

/* ---------- вкладки и рубрики — ссылками ---------- */
.j-tabs a[aria-current="page"] { color: var(--ivory); }
.j-tabs a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.j-filter a { padding: var(--s-2) 0; font: var(--t-nav); color: var(--ivory-2); white-space: nowrap; transition: color var(--d-fast) var(--ease); }
.j-filter a:hover { color: var(--ivory); }
.j-filter a[aria-current="page"] { color: var(--ivory); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.j-filter sup { margin-left: .3em; font: var(--t-label); letter-spacing: .06em; color: var(--mute); vertical-align: super; }

/* ---------- материалы ---------- */
.j-lead--nopic .j-lead__txt { grid-column: 1 / span 8; }
/* у старых материалов в строке списка дата с годом: «15.10.19» */
@media (min-width: 641px) {
  .j-list--y .j-row a { grid-template-columns: 8ch 17ch minmax(0, 1fr) 7ch 22px; }
}
.j-tnone { display: grid; gap: var(--s-5); justify-items: start; border-top: 1px solid var(--rule); }

/* ---------- постраничная навигация ---------- */
.j-pages__go { justify-self: end; display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); }
.j-pages__prev svg { transform: scaleX(-1); }
.j-pages--in { grid-template-columns: minmax(0, 1fr) auto; padding: var(--s-7) 0 0; }
.j-pages--in .j-pages__c { grid-column: 1 / -1; }

/* ---------- поиск ---------- */
.j-res__when--w b { font-size: clamp(18px, 1.6vw, 26px); line-height: 1.1; }
.j-res__none .ulink { margin-left: var(--s-2); color: var(--ivory); }

/* ---------- телефон ---------- */
@media (max-width: 640px) {
  .j-filter a { flex: none; }
  .j-pages__go { justify-self: start; }
  /* слово во всю ширину, предмет — под словом справа */
  .j-word--fit { width: auto; font-size: min(24vw, 100cqi / var(--fit-m)); }
  .j-cut--d { display: none; }
  .j-cut--m { display: block; position: relative; left: auto; top: auto; margin: .04em 0 0 auto; }
  .j-cut--m.j-cut--globe { width: 46vw; }
  .j-cut--m.j-cut--tour { width: 76vw; }
  .j-cut--m.j-cut--pot { width: 64vw; }
  .j-cut--m.j-cut--clock { width: 34vw; }
  .j-cut--m.j-cut--shoe { width: 52vw; }
  .j-cut--m.j-cut--mic { width: 40vw; }
}