/**
 * Golden Eagle GS — Homepage Hero (page-specific layout)
 * Stage 5, Part 1 — Homepage Implementation
 * Redesigned Phase 2 (2026-08-15) — full-bleed image composition,
 * per the Project Director's reference-composition direction. See
 * inc/homepage.php's ge_home_hero_markup() docblock for the fuller
 * explanation of what changed and why.
 *
 * SCOPE DISCIPLINE (per this stage's explicit constraints): this file
 * does NOT redefine anything from the approved Design System,
 * Component Library, or Visual Direction — it only POSITIONS and
 * STACKS those already-approved systems specifically for the
 * Homepage's full hero. Typography, color, spacing, and the World
 * Map's own internal styling remain exactly as specified in
 * DESIGN_SYSTEM.md / COMPONENT_LIBRARY.md / VISUAL_DIRECTION.md. The
 * Statistics band's own data/markup (ge_home_statistics_markup()) is
 * untouched too — only its visual treatment is overridden here,
 * scoped under `.ge-home-hero__stats`, for this one context; the
 * standalone gold-band treatment in home-part2.css/components-core.css
 * is not modified and remains correct if that band is ever used
 * anywhere else on its own.
 *
 * Concretely, this file is responsible for: (1) the hero's full-bleed
 * section height and background, (2) z-index stacking between the
 * sticky Header, the World Map layer, the Hero photo, and the Hero
 * content/stats, and (3) the full-bleed image + dark gradient overlay
 * composition (replacing the earlier 55/45 text/image column split)
 * across desktop/tablet/mobile.
 *
 * LOADING: registered only, enqueued conditionally on the front page —
 * see inc/homepage.php's `ge_homepage_enqueue_assets()`.
 */

/* ==========================================================================
   1. FULL-BLEED HERO SECTION
   ========================================================================== */

.ge-home-hero {
  position: relative;
  min-height: 640px; /* Mobile floor — see DESIGN_SYSTEM.md §2's original
                         "min 720px desktop" note; this is the smallest
                         tier's floor, not a contradiction of it. */
  display: flex;
  flex-direction: column; /* Stacks .ge-home-hero__content and
                              .ge-home-hero__stats vertically — see §2. */
  overflow: hidden;
  padding: var(--ge-space-7) var(--ge-space-4);
}

/* The World Map sits behind everything in this section — absolutely
   positioned, low opacity, capped well below full strength specifically
   so hero text always retains safe contrast against it (accessibility
   requirement, not just an aesthetic choice). Now sits beneath the
   full-bleed photo too (§2), so it's visually subsumed on most viewports
   — left in place rather than removed, since it costs nothing extra
   (inline SVG, no network request) and still shows through faintly
   wherever the photo's overlay is lightest. */
.ge-home-hero .ge-worldmap {
  position: absolute;
  inset: 0;
  z-index: var(--ge-z-worldmap);
  opacity: 0.28;
  display: flex;
  align-items: center;
}

.ge-home-hero .ge-worldmap svg {
  width: 130%; /* Slightly oversized so the network doesn't visibly
                  crop at the viewBox edge on ultra-wide desktop
                  viewports — purely a positioning choice, the SVG's
                  own styling (worldmap-system.css) is untouched. */
  max-width: none;
  margin-inline-start: -10%; /* Logical property — RTL-safe per the
                                 project's standing WPML/RTL discipline. */
}

.ge-home-hero__content {
  position: relative;
  z-index: var(--ge-z-hero-content);
  width: 100%;
  max-width: var(--ge-container-width);
  margin-inline: auto;
}

/* REGRESSION FIX (v8, 2026-08-19): the three declarations below were
   briefly applied to the bare `.ge-home-hero__content` class in v7.
   That was wrong — this class is NOT hero-private: every homepage
   section (Services, Why Choose Us, Timeline, Government Services,
   Visa Services, Testimonials, Partners, CTA, Blog) deliberately
   reuses it purely as a max-width/centering container, as each of
   those files' own comments state. Setting display:flex on the class
   therefore turned all nine section containers into flex ROWS, laying
   each section's `.ge-section-header` beside its card grid instead of
   above it — the "heading squeezed into a narrow left column" symptom
   (measured live: header 407px next to a 858px grid).

   Scoped with the child combinator so it applies to the ONE container
   that is a direct child of `.ge-home-hero` — the actual hero — and to
   no reused instance anywhere else. */
