/* card-link.css */
/* ЕДИНЫЙ модуль «кликабельный блок» (как /map.css — один источник, переиспользуется всеми
   страницами). Делает ВЕСЬ навигационный блок зоной клика, а не только кнопку внутри.
   Паттерн stretched-link: остаётся одна НАСТОЯЩАЯ ссылка (.stretched-link), её ::after
   растягивается на весь блок-контейнер (.card-link) — семантика, SEO и клавиатура целы.
   Интерактивные дети (кнопки, вложенные ссылки, карта) всплывают поверх через z-index и
   продолжают работать. Чистый CSS, без JS, мягкая деградация (нет CSS → блок просто
   обычная карточка с рабочей ссылкой-заголовком).

   Применение на странице:
     <article class="... card-link">
       <h3><a class="... stretched-link" href="/куда/">Заголовок</a></h3>
       ...
       <a class="btn ...">Кнопка-аффорданс</a>   (всплывёт поверх, кликабельна как раньше)
     </article>
   Подключать ПОСЛЕ инлайн-<style> страницы, чтобы hover-правила выигрывали каскад у
   page-локальных стилей (.is-live и т.п.). */

.card-link {
  position: relative;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

/* Псевдоэлемент главной ссылки = прозрачная плашка на весь блок (зона клика). */
.card-link .stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Любой интерактив внутри блока остаётся доступным ПОВЕРХ плашки. */
.card-link a:not(.stretched-link),
.card-link button,
.card-link .hov-map,
.card-link input,
.card-link select,
.card-link textarea {
  position: relative;
  z-index: 2;
}

/* «Максимально заметный» отклик: подъём + scale + усиленный glow + ярче рамка.
   :hover — ОТДЕЛЬНЫМ правилом (уцелеет в старых движках без :has). Клавиатурный фокус —
   :has(:focus-visible), а НЕ :focus-within: мышиный клик по .stretched-link открывает профиль
   в НОВОЙ вкладке (target=_blank) → фокус остаётся на ссылке → :focus-within держал бы блок
   «зажжённым» после клика (залипание). :focus-visible браузер даёт клавиатуре, но НЕ мышиному
   клику → блок гаснет сразу, а таб-фокус подсвечивает (a11y цела). Тем же приёмом, что .person. */
.card-link:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: var(--cyan, #3b5bff);
  box-shadow:
    var(--shadow-cyan, 0 0 28px rgba(59, 91, 255, 0.48)),
    var(--shadow-pink, 0 0 28px rgba(255, 176, 32, 0.52));
}

.card-link:has(:focus-visible) {
  transform: translateY(-4px) scale(1.01);
  border-color: var(--cyan, #3b5bff);
  box-shadow:
    var(--shadow-cyan, 0 0 28px rgba(59, 91, 255, 0.48)),
    var(--shadow-pink, 0 0 28px rgba(255, 176, 32, 0.52));
}

/* Текст главной ссылки подсвечивается вместе с блоком (hover и клавиатурный фокус — раздельно,
   чтобы hover уцелел без :has). */
.card-link:hover .stretched-link {
  color: var(--cyan, #3b5bff);
  text-shadow: var(--shadow-cyan, 0 0 28px rgba(59, 91, 255, 0.48));
}

.card-link:has(:focus-visible) .stretched-link {
  color: var(--cyan, #3b5bff);
  text-shadow: var(--shadow-cyan, 0 0 28px rgba(59, 91, 255, 0.48));
}

/* Уважаем prefers-reduced-motion: без движения, но визуальный сигнал (глоу/рамка) остаётся. */
@media (prefers-reduced-motion: reduce) {
  .card-link {
    transition: box-shadow 180ms ease, border-color 180ms ease;
  }

  .card-link:hover {
    transform: none;
  }

  .card-link:has(:focus-visible) {
    transform: none;
  }
}