/* ============================================
   HERO Section
   Pixel Perfect - точные размеры из Figma
   ============================================ */

.hero {
  position: relative;
  width: 100%;
  min-height: 980px; /* точная высота из Figma */
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  overflow-y: visible !important; /* важно для sticky в следующих секциях */
}

.hero__background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background: #010101; /* базовый цвет из Figma */
  overflow: hidden;
}

/* Фоновое видео */
.hero__background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1; /* видео под изображением */
  opacity: 0.2; /* 20% прозрачности */
  transition: opacity 0.5s ease-in-out;
}

.hero__background-video.loaded {
  opacity: 0.2; /* сохраняем 20% прозрачности */
}

.hero__background-video.loading {
  background: #010101;
  opacity: 0.2;
}

.hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(0deg, rgba(1, 1, 1, 0) 81%, rgba(1, 1, 1, 1) 94%); /* точный градиент из Figma */
  opacity: 0.15;
  z-index: 2; /* overlay поверх видео */
  pointer-events: none;
}

.hero__texture {
  position: absolute;
  top: -7px; /* точное смещение из Figma */
  left: -7px; /* точное смещение из Figma */
  right: -7px;
  bottom: -7px;
  width: calc(100% + 14px); /* 1944px для 1920px + 7px с каждой стороны */
  height: calc(100% + 14px); /* 986px для 980px + 7px с каждой стороны */
  background-image: url('../assets/images/texture-56586a.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.2; /* точная opacity из Figma: 0.20000000298023224 */
  z-index: 3; /* текстура поверх всего */
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 4; /* контент поверх всего фона */
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: var(--spacing-hero-y) var(--spacing-hero-x) 0; /* 392px сверху, 50px по бокам */
  padding-left: var(--spacing-hero-x) !important; /* Убеждаемся, что левый отступ применяется */
  padding-right: var(--spacing-hero-x) !important; /* Убеждаемся, что правый отступ применяется */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-hero-gap); /* 50px */
}

.hero__text {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 1rem вместо 24px */
  max-width: 668px; /* точная ширина из Figma */
}

.hero__title {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--font-size-hero); /* 64.768px */
  line-height: var(--font-size-hero-line-height); /* 0.83 */
  letter-spacing: var(--font-size-hero-letter-spacing); /* -3% */
  color: var(--color-text-primary);
  width: 668px; /* точная ширина из Figma */
}

.hero__title span {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/* Слова "звездочек" и "сносок" другим шрифтом - Nyght Serif Medium Italic */
.hero__title-word--serif {
  font-family: 'Nyght Serif', serif;
  font-weight: 500; /* точный weight из Figma */
  font-style: italic; /* MediumItalic */
  font-size: inherit; /* наследуем размер от родителя */
  line-height: inherit; /* наследуем line-height от родителя */
  letter-spacing: inherit; /* наследуем letter-spacing от родителя */
}

.hero__subtitle {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-subtitle); /* 20px */
  line-height: var(--font-size-subtitle-line-height); /* 1.21 */
  letter-spacing: var(--font-size-subtitle-letter-spacing); /* 3% */
  color: var(--color-text-secondary);
}

/* Cards - Flexbox row для одинаковой высоты */
.hero__cards {
  display: flex;
  flex-direction: row;
  gap: 20px; /* точный gap из Figma */
  width: 100%;
  box-sizing: border-box;
  align-items: flex-start; /* выравнивание по верху - все карточки на одном уровне */
  flex-wrap: wrap; /* перенос карточек на новую строку если не помещаются */
  justify-content: flex-start; /* выравнивание по левому краю */
}

