/* =========================================================
   HERO SECTION – CENTRAL IMAGE + BACKGROUND
   Без crop, без stretch, стабилно на всички екрани
========================================================= */

/* ---------------------------------------------------------
   HERO CONTAINER
--------------------------------------------------------- */
.hero {
  position: relative;
  width: 100%;
  height: 420px;          /* desktop височина */
  overflow: hidden;
}




/* ---------------------------------------------------------
   HERO MEDIA WRAPPER (фон + центриране)
.hero-media {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-media img {
  max-width: 100%;
  max-height: 100%;

  width: auto;
  height: auto;

  display: block;
}
--------------------------------------------------------- */
/* ---------------------------------------------------------
   HERO BACKGROUND IMAGE
--------------------------------------------------------- */
.hero {
  position: relative;
  width: 100%;
  height: 420px;              /* desktop hero height */
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;

  /* основен чист образ */
  background-image: url("imgs/hero_video.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  z-index: 1;
}
.hero-bg-blur {
  position: absolute;
  inset: 0;

  background-image: url("imgs/hero_video.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  filter: blur(24px);
  transform: scale(1.1);

  z-index: 0;
}


/* ---------------------------------------------------------
   RESPONSIVE HERO
--------------------------------------------------------- */
@media (max-width: 768px) {
  .hero {
    height: auto;
    min-height: 300px;
  }

  .hero-bg {
    background-size: contain;
  }
}



/* ---------------------------------------------------------
   HERO IMAGE / VIDEO (централно, без crop)
--------------------------------------------------------- */
.hero-media img,
.hero-media video {
  width: 100%;
  max-width: 1920px;
  height: auto;

  object-fit: contain;
  display: block;
}

/* ---------------------------------------------------------
   HERO OVERLAY (лек син – отделен слой)
--------------------------------------------------------- */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(19, 67, 125, 0.15);
  pointer-events: none;
}

/* ---------------------------------------------------------
   HERO CONTENT (текст / статистики)
--------------------------------------------------------- */
.hero-content {
  position: relative;
  z-index: 2;

  width: 100%;
  height: 100%;
  padding: 0 80px;

  display: flex;
  align-items: center;
  justify-content: center; /* ⬅️ ключовото */
}



/* ---------------------------------------------------------
   HERO STATS
--------------------------------------------------------- */
.hero-stats {
  display: flex;
  gap: 36px;
  white-space: nowrap;
  text-align: center;
   color: #ffffff;
  font-size: 22px;
  font-weight: 600;
  text-shadow:
	0 2px 6px rgba(0,0,0,0.55),
	0 6px 18px rgba(0,0,0,0.45);
}


.hero-stat-number {
  font-size: clamp(42px, 4.2vw, 56px);
  font-weight: 800;
  margin-right: 8px;
  line-height: 1;
}


.hero-stat-label {
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 500;
  opacity: 0.9;
}


/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero-content {
    padding: 0 40px;
  }

  .hero-stats {
    gap: 28px;
    font-size: 20px;
  }

  .hero-stat-number {
    font-size: 30px;
  }
}

@media (max-width: 768px) {
  /* НЕ насилваме височина */
  .hero {
    height: auto;
    min-height: unset;
  }

  .hero-content {
    padding: 0 20px;
  }

  .hero-stats {
    flex-wrap: wrap;
    white-space: normal;
    gap: 18px;
    font-size: 18px;
  }

  .hero-stat-number {
    font-size: 26px;
  }

  .hero-stat-label {
    font-size: 16px;
  }
}
@media (min-width: 769px) {
  .hero-media {
    display: flex;
    justify-content: center;
  }

  .hero {
    padding: 60px 0;
  }
}