/**
 * Golden Eagle GS — Component Library: Core
 * Stage 3 — Enterprise Component Library
 *
 * Covers: Premium Button Library, Icon Components, Section Headers,
 * Breadcrumb Components, Pagination Components, Card base + Hero, CTA,
 * Service, Job, Testimonial, Team, and Statistics card variants.
 *
 * USAGE: apply these class names via Elementor's native "CSS Classes"
 * Advanced-tab control on any widget (Container, Heading, Button, Icon,
 * Text, etc.), or on Shortcode/HTML widget markup. No Elementor widget
 * needs to be replaced — these classes layer on top of Elementor's own
 * output. Full per-component markup contracts and Elementor application
 * recipes are documented in COMPONENT_LIBRARY.md; this file is the
 * implementation, that file is the usage guide.
 *
 * All values trace back to the :root tokens defined in style.css
 * (Stage 2/3) — no hard-coded hex, spacing, or radius value appears
 * anywhere below. This is the concrete enforcement of "avoid duplicated
 * CSS": one token change in style.css updates every component at once.
 *
 * Responsive strategy: mobile-first. Base rules target the smallest
 * tier (Mobile, <=479px); min-width media queries layer up through
 * Large Mobile (480px), Tablet (768px), Laptop (1024px), and Desktop
 * (1440px) — matching DESIGN_SYSTEM.md §5 exactly.
 *
 * Loaded sitewide (registered + enqueued in functions.php) — these
 * components appear on nearly every page per the Phase 3 Component
 * Reuse Map (contrast with components-interactive.css, registered-only).
 */

/* ==========================================================================
   1. PREMIUM BUTTON LIBRARY
   ========================================================================== */

/* HIDDEN STATE (V19.1, 2026-10-04) — MEASURED DEFECT.
   The browser's own `[hidden] { display: none }` comes from the UA
   stylesheet, which ANY author rule outranks. .ge-btn sets a display value,
   so a button carrying the hidden attribute still rendered.

   Live effect: multi-step-form.js correctly sets btn.hidden on Back and
   Submit for step 1 (verified: hiddenAttr true, hiddenProp true), yet all
   three buttons were painted — Back, Next and Submit at once. The JS state
   machine was right; the CSS was silently ignoring it.

   An attribute selector alongside the class gives (0,2,0), which beats
   .ge-btn (0,1,0) deterministically regardless of load order, so no
   !important is needed. The same pattern already exists for the inquiry
   blocks in components-interactive.css. */
.ge-btn[hidden] {
  display: none;
}

.ge-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ge-space-2);
  padding: var(--ge-space-3) var(--ge-space-5);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--ge-radius-pill);
  cursor: pointer;
  transition:
    transform var(--ge-duration-base) var(--ge-ease-standard),
    box-shadow var(--ge-duration-base) var(--ge-ease-standard),
    background var(--ge-duration-base) var(--ge-ease-standard),
    border-color var(--ge-duration-base) var(--ge-ease-standard);
}

.ge-btn:hover,
.ge-btn:focus-visible {
  transform: translateY(-2px);
}

.ge-btn--primary {
  background: linear-gradient(135deg, var(--ge-color-gold-300), var(--ge-color-gold-500));
  color: var(--ge-color-text-on-gold);
}

.ge-btn--primary:hover,
.ge-btn--primary:focus-visible {
  box-shadow: 0 0 24px rgba(201, 162, 75, 0.25);
}

.ge-btn--primary:active {
  background: var(--ge-color-gold-700);
  transform: translateY(0);
}

.ge-btn--secondary {
  background: transparent;
  border-color: var(--ge-color-gold-500);
  color: var(--ge-color-gold-300);
}

.ge-btn--secondary:hover,
.ge-btn--secondary:focus-visible {
  background: rgba(201, 162, 75, 0.1);
}

.ge-btn--ghost {
  background: transparent;
  color: var(--ge-color-gold-300);
  padding: var(--ge-space-1) 0;
  text-transform: none;
  letter-spacing: normal;
  border-radius: 0;
  border-bottom: 1px solid transparent;
}

.ge-btn--ghost:hover,
.ge-btn--ghost:focus-visible {
  border-bottom-color: var(--ge-color-gold-300);
  transform: none;
}

/* GHOST BUTTONS ON LIGHT SURFACES (V19.1, 2026-10-04) — MEASURED DEFECT.
   .ge-btn--ghost is gold (#E8C878), which reads 11.19:1 on the navy sections
   where the Homepage uses it. The templates built on .ge-page-section render
   on white, where the same gold measures 1.62:1 — affecting the WhatsApp CTA
   and the multi-step Back button on Request Manpower, and the WhatsApp and
   email links on Contact.

   Scoped to .ge-page-section (0,2,0) so the dark-surface usages keep their
   gold untouched. The underline is persistent here so these remain obviously
   links without depending on colour. */
