/* --- Stile minimalista (Основа) --- */
:root {
  --verde: #2e8b57; /* Изумрудный */
  --verde-scuro: #216d41; /* Темно-зеленый для ховера/активных элементов */
  --bianco: #f8f9fa; /* Почти белый */
  --grigio-chiaro: #e9ecef; /* Очень светло-серый */
  --grigio-medio: #adb5bd; /* Средне-серый, для границ */
  --grigio-scuro: #6c757d; /* Темно-серый, для второстепенного текста */
  --testo-scuro: #343a40; /* Темный текст */
  --ombra-leggera: rgba(0, 0, 0, 0.08); /* Легкая тень */
  --ombra-media: rgba(0, 0, 0, 0.15); /* Средняя тень */
}

/* Универсальный сброс для box-sizing и предотвращение горизонтальной прокрутки */
* {
  box-sizing: border-box; /* Учитывает padding и border в ширине/высоте элемента */
}

body {
  font-family: "Segoe UI", "Roboto", sans-serif; /* Добавлен Roboto как запасной вариант */
  line-height: 1.7; /* Увеличен межстрочный интервал для лучшей читабельности */
  margin: 0;
  padding: 0;
  background-color: var(--bianco);
  color: var(--testo-scuro);
  overflow-x: hidden; /* ГЛАВНОЕ ИСПРАВЛЕНИЕ: Предотвращает горизонтальную прокрутку на body */
  font-size: 1rem; /* Базовый размер для мобильных */
}

/* --- Header & Navigation --- */
header {
  background-color: var(--verde);
  color: var(--bianco);
  padding: 1.5rem 0; /* Увеличены отступы */
  text-align: center;
  box-shadow: 0 2px 10px var(--ombra-media); /* Добавлена тень для шапки */
}

header h1 {
  margin: 0;
  padding: 0 20px; /* Отступы для текста заголовка, чтобы он не прилипал к краям */
  font-size: clamp(2rem, 5vw, 3.5rem); /* Адаптивный размер заголовка */
  letter-spacing: 1px; /* Небольшой межбуквенный интервал */
}

nav ul {
  list-style: none;
  padding: 0;
  margin-top: 1rem; /* Отступ от заголовка */
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* Позволяет пунктам переноситься на новую строку */
}

nav ul li {
  margin: 0 18px; /* Немного увеличены отступы */
}

nav ul li a {
  color: var(--bianco);
  text-decoration: none;
  font-weight: bold;
  padding: 8px 0; /* Увеличен padding для лучшей области клика */
  transition: color 0.3s ease, transform 0.2s ease; /* Добавлен transform */
  position: relative; /* Для эффекта подчеркивания */
}

nav ul li a::after {
  /* Эффект подчеркивания при наведении */
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background-color: var(--bianco);
  transition: width 0.3s ease-out;
}

nav ul li a:hover {
  color: var(--grigio-chiaro);
  transform: translateY(-2px); /* Легкий эффект "поднятия" */
}

nav ul li a:hover::after {
  width: 100%;
}

/* --- Main Content Area --- */
main {
  padding: 25px; /* Увеличен padding */
  max-width: 1280px; /* Увеличена максимальная ширина */
  margin: 30px auto; /* Увеличены отступы сверху/снизу */
  background-color: #fff;
  box-shadow: 0 5px 20px var(--ombra-легкая); /* Более выраженная, но мягкая тень */
  border-radius: 12px; /* Более округлые углы */
  transition: box-shadow 0.3s ease; /* Плавный переход для тени */
  /* Дополнительные меры предосторожности */
  overflow: hidden; /* Может помочь, если внутри main что-то вылезает */
}

main:hover {
  box-shadow: 0 8px 25px var(--ombra-media); /* Тень становится заметнее при наведении на блок */
}

/* --- Sections --- */
section {
  margin-bottom: 40px; /* Увеличен отступ между секциями */
  padding: 25px; /* Увеличен padding */
  background-color: var(--grigio-chiaro);
  border-radius: 10px; /* Немного более округлые углы */
  box-shadow: 0 2px 8px var(--ombra-легкая); /* Легкая тень для секций */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Дополнительные меры предосторожности */
  overflow: hidden; /* Может помочь, если внутри секции что-то вылезает */
}

