/* ============================================
   HERO SECTION
   ============================================ */

.hero-placeholder {
  position: relative;
  min-height: 100vh;
  overflow: hidden;

  display: flex;
  align-items: center;

  padding: 16rem 10rem 10rem;   /* reduced top: logos are in-flow now */

  background:
    radial-gradient(
      ellipse 65vw 35vh at 0% 0%,
      rgba(108, 46, 255, 0.95) 0%,
      rgba(108, 46, 255, 0.5) 45%,
      rgba(108, 46, 255, 0) 100%
    ),
    radial-gradient(
      ellipse 55vw 35vh at 100% 0%,
      rgba(255, 94, 89, 0.95) 0%,
      rgba(255, 94, 89, 0.4) 45%,
      rgba(255, 94, 89, 0) 100%
    ),
    url('../../img/bridge2026/hero.png') center / cover no-repeat,
    var(--color-deep-space);
}

/* ============================================
   HERO MAIN CONTENT
   ============================================ */

.hero-main-container {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 148rem;

  margin: 0 auto;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ============================================
   HERO LOGOS  (left-aligned, in-flow)
   ============================================ */

.hero-logos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 4rem;            /* 40px on a 1920 canvas */

  margin-bottom: 5rem;
}

.hero-logos img {
  height: 3.6rem;
  width: auto;

  opacity: 0.9;
}

/* ============================================
   HERO TITLE
   ============================================ */

.hero-title {
  max-width: 96rem;

  font-size: 10rem;
  line-height: 0.98;
  font-weight: 700;

  letter-spacing: -0.05em;

  color: var(--color-white);
}

.text-gradient-ai {
  background: linear-gradient(90deg, #8B5CF6 0%, #FF6B2D 100%);

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}

/* ============================================
   HERO SUBTITLE
   ============================================ */

.hero-subtitle {
  margin-top: 3.2rem;

  max-width: 74rem;

  font-size: 2.4rem;                  /* shrunk from 2.8rem */
  line-height: 1.4;
  font-weight: 400;

  color: rgba(255, 255, 255, 0.9);    /* 90% opacity */
}

/* ============================================
   HERO META  (date + location)
   ============================================ */

.hero-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 3.2rem;

  margin-top: 3rem;
}

.hero-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 1rem;

  font-size: 2rem;
  font-weight: 500;

  color: var(--color-white);          /* 100% opacity */
}

.hero-meta__icon {
  width: 2.4rem;
  height: 2.4rem;

  flex-shrink: 0;
}

/* ============================================
   HERO BUTTONS
   ============================================ */

.hero-buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;

  margin-top: 4.4rem;
}

/* Shared button shape (scoped to the hero) */
.hero-buttons .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 1.5rem 4rem;

  border-radius: 11.6rem;

  font-size: 2.2rem;
  font-weight: 500;

  text-transform: uppercase;
  letter-spacing: var(--tracking-brand);

  color: var(--color-white);

  white-space: nowrap;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

/* Primary "Купить билет" — gradient */
.btn--buy {
  background: linear-gradient(90deg, #8B5CF6 0%, #FF6B2D 100%);
  border: none;
}

.btn--buy:hover {
  transform: translateY(-0.1rem);
  box-shadow: 0 1rem 3rem rgba(255, 107, 45, 0.35);
  filter: brightness(1.05);
}

.btn--buy:active {
  transform: translateY(0);
  filter: brightness(0.96);
}

/* Secondary — transparent "glass" */
.btn--secondary {
  background: rgba(255, 255, 255, 0.06);
  border: 0.1rem solid rgba(255, 255, 255, 0.25);

  -webkit-backdrop-filter: blur(1.4rem);
  backdrop-filter: blur(1.4rem);
}

.btn--secondary:hover {
  transform: translateY(-0.1rem);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.45);
}

.btn--secondary:active {
  transform: translateY(0);
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* Laptops */
@media (max-width: 1280px) {
  .hero-placeholder {
    padding: 14rem 6rem 8rem;
  }

  .hero-title {
    font-size: 8rem;
    max-width: 100%;
  }
}

/* Tablets */
@media (max-width: 900px) {
  .hero-placeholder {
    padding: 12rem 4rem 8rem;
  }

  .hero-logos {
    gap: 3rem;
    margin-bottom: 4rem;
    margin-top: 2rem;
  }

  .hero-logos img {
    height: 3rem;
  }

  .hero-title {
    font-size: 6.2rem;
    max-width: 100%;
  }

  .hero-subtitle {
    max-width: 100%;
    font-size: 2.2rem;
    margin-top: 2.4rem;
  }

  .hero-meta {
    gap: 2rem 3rem;
    margin-top: 2.4rem;
  }

  .hero-meta__item {
    font-size: 2rem;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 1.4rem;
  }

  .hero-buttons .btn {
    width: 100%;
    font-size: 2.2rem;
    padding: 2.2rem 3rem;
  }
}

/* Phones */
@media (max-width: 560px) {
  .hero-placeholder {
    padding: 11rem 2.4rem 6rem;
    
    
    background:
      /* 1. Purple glow (top-left) */
      radial-gradient(
        ellipse 65vw 35vh at 0% 0%,
        rgba(108, 46, 255, 0.95) 0%,
        rgba(108, 46, 255, 0.5) 45%,
        rgba(108, 46, 255, 0) 100%
      ),
      /* 2. Red glow (top-right) */
      radial-gradient(
        ellipse 55vw 35vh at 100% 0%,
        rgba(255, 94, 89, 0.95) 0%,
        rgba(255, 94, 89, 0.4) 45%,
        rgba(255, 94, 89, 0) 100%
      ),
      /* 3. Dark shading overlay (starts subtle, gets dark in center and bottom) */
      linear-gradient(
        180deg,
        rgba(10, 14, 26, 0.1) 0%,    /* Light at the top */
        rgba(10, 14, 26, 0.5) 45%,   /* Darker in the middle */
        rgba(10, 14, 26, 0.6) 100%  /* Very dark at the bottom behind buttons */
      ),
      /* 4. Base image (positioned to the right) */
      url('../../img/bridge2026/hero.png') 85% center / cover no-repeat,
      
      /* 5. Fallback solid color */
      var(--color-deep-space);
  }

  .hero-title {
    font-size: 5.4rem;
  }

  .hero-subtitle {
    font-size: 2.2rem;
  }

  .hero-logos {
    gap: 2.4rem;
    margin-top: 2.4rem;
  }

  .hero-logos img {
    height: 3.2rem;
  }

  .hero-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.4rem;
  }

  .hero-meta__item {
    font-size: 2.2rem;
  }
}