/* ============================================================
   Промо-главная.

   Палитра — глубокий сине-чёрный с ледяным голубым и тёплым
   янтарным акцентом. Страница всегда тёмная: это витрина, и
   переключать ей тему незачем — data-theme="dark" стоит прямо
   в разметке, поэтому общий подвал и согласие тоже приходят
   тёмными.

   Bootstrap не используется, шрифт свой: страница должна
   открываться в закрытом контуре, где внешних сетей нет вовсе.
   Об этом же на ней и написано.
   ============================================================ */

@font-face {
  font-family: 'PromoSans';
  src: url('../fonts/Montserrat-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'PromoSans';
  src: url('../fonts/Montserrat-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'PromoSans';
  src: url('../fonts/Montserrat-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'PromoSans';
  src: url('../fonts/Montserrat-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

.promo {
  --deep:     #061423;
  --raised:   #0f1c2c;
  --panel:    #132030;
  --panel-hi: #1e2b3b;
  --edge:     rgb(255 255 255 / 8%);

  --ice:      #91cdff;
  --ice-dim:  #4c97ce;
  --amber:    #ffb86b;
  --live:     #ff4f4f;

  --words:    #d6e4f9;
  --quiet:    #8a919a;

  margin: 0;
  font-family: 'PromoSans', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--words);
  background: var(--deep);
}

/* Цвет ссылкам задаётся поимённо, а не общим .promo a.

   Общее правило пришлось бы писать через класс и элемент сразу,
   и оно оказалось бы весомее, чем .pr-btn--main: кнопка брала цвет
   от родителя, и почти белый текст ложился на светло-голубой фон.
   Нечитаемо. */

.pr-wrap { width: min(75rem, 100% - 2.5rem); margin: 0 auto; }
.pr-narrow { max-width: 44rem; }

/* --- шапка ----------------------------------------------------- */

.pr-top {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 0.9rem 0;
  background: rgb(6 20 35 / 88%);
  border-bottom: 1px solid var(--edge);
  backdrop-filter: blur(10px);
}

.pr-top__row { display: flex; align-items: center; gap: 1.5rem; }

/* Логотип. Высота в стилях, а не в атрибуте: на узком экране
   он должен становиться меньше, а атрибут этого не умеет. */
.pr-logo { display: inline-flex; flex: none; }
.pr-logo img { height: 40px; width: auto; display: block; }

@media (max-width: 30rem) {
  .pr-logo img { height: 30px; }
}

.pr-top__nav { display: none; gap: 1.4rem; margin-left: auto; font-size: 0.875rem; }
.pr-top__nav a { color: var(--quiet); text-decoration: none; }
.pr-top__nav a:hover { color: var(--ice); }

@media (min-width: 48rem) { .pr-top__nav { display: flex; } }

/* Выбор языка на тёмной шапке: общий компонент, свой фон. */
.promo .lang { margin-left: auto; }
@media (min-width: 48rem) { .promo .lang { margin-left: 0; } }

/* --- надзаголовки ---------------------------------------------- */

.pr-eyebrow {
  margin: 0 0 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ice-dim);
}

.pr-h2 {
  max-width: 20ch;
  margin: 0 0 1rem;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.025em;
}

.pr-text { max-width: 60ch; margin: 0 0 1rem; color: #b6c6dd; }
.pr-text--lead { margin-bottom: 2rem; }

/* --- первый экран ---------------------------------------------- */

.pr-hero {
  position: relative;
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(3.5rem, 9vw, 7rem);
  overflow: hidden;
}

/* Свет из-за левого плеча — намёк на подсвеченную воду, без
   картинки. */
.pr-hero::before {
  content: "";
  position: absolute;
  inset: -30% 40% 20% -20%;
  background: radial-gradient(closest-side, rgb(76 151 206 / 22%), transparent);
  pointer-events: none;
}

.pr-hero__grid { position: relative; display: grid; gap: clamp(2rem, 5vw, 3.5rem); }

@media (min-width: 62rem) {
  .pr-hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 0.8fr); align-items: center; }
}

.pr-hero__title {
  max-width: 15ch;
  margin: 0 0 1.2rem;
  font-size: clamp(2.3rem, 6vw, 4rem);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.035em;
}

.pr-hero__text { max-width: 44ch; margin: 0 0 2rem; font-size: 1.0625rem; color: #b6c6dd; }

/* --- кнопки ----------------------------------------------------- */

.pr-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.pr-btn {
  display: inline-block;
  padding: 0.85rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--words);
  text-decoration: none;
  background: var(--panel-hi);
  border: 1px solid var(--edge);
  border-radius: 0.6rem;
  transition: background 0.15s, border-color 0.15s;
}

.pr-btn:hover { background: #26364a; border-color: rgb(145 205 255 / 35%); }

.pr-btn--main {
  color: var(--deep);
  background: var(--ice);
  border-color: transparent;
}

.pr-btn--main:hover { background: #a9d8ff; }
.pr-btn--big { padding: 1rem 2rem; font-size: 1rem; }

/* --- табло матча ------------------------------------------------ */

.pr-board {
  display: block;
  color: var(--words);
  padding: 1.1rem 1.25rem 1.35rem;
  text-decoration: none;
  background: linear-gradient(160deg, var(--panel), var(--raised));
  border: 1px solid var(--edge);
  border-radius: 1rem;
  box-shadow: 0 24px 60px rgb(0 0 0 / 45%);
}

.pr-board:hover { border-color: rgb(145 205 255 / 30%); }

.pr-board__top { display: flex; align-items: center; min-height: 1.4rem; margin-bottom: 0.6rem; }
.pr-board__date { font-size: 0.75rem; color: var(--quiet); }

.pr-live { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; font-weight: 700; color: var(--live); text-transform: uppercase; letter-spacing: 0.08em; }

.pr-live__dot { width: 0.5rem; height: 0.5rem; background: var(--live); border-radius: 50%; animation: pr-pulse 1.6s infinite; }

@keyframes pr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.pr-board__tournament { margin-bottom: 1rem; font-size: 0.8125rem; line-height: 1.35; color: var(--quiet); }

.pr-board__score {
  display: grid;
  grid-template-columns: 1fr auto auto auto 1fr;
  align-items: center;
  gap: 0.6rem;
}

.pr-board__team { display: flex; align-items: center; gap: 0.55rem; min-width: 0; font-size: 0.9375rem; font-weight: 600; }
.pr-board__team--right { flex-direction: row-reverse; text-align: right; }
.pr-board__team img { width: 34px; height: 34px; object-fit: contain; flex: none; }
.pr-board__team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pr-board__goals { font-size: 2.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pr-board__colon { font-size: 1.5rem; color: var(--quiet); }

/* --- полосы ------------------------------------------------------ */

.pr-section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.pr-section--alt { background: var(--raised); border-block: 1px solid var(--edge); }

/* --- карточки умений --------------------------------------------- */

.pr-grid { display: grid; gap: 1rem; margin-top: 2rem; }

@media (min-width: 40rem) { .pr-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .pr-grid { grid-template-columns: repeat(3, 1fr); } }

.pr-card {
  padding: 1.4rem 1.4rem 1.5rem;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 0.9rem;
}

.pr-card__title { margin: 0 0 0.5rem; font-size: 1.0625rem; font-weight: 700; color: var(--ice); }
.pr-card__text { margin: 0; font-size: 0.9375rem; color: #b0c0d6; }

/* --- две колонки: слова и показ ----------------------------------- */

.pr-split { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }

@media (min-width: 62rem) {
  .pr-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pr-split--flip .pr-split__words { order: 2; }
}

/* --- протокол: строки появляются одна за другой -------------------

   Так же, как в живом протоколе по ходу матча. Задержка у каждой
   своя — через --i в разметке. */

.pr-log {
  padding: 0.6rem;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 0.9rem;
}

.pr-log__row {
  display: grid;
  grid-template-columns: 3rem 1fr auto 3rem;
  gap: 0.6rem;
  align-items: center;
  padding: 0.6rem 0.7rem;
  font-size: 0.875rem;
  border-radius: 0.5rem;
  opacity: 0;
  animation: pr-row 9s calc(var(--i) * 0.9s) infinite;
}

.pr-log__row:nth-child(odd) { background: rgb(255 255 255 / 3%); }

@keyframes pr-row {
  0%          { opacity: 0; transform: translateY(-0.5rem); }
  6%, 88%     { opacity: 1; transform: none; }
  100%        { opacity: 0; transform: none; }
}

.pr-log__time { font-variant-numeric: tabular-nums; color: var(--quiet); }
.pr-log__who  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-log__what { font-size: 0.8125rem; color: var(--quiet); }
.pr-log__what--goal { color: var(--amber); font-weight: 600; }
.pr-log__what--save { color: var(--ice); }
.pr-log__what--foul { color: var(--live); }
.pr-log__score { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }

/* --- карты бросков ------------------------------------------------

   Ячейки наливаются по очереди — так карта и заполняется по ходу
   матча. Насыщенность задаётся в разметке через --heat. */

.pr-map {
  padding: 1.2rem;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 0.9rem;
}

.pr-map__caption {
  margin: 0 0 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--quiet);
}

.pr-goal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  margin-bottom: 1.4rem;
  padding: 3px;
  background: rgb(255 255 255 / 6%);
  border-radius: 0.4rem;
}

.pr-goal__cell {
  aspect-ratio: 3 / 2;
  background: var(--ice);
  border-radius: 0.2rem;
  opacity: 0;
  animation: pr-heat 7s calc(var(--i) * 0.35s) infinite;
}

@keyframes pr-heat {
  0%, 5%    { opacity: 0.04; }
  30%, 85%  { opacity: var(--heat); }
  100%      { opacity: 0.04; }
}

/* Поле: ворота сверху, две линии, шесть позиций. */
.pr-field {
  position: relative;
  aspect-ratio: 3 / 2;
  padding: 26% 8% 8%;
  background: linear-gradient(180deg, #0b3f63, #06263e);
  border-radius: 0.4rem;
}

.pr-field__goal {
  position: absolute;
  top: 4%;
  left: 38%;
  width: 24%;
  height: 7%;
  border: 2px solid rgb(255 255 255 / 70%);
  border-top: 0;
}

.pr-field__line { position: absolute; left: 0; width: 100%; border-top: 2px solid rgb(255 255 255 / 45%); }
.pr-field__line--two  { top: 26%; border-top-style: dashed; }
.pr-field__line--five { top: 46%; }

.pr-field__spot {
  position: absolute;
  width: 13%;
  aspect-ratio: 1;
  background: var(--amber);
  border-radius: 50%;
  opacity: 0;
  animation: pr-heat 7s calc(var(--i) * 0.35s + 0.4s) infinite;
}

.pr-field__spot:nth-child(4) { left: 16%; top: 32%; }
.pr-field__spot:nth-child(5) { left: 43%; top: 32%; }
.pr-field__spot:nth-child(6) { left: 70%; top: 32%; }
.pr-field__spot:nth-child(7) { left: 16%; top: 62%; }
.pr-field__spot:nth-child(8) { left: 43%; top: 62%; }
.pr-field__spot:nth-child(9) { left: 70%; top: 62%; }

/* --- переключатель видов спорта -----------------------------------

   Чистый CSS: радиокнопки и :checked. Нажатие меняет описание —
   ровно то, что меняется в системе при настройке под новый вид. */

.pr-sports { margin: 2rem 0; }
.pr-sports__radio { position: absolute; opacity: 0; pointer-events: none; }

.pr-sports__tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }

.pr-sports__tab {
  padding: 0.6rem 1.1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--quiet);
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 2rem;
  cursor: pointer;
}

.pr-sports__tab:hover { color: var(--words); }

.pr-sports__panel {
  display: none;
  padding: 1.3rem;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 0.9rem;
}

#sport-water_polo:checked ~ .pr-sports__panel--water_polo,
#sport-handball:checked   ~ .pr-sports__panel--handball,
#sport-futsal:checked     ~ .pr-sports__panel--futsal { display: block; }

#sport-water_polo:checked ~ .pr-sports__tabs [for="sport-water_polo"],
#sport-handball:checked   ~ .pr-sports__tabs [for="sport-handball"],
#sport-futsal:checked     ~ .pr-sports__tabs [for="sport-futsal"] {
  color: var(--deep);
  background: var(--ice);
  border-color: transparent;
}

.pr-sports__row { display: grid; gap: 0.35rem; padding: 0.7rem 0; border-bottom: 1px solid var(--edge); }

@media (min-width: 40rem) { .pr-sports__row { grid-template-columns: 11rem 1fr; gap: 1rem; align-items: baseline; } }

.pr-sports__label { font-size: 0.8125rem; color: var(--quiet); }
.pr-sports__values { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.9375rem; }

.pr-chip {
  padding: 0.2rem 0.7rem;
  font-size: 0.8125rem;
  background: var(--panel-hi);
  border-radius: 2rem;
}

.pr-sports__note { margin: 0.9rem 0 0; font-size: 0.8125rem; color: var(--quiet); }

/* --- цепочка сущностей --------------------------------------------- */

.pr-chain { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0; }

.pr-chain__item {
  padding: 0.35rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ice);
  background: rgb(145 205 255 / 8%);
  border: 1px solid rgb(145 205 255 / 18%);
  border-radius: 2rem;
}

/* --- новости --------------------------------------------------------- */

.pr-news { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 48rem) { .pr-news { grid-template-columns: repeat(3, 1fr); } }

/* Карточка — ссылка целиком: попасть в заголовок пальцем на
   телефоне труднее, чем в весь прямоугольник. Цвет ссылке задан
   поимённо: общее правило .promo a оказалось бы весомее кнопок. */
.pr-news__item {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 1.2rem;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 0.9rem;
  color: var(--words);
  text-decoration: none;
}
.pr-news__item:hover { border-color: var(--ice); text-decoration: none; color: var(--words); }

.pr-news__thumb {
  width: 64px;
  height: 64px;
  flex: none;
  object-fit: cover;
  border-radius: 0.6rem;
}

.pr-news__text { display: block; min-width: 0; }
.pr-news__meta { display: block; margin-bottom: 0.4rem; font-size: 0.75rem; color: var(--quiet); }
.pr-news__title { display: block; font-size: 1rem; font-weight: 600; line-height: 1.4; }

.pr-news__announce {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--quiet);
}