section:hover {
  transform: translateY(-3px); /* Легкий эффект "поднятия" при наведении */
  box-shadow: 0 5px 15px var(--ombra-media);
}

/* --- Headings within sections --- */
h2,
h3,
h4 {
  color: var(--verde);
  border-bottom: 2px solid var(--grigio-medio);
  padding-bottom: 12px; /* Увеличен padding */
  margin-top: 25px; /* Увеличен margin-top */
  margin-bottom: 18px; /* Увеличен margin-bottom */
  font-size: clamp(1.5rem, 4vw, 2.2rem); /* Адаптивный размер */
  position: relative; /* Для дополнительной декорации */
}

h2::before {
  /* Декоративный элемент под заголовками */
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 60px; /* Длина зеленой полосы */
  height: 2px;
  background-color: var(--verde);
}

p {
  margin-bottom: 18px; /* Увеличен отступ между параграфами */
  font-size: 1.05rem; /* Немного увеличен размер шрифта для основного текста */
}

/* --- Countdown --- */
.countdown {
  font-size: clamp(2.5em, 8vw, 4em); /* Более выраженный адаптивный размер */
  font-weight: 700; /* Более жирный шрифт */
  color: var(--verde);
  text-align: center;
  margin: 30px 0;
  text-shadow: 2px 2px 4px var(--ombra-легкая); /* Добавлена легкая тень для текста */
}

/* --- Key Facts --- */
.key-facts {
  display: grid; /* Переход на Grid для лучшей адаптивности */
  grid-template-columns: repeat(
    auto-fit,
    minmax(280px, 1fr)
  ); /* Адаптивные колонки */
  gap: 25px; /* Увеличен зазор */
  margin-top: 30px;
  /* Убедимся, что Flexbox/Grid элементы не выходят за границы */
  overflow: hidden;
}

.fact-box {
  background-color: var(--verde);
  color: var(--bianco);
  padding: 20px; /* Увеличен padding */
  border-radius: 10px; /* Более округлые углы */
  text-align: center;
  box-shadow: 0 4px 12px var(--ombra-легкая); /* Тень для карточек */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Убедимся, что содержимое не вылезает */
  overflow: hidden;
}

.fact-box:hover {
  transform: translateY(-5px); /* Более заметный эффект поднятия */
  box-shadow: 0 6px 18px var(--ombra-media);
}

/* --- Tables (Улучшенная адаптивность) --- */
table {
  border-collapse: collapse;
  width: 100%; /* Гарантируем, что таблица не шире 100% */
  margin-top: 25px; /* Увеличен отступ */
  box-shadow: 0 2px 8px var(--ombra-легкая); /* Тень для таблицы */
  border-radius: 8px; /* Скругление углов для всей таблицы */
  overflow: hidden; /* Важно для применения border-radius к таблице и предотвращения вылезания контента */
  /* display: block; -- Убран здесь, так как .table-responsive теперь управляет прокруткой */
  position: relative; /* Для z-index или других позиционных свойств */
}

/* Контейнер для скролла таблицы на мобильных */
.table-responsive {
  overflow-x: auto; /* Позволяет горизонтальный скролл только для таблицы */
  -webkit-overflow-scrolling: touch; /* Улучшает скроллинг на iOS */
  margin-bottom: 20px; /* Добавляем отступ после контейнера */
}

th,
td {
  padding: 1.1rem; /* Увеличен padding в ячейках */
  text-align: left;
  border: 1px solid var(--grigio-medio);
  word-break: break-word; /* Позволяет длинным словам переноситься */
  white-space: normal; /* Гарантирует нормальный перенос текста */
}

th {
  background-color: var(--verde);
  color: var(--bianco);
  font-weight: 600; /* Более жирный шрифт для заголовков */
  text-transform: uppercase; /* Верхний регистр */
  letter-spacing: 0.5px;
}

tr:nth-child(even) {
  /* Чередование строк */
  background-color: var(--grigio-chiaro);
}

caption {
  font-weight: bold;
  font-size: 1.3em; /* Немного увеличен размер */
  margin-bottom: 15px;
  color: var(--verde);
  text-align: center;
}

