/* ============================================================
   GVTO Hero Background Images
   Applies premium, high-resolution Unsplash images to every
   hero/banner section across the site.
   Dark overlays (50–60 % opacity) keep all existing text 
   fully readable. No layout, spacing, or content is changed.
   ============================================================ */

/* ── Shared hero image base ── */
/* All hero sections use multi-layer CSS backgrounds:
   layer 1 (top): dark linear-gradient overlay (50–88% opacity)
   layer 2 (bottom): full-bleed Unsplash photo
   This guarantees text readability on every device. */

/* ============================================================
   INDEX — Home Page Hero
   Image: Global cityscape / world trade / international skyline
   The existing .hero-bg already handles the image; we enhance
   the opacity and swap to a richer, more cinematic photograph.
   ============================================================ */
.hero-bg {
  background-image: url('../assets/images/hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.35 !important;
  transition: opacity 0.8s ease;
}

/* Strengthen the overlay gradient for readability */
.hero-overlay {
  background: linear-gradient(
    135deg,
    rgba(11, 26, 49, 0.92) 0%,
    rgba(11, 26, 49, 0.78) 50%,
    rgba(15, 35, 65, 0.65) 100%
  );
}

/* ============================================================
   ABOUT PAGE — Corporate leadership / global partnership
   Image: Modern corporate boardroom / business leaders
   ============================================================ */
.about-hero {
  background:
    linear-gradient(135deg, rgba(11,26,49,0.88) 0%, rgba(18,36,68,0.78) 50%, rgba(26,58,107,0.72) 100%),
    url('https://images.unsplash.com/photo-1556761175-5973dc0f32e7?w=1800&q=80&fit=crop') center top / cover no-repeat !important;
}

/* Keep existing ::before for gold ambient glow, just remove its background-color */
.about-hero::before {
  background: radial-gradient(ellipse at center, rgba(201,162,39,0.12) 0%, transparent 70%) !important;
  background-color: transparent !important;
}

/* ============================================================
   MEMBERSHIP PAGE — Professional networking / business community
   Image: Networking event / professional gathering
   ============================================================ */
.membership-hero {
  background: 
    linear-gradient(135deg, rgba(11,26,49,0.88) 0%, rgba(18,36,68,0.80) 60%, rgba(26,58,107,0.75) 100%),
    url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=1800&q=80&fit=crop') center/cover no-repeat !important;
}

/* Remove the existing ::before radial glow — rebuild it on top */
.membership-hero::before {
  background-image: 
    radial-gradient(circle at 25% 50%, rgba(201,162,39,0.12) 0%, transparent 60%),
    radial-gradient(circle at 75% 30%, rgba(201,162,39,0.08) 0%, transparent 60%) !important;
  background-color: transparent !important;
  background-size: auto !important;
}

/* ============================================================
   EVENTS PAGE — Conference / summit / international audience
   Image: Large conference hall / business summit (already has one at 12% opacity — boost it)
   ============================================================ */
.events-hero {
  background: 
    linear-gradient(135deg, rgba(11,26,49,0.85) 0%, rgba(26,58,107,0.75) 100%),
    url('https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=1800&q=80&fit=crop') center/cover no-repeat !important;
}

/* Remove the faint ::before photo + gradient layers — replace cleanly */
.events-hero::before {
  display: none !important;
}

.events-hero::after {
  display: none !important;
}

/* ============================================================
   NEWS PAGE — Media / press / journalism / international
   Image: Newspaper/media newsroom or global broadcast
   ============================================================ */
.news-hero {
  background: 
    linear-gradient(135deg, rgba(11,26,49,0.88) 0%, rgba(15,35,65,0.80) 100%),
    url('https://images.unsplash.com/photo-1504711434969-e33886168f5c?w=1800&q=80&fit=crop') center/cover no-repeat !important;
}

.news-hero::before {
  background-image: radial-gradient(circle at 80% 40%, rgba(201,162,39,0.10) 0%, transparent 60%) !important;
  background-color: transparent !important;
  background-size: auto !important;
}

/* ============================================================
   GALLERY PAGE — Events / photography / visual moments
   Image: Professional event photography / large crowd
   ============================================================ */
.gallery-hero {
  background: 
    linear-gradient(135deg, rgba(11,26,49,0.82) 0%, rgba(18,36,68,0.72) 50%, rgba(26,58,107,0.68) 100%),
    url('https://images.unsplash.com/photo-1511795409834-ef04bbd61622?w=1800&q=80&fit=crop') center/cover no-repeat !important;
}

.gallery-hero::before {
  background: radial-gradient(ellipse at center, rgba(201,162,39,0.14) 0%, transparent 70%) !important;
  background-color: transparent !important;
}

/* ============================================================
   IMPACT PAGE — Global reach / data / measurement
   Image: World map / data visualization / international logistics
   ============================================================ */
.impact-hero {
  background: 
    linear-gradient(135deg, rgba(11,26,49,0.85) 0%, rgba(18,36,68,0.78) 50%, rgba(26,58,107,0.70) 100%),
    url('https://images.unsplash.com/photo-1506784365847-bbad939e9335?w=1800&q=80&fit=crop') center/cover no-repeat !important;
}

.impact-hero::before {
  background: radial-gradient(ellipse at center, rgba(201,162,39,0.13) 0%, transparent 70%) !important;
  background-color: transparent !important;
}

/* ============================================================
   CONTACT PAGE — Modern office / business communication
   Image: Modern office interior / professional workspace
   ============================================================ */
.contact-hero {
  background: 
    linear-gradient(135deg, rgba(11,26,49,0.87) 0%, rgba(18,36,68,0.78) 50%, rgba(26,58,107,0.70) 100%),
    url('https://images.unsplash.com/photo-1497366216548-37526070297c?w=1800&q=80&fit=crop') center/cover no-repeat !important;
}

.contact-hero::before {
  background: radial-gradient(ellipse at center, rgba(201,162,39,0.12) 0%, transparent 70%) !important;
  background-color: transparent !important;
}

/* ============================================================
   RESPONSIVE: Ensure images work on all viewport sizes
   ============================================================ */
@media (max-width: 768px) {
  .about-hero,
  .membership-hero,
  .events-hero,
  .news-hero,
  .gallery-hero,
  .impact-hero,
  .contact-hero {
    background-position: center center !important;
  }

  .hero-bg {
    background-position: center center;
  }
}

@media (max-width: 480px) {
  /* On very small screens keep images centred and avoid top-heavy crops */
  .about-hero {
    background-position: 60% center !important;
  }
  .events-hero {
    background-position: center 30% !important;
  }
  .membership-hero {
    background-position: center 40% !important;
  }
}

/* ============================================================
   PERFORMANCE: Preload hint classes (added via JS on DOMReady)
   ============================================================ */
.hero-img-loaded {
  animation: heroFadeIn 0.8s ease both;
}

@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   ACCESSIBILITY: Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-img-loaded {
    animation: none;
  }
  .hero-bg {
    transition: none;
  }
}