/* ============================================
   About WIF – Page-specific Styles
   ============================================ */

/* ---- Page Hero (60vh) ---- */
.page-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--color-navy-deep);
}

.page-hero .parallax-bg::after {
  background: linear-gradient(
    135deg,
    rgba(15, 27, 51, 0.88) 0%,
    rgba(27, 42, 74, 0.75) 50%,
    rgba(42, 63, 107, 0.68) 100%
  );
}

.page-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
  padding: var(--space-xl) var(--space-md) var(--space-lg);
}

.page-hero__content h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  color: var(--color-white);
  margin-bottom: var(--space-sm);
  letter-spacing: -0.02em;
}

.page-hero__content .gold {
  color: var(--color-gold);
}

.page-hero__content p {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: rgba(247, 246, 242, 0.8);
  max-width: 640px;
  margin: 0 auto;
  line-height: var(--leading-relaxed);
}

/* ---- Section Labels ---- */
.section-label {
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
}

/* ---- CTA (reused pattern) ---- */
.cta-section {
  position: relative;
  text-align: center;
  background: var(--color-navy);
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -10%;
  width: 120%;
  height: 200%;
  background: radial-gradient(ellipse at center, rgba(201, 168, 76, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.cta-section__content {
  position: relative;
  z-index: 1;
  max-width: 650px;
  margin: 0 auto;
}

.cta-section h2 {
  color: var(--color-white);
  margin-bottom: var(--space-sm);
}

.cta-section p {
  color: rgba(247, 246, 242, 0.75);
  margin-bottom: var(--space-md);
}

.cta-section__buttons {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================
   Leadership Grid (9-person team, 3x3)
   ============================================ */
.leadership-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-md);
  align-items: stretch;
}

.leadership-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(27, 42, 74, 0.08);
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
  display: flex;
  flex-direction: column;
}

.leadership-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(27, 42, 74, 0.14);
}

.leadership-card__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  background: var(--color-off-white);
  /* subtle gold separator between photo and body */
  border-bottom: 2px solid var(--color-gold);
}

.leadership-card__body {
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.leadership-card__name {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 0.25rem;
  line-height: var(--leading-snug);
}

.leadership-card__role {
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-gold);
  margin: 0 0 1rem;
}

.leadership-card__bio {
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  font-size: 0.95rem;
  margin: 0;
}

@media (max-width: 960px) {
  .leadership-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .leadership-grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
}

/* ============================================
   Worldwide Network Map
   ============================================ */
.network-map-section {
  position: relative;
  overflow: hidden;
}

/* faint gold glow behind the map */
.network-map-section::before {
  content: '';
  position: absolute;
  top: 30%;
  left: 50%;
  width: 70%;
  height: 70%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(201, 168, 76, 0.08) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.network-map {
  position: relative;
  max-width: 1100px;
  margin: 0 auto 3rem;
  padding: 1rem;
  z-index: 1;
}

.network-map__svg {
  width: 100%;
  height: auto;
  display: block;
}

/* pulsing pin animation */
@keyframes networkPulse {
  0%   { transform: scale(1); opacity: 0.6; }
  50%  { transform: scale(1.6); opacity: 0.2; }
  100% { transform: scale(1); opacity: 0.6; }
}

.network-map__pulse {
  transform-origin: center;
  transform-box: fill-box;
  animation: networkPulse 2.4s ease-in-out infinite;
}

.network-map__pulse--slow {
  animation-duration: 3.6s;
}

/* subtle animated dash on the connection line */
@keyframes networkDash {
  to { stroke-dashoffset: -80; }
}

.network-map__link {
  animation: networkDash 6s linear infinite;
}

/* Legend */
.network-map__legend {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

.network-map__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.network-map__legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-gold);
  box-shadow: 0 0 0 4px rgba(201, 168, 76, 0.2);
}

.network-map__legend-line {
  display: inline-block;
  width: 28px;
  height: 0;
  border-top: 2px dashed var(--color-gold);
  opacity: 0.7;
}