.ge-home-hero > .ge-home-hero__content {
  flex: 1; /* Fills the space between the section's own padding and the
              stats band below, so the text block can vertically center
              within whatever room is actually available. */
  display: flex;
  align-items: center;
}

/* A soft radial vignette directly behind the text content column only
   (not the whole section) — an extra contrast-safety margin on top of
   the full-bleed photo's own gradient overlay (§2), so body text never
   has to rely on the overlay alone for legibility. GPU-cheap: a single
   static background-image, no animation. */
.ge-home-hero__content::before {
  content: "";
  position: absolute;
  inset: -24px;
  z-index: -1;
  background: radial-gradient(
    ellipse 70% 90% at 30% 50%,
    rgba(5, 11, 20, 0.65) 0%,
    transparent 75%
  );
  pointer-events: none;
}

.ge-home-hero__text {
  max-width: 100%;
}

.ge-home-hero__text .ge-hero__eyebrow {
  margin-bottom: var(--ge-space-2);
}

.ge-home-hero__text .ge-hero__title {
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.ge-home-hero__text .ge-hero__subtitle {
  line-height: 1.7;
  margin-top: var(--ge-space-3);
}

@media (min-width: 1024px) {
  .ge-home-hero__text {
    max-width: 560px; /* Keeps text within the darker left portion of
                          the composition — see §2's gradient stops,
                          calibrated to match. */
  }
}

/* ==========================================================================
   1b. HERO PROOF STRIP (v10 — approved Copy Deck §1)
   ========================================================================== */
/* The three ✓ trust points that sit under the CTAs. Uses only existing
   design tokens — no new colour, size or spacing value is introduced.
   Wraps to multiple lines on narrow viewports rather than shrinking,
   and the separator dots are drawn with ::after so they never appear
   after the final item or after a wrapped line's end. */

.ge-hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ge-space-2) var(--ge-space-4);
  list-style: none;
  margin: var(--ge-space-5) 0 0;
  padding: 0;
}

.ge-hero__proof-item {
  display: inline-flex;
  align-items: center;
  gap: var(--ge-space-2);
  font-size: 14px;
  font-weight: 500;
  color: var(--ge-color-text-secondary);
  padding: var(--ge-space-1) var(--ge-space-3);
  background: rgba(201, 162, 75, 0.08);
  border: 1px solid rgba(201, 162, 75, 0.15);
  border-radius: var(--ge-radius-pill);
  /* backdrop-filter: blur(4px) removed in v12 — these pills sit in the
     scrolling hero, which luxury-effects.css's Glass Surface rule puts
     explicitly out of scope ("sticky header and modal backdrops ONLY…
     do not apply to cards, section backgrounds, or any element that
     appears in a scrolling grid"). The translucent gold fill above is
     kept; only the blur is gone, so the pill looks the same against
     the hero's dark overlay at a fraction of the compositing cost. */
}

.ge-hero__proof-check {
  color: var(--ge-color-gold-300);
  font-weight: 700;
  line-height: 1;
}

@media (min-width: 768px) {
  .ge-hero__proof-item {
    font-size: 15px;
  }
}

/* ==========================================================================
   2. FULL-BLEED PHOTO + GRADIENT OVERLAY (replaces the earlier 55/45
      text/image column split)
   ========================================================================== */

.ge-home-hero__media {
  position: absolute;
  inset: 0;
  /* No explicit z-index: painting order among same-stacking-context
     absolutely-positioned siblings follows DOM order when z-index is
     auto, so this naturally sits above .ge-worldmap (comes first in
     the markup) and below .ge-home-hero__content/__stats (both have an
     explicit z-index — see §4). */
}

.ge-home-hero__media-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Two combined gradients: a horizontal one (dark on the left, where
   text sits, fading out toward the right so the photo reads clearly)
   and a vertical one (dark at the very bottom, so the stats band in
   §3 stays legible over the photo too). Values reuse this file's own
   existing rgba(5, 11, 20, …) navy — the same color already used by
   .ge-home-hero__content::before above — not a new color invented for
   this rule. */
