/* ==========================================================================
   Counter-Strike Universe — база: reset, типографика, сетка, утилиты.
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

/* Атрибут hidden должен побеждать раскладочные display у классов. */
[hidden] { display: none !important; }

h1 { font-size: var(--fs-h1); font-weight: var(--fw-extrabold); line-height: var(--lh-tight); letter-spacing: -.022em; }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold);      line-height: var(--lh-heading); letter-spacing: -.016em; }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold);      line-height: var(--lh-heading); letter-spacing: -.01em; }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold);  line-height: 1.35; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

code, kbd, pre { font-family: var(--font-mono); font-size: .875em; }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--sp-6) 0;
}

::selection { background: var(--olive-soft); color: var(--olive-active); }

/* --- Скелет страницы ------------------------------------------------------ */

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page__main { flex: 1 0 auto; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: 880px; }

.section { padding-block: var(--sp-8); }
.section--tight { padding-block: var(--sp-6); }

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.section__title { font-size: var(--fs-h3); font-weight: var(--fw-bold); }
.section__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.section__link:hover { color: var(--accent); }

/* --- Сетка 12 колонок ----------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-12 { grid-column: span 12; }

@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .col-2, .col-3 { grid-column: span 4; }
  .col-4, .col-5 { grid-column: span 4; }
  .col-6, .col-7, .col-8, .col-9 { grid-column: span 8; }
  .col-12 { grid-column: span 8; }
}

@media (max-width: 768px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid > [class*="col-"] { grid-column: span 4; }
}

/* Автосетка карточек: колонки задаются переменной --min. */
.cards {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fill, minmax(var(--min, 240px), 1fr));
}

.stack   { display: flex; flex-direction: column; gap: var(--sp-3); }
.row     { display: flex; align-items: center; gap: var(--sp-3); }
.row--wrap { flex-wrap: wrap; }
.row--between { justify-content: space-between; }

/* --- Утилиты -------------------------------------------------------------- */

.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-accent    { color: var(--accent); }
.text-positive  { color: var(--green); }
.text-negative  { color: var(--red); }

.fs-small { font-size: var(--fs-small); }
.fs-tiny  { font-size: var(--fs-tiny); }
.fw-medium   { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold     { font-weight: var(--fw-bold); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.nums { font-variant-numeric: tabular-nums; }
/* Названия вроде «Counter-Strike» не должны рваться по дефису в заголовках. */
.nowrap { white-space: nowrap; }

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.icon { width: 20px; height: 20px; flex: none; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 24px; height: 24px; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: var(--sp-2);
  left: -9999px;
  z-index: var(--z-modal);
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-elevated);
  font-weight: var(--fw-semibold);
}
.skip-link:focus { left: var(--sp-2); }

@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}