/* ==========================================================================
   hero.css — первый экран

   Градиентный баннер radius 40 — центральный приём референса. Внутри
   двухколоночная раскладка: слева оффер и дедлайн, справа фото в рамке
   с карточкой-подписью, как было в первой версии лендинга.
   ========================================================================== */

.hero__banner {
  position: relative;
  padding: var(--pad-card);
  border-radius: var(--radius-card);
  background-color: var(--primary300);
  background-image: var(--gradient-promo);
  color: var(--white);
  overflow: hidden;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  align-items: center;
  gap: var(--pad-card);
  min-height: 440px;
}

/* --------------------------------------------------------------------------
   Левая колонка — оффер
   -------------------------------------------------------------------------- */

.hero__kicker {
  margin-bottom: 12px;
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  opacity: .8;
}

.hero__title {
  margin-bottom: 20px;
  color: var(--white);
  font-size: var(--fs-hero);
  letter-spacing: -.02em;
}

.hero__text {
  max-width: 34em;
  margin-bottom: 28px;
  font-size: var(--fs-lead);
  line-height: var(--lh-text);
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
}

.hero__eq {
  height: 28px;
  color: var(--white);
  opacity: .75;
}

/* --------------------------------------------------------------------------
   Дедлайн набора
   -------------------------------------------------------------------------- */

.hero__deadline {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px;
  border: 1px solid var(--whiteOverlay);
  border-radius: var(--radius-btn);
  /* Полупрозрачная подложка вместо сплошной: под ней виден градиент,
     и плашка не выглядит вырезанной из другого макета. */
  background-color: rgba(255, 255, 255, .12);
  max-width: max-content;
}

.hero__deadline-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}

.countdown {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 52px;
  padding: 8px 10px;
  border-radius: 12px;
  background-color: rgba(0, 0, 0, .22);
}

.countdown__value {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.countdown__label {
  font-size: 11px;
  line-height: 1;
  opacity: .75;
  text-transform: lowercase;
}

/* Набор закрыт — таймер прячется, а не показывает нули. */
.hero__deadline.is-expired .countdown {
  display: none;
}

/* --------------------------------------------------------------------------
   Правая колонка — фото и карточка-подпись
   -------------------------------------------------------------------------- */

.hero__media {
  position: relative;
}

.hero__photo {
  border-radius: var(--radius-header);
  overflow: hidden;
  /* Пропорция исходника 680×453: так кадр не режется и не растягивается. */
  aspect-ratio: 3 / 2;
}

.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__card {
  /* position + z-index обязательны, а не для красоты: карточка наезжает
     на фото отрицательным отступом, а картинка — замещаемый элемент
     и красится ПОСЛЕ фонов блоков-соседей. Без позиционирования фото
     ложится поверх подложки, и имя оказывается прямо на кадре. */
  position: relative;
  z-index: 1;
  margin-top: -28px;
  margin-inline: 20px;
  padding: 16px 20px;
  border-radius: var(--radius-btn);
  background-color: var(--card-bg);
  color: var(--text-color);
  text-align: center;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

.hero__card-name {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
}

.hero__card-role {
  margin-top: 4px;
  color: var(--text-gray);
  font-size: var(--fs-small);
  letter-spacing: .02em;
}

/* --------------------------------------------------------------------------
   Адаптив
   -------------------------------------------------------------------------- */

@media (max-width: 1280px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    min-height: 400px;
  }
}

@media (max-width: 1024px) {
  /* Колонки складываются: при ширине текста меньше ~40em оффер начинает
     рваться на много коротких строк и перестаёт читаться. */
  .hero__inner {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .hero__media {
    max-width: 480px;
    margin-inline: auto;
    width: 100%;
  }

  .hero__actions {
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .hero__deadline {
    max-width: 100%;
  }

  .hero__actions .btn {
    width: 100%;
  }

  /* Эквалайзер рядом с кнопкой во всю ширину смотрелся бы приклеенным
     к её краю — переносим под неё по центру. */
  .hero__eq {
    margin-inline: auto;
  }

  .countdown__unit {
    flex: 1;
    min-width: 0;
  }
}

@media (max-width: 576px) {
  .hero__title {
    letter-spacing: -.01em;
  }

  .countdown {
    gap: 6px;
  }

  .countdown__unit {
    padding: 8px 4px;
  }
}