/**
 * Golden Eagle GS — Homepage Part 2 (page-specific layout)
 * Stage 5, Part 2 — Services, Why Choose Us, Statistics
 *
 * SCOPE DISCIPLINE: this file adds exactly two rules — nothing in
 * components-core.css, components-interactive.css, luxury-effects.css,
 * or worldmap-system.css is redefined. Both rules exist because the
 * specific thing they do has no existing equivalent anywhere in the
 * approved Component Library:
 *
 * 1. `.ge-section` — a generic vertical section-padding rhythm. Every
 *    prior stage's sections (Hero, cards, etc.) either defined their
 *    own padding inline within a larger component (e.g. `.ge-home-hero`)
 *    or didn't need one yet. Three new sections in one stage needing
 *    the exact same vertical rhythm is what makes this a genuine,
 *    justified gap rather than a convenience shortcut.
 * 2. `.ge-stats-band` — a full-bleed gold section wrapper. `.ge-cta-block`
 *    (Stage 3) is visually similar but is a CONTAINED block (has its
 *    own border-radius and is meant to sit inside a section with
 *    padding around it) — the Statistics section instead needs the
 *    gold gradient to run edge-to-edge as the section background
 *    itself, per the Phase 3 UI Spec's explicit "full-bleed, no
 *    container max-width constraint on background" requirement. That
 *    is a structurally different job than `.ge-cta-block` does, not a
 *    duplicate of it — reuses the identical gradient recipe/tokens
 *    rather than inventing new color values.
 *
 * LOADING: registered only, conditionally enqueued on the front page —
 * see inc/homepage-part2.php's `ge_homepage_part2_enqueue_assets()`.
 */

/* ==========================================================================
   1. SECTION RHYTHM
   ========================================================================== */

.ge-section {
  padding-block: var(--ge-space-7);
}

.ge-section--alt {
  background: rgba(16, 32, 58, 0.3);
}

.ge-section__divider {
  width: 64px;
  height: 2px;
  background: linear-gradient(90deg, var(--ge-color-gold-500), transparent);
  margin: 0 auto var(--ge-space-5);
}

@media (min-width: 768px) {
  .ge-section {
    padding-block: var(--ge-space-8);
  }
}

@media (max-width: 767px) {
  .ge-section {
    padding-block: var(--ge-space-6) var(--ge-space-7);
  }

  .ge-card-grid {
    gap: var(--ge-space-3);
  }

  /* REMOVED (v12, 2026-10-03 — Project Director directive).
     A September revision carried this rule here:

       .ge-card-grid--3up .ge-card:nth-child(n+3) { display: none; }

     It hid every card from the third onward below 768px. `--3up` drives
     the Homepage Services grid (6 services) plus the Government Services
     and Visa Services grids, so mobile visitors silently lost most of the
     service listings with no "view all" affordance to reach them. Content
     is not to be hidden rather than designed for; the full lists now
     render at every width, as they did in v11 and earlier. The tightened
     grid `gap` above is kept — that is density, not suppression. */
}

/* ==========================================================================
   2. FULL-BLEED GOLD BAND (Statistics section)
   ========================================================================== */

/* V20.35 — restrained depth scoped to the homepage service grid. */
.ge-home-services .ge-service-card {
  box-shadow: 0 12px 30px rgba(5, 11, 20, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.35s ease, border-color 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
  .ge-home-services .ge-service-card:hover {
    transform: translateY(-3px);
    border-color: rgba(232, 200, 120, 0.52);
    box-shadow: 0 18px 38px rgba(5, 11, 20, 0.26),
      0 0 20px rgba(201, 162, 75, 0.10);
  }
}

@media (max-width: 767px) {
  .ge-home-services .ge-service-card {
    padding: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ge-home-services .ge-service-card {
    transition: none;
  }

  .ge-home-services .ge-service-card:hover {
    transform: none;
  }
}

.ge-stats-band {
  background: linear-gradient(135deg, var(--ge-color-gold-300), var(--ge-color-gold-500));
  padding-block: var(--ge-space-7);
  position: relative;
  overflow: hidden;
}

.ge-stats-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 60% at 50% 0%,
    rgba(255, 255, 255, 0.15) 0%,
    transparent 60%
  );
  pointer-events: none;
}

@media (min-width: 768px) {
  .ge-stats-band {
    padding-block: var(--ge-space-8);
  }
}

/* ==========================================================================
   V18 — PAGE SURFACE FIX (2026-10-04)
   MEASURED DEFECT: 10 headings on the Homepage rendered #FFFFFF on #FFFFFF
   and were invisible — "Services Built Around Your Needs", "Our Recruitment
   Process" and all six process-step titles. Verified by contrast measurement,
   ancestor-chain inspection and a screenshot showing a blank white band.

   CAUSE: .ge-section-header__title and .ge-timeline__title use
   --ge-color-text-primary (#FFFFFF). Sections carrying .ge-navy-glow get a
   dark radial gradient and were always fine; plain .ge-section had no
   background at all and fell through to the parent theme's white <body>.

   FIX: give .ge-section an explicit dark surface. .ge-navy-glow still wins
   where present (its `background` shorthand sets the gradient), so the two
   coexist. Single-class selector — no specificity conflict with Hello
   Elementor, unlike the element-level type-scale fix in V16. */
.ge-section {
  background-color: var(--ge-color-navy-900);
}