/* ============================================
   ИГРА · materials.html — специфичные стили страницы
   Подключается ПОСЛЕ styles.css (его не меняем)
   ============================================ */

/* ---------- шапка страницы ---------- */
.page-head { padding: 80px 0 40px; }
.page-head__title {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.15;
}
.page-head__sub {
  margin-top: 18px;
  max-width: 640px;
  color: var(--text-dim);
  font-size: 18px;
}

/* ---------- заглушка «отчётов пока нет» ---------- */
.report-empty {
  padding: 40px 32px;
  border: 1px dashed var(--card-border);
  border-radius: 16px;
  text-align: center;
  color: var(--text-dim);
  display: grid;
  justify-items: center;
  gap: 14px;
}
.report-empty__icon { font-size: 40px; margin: 0; }
.report-empty p { margin: 0; max-width: 480px; }

/* ---------- карточка отчёта (шаблон) ---------- */
.report {
  padding: 28px;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, .03);
  display: grid;
  gap: 18px;
  margin-bottom: 28px;
}
.report__date { color: var(--mint); font-size: 14px; font-weight: 700; margin: 0; }
.report__game { font-size: 24px; font-weight: 800; margin: 4px 0 0; }
.report__photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.report__photos img {
  width: 100%; height: 200px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}
.report__text { color: var(--text-dim); margin: 0; }
.report__link {
  color: var(--lavender);
  font-weight: 700;
  text-decoration: none;
}
.report__link:hover { color: var(--violet); }

/* ---------- полезные материалы ---------- */
.useful-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.useful-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, .03);
  text-decoration: none;
  color: var(--text);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
a.useful-card:hover {
  transform: translateY(-4px);
  border-color: var(--violet);
  box-shadow: 0 12px 40px rgba(111, 42, 149, .35);
}
.useful-card h3 { font-size: 19px; font-weight: 800; margin: 0; }
.useful-card p { color: var(--text-dim); font-size: 15px; margin: 0; flex-grow: 1; }
.useful-card__tag {
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #070D1F;
  background: var(--mint);
}
.useful-card--soon .useful-card__tag { background: var(--card-border); color: var(--text-dim); }
.useful-card__go { color: var(--lavender); font-weight: 700; font-size: 14px; }
.useful-card--soon .useful-card__go { color: var(--text-dim); }

/* ---------- CTA-блок ---------- */
.cta { padding: 40px 0 90px; }
.cta__card {
  padding: 48px 32px;
  border-radius: 20px;
  text-align: center;
  background: linear-gradient(135deg, rgba(111, 42, 149, .35), rgba(11, 31, 58, .6));
  border: 1px solid var(--card-border);
  display: grid;
  justify-items: center;
  gap: 16px;
}
.cta__title {
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 800;
  text-transform: uppercase;
  margin: 0;
}
.cta__sub { color: var(--text-dim); max-width: 560px; margin: 0; }

@media (max-width: 760px) {
  .page-head { padding: 56px 0 28px; }
}