.ge-home-hero__media-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(5, 11, 20, 0.94) 0%,
      rgba(5, 11, 20, 0.8) 32%,
      rgba(5, 11, 20, 0.35) 58%,
      rgba(5, 11, 20, 0.05) 78%
    ),
    linear-gradient(
      to top,
      rgba(5, 11, 20, 0.9) 0%,
      rgba(5, 11, 20, 0.15) 22%,
      rgba(5, 11, 20, 0) 45%
    );
}

/* ==========================================================================
   3. STATS BAND — HERO CONTEXT OVERRIDE
   ========================================================================== */
/* ge_home_statistics_markup() (inc/homepage-part2.php) is unchanged and
   still returns its own <section class="ge-stats-band"> with a solid
   gold-gradient background — correct for a standalone placement
   elsewhere on the page. Nested inside the Hero photo here, that solid
   gold block would cover the image entirely, which isn't the intent —
   these descendant-selector overrides repaint it as a translucent bar
   over the photo's own dark gradient instead, using the same
   .ge-stat-card/.ge-stat-grid markup and data untouched. */

.ge-home-hero__stats {
  position: relative;
  z-index: var(--ge-z-hero-content);
  width: 100%;
  max-width: var(--ge-container-width);
  margin-inline: auto;
  margin-top: var(--ge-space-6);
}

.ge-home-hero__stats .ge-stats-band {
  background: rgba(10, 22, 40, 0.85);
  padding-block: var(--ge-space-4) 0;
  border-top: 1px solid rgba(201, 162, 75, 0.3);
  /* backdrop-filter: blur(8px) removed in v12 — a section background is
     named in luxury-effects.css's Glass Surface restriction as an
     out-of-scope usage. At 0.85 alpha over the hero photo the band is
     already near-opaque, so the blur was contributing almost nothing
     visually while adding a full-width compositing layer over the
     largest image on the page. */
}

.ge-home-hero__stats .ge-stat-card__number {
  color: var(--ge-color-gold-300);
  font-variant-numeric: tabular-nums;
}

.ge-home-hero__stats .ge-stat-card__label {
  color: var(--ge-color-text-primary);
  opacity: 0.8;
  letter-spacing: 0.02em;
}

@media (min-width: 1024px) {
  .ge-home-hero__stats .ge-stat-card {
    border-right-color: rgba(201, 162, 75, 0.2);
  }
}

/* ==========================================================================
   4. RESPONSIVE HERO HEIGHT (mirrors DESIGN_SYSTEM.md §2's original
      spec exactly — restated here as the enforced implementation, not
      a new decision)
   ========================================================================== */

@media (min-width: 768px) {
  .ge-home-hero {
    min-height: 90vh;
  }
}

@media (min-width: 1024px) {
  .ge-home-hero {
    min-height: 100vh;
  }

  .ge-home-hero .ge-worldmap svg {
    width: 100%;
    margin-inline-start: 0;
  }
}

/* ==========================================================================
   5. Z-INDEX STACKING CONTRACT (documented, not just applied)
   ========================================================================== */
/* --ge-z-worldmap (1) < .ge-home-hero__media (auto, DOM-order above the
   Map) < --ge-z-hero-content (2, .ge-home-hero__content and
   .ge-home-hero__stats both) < --ge-z-header (100). The sticky Header
   (built in Elementor's Theme Builder, Stage 3+) must use a z-index at
   or above --ge-z-header for this stacking to hold — if the Header
   template's own z-index is left at Elementor's default, verify it
   clears 100 at Stage 5 QA. This is the one manual cross-check this
   file cannot enforce by itself, since the Header template lives in
   Elementor, not in this stylesheet. */

/* ==========================================================================
   6. MOBILE SIMPLIFICATION (consistent with the "simplify, don't just
      shrink" principle already established in VISUAL_DIRECTION.md §4)
   ========================================================================== */