.hero__card {
  position: relative;
  height: 320px; /* точная высота из Figma - фиксированная для всех карточек */
  padding: 16px 18px; /* точные padding из Figma */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--color-bg-card);
  border: 0.8603963255882263px solid var(--color-border); /* точная толщина из Figma */
  border-radius: 28.451353073120117px; /* точный border-radius из Figma */
  backdrop-filter: var(--blur-tag);
  overflow: hidden;
  transition: all var(--transition-base);
  box-sizing: border-box; /* padding и border включены в ширину */
  /* Адаптивная ширина - карточки занимают всю доступную ширину */
  flex: 1 1 calc((100% - 60px) / 4); /* 4 карточки в ряд с учетом 3 gap по 20px */
  min-width: 280px; /* минимальная ширина для карточек */
  max-width: 440px; /* максимальная ширина из Figma */
}

/* Видео как фон карточки */
.hero__card-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.hero__card-video.loaded {
  opacity: 1;
}

.hero__card-video.loading {
  background: var(--color-bg-card);
}

.hero__card:hover {
  transform: translateY(-4px);
  box-shadow: 0px 16px 60px rgba(0, 0, 0, 0.2);
}

/* Фоновые изображения для карточек - будут добавлены позже */
.hero__card--showreel {
  background-color: var(--color-bg-card);
  /* background-image будет добавлено после экспорта */
}

.hero__card--case:nth-of-type(2) {
  background-color: var(--color-bg-card);
  /* background-image будет добавлено после экспорта */
}

.hero__card--case:nth-of-type(3) {
  background-color: var(--color-bg-card);
  /* background-image будет добавлено после экспорта */
}

.hero__card--case:nth-of-type(4) {
  background-color: var(--color-bg-card);
  /* background-image будет добавлено после экспорта */
}

.hero__card-content {
  position: relative;
  z-index: 1; /* контент поверх видео */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  gap: 139.3843536376953px; /* точный gap из Figma */
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.hero__card--loading .hero__card-content {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
}

.hero__card--loaded .hero__card-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.hero__card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6.8831706047058105px; /* точный gap из Figma */
}

.hero__card-title {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: var(--font-size-card-title); /* 18.493px */
  line-height: var(--font-size-card-title-line-height); /* 1.05 */
  color: var(--color-text-primary);
  flex: 1;
}

/* Цвет текста для карточек "Критообменник" (2-я карточка) и "Корпоративная платформа" (4-я карточка) */
.hero__card:nth-of-type(2) .hero__card-title,
.hero__card:nth-of-type(4) .hero__card-title {
  color: #010101;
}

/* Логотип вместо кнопки play */
.hero__card-logo {
  width: 40px; /* точный размер из Figma */
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 14px; /* точный border-radius из Figma */
  overflow: hidden;
}

/* Фоны для разных карточек согласно Figma */
.hero__card--showreel .hero__card-logo {
  background: rgba(245, 247, 251, 0.05); /* прозрачный фон для showreel */
}

.hero__card--case:nth-of-type(2) .hero__card-logo {
  background: #F5F7FB; /* белый фон для crypto */
}

.hero__card--case:nth-of-type(3) .hero__card-logo {
  background: rgba(245, 247, 251, 0.05); /* прозрачный фон для canopy */
}

.hero__card--case:nth-of-type(4) .hero__card-logo {
  background: #F5F7FB; /* белый фон для platform */
}

.hero__card-logo img {
  width: 22px; /* базовый размер из Figma */
  height: 22px;
  object-fit: contain;
  display: block;
}

/* Для canopy логотип немного больше */
.hero__card--case:nth-of-type(3) .hero__card-logo img {
  width: 23px;
  height: 23px;
}

/* Tags */
.hero__card-tags {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 5.734630107879639px; /* точный gap из Figma */
}

.hero__card-tag {
  padding: 8px 10px 9px; /* точные padding из Figma */
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--font-size-tag); /* 14px */
  line-height: var(--font-size-tag-line-height); /* 1.11 */
  letter-spacing: var(--font-size-tag-letter-spacing); /* 3% */
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-tag); /* 10px */
  backdrop-filter: var(--blur-tag);
  white-space: nowrap;
}

.hero__card-tag--primary {
  background: var(--color-accent-primary);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-card-action);
}