/* Location detail cards below the map */
.network-locations {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.network-location {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(201, 168, 76, 0.18);
  border-radius: var(--radius-md);
  padding: 2rem;
  backdrop-filter: blur(8px);
  transition: border-color var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
}

.network-location:hover {
  border-color: rgba(201, 168, 76, 0.45);
  transform: translateY(-2px);
}

.network-location__header {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(201, 168, 76, 0.15);
}

.network-location__tag {
  display: inline-block;
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-gold);
  margin-bottom: 0.5rem;
}

.network-location__name {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-white);
  margin: 0;
}

.network-location__body {
  color: rgba(255, 255, 255, 0.75);
  line-height: var(--leading-normal);
  font-size: 0.95rem;
  margin: 0;
}

@media (max-width: 720px) {
  .network-locations {
    grid-template-columns: 1fr;
  }
  .network-map__legend {
    gap: 1.25rem;
    font-size: 0.85rem;
  }
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .page-hero {
    min-height: 50vh;
  }

  .page-hero__content {
    padding: var(--space-lg) var(--space-sm) var(--space-md);
  }
}


/* ---- Mobile-only About page fixes (this-chat scope) ---- */
@media (max-width: 768px) {
  /* Hero: the absolute-positioned flex container originally laid the h1 and the locations card
     side-by-side, which clipped both off opposite edges on phones. Stack vertically and re-anchor
     to the top so both fit within the 80vh hero. */
  /* Push headline below the 132px fixed nav and add room so '20+ Years' lands lower in
     the hero (Tristan request 2026-05-16 cont.8: should sit where 'One Mission' was). */
  .about-hero-stack {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding-top: 9.5rem !important;
    padding-bottom: 1.5rem !important;
    gap: 1.25rem;
    overflow-y: auto;
  }
  /* Tristan 2026-05-16 cont.10: v15's height:auto cropped too much of the beach image.
     Restore a tall hero (85vh) so the full hero image is visible AND content has room. */
  .page-hero {
    height: 85vh !important;
    min-height: 600px !important;
  }
  /* Also remove the overflow-y:auto from the stack - no internal scroll within hero */
  .about-hero-stack {
    overflow-y: visible !important;
  }
  /* 2026-09-03: the display line is now a p (.about-hero-display); the h1 is the small overline above it. */
  .about-hero-title .about-hero-display {
    font-size: clamp(1.9rem, 9vw, 2.6rem) !important;
    line-height: 1.1 !important;
  }
  .about-hero-locations {
    margin: 0 0.75rem !important;
    padding: 1rem !important;
    max-width: 100% !important;
  }
  .about-hero-locations > div {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  .about-hero-locations p {
    font-size: 0.85rem !important;
    line-height: 1.55 !important;
  }

  /* Map: was rendering tiny on phones because section padding plus container padding plus
     .network-map padding left maybe 280px of width for a 2.38:1 SVG. Strip the side gutters,
     give the map most of the viewport, and let it grow taller proportionally. */
  .network-map-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .network-map-section .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }
  .network-map {
    padding: 0.25rem !important;
    max-width: 100% !important;
    margin: 0 auto 2rem !important;
  }
  .network-map__svg {
    width: 100% !important;
    min-height: 200px;
  }
}


/* ---- About Pioneering / Our Story section: mobile-only fixes per Tristan 2026-05-16 cont.8 ---- */
@media (max-width: 767px) {
  /* The outer text-vs-stats grid was set 1fr 1fr inline with no mobile collapse, squeezing
     the body text into the left half and pushing two of the stat cards off the right edge.
     Stack vertically on mobile: text first, stats grid below. */
  .about-story-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-lg) !important;
  }
  /* Stats panel keeps a 2x2 grid (4 stats stay visible) but each card narrower so they fit. */
  .about-story-stats {
    gap: var(--space-sm) !important;
  }
  .about-story-stats > div p:first-child {
    font-size: 1.85rem !important;
  }
  .about-story-stats > div p:last-child {
    font-size: 0.75rem !important;
  }
  .about-story-stats > div {
    padding: 1rem !important;
  }
}