/* --- Partita (Match/Game) --- */
.partita {
  background-color: #fff;
  border: 1px solid var(--grigio-medio);
  border-radius: 8px; /* Более округлые углы */
  margin-bottom: 12px;
  padding: 15px; /* Увеличен padding */
  display: flex;
  flex-direction: column;
  gap: 8px; /* Увеличен зазор */
  box-shadow: 0 1px 4px var(--ombra-легкая); /* Легкая тень */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden; /* Предотвращаем вылезание контента */
}

.partita:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 8px var(--ombra-media);
}

.partita span:first-child {
  font-weight: bold;
  color: var(--verde);
  font-size: 1.1em; /* Немного увеличен шрифт */
}

/* --- News Preview --- */
.news-preview {
  background-color: #fff;
  border: 1px solid var(--grigio-medio);
  border-radius: 8px;
  margin-bottom: 20px; /* Увеличен отступ */
  padding: 20px; /* Увеличен padding */
  display: block;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 6px var(--ombra-легкая);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden; /* Предотвращаем вылезание контента */
}

.news-preview:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px var(--ombra-media);
}

.news-preview h3 {
  margin-top: 0;
  border-bottom: none;
  padding-bottom: 0;
  color: var(--verde);
  font-size: 1.3em; /* Немного увеличен размер */
  margin-bottom: 10px;
}

.news-preview p {
  font-size: 0.95em; /* Немного увеличен размер */
  color: var(--grigio-scuro); /* Более мягкий цвет для текста */
}

/* --- Общие стили для изображений (решает проблемы с центрированием и растягиванием) --- */
/* Применяется ко всем изображениям на сайте, если у них нет более специфичных правил */
img {
  max-width: 100%; /* Гарантирует, что изображение не выйдет за пределы контейнера */
  height: auto; /* Сохраняет пропорции изображения */
  display: block; /* Делает изображение блочным элементом, чтобы можно было центрировать */
  margin-left: auto; /* Центрирует изображение по горизонтали */
  margin-right: auto; /* Центрирует изображение по горизонтали */
}

/* Специально для изображений внутри статей */
.news-article-content img {
  margin: 20px auto; /* Центрирует и добавляет отступы */
  border-radius: 10px;
  box-shadow: 0 4px 10px var(--ombra-легкая);
}

/* --- Footer --- */
footer {
  background-color: var(--verde);
  color: var(--bianco);
  text-align: center;
  padding: 1.8rem 0; /* Увеличен padding */
  margin-top: 50px; /* Увеличен отступ */
  box-shadow: 0 -2px 10px var(--ombra-media); /* Тень сверху */
}

footer p {
  margin: 8px 0;
  font-size: 0.95rem;
}

footer a {
  color: var(--bianco);
  text-decoration: none;
  margin: 0 12px;
  transition: text-decoration 0.3s ease, color 0.3s ease;
}

footer a:hover {
  text-decoration: underline;
  color: var(--grigio-chiaro);
}

.disclaimer {
  font-size: 0.85em; /* Немного увеличен шрифт */
  margin-top: 15px;
  padding: 12px;
  background-color: rgba(255, 255, 255, 0.25); /* Более заметный фон */
  border-radius: 8px;
  color: var(--bianco); /* Гарантируем, что текст белый */
}

/* --- Image Gallery --- */
.image-gallery {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(180px, 1fr)
  ); /* Увеличен минимальный размер */
  gap: 20px; /* Увеличен зазор */
  margin-top: 25px;
  overflow: hidden; /* Предотвращаем вылезание изображений */
}