.ge-page-section .ge-btn--ghost {
  color: var(--ge-color-navy-900);
  border-bottom-color: currentColor;
}

.ge-page-section .ge-btn--ghost:hover,
.ge-page-section .ge-btn--ghost:focus-visible {
  border-bottom-color: transparent;
}

.ge-btn--inverted {
  background: var(--ge-color-navy-900);
  color: var(--ge-color-gold-300);
}

.ge-btn--inverted:hover,
.ge-btn--inverted:focus-visible {
  box-shadow: 0 0 24px rgba(5, 11, 20, 0.35);
}

.ge-btn.ge-is-loading {
  color: transparent;
  pointer-events: none;
  position: relative;
}

.ge-btn.ge-is-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--ge-color-text-on-gold);
  animation: ge-spin 0.7s linear infinite;
}

@keyframes ge-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ge-btn.ge-is-loading::after {
    animation-duration: 1.4s;
  }
}

/* ==========================================================================
   2. ICON COMPONENTS
   ========================================================================== */

.ge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ge-color-text-secondary);
  transition: color var(--ge-duration-base) var(--ge-ease-standard),
    transform var(--ge-duration-base) var(--ge-ease-standard);
}

.ge-icon svg,
.ge-icon img {
  width: 100%;
  height: 100%;
}

.ge-icon--sm { width: 16px; height: 16px; }
.ge-icon--md { width: 24px; height: 24px; }
.ge-icon--lg { width: 32px; height: 32px; }
.ge-icon--xl { width: 48px; height: 48px; }

.ge-icon--gold { color: var(--ge-color-gold-300); }

.ge-hover-lift:hover .ge-icon {
  color: var(--ge-color-gold-300);
  transform: scale(1.05);
}

/* ==========================================================================
   3. SECTION HEADERS
   ========================================================================== */

.ge-section-header {
  display: flex;
  flex-direction: column;
  gap: var(--ge-space-3);
  margin-bottom: var(--ge-space-5);
}

.ge-section-header__eyebrow {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ge-color-gold-300);
}

.ge-section-header__title {
  color: var(--ge-color-text-primary);
  margin: 0;
}

.ge-section-header--center {
  align-items: center;
  text-align: center;
}

@media (min-width: 768px) {
  .ge-section-header {
    margin-bottom: var(--ge-space-6);
  }
  .ge-section-header__eyebrow {
    font-size: 13px;
  }
}

/* ==========================================================================
   4. BREADCRUMB COMPONENT
   ========================================================================== */

.ge-breadcrumbs,
.ge-breadcrumbs-fallback,
.rank-math-breadcrumb {
  font-size: 13px;
  color: var(--ge-color-text-muted);
  margin-bottom: var(--ge-space-3);
}

.ge-breadcrumbs a,
.ge-breadcrumbs-fallback a,
.rank-math-breadcrumb a {
  color: var(--ge-color-text-muted);
  text-decoration: none;
  transition: color var(--ge-duration-fast) var(--ge-ease-standard);
}

.ge-breadcrumbs a:hover,
.ge-breadcrumbs-fallback a:hover,
.rank-math-breadcrumb a:hover {
  color: var(--ge-color-gold-300);
}

.ge-breadcrumbs [aria-current="page"],
.ge-breadcrumbs-fallback [aria-current="page"] {
  color: var(--ge-color-text-secondary);
}

/* ==========================================================================
   5. PAGINATION COMPONENT
   ========================================================================== */

.navigation.pagination,
.ge-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ge-space-2);
  margin-top: var(--ge-space-6);
}

.navigation.pagination a,
.navigation.pagination span,
.ge-pagination a,
.ge-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--ge-space-2);
  border-radius: var(--ge-radius-sm);
  color: var(--ge-color-text-secondary);
  text-decoration: none;
  font-size: 14px;
  transition: background var(--ge-duration-fast) var(--ge-ease-standard),
    color var(--ge-duration-fast) var(--ge-ease-standard);
}

.navigation.pagination a:hover,
.ge-pagination a:hover {
  background: var(--ge-color-navy-850);
  color: var(--ge-color-gold-300);
}

.navigation.pagination .current,
.ge-pagination .current {
  background: var(--ge-color-gold-500);
  color: var(--ge-color-text-on-gold);
  font-weight: 600;
}

/* ==========================================================================
   6. CARD BASE
   ========================================================================== */

.ge-card {
  background: var(--ge-color-navy-850);
  border: 1px solid var(--ge-color-border-subtle);
  border-radius: var(--ge-radius-md);
  padding: var(--ge-space-5);
}

