/* Список ссылок: карточки на страницы сайта.
 *
 * Перенос эффекта, которым донор рисовал списки статей
 * (menu_link__effect_fresh_bubba): тёмная карточка, приглушённая картинка,
 * белый заголовок капслоком поверх неё; на наведении картинка гаснет
 * сильнее, проявляется рамка из двух пар линий и пояснение, а ссылкой
 * работает вся карточка целиком.
 *
 * Значения взяты из его же CSS (opacity 0.7 → 0.4, рамка с отступом 30px,
 * заголовок 130 % в Cuprum). Раскладка при этом на grid, а не на float с
 * процентными padding-bottom: пропорция карточки задаётся aspect-ratio, и
 * три брейкпоинта донора (33 % → 50 % → 100 %) выражаются одной строкой. */

.link-list { margin-bottom: 34px; }
.link-list__title { margin: 0 0 .7em; }

.link-list__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.link-list__item {
  position: relative;
  overflow: hidden;
  background-color: #000;
  aspect-ratio: 3 / 2;
}

.link-list__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .7;
  transition: opacity .35s;
}

.link-list__content {
  position: absolute;
  inset: 0;
  padding: 2em;
  color: #fff;
  pointer-events: none;
}

/* Две пары линий проявляются на наведении — как у донора. */
.link-list__content::before,
.link-list__content::after {
  position: absolute;
  inset: 30px;
  content: "";
  opacity: 0;
  transition: opacity .35s, transform .35s;
}
.link-list__content::before {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: scale(0, 1);
}
.link-list__content::after {
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: scale(1, 0);
}

.link-list__name {
  margin: 0;
  padding: 18% 4% 0;
  /* Белый — явно, а не по наследству от карточки: у скина есть общее
     правило на h1…h5 с тёмным цветом, и оно перебивает унаследованный. */
  color: #fff;
  font-family: "Cuprum", "Arial Narrow", Arial, sans-serif;
  font-size: 130%;
  line-height: 1.15;
  text-transform: uppercase;
  text-align: center;
  transition: transform .35s;

  /* Одинаковая область у всех карточек: ровно три строки, лишнее
     скрывается. Заголовки в списке разной длины — от «Роскошь в Вашем
     доме» до строки на восемьдесят знаков, — и без фиксированной высоты
     плитки выглядят разнобоем. У донора то же самое делалось фиксированной
     высотой блока пояснения (57px) под заголовком.

     text-wrap возвращаем к обычному: скин сайта включает balance для всех
     заголовков, а он раскладывает строки по-своему в каждой карточке. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  height: calc(3 * 1.15em); /* ровно три строки: padding-top идёт сверх */
  box-sizing: content-box;
  text-wrap: initial;
}

/* На наведении заголовок приподнимается, освобождая место пояснению.
   Сдвиг делается transform'ом: отступы и высоты при этом не меняются, и
   соседние карточки не дёргаются. */
.link-list__item:hover .link-list__name { transform: translateY(-10px); }

.link-list__note {
  color: #fff;
  /* Высота как у донора: блок занимает место всегда, поэтому появление
     пояснения ничего не двигает. */
  height: 57px;
  overflow: hidden;
  margin-top: 10px;
  padding: 0 4%;
  font-size: 13.5px;
  text-align: center;
  opacity: 0;
  transition: opacity .35s;
}

.link-list__link { position: absolute; inset: 0; opacity: 0; }

.link-list__item:hover .link-list__image { opacity: .4; }
.link-list__item:hover .link-list__note { opacity: 1; }
.link-list__item:hover .link-list__content::before,
.link-list__item:hover .link-list__content::after {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 900px) {
  .link-list__grid { grid-template-columns: repeat(2, 1fr); }
  .link-list__content { padding: 20px; }
  .link-list__content::before, .link-list__content::after { inset: 20px; }
  .link-list__name { font-size: 120%; padding-top: 9%; }
}

@media (max-width: 600px) {
  .link-list__grid { grid-template-columns: 1fr; }
  .link-list__item { aspect-ratio: 5 / 2; }
  .link-list__name { padding-top: 6%; }
}

@media (prefers-reduced-motion: reduce) {
  .link-list__image, .link-list__note,
  .link-list__content::before, .link-list__content::after { transition: none; }
}

/* Список без картинок — это меню, а не плитка.
 *
 * Одним и тем же модулем донор собирал два разных блока: список статей с
 * фотографиями и меню подвала из трёх ссылок. Рисовать меню тёмными
 * плитками во весь экран — не перенос, а порча. Отличаем по наличию
 * картинки в записи: :has() поддерживают все браузеры, где живёт
 * платформа. */
.link-list__grid:not(:has(.link-list__image)) {
  grid-template-columns: 1fr;
  gap: 2px;
}

.link-list__item:not(:has(.link-list__image)) {
  aspect-ratio: auto;
  background: transparent;
  overflow: visible;
}

.link-list__item:not(:has(.link-list__image)) .link-list__content {
  position: static;
  inset: auto;
  padding: 0;
  color: inherit;
  pointer-events: auto;
}

.link-list__item:not(:has(.link-list__image)) .link-list__content::before,
.link-list__item:not(:has(.link-list__image)) .link-list__content::after {
  content: none;
}

.link-list__item:not(:has(.link-list__image)) .link-list__name {
  height: auto;
  padding: 0;
  color: inherit;
  font-size: 100%;
  line-height: 1.6;
  text-align: left;
  text-transform: none;
  display: block;
  transform: none;
}

.link-list__item:not(:has(.link-list__image)) .link-list__note {
  height: auto;
  opacity: 1;
  color: inherit;
  margin: 0;
  padding: 0;
  text-align: left;
}

/* Ссылка остаётся накладкой и в меню.
 *
 * В шаблоне <a> пустой: подпись лежит в заголовке рядом, а кликом работает
 * накладка поверх всей карточки. Прежде здесь она переводилась в поток
 * (position: static) — и превращалась в блок нулевой высоты: подпись
 * видно, а нажать нечего. Оставляем накладку: карточка меню — такой же
 * прямоугольник, просто без картинки, и inset: 0 покрывает ровно его.
 *
 * Указатель и подчёркивание на наведении даёт сайт: у пустого <a>
 * донорское `#global5 A:hover` не срабатывает, и подсветку подписи в
 * подвале задаёт скин (_platform-modules.scss). */