/* Три правила премии — общий блок partials/shared/award-rules.html.
   Стоит на главной (между hero и словом основателя) и на пяти страницах треков
   (после «Трёх наград трека»). Файл подключают обе стороны: страница трека
   не грузит landing-sections.css, общими остаются только файлы из styles/.

   Кадра под блоком нет ни там, ни там — значит монолит: никакого backdrop-filter,
   фон берём у базы страницы. Золото — только на состоянии ссылки. */

.award-rules {
  position: relative;
  z-index: 1;
  padding: clamp(26px, 3.2vw, 44px) 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.award-rules__shell {
  width: min(100% - 2.5rem, 1220px);
  margin: 0 auto;
  display: grid;
  gap: clamp(18px, 2.2vw, 32px);
}

/* На странице трека сетку задаёт .page — min(100% - 22px, 1360px). Свой
   контейнер здесь только сузил бы блок относительно соседних секций. */
.page .award-rules__shell {
  width: 100%;
}

.award-rules__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 40px);
}

/* Разделители между правилами: та же вертикаль, что держит акты на оси этапов */
.award-rules__item {
  display: grid;
  gap: 7px;
  padding-left: clamp(18px, 2.4vw, 40px);
  border-left: 1px solid var(--line);
}

.award-rules__item:first-child {
  padding-left: 0;
  border-left: 0;
}

.award-rules__item:last-child {
  text-align: right;
  justify-items: end;
}

.award-rules__item strong {
  font: 600 clamp(19px, 1.7vw, 25px) / 1.1 var(--font-display);
  color: var(--ink);
  letter-spacing: 0.004em;
}

/* Фоллбэки обязательны: шкала --text-* живёт только в базе главной,
   на страницах треков её нет, и shorthand font отвалился бы целиком. */
.award-rules__item span {
  color: rgba(244, 241, 234, 0.5);
  font: 400 var(--text-sm, 13px) / 1.5 var(--font-body);
}

.award-rules__more {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(244, 241, 234, 0.62);
  font: 500 var(--text-xs, 11px) / 1 var(--font-ui);
  letter-spacing: var(--ls-caps, 0.14em);
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.3s ease;
}

.award-rules__chev {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.3s ease;
}

.award-rules__more:hover,
.award-rules__more:focus-visible {
  color: var(--gold);
}

.award-rules__more:hover .award-rules__chev,
.award-rules__more:focus-visible .award-rules__chev {
  transform: rotate(-45deg) translate(2px, 2px);
}

@media (max-width: 900px) {
  .award-rules__list {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .award-rules__item {
    padding-left: 14px;
    border-left: 1px solid var(--line);
  }

  .award-rules__item:first-child {
    padding-left: 14px;
    border-left: 1px solid var(--line);
  }

  .award-rules__item:last-child {
    text-align: left;
    justify-items: start;
  }
}

@media (max-width: 720px) {
  .award-rules {
    display: none;
  }
}