/* Reinforces the existing .ge-hover-lift transform/shadow with a
   border-color shift on Cards specifically (not every
   .ge-hover-lift element sitewide, e.g. Partner logos) — the
   transition itself is already declared on .ge-hover-lift's base
   rule (animation-system.css); this only adds the hover VALUE. */
.ge-card.ge-hover-lift:hover {
  border-color: var(--ge-color-gold-300);
  box-shadow: 
    var(--ge-shadow-md),
    0 0 0 1px rgba(201, 162, 75, 0.2);
}

/* ==========================================================================
   7. SERVICE CARD / JOB CARD
   ========================================================================== */

.ge-service-card,
.ge-job-card {
  display: flex;
  flex-direction: column;
  gap: var(--ge-space-3);
  min-height: 240px;
  transition: 
    transform var(--ge-duration-base) var(--ge-ease-standard),
    box-shadow var(--ge-duration-base) var(--ge-ease-standard),
    border-color var(--ge-duration-base) var(--ge-ease-standard);
}

/* Service Cards render as a <div> with a small internal <a class="ge-card__link">
   ("Learn More"), unlike Job/Blog cards where the entire card is already
   the <a>. This "stretched link" pattern makes the whole card clickable
   through that one real link — position:relative on the card, the link's
   ::after stretches to cover it — without nesting a second <a> or
   duplicating the href. Only applies when the link actually renders (no
   related_page set = no link = card correctly stays non-interactive,
   same honest-degradation behavior as before). */
.ge-service-card {
  position: relative;
}

.ge-service-card .ge-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.ge-service-card__title,
.ge-job-card__title {
  color: var(--ge-color-text-primary);
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}

.ge-service-card__description,
.ge-job-card__description {
  color: var(--ge-color-text-secondary);
  font-size: 15px;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ge-job-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ge-space-2);
  font-size: 13px;
  color: var(--ge-color-text-muted);
}

.ge-job-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--ge-space-1);
  padding: var(--ge-space-1) var(--ge-space-2);
  background: var(--ge-color-navy-800);
  border-radius: var(--ge-radius-sm);
  font-size: 13px;
  letter-spacing: 0.01em;
}

.ge-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--ge-space-1);
  color: var(--ge-color-gold-300);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  margin-top: auto;
  transition: 
    gap var(--ge-duration-fast) var(--ge-ease-standard),
    color var(--ge-duration-fast) var(--ge-ease-standard);
}

.ge-card__link:hover {
  gap: var(--ge-space-2);
  color: var(--ge-color-gold-100);
}

.ge-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ge-space-4);
}

@media (min-width: 768px) {
  .ge-card-grid--2up { grid-template-columns: repeat(2, 1fr); }
  /* Tablet: 2-up rather than jumping straight from 1 to 3 columns —
     the 3-up grid previously had no tablet-specific rule at all, so
     it stayed single-column until the 1024px desktop breakpoint. */
  .ge-card-grid--3up { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .ge-card-grid--3up { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   8. TESTIMONIAL CARD
   ========================================================================== */

.ge-testimonial-card {
  position: relative;
  padding: var(--ge-space-6);
  overflow: hidden;
}

.ge-testimonial-card__quote-mark {
  position: absolute;
  top: var(--ge-space-3);
  left: var(--ge-space-4);
  font-size: 64px;
  line-height: 1;
  color: var(--ge-color-gold-300);
  opacity: 0.2;
  font-family: Georgia, serif;
  pointer-events: none;
}

.ge-testimonial-card__quote {
  position: relative;
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ge-color-text-primary);
  margin: 0 0 var(--ge-space-4);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ge-testimonial-card__author {
  display: flex;
  align-items: center;
  gap: var(--ge-space-3);
}

.ge-testimonial-card__photo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.ge-testimonial-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ge-color-text-primary);
}

.ge-testimonial-card__title {
  font-size: 13px;
  color: var(--ge-color-text-muted);
}

@media (min-width: 768px) {
  .ge-testimonial-card__quote {
    font-size: 20px;
  }
}

/* ==========================================================================
   9. TEAM CARD
   ========================================================================== */

.ge-team-card {
  display: flex;
  flex-direction: column;
  gap: var(--ge-space-2);
  text-align: center;
}

.ge-team-card__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--ge-radius-md);
  object-fit: cover;
  filter: grayscale(40%);
  transition: filter var(--ge-duration-base) var(--ge-ease-standard);
}

.ge-team-card:hover .ge-team-card__photo {
  filter: grayscale(0%);
}

.ge-team-card__name {
  font-size: 18px;
  font-weight: 600;
  color: var(--ge-color-text-primary);
  margin: var(--ge-space-2) 0 0;
}

