/* ============================================================
   ARTICLES — articles/index.html. Витрина блога: рубрикатор и
   сетка карточек. Визуальный язык взят у существующих разделов
   (hero как на legal/certificates, карточка как .about-articles__card),
   чтобы блог не выглядел приезжим на собственном сайте.
   ============================================================ */

.art-hero.wrap {
  display: flex; flex-direction: column; gap: clamp(18px, 1.25vw, 24px);
  margin-top: clamp(80px, 5.21vw, 100px);
  padding-top: clamp(48px, 4.17vw, 80px); padding-bottom: clamp(28px, 2.08vw, 40px);
}
.art-hero__title { font-size: clamp(34px, 3.33vw, 64px); font-weight: 400; color: var(--c-text); letter-spacing: -0.04em; line-height: 1; margin: 0; font-style: normal; }
.art-hero__subtitle { font-size: clamp(18px, 1.25vw, 22px); font-weight: 300; color: var(--c-muted); line-height: 1.5; letter-spacing: -0.02em; margin: 0; max-width: 720px; font-style: normal; }

/* ── Рубрикатор ───────────────────────────────────────────────
   Ряд фильтров. Счётчик в подписи честный: он считается из разметки
   при загрузке, а не проставлен руками, — иначе при добавлении статьи
   цифры разъедутся. */
.art-filters.wrap { padding-top: 0; padding-bottom: clamp(24px, 2.08vw, 36px); }
.art-filters__row { display: flex; flex-wrap: wrap; gap: 10px; }
.art-filter {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid rgba(48,54,46,0.14); background: transparent;
  font-family: inherit; font-size: clamp(14px, 0.94vw, 16px); font-weight: 400;
  color: var(--c-text); letter-spacing: -0.02em; line-height: 1; cursor: pointer;
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease, transform 0.16s cubic-bezier(0.23,1,0.32,1);
}
.art-filter__count { font-size: 0.85em; color: var(--c-muted); transition: color 0.25s ease; }
@media (hover: hover) and (pointer: fine) {
  .art-filter:hover { border-color: rgba(141,165,133,0.55); background: rgba(141,165,133,0.08); }
}
.art-filter:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.art-filter:active { transform: scale(0.97); }
.art-filter[aria-pressed="true"] { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.art-filter[aria-pressed="true"] .art-filter__count { color: rgba(255,255,255,0.75); }

/* ── Сетка карточек ──────────────────────────────────────────── */
.art-grid-sec.wrap { padding-top: 0; padding-bottom: clamp(72px, 6.25vw, 120px); }
.art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: clamp(24px, 2.08vw, 40px) clamp(20px, 1.67vw, 32px); }
.art-card { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: inherit; transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); }
.art-card.is-hidden { display: none; }
.art-card__frame {
  position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: #e7e4dc;
  /* тень с примесью брендовой зелени, а не серая: на тёплом фоне сайта
     нейтральная тень выглядит грязным пятном */
  box-shadow: 0 1px 2px rgba(48,54,46,0.06), 0 10px 28px -12px rgba(58,84,54,0.18);
}
.art-card__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.22,1,0.36,1); }
.art-card__frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0) 45%); pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .art-card:hover { transform: translateY(-4px); }
  .art-card:hover .art-card__frame img { transform: scale(1.04); }
}
.art-card:focus-visible { outline: none; }
.art-card:focus-visible .art-card__frame { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.art-card:active { transform: scale(0.99); }

/* Рубрика сидит на обложке, а не в строке «рубрика · дата»: так она
   читается как ярлык и связывает карточку с фильтром наверху, а подпись
   под картинкой остаётся одной датой вместо склейки из двух фактов. */
.art-card__rubric {
  position: absolute; left: 12px; bottom: 12px; z-index: 1;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255,253,249,0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: clamp(12px, 0.78vw, 14px); font-weight: 500; color: var(--c-accent-hover);
  letter-spacing: -0.01em; line-height: 1;
}
@media (prefers-reduced-transparency: reduce) {
  .art-card__rubric { background: #fffdf9; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.art-card__meta { font-size: clamp(13px, 0.83vw, 15px); font-weight: 400; color: var(--c-muted); letter-spacing: -0.01em; line-height: 1; }
.art-card__title { font-size: clamp(18px, 1.25vw, 24px); font-weight: 500; color: var(--c-text); letter-spacing: -0.03em; line-height: 1.25; margin: 0; font-style: normal; }
.art-card__excerpt { font-size: clamp(14px, 0.94vw, 16px); font-weight: 300; color: var(--c-muted); line-height: 1.6; letter-spacing: -0.01em; margin: 0; font-style: normal; }

.art-empty { display: none; margin: 0; padding: clamp(32px, 3vw, 56px) 0; font-size: clamp(15px, 1vw, 18px); font-weight: 300; color: var(--c-muted); line-height: 1.6; font-style: normal; }
.art-empty.is-on { display: block; }

@media (prefers-reduced-motion: reduce) {
  .art-card, .art-card__frame img, .art-filter { transition: none; }
  .art-card:hover, .art-card:active { transform: none; }
  .art-card:hover .art-card__frame img { transform: none; }
  .art-filter:active { transform: none; }
}

@media (max-width: 767px) {
  footer.site-footer { display: none !important; }

  /* Заголовок страницы и его подзаголовок на узких экранах ставим по
     центру — так же, как на главной, «О клинике» и «Услугах»: на
     телефоне короткий заголовок у левого края смотрится обрезком,
     а содержимое ниже остаётся выключенным влево, как и было. */
  .art-hero.wrap { margin-top: 80px; padding: 32px 20px 20px; gap: 12px; align-items: center; text-align: center; }
  .art-hero__subtitle { max-width: 34ch; }
  .art-hero__title { font-size: 28px; }
  .art-hero__subtitle { font-size: 16px; line-height: 1.45; }

  /* рубрикатор уезжает в горизонтальную ленту: пять кнопок в столбик
     съедали бы экран до того, как человек увидит первую статью */
  .art-filters.wrap { padding: 0 0 20px; }
  .art-filters__row {
    flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding: 2px 20px 4px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .art-filters__row::-webkit-scrollbar { display: none; }
  .art-filter { flex: 0 0 auto; padding: 9px 15px; font-size: 14px; }

  .art-grid-sec.wrap { padding: 0 20px 56px; }
  .art-grid { grid-template-columns: 1fr; gap: 28px; }
  .art-card { gap: 12px; }
  .art-card__rubric { left: 10px; bottom: 10px; padding: 5px 10px; font-size: 12px; }
  .art-card__title { font-size: 19px; }
  .art-card__excerpt { font-size: 15px; }
}