.pr-news__all { margin-top: 1.2rem; font-size: 0.9rem; }
.pr-news__all a { color: var(--ice); }

/* --- федерации -------------------------------------------------------- */

.pr-leagues { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .pr-leagues { grid-template-columns: repeat(3, 1fr); } }

.pr-league {
  display: flex;
  color: var(--words);
  align-items: center;
  gap: 1rem;
  padding: 1.2rem;
  text-decoration: none;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 0.9rem;
}

.pr-league:hover { border-color: rgb(145 205 255 / 32%); background: var(--panel-hi); }
.pr-league__logo { width: 52px; height: 52px; object-fit: contain; flex: none; }
.pr-league__name { font-size: 0.9375rem; font-weight: 600; line-height: 1.35; }

/* --- призыв ------------------------------------------------------------ */

.pr-cta {
  padding: clamp(3.5rem, 8vw, 6rem) 0;
  text-align: center;
  background:
    linear-gradient(135deg, rgb(145 205 255 / 7%), rgb(255 184 107 / 4%)),
    var(--deep);
  border-top: 1px solid var(--edge);
}

.pr-cta .pr-h2 { max-width: none; }
.pr-cta .pr-text { margin-left: auto; margin-right: auto; }
.pr-cta__title { margin-bottom: 1rem; }
.pr-cta__mail { margin: 1.2rem 0 0; }
.pr-cta__mail a { color: var(--amber); }

/* Движение — украшение, а не смысл: попросили не двигать —
   не двигаем. */
@media (prefers-reduced-motion: reduce) {
  .promo *, .promo *::before, .promo *::after {
    animation: none !important;
    transition: none !important;
  }

  .pr-log__row { opacity: 1; }
  .pr-goal__cell, .pr-field__spot { opacity: var(--heat); }
}