.ge-team-card__title {
  font-size: 14px;
  color: var(--ge-color-gold-300);
}

.ge-team-card__bio {
  font-size: 13px;
  color: var(--ge-color-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   10. STATISTICS CARD
   ========================================================================== */

.ge-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ge-space-1);
  text-align: center;
  padding: var(--ge-space-3);
}

.ge-stat-card__number {
  font-size: 40px;
  font-weight: 700;
  color: var(--ge-color-text-on-gold);
  line-height: 1;
}

.ge-stat-card__label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ge-color-text-on-gold);
  opacity: 0.7;
}

.ge-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ge-space-4);
}

@media (min-width: 1024px) {
  .ge-stat-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .ge-stat-card__number {
    font-size: 56px;
  }
  .ge-stat-card {
    border-right: 1px solid rgba(10, 22, 40, 0.15);
  }
  .ge-stat-card:last-child {
    border-right: none;
  }
}

/* ==========================================================================
   13. PARTNER LOGO GRID — INTENTIONALLY NOT DEFINED HERE
   ========================================================================== */
/* A September revision added a second, competing `.ge-partner-logo`
   definition at this point. It conflicted directly with the approved
   definition that already lived in home-part4.css — `display:
   inline-block` vs `flex`, image `width/height: 100%` vs `auto` with a
   64px max-height — and because home-part4.css declares
   `ge-components-core` as a dependency it loads AFTER this file, so the
   cascade silently resolved some properties here and others there. The
   result was a half-merged treatment neither definition intended.

   It also carried a hard CSS error: `margin: var(--ge-space-2) calc
   calc(var(--ge-space-1) * 0.5)` — `calc` without parentheses, which
   browsers drop as invalid.

   Resolved in v12 by consolidating the component into ONE source of
   truth: assets/css/home-part4.css, where the Partners section's grid,
   markup and responsive rules already live. The worthwhile parts of the
   September treatment (card surface, gold hover border, lift and shadow)
   were carried across to that file — the conflicting layout and the
   broken calc were not. Do not reintroduce a `.ge-partner-logo` rule in
   this file; edit home-part4.css instead. */

/* ==========================================================================
   11. HERO COMPONENT (structural pieces only — full visual hero
      remains Elementor-built per DESIGN_SYSTEM.md §0)
   ========================================================================== */

.ge-hero {
  display: flex;
  flex-direction: column;
  gap: var(--ge-space-3);
}

.ge-hero__eyebrow {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ge-color-gold-300);
}

.ge-hero__title {
  color: var(--ge-color-text-primary);
  margin: 0;
}

.ge-hero__title em,
.ge-hero__title .ge-hero__highlight {
  color: var(--ge-color-gold-300);
  font-style: normal;
}

.ge-hero__subtitle {
  font-size: 16px;
  color: var(--ge-color-text-secondary);
  max-width: 32em;
}

.ge-hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--ge-space-3);
  margin-top: var(--ge-space-4);
}

@media (min-width: 480px) {
  .ge-hero__actions {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .ge-hero__subtitle {
    font-size: 18px;
  }
}

.ge-hero--compact {
  padding: var(--ge-space-7) 0;
  background: var(--ge-color-navy-900);
}

@media (min-width: 768px) {
  .ge-hero--compact {
    padding: var(--ge-space-8) 0;
  }
}

/* ==========================================================================
   12. CTA COMPONENT (Gold Band)
   ========================================================================== */

.ge-cta-block {
  background: linear-gradient(135deg, var(--ge-color-gold-300), var(--ge-color-gold-500));
  border-radius: var(--ge-radius-lg);
  padding: var(--ge-space-6) var(--ge-space-4);
  text-align: center;
  position: relative;
  overflow: hidden;
}

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

.ge-cta-block__title {
  color: var(--ge-color-text-on-gold);
  margin: 0 0 var(--ge-space-3);
  position: relative;
  z-index: 1;
}

.ge-cta-block__subtitle {
  color: var(--ge-color-text-on-gold);
  opacity: 0.9;
  margin: 0 0 var(--ge-space-5);
  position: relative;
  z-index: 1;
  line-height: 1.6;
}

.ge-cta-block .ge-btn {
  position: relative;
  z-index: 1;
}

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

@media (max-width: 767px) {
  .ge-cta-block {
    padding: var(--ge-space-5) var(--ge-space-3);
    border-radius: var(--ge-radius-md);
  }

  .ge-cta-block__title {
    font-size: clamp(20px, 4vw, 24px);
  }

  .ge-cta-block__subtitle {
    font-size: 14px;
    margin-bottom: var(--ge-space-4);
  }
}