/* ═══════════════════════════════════════════════════════════════════════════
   Заметки о каркасных домах (страница 2594) — журнальная раскладка.

   🚨 Про цвет текста. Карточка целиком — <a>, а на сайте есть правило
   `section a:not(.button):not([class*="btn"])…`, которое задаёт не только
   `color`, но и `-webkit-text-fill-color: #a67c3a`. Заливка сильнее цвета и
   наследуется внутрь, поэтому заголовки и подписи в карточках выходили
   золотыми, хотя computed color был правильный. Отсюда правило: у КАЖДОГО
   текстового элемента внутри .nt-card цвет задаём парой — color и
   -webkit-text-fill-color. Поймано владельцем 24.08.2026.
   2026-08-24. Владелец: «сейчас это не красиво оформленные карточки, хочется
   какое-то умное дизайнерское решение».

   Что поменялось против прежней сетки 3×N одинаковых карточек:
   · ведущая карточка первой статьи — во всю ширину, фото слева, текст справа;
   · дальше ритм из разных ширин (7+5, 4+4+4, 5+7, 4+4+4) — как в избранных
     проектах на главной, владельцу этот приём уже знаком и нравится;
   · рубрика вместо одинакового слова «Заметка» на каждой карточке;
   · подпись в одну строку и ключевая цифра статьи поверх фото;
   · фильтр по рубрикам — 72 материала иначе не разобрать.

   🚨 Файл подключается ТОЛЬКО на этой странице (includes/enqueue.php, is_page(2594)),
   поэтому namespace .nt-* можно держать коротким. В общий scandi.css не лезем:
   его же правит соседняя сессия, а лайт-копии пришлось бы перегенерировать.
   ═══════════════════════════════════════════════════════════════════════════ */

.scandi-notes .nt-wrap {
  --nt-ink: #1a1410;
  --nt-muted: #6b6155;
  --nt-gold: #a67c3a;
  /* 🚨 Карточка была #fffdf8 на фоне страницы #f6f1e7 — разница в 9 пунктов,
     плюс рамка 10% прозрачности. Владелец 24.08.2026: «блоки сливаются, должны
     быть оконтованы». Поэтому фон карточки — чистый белый, а рамка видимая. */
  --nt-card: #ffffff;
  --nt-line: rgba(166, 124, 58, 0.42);
  --nt-line-soft: rgba(166, 124, 58, 0.3);
  --nt-shadow: 0 6px 20px rgba(120, 90, 50, 0.1);
  --nt-shadow-rest: 0 1px 3px rgba(120, 90, 50, 0.05);
  --nt-gap: 20px;
}

/* ── фильтр по рубрикам ─────────────────────────────────────────────────── */
.scandi-notes .nt-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 26px;
}
.scandi-notes .nt-chip {
  appearance: none;
  border: 1px solid var(--nt-line);
  background: transparent;
  color: var(--nt-muted);
  font: inherit;
  font-size: 13.5px;
  line-height: 1;
  padding: 9px 15px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.scandi-notes .nt-chip:hover { border-color: var(--nt-gold); color: var(--nt-ink); }
.scandi-notes .nt-chip[aria-pressed="true"] {
  background: var(--nt-gold);
  border-color: var(--nt-gold);
  color: #fff;
}
.scandi-notes .nt-chip__n {
  font-variant-numeric: tabular-nums;
  opacity: .6;
  margin-left: 6px;
  font-size: 12px;
}
.scandi-notes .nt-chip[aria-pressed="true"] .nt-chip__n { opacity: .8; }

/* ── сетка ──────────────────────────────────────────────────────────────── */
.scandi-notes .nt-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--nt-gap);
}
.scandi-notes .nt-card {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  background: var(--nt-card);
  border: 1px solid var(--nt-line-soft);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--nt-shadow-rest);
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.scandi-notes .nt-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--nt-shadow);
  border-color: var(--nt-line);
}
.scandi-notes .nt-card:focus-visible {
  outline: 2px solid var(--nt-gold);
  outline-offset: 3px;
}
/* 🚨 Ритм разных ширин снят. При пропорциональном кадре соседи в одном ряду
   получают РАЗНУЮ высоту (ширина разная → высота разная), и ряд разъезжается.
   Владелец просил «как на главной» — там карточки домов одинаковые. Ведущая
   карточка первой статьи остаётся: она одна в своём ряду и ничему не мешает. */