@media (max-width: 767px) {
  .ge-home-hero {
    padding: var(--ge-space-6) var(--ge-space-3);
    min-height: 580px;
  }

  .ge-home-hero .ge-worldmap {
    opacity: 0.18; /* Lower still on mobile — smaller viewport means
                      text and background compete for less total space,
                      so the map recedes further to protect legibility. */
  }

  .ge-home-hero__text .ge-hero__title {
    font-size: clamp(28px, 5vw, 36px);
  }

  .ge-home-hero__text .ge-hero__subtitle {
    font-size: 15px;
    line-height: 1.6;
  }

  .ge-hero__proof {
    gap: var(--ge-space-2) var(--ge-space-3);
  }

  .ge-hero__proof-item {
    font-size: 13px;
    padding: var(--ge-space-1) var(--ge-space-2);
  }

  /* A small viewport can't spare 70%+ of its width for a legible photo
     next to full-length hero copy the way desktop can — text now runs
     the full card width, so the overlay goes flatter (top-to-bottom
     instead of left-to-right) rather than darker: it's calibrated to
     keep white/gold text readable without pushing the approved photo
     toward invisible, since "dominant visual element" is one of the
     Hero redesign's explicit requirements at every breakpoint, mobile
     included — verified by screenshot at 375px during Phase 2 QA
     (2026-08-15) after an earlier, too-dark draft of this rule made
     the photo barely perceptible. */
  .ge-home-hero__media-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(5, 11, 20, 0.72) 0%,
        rgba(5, 11, 20, 0.4) 45%,
        rgba(5, 11, 20, 0.78) 100%
      );
  }
}

/* ==========================================================================
   7. REDUCED MOTION / PERFORMANCE
   ========================================================================== */
/* No new motion is introduced by this file — the hero's entrance
   animation reuses the existing data-ge-animate contract
   (animation-system.css, Stage 2), and the World Map's own node-pulse
   reduced-motion handling lives in worldmap-system.css (Stage 4.5).
   This file has nothing further to disable under
   prefers-reduced-motion because it declares no animation of its own —
   worth stating explicitly rather than leaving silent, per this
   project's standing documentation discipline. */

/* ========================================================================== 
   V20.35 — HOMEPAGE VISUAL REFINEMENT (Arabic + English)
   ========================================================================== */

@media (min-width: 768px) {
  .ge-home-hero {
    min-height: min(86svh, 860px);
  }

  .ge-home-hero__stats {
    margin-top: clamp(20px, 3vh, 32px);
  }

  .ge-home-hero__text .ge-hero__title {
    font-size: clamp(44px, 4vw, 60px);
    line-height: 1.08;
    text-wrap: balance;
  }
}

@media (min-width: 1024px) {
  .ge-home-hero {
    min-height: min(88svh, 820px);
    padding-block: clamp(30px, 4vh, 52px);
  }

  .ge-home-hero__text {
    max-width: 640px;
  }

  .ge-home-hero__text .ge-hero__subtitle {
    max-width: 600px;
  }
}

html[dir="rtl"] .ge-home-hero__content::before {
  background: radial-gradient(
    ellipse 70% 90% at 70% 50%,
    rgba(5, 11, 20, 0.72) 0%,
    transparent 76%
  );
}

@media (max-width: 767px) {
  .ge-home-hero__content::before {
    inset: -14px;
    background: radial-gradient(
      ellipse 120% 90% at 50% 46%,
      rgba(5, 11, 20, 0.72) 0%,
      rgba(5, 11, 20, 0.24) 72%,
      transparent 100%
    );
  }
}

.ge-home-hero .ge-btn--primary {
  box-shadow: 0 10px 28px rgba(5, 11, 20, 0.28);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.35s ease, filter 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
  .ge-home-hero .ge-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(5, 11, 20, 0.34),
      0 0 24px rgba(232, 200, 120, 0.18);
    filter: brightness(1.035);
  }
}

.ge-home-hero .ge-btn:focus-visible {
  outline: 3px solid #E8C878;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .ge-home-hero .ge-btn {
    transition: none;
  }

  .ge-home-hero .ge-btn:hover,
  .ge-home-hero .ge-btn:focus-visible {
    transform: none;
  }
}