.hero__card-tag--action {
  padding: 8px 12px 9px; /* точные padding для action tag */
  background: var(--color-text-primary);
  color: var(--color-text-dark);
  box-shadow: var(--shadow-card-white);
  display: inline-flex; /* для правильного выравнивания SVG */
  align-items: center; /* выравнивание по центру */
  gap: 6px; /* отступ между текстом и стрелкой */
  text-decoration: none; /* убираем подчеркивание для ссылок */
}

.hero__card-tag--action:last-of-type {
  opacity: 1;
}

/* Специальный стиль для кнопки showreel - как primary tag */
.hero__card-tag--showreel-action {
  background: var(--color-accent-primary);
  color: #FFFFFF;
  box-shadow: var(--shadow-card-action);
}

.hero__card-arrow {
  width: 5px;
  height: 9px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

/* Responsive - Fluid верстка */
@media (max-width: 1920px) {
  .hero__cards {
    width: 100%;
  }
  
  /* Карточки адаптивные - занимают всю доступную ширину */
  .hero__card {
    flex: 1 1 calc((100% - 60px) / 4); /* 4 карточки в ряд с учетом 3 gap по 20px */
    min-width: 280px;
    max-width: 440px;
    height: 320px; /* фиксированная высота - всегда одинаковая */
    min-height: 320px; /* гарантирует одинаковую высоту */
  }
}

@media (max-width: 1500px) and (min-width: 1024px) {
  /* Увеличиваем расстояние между текстом и карточками */
  .hero__content {
    gap: clamp(60px, 8vw, 100px); /* увеличиваем gap между текстом и карточками */
  }
}

@media (max-width: 1440px) {
  /* 4 карточки в ряд с уменьшенным размером */
  .hero__card {
    flex: 1 1 calc((100% - 60px) / 4); /* 4 карточки в ряд с учетом 3 gap по 20px */
    min-width: 240px; /* уменьшенная минимальная ширина */
    max-width: 440px;
  }
}

@media (max-width: 1024px) {
  .hero {
    min-height: auto;
    padding-bottom: 3rem;
  }
  
  .hero__content {
    padding-top: clamp(8rem, 15vw, 24.5rem);
    padding-left: var(--spacing-hero-x);
    padding-right: var(--spacing-hero-x);
  }
  
  .hero__title {
    width: 100%;
    max-width: 668px;
  }
  
  .hero__cards {
    width: 100%;
  }
  
  /* 2 карточки в ряд */
  .hero__card {
    flex: 1 1 calc((100% - 20px) / 2); /* 2 карточки в ряд с учетом 1 gap по 20px */
    min-width: 280px;
    max-width: 440px;
    height: 320px; /* фиксированная высота */
  }
}

@media (max-width: 768px) {
  .hero__content {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .hero__cards {
    flex-wrap: wrap; /* разрешаем перенос на мобильных */
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
  }
  
  /* 1 карточка на всю ширину на мобильных */
  .hero__card {
    flex: 1 1 100%; /* одна карточка на всю ширину */
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    height: 320px; /* фиксированная высота */
    border-radius: 28.451353073120117px; /* возвращаем скругление */
  }
  
  .hero__card-content {
    gap: 2rem;
  }
}

@media (max-width: 480px) {
  .hero__content {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .hero__cards {
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
  }
  
  /* 1 карточка на всю ширину на мобильных */
  .hero__card {
    flex: 1 1 100%; /* одна карточка на всю ширину */
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    height: 320px; /* фиксированная высота */
    margin: 0;
    border-radius: 28.451353073120117px; /* возвращаем скругление */
  }
}

@media (max-width: 320px) {
  .hero__content {
    padding: clamp(6rem, 20vw, 12rem) clamp(1rem, 3vw, 3.125rem) 0;
  }
  
  .hero__title {
    font-size: clamp(2rem, 10vw, 3rem);
  }
  
  .hero__subtitle {
    font-size: clamp(0.875rem, 4vw, 1rem);
  }
}