.scandi-notes .nt-card--w5,
.scandi-notes .nt-card--w7 { grid-column: span 4; }

/* ── медиа ──────────────────────────────────────────────────────────────── */
/* 🚨 ПРОПОРЦИЯ, А НЕ ВЫСОТА (01.09.2026). Была фиксированная высота 216/252 px.
   На широком экране карточка span-7 выходила 657 px в ширину при 252 px кадра —
   2,6:1, полоса. Владелец в Arc на маке: «карточки растягиваются в сосисочные
   баннеры». Теперь кадр держит 3:2 и растёт вместе с карточкой на любой ширине. */
.scandi-notes .nt-card__media {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  background: linear-gradient(135deg, #efe7d8, #e3d7c2);
  overflow: hidden;
}
.scandi-notes .nt-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.scandi-notes .nt-card:hover .nt-card__media img { transform: scale(1.045); }

.scandi-notes .nt-rubric {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: rgba(26, 20, 16, .78);
  color: #f6efe2;
  -webkit-text-fill-color: #f6efe2;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 5px 10px 6px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.scandi-notes .nt-fact {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  background: rgba(255, 253, 248, .93);
  color: var(--nt-ink);
  -webkit-text-fill-color: var(--nt-ink);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 6px 11px 7px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(60, 45, 25, .16);
}

/* ── текст ──────────────────────────────────────────────────────────────── */
.scandi-notes .nt-card__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 15px 18px 18px;
  flex: 1 1 auto;
  border-top: 1px solid rgba(166, 124, 58, 0.16);
}
.scandi-notes .nt-card--lead .nt-card__body { border-top: 0; border-left: 1px solid rgba(166, 124, 58, 0.16); }
@media (max-width: 760px) {
  .scandi-notes .nt-card--lead .nt-card__body { border-left: 0; border-top: 1px solid rgba(166, 124, 58, 0.16); }
}
.scandi-notes .nt-card__title {
  font-size: 17px;
  line-height: 1.28;
  font-weight: 600;
  color: var(--nt-ink);
  -webkit-text-fill-color: var(--nt-ink);
  text-wrap: balance;
}
.scandi-notes .nt-card__lead {
  font-size: 14px;
  line-height: 1.45;
  color: var(--nt-muted);
  -webkit-text-fill-color: var(--nt-muted);
}
.scandi-notes .nt-card__more {
  margin-top: auto;
  padding-top: 8px;
  font-size: 13.5px;
  color: var(--nt-gold);
  -webkit-text-fill-color: var(--nt-gold);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.scandi-notes .nt-card__more span { transition: transform .2s ease; }
.scandi-notes .nt-card:hover .nt-card__more span { transform: translateX(3px); }

/* ── ведущая карточка ───────────────────────────────────────────────────── */
.scandi-notes .nt-card--lead {
  grid-column: span 12;
  flex-direction: row;
  align-items: stretch;
}
.scandi-notes .nt-card--lead .nt-card__media {
  flex: 0 0 58%;
  height: auto;
  aspect-ratio: auto;      /* высоту задаёт текстовая часть рядом */
  min-height: 300px;
}
.scandi-notes .nt-card--lead .nt-card__body {
  flex: 1 1 auto;
  justify-content: center;
  gap: 12px;
  padding: 34px 38px;
}
.scandi-notes .nt-card--lead .nt-card__title {
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.16;
  letter-spacing: -.01em;
}
.scandi-notes .nt-card--lead .nt-card__lead { font-size: 16px; line-height: 1.5; }
.scandi-notes .nt-card--lead .nt-card__more { margin-top: 6px; font-size: 15px; }
.scandi-notes .nt-lead-mark {
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--nt-gold);
  -webkit-text-fill-color: var(--nt-gold);
}

/* Когда выбрана одна рубрика, ритм разных ширин рассыпается дырами —
   переводим сетку в ровные колонки. Класс вешает JS в notes-clean.php. */