.image-gallery img {
  width: 100%;
  height: 180px; /* Увеличена фиксированная высота */
  object-fit: cover; /* Это важно для предотвращения растягивания, обрезает изображение по размеру */
  border-radius: 10px; /* Более округлые углы */
  box-shadow: 0 4px 10px var(--ombra-легкая); /* Более заметная тень */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-gallery img:hover {
  transform: scale(1.03); /* Легкое увеличение при наведении */
  box-shadow: 0 6px 15px var(--ombra-media);
}

/* --- Responsive Adjustments (Mobile-First) --- */

/* Для маленьких мобильных устройств (< 480px) */
@media (max-width: 480px) {
  main {
    margin: 15px 0; /* Убрал auto, чтобы не было лишних margin по бокам */
    padding: 15px;
    border-radius: 0; /* На мобильных убираем скругление для full-width */
    box-shadow: none; /* Убираем тень для более "легкого" вида */
  }

  section {
    padding: 15px;
    margin-bottom: 25px;
    border-radius: 0;
    box-shadow: none; /* Убираем тень для секций на мобильных */
  }

  nav ul li {
    margin: 0 10px;
  }

  /* Адаптивная таблица для мобильных устройств */
  table {
    /* Эти стили позволяют таблице скроллиться горизонтально внутри .table-responsive */
    width: 100%; /* Таблица занимает всю доступную ширину контейнера */
    min-width: 600px; /* Минимальная ширина таблицы, чтобы она не "сломалась" */
  }

  /* Стили для превращения таблицы в карточки на мобильных (требует data-label в HTML) */
  /* Если вы хотите, чтобы таблица просто скроллилась, закомментируйте этот блок
     и убедитесь, что только .table-responsive управляет overflow-x. */
  thead {
    position: absolute;
    top: -9999px;
    left: -9999px; /* Скрыть заголовки таблицы */
  }
  tr {
    border: 1px solid var(--grigio-medio);
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
    display: block; /* Сделать строки блочными */
  }
  td {
    border: none;
    border-bottom: 1px solid var(--grigio-chiaro);
    position: relative;
    padding-left: 50%; /* Добавьте место для метки */
    text-align: right;
    display: block; /* Сделать ячейки блочными */
  }
  td::before {
    content: attr(data-label); /* Используйте data-label для меток */
    position: absolute;
    left: 0;
    width: 45%;
    padding-left: 10px;
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
    color: var(--verde);
  }
  td:last-child {
    border-bottom: 0;
  }
}

/* Для планшетов и больших мобильных устройств (от 768px и выше) */
@media (min-width: 768px) {
  body {
    font-size: 1.05rem; /* Немного увеличен базовый шрифт */
  }

  header h1 {
    font-size: clamp(2.5rem, 4vw, 4rem); /* Еще больше адаптивность */
  }

  nav ul {
    margin-top: 0; /* На десктопах меню может быть рядом с заголовком */
    flex-direction: row; /* Навигация в строку на больших экранах */
    justify-content: center;
  }

  .key-facts {
    grid-template-columns: repeat(
      auto-fit,
      minmax(250px, 1fr)
    ); /* Лучшее распределение колонок */
  }

  .fact-box {
    margin: 0; /* Убираем margin, так как gap справляется */
  }

  .news-preview {
    padding: 25px;
  }

  table {
    margin-top: 30px;
    /* Возвращаем стандартное отображение таблицы на больших экранах */
    display: table; /* Переопределяем display: block; для таблицы, если он был установлен */
    min-width: unset; /* Сбросить min-width */
  }

  /* Отменяем мобильные стили таблицы */
  thead {
    position: static;
  }
  tr {
    display: table-row; /* Возвращаем стандартное отображение строки */
    border: none; /* Убираем border, который был добавлен для моб.карточек */
    margin-bottom: 0; /* Убираем margin */
  }
  td {
    padding-left: 1.1rem; /* Возвращаем стандартный padding */
    text-align: left;
    border: 1px solid var(--grigio-medio);
    display: table-cell; /* Возвращаем стандартное отображение ячейки */
  }
  td::before {
    content: none; /* Убираем метки */
  }
}

/* Для десктопов (от 1024px и выше) */
@media (min-width: 1024px) {
  body {
    font-size: 1.1rem;
  }

  header {
    padding: 2rem 0; /* Больше отступов на больших экранах */
  }

  nav ul li {
    margin: 0 25px; /* Увеличены отступы между пунктами меню */
  }

  main {
    padding: 40px; /* Больше padding для основного контента */
    margin: 40px auto;
  }

  section {
    padding: 35px;
    margin-bottom: 50px;
  }

  .image-gallery {
    grid-template-columns: repeat(
      auto-fit,
      minmax(220px, 1fr)
    ); /* Еще больше колонок */
    gap: 30px;
  }
}