.scandi-notes .nt-grid--flat .nt-card,
.scandi-notes .nt-grid--flat .nt-card--w5,
.scandi-notes .nt-grid--flat .nt-card--w7,
.scandi-notes .nt-grid--flat .nt-card--lead { grid-column: span 4; }
.scandi-notes .nt-grid--flat .nt-card--lead { flex-direction: column; }
.scandi-notes .nt-grid--flat .nt-card--lead .nt-card__media {
  flex: 0 0 auto;
  height: auto;
  aspect-ratio: 3 / 2;
  min-height: 0;
}
.scandi-notes .nt-grid--flat .nt-card--lead .nt-card__body { padding: 16px 18px 18px; gap: 7px; }
.scandi-notes .nt-grid--flat .nt-card--lead .nt-card__title { font-size: 17px; line-height: 1.28; }
.scandi-notes .nt-grid--flat .nt-card--lead .nt-card__lead { font-size: 14px; }
.scandi-notes .nt-grid--flat .nt-lead-mark { display: none; }
@media (max-width: 1100px) {
  .scandi-notes .nt-grid--flat .nt-card,
  .scandi-notes .nt-grid--flat .nt-card--lead { grid-column: span 6; }
}
@media (max-width: 760px) {
  .scandi-notes .nt-grid--flat .nt-card,
  .scandi-notes .nt-grid--flat .nt-card--lead { grid-column: span 12; }
}

/* ── пусто по фильтру ───────────────────────────────────────────────────── */
.scandi-notes .nt-empty {
  grid-column: span 12;
  padding: 40px 0;
  text-align: center;
  color: var(--nt-muted);
  font-size: 15px;
}
.scandi-notes .nt-card[hidden] { display: none; }

/* ── планшет ────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .scandi-notes .nt-card,
  .scandi-notes .nt-card--w5,
  .scandi-notes .nt-card--w7 { grid-column: span 6; }
  /* 🚨 Высоту кадра здесь НЕ задаём: она спорит с aspect-ratio и снова даёт
     полосы. Замер 01.09.2026 на 1100 px: было от 0,75 до 2,32 против нужных 1,5.

     🚨 И ведущую карточку ставим в столбик уже здесь, а не с 760 px. Пока она
     оставалась горизонтальной, её кадр занимал половину ширины при min-height
     300 px и выходил узким столбом: замер на 768–1100 px давал 0,48–0,56
     вместо 1,5. */
  .scandi-notes .nt-card--lead { flex-direction: column; }
  .scandi-notes .nt-card--lead .nt-card__media {
    flex: 0 0 auto;
    height: auto;
    aspect-ratio: 3 / 2;
    min-height: 0;
  }
  .scandi-notes .nt-card--lead .nt-card__body {
    border-left: 0;
    border-top: 1px solid rgba(166, 124, 58, 0.16);
  }
  .scandi-notes .nt-card--lead .nt-card__body { padding: 26px 28px; }
}

/* ── телефон ────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .scandi-notes .nt-wrap { --nt-gap: 14px; }
  .scandi-notes .nt-card,
  .scandi-notes .nt-card--w5,
  .scandi-notes .nt-card--w7,
  .scandi-notes .nt-card--lead { grid-column: span 12; }
  .scandi-notes .nt-card--lead { flex-direction: column; }
  .scandi-notes .nt-card--lead .nt-card__media {
    flex: 0 0 auto;
    height: auto;
    aspect-ratio: 3 / 2;
    min-height: 0;
  }
  .scandi-notes .nt-card--lead .nt-card__body { padding: 18px 18px 20px; }
  .scandi-notes .nt-card--lead .nt-card__title { font-size: 21px; }
  .scandi-notes .nt-card--lead .nt-card__lead { font-size: 14.5px; }
  .scandi-notes .nt-filters { gap: 7px; margin-bottom: 20px; }
  .scandi-notes .nt-chip { font-size: 13px; padding: 8px 13px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .scandi-notes .nt-card,
  .scandi-notes .nt-card__media img,
  .scandi-notes .nt-card__more span { transition: none; }
  .scandi-notes .nt-card:hover { transform: none; }
  .scandi-notes .nt-card:hover .nt-card__media img { transform: none; }
}