/* ==========================================================================
   04 - SECTIONS
   Description: Hero areas, section panels, media containers, and slideshows
   Dependencies: 01-base.css
   ========================================================================== */

/* ===================== HERO ===================== */
.symap-hero {
  padding: var(--space-12) 0 var(--space-8);
  background: radial-gradient(900px 220px at 0% 0%, #f6f9ff 0%, transparent 70%);
  margin-top: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Hero animation */
.symap-hero.symap-animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.symap-hero.symap-animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

.symap-hero::before { display: none !important; }

/* Fullwidth Hero */
.symap-hero-fullwidth {
  background-position: center 45%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  position: relative;
  min-height: 600px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Light background hero - use inline height, override base 600px */
.symap-hero-fullwidth.light-bg {
  min-height: 350px !important;
}

/* Fullwidth hero animation */
.symap-hero-fullwidth.symap-animate-on-scroll {
  opacity: 0;
}

.symap-hero-fullwidth.symap-animate-on-scroll .symap-hero-content {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s;
}

.symap-hero-fullwidth.symap-animate-on-scroll.visible {
  opacity: 1;
}

.symap-hero-fullwidth.symap-animate-on-scroll.visible .symap-hero-content {
  opacity: 1;
  transform: translateY(0);
}

.symap-hero-fullwidth::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: 
    radial-gradient(ellipse at 20% 90%, rgba(15, 98, 254, 0.15) 0%, transparent 40%),
    radial-gradient(ellipse at 85% 10%, rgba(59, 130, 246, 0.1) 0%, transparent 40%),
    linear-gradient(180deg, transparent 0%, rgba(15, 41, 75, 0.3) 100%);
  pointer-events: none;
}

.symap-hero-fullwidth::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  box-shadow: none !important;
  animation: none !important;
  pointer-events: none;
}

@keyframes edgePulse {
  0%, 100% { box-shadow: inset 0 0 100px rgba(15, 98, 254, 0.2); }
  50% { box-shadow: inset 0 0 200px rgba(15, 98, 254, 0.5); }
}

/* Hero Content Container */
.symap-hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  padding: 0 var(--space-4);
  text-align: center;
}

/* Hero Text (white for dark backgrounds) */
.symap-hero-fullwidth .symap-h1,
.symap-hero-content .symap-h1 {
  color: #fff;
  margin-top: var(--space-4);
}

.symap-hero-fullwidth .symap-lead,
.symap-hero-content .symap-lead {
  color: #fff;
  opacity: 0.95;
  max-width: 900px;
  margin: var(--space-5) auto;
}

/* Light background hero variant - dark text */
.symap-hero-fullwidth.light-bg .symap-h1,
.symap-hero-fullwidth.light-bg .symap-hero-content .symap-h1 {
  color: var(--color-heading);
}

.symap-hero-fullwidth.light-bg .symap-lead,
.symap-hero-fullwidth.light-bg .symap-hero-content .symap-lead {
  color: var(--color-body);
  opacity: 1;
}

.symap-hero-fullwidth.light-bg .symap-eyebrow {
  color: var(--color-primary);
}

/* Reduce/remove overlays for light backgrounds */
.symap-hero-fullwidth.light-bg::after {
  background: 
    radial-gradient(ellipse at 20% 100%, rgba(15, 98, 254, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 0%, rgba(59, 130, 246, 0.06) 0%, transparent 50%);
}

.symap-hero-fullwidth.light-bg::before {
  box-shadow: none !important;
  animation: none !important;
}

@keyframes lightEdgePulse {
  0%, 100% { box-shadow: inset 0 0 80px rgba(15, 98, 254, 0.05); }
  50% { box-shadow: inset 0 0 150px rgba(15, 98, 254, 0.12); }
}

.symap-hero-content .symap-cta-row {
  justify-content: center;
  margin-top: var(--space-6);
}

/* ===================== ANIMATED GLOBE HEROES =====================
   Enhanced by HeroNetworks in full-website-js.js. Original artwork and
   centred content remain available if JavaScript does not run. */
.symap-hero-fullwidth.symap-network-hero {
  isolation: isolate;
  overflow: hidden;
  background-image: none !important; /* replaces the inline background */
  background-color: #031321;
  min-height: 600px !important;
  opacity: 1;
  transform: none;
  transition: none;
}
.symap-network-hero .symap-network-art {
  position: absolute;
  /* Keep the source ratio: a widening SVG viewport must not crop via slice.
     Anchor the globe's centre (766,425), not the centre of the whole image. */
  top: 50%;
  left: calc(50% + min(27vw, 360px));
  width: min(102%, 1440px);
  aspect-ratio: 3 / 2;
  transform: translate(-49.8698%, -41.5039%);
  z-index: 0;
  pointer-events: none;
}
.symap-network-art svg { display: block; width: 100%; height: 100%; }
.symap-globe-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.symap-network-dark .symap-network-art {
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 85%, transparent);
}
.symap-network-hero::before { display: none; }
.symap-hero-fullwidth.symap-network-dark::after {
  background: linear-gradient(90deg, #031321 0%, rgba(3,19,33,.97) 20%, rgba(3,19,33,.8) 43%, rgba(3,19,33,.1) 68%, rgba(3,19,33,.04));
}
.symap-network-hero .symap-hero-content {
  width: min(1280px, 90%);
  max-width: none;
  padding: 64px 0;
  text-align: left;
}
.symap-network-hero.symap-animate-on-scroll .symap-hero-content {
  opacity: 1;
  transform: none;
  transition: none;
}
.symap-network-hero .symap-hero-content .symap-h1 {
  max-width: 60%;
  font-size: clamp(2rem, 3.7vw, 3.3rem);
  line-height: 1.12;
  letter-spacing: -.035em;
  text-wrap: balance;
  margin: 28px 0 22px;
}
.symap-network-hero .symap-hero-content .symap-lead,
.symap-network-hero .symap-hero-content .symap-hero-sub {
  max-width: min(56%, 560px);
  margin: 0 0 28px;
  font-size: 1rem;
  line-height: 1.65;
  text-wrap: pretty;
  text-align: inherit;
}
.symap-network-hero .symap-hero-content .symap-cta-row {
  max-width: 62%;
  justify-content: flex-start;
  gap: 10px;
}
.symap-hero-fullwidth.symap-network-light {
  background-color: #fff;
  min-height: 420px !important;
}
.symap-network-light .symap-network-art {
  /* Retain the close view, centred on the light globe at (1185,484). */
  width: min(150%, 1800px);
  transform: translate(-77.1484%, -47.2656%);
  /* Fade the image boundary into the white hero once its capped edge is visible. */
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 94%, transparent);
}
.symap-hero-fullwidth.symap-network-light::after {
  background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.97) 27%, rgba(255,255,255,.84) 46%, rgba(255,255,255,.08) 72%);
}
.symap-network-light .symap-hero-content { padding: 48px 0; }
.symap-network-light .symap-hero-content .symap-h1 {
  font-size: clamp(1.9rem, 3.2vw, 2.85rem);
  color: #0f172a;
}
.symap-network-light .symap-hero-content .symap-lead,
.symap-network-light .symap-hero-content .symap-hero-sub { color: #334155; opacity: 1; }
.symap-network-track { fill: none; stroke: #5dddf8; stroke-width: 1; opacity: .11; }
.symap-network-node { fill: #b0efff; opacity: .75; }
.symap-network-flow,
.symap-network-tip { fill: none; stroke-linecap: round; opacity: 0; }
.symap-network-flow {
  stroke: #4cddff;
  stroke-width: 1.7;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  animation: symap-network-draw 24s linear infinite;
}
.symap-network-tip {
  stroke: #d5faff;
  stroke-width: 4;
  stroke-dasharray: .007 1;
  filter: drop-shadow(0 0 4px #67e6ff);
  animation: symap-network-travel 24s linear infinite;
}
.symap-network-signal {
  fill: none;
  stroke: #79eaff;
  stroke-width: 1.8;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: symap-network-pulse 24s ease-out infinite;
}
.symap-network-glow {
  fill: #a6f1ff;
  opacity: 0;
  animation: symap-network-glow 24s ease-in-out infinite;
}
.symap-network-light .symap-network-track { stroke: #488dc7; opacity: .1; }
.symap-network-light .symap-network-node { fill: #397bad; opacity: .65; }
.symap-network-light .symap-network-flow { stroke: #518dc8; stroke-width: 1.5; }
.symap-network-light .symap-network-tip { stroke: #1564ad; stroke-width: 3; filter: none; }
.symap-network-light .symap-network-signal { stroke: #548ec3; stroke-width: 1.5; }
.symap-network-light .symap-network-glow { fill: #286eab; }
.symap-network-flow, .symap-network-tip, .symap-network-signal, .symap-network-glow {
  animation-delay: var(--hero-delay, 0s);
  animation-play-state: paused;
}
[data-network-running="true"] .symap-network-flow,
[data-network-running="true"] .symap-network-tip,
[data-network-running="true"] .symap-network-signal,
[data-network-running="true"] .symap-network-glow { animation-play-state: running; }
@keyframes symap-network-draw {
  0% { stroke-dashoffset: 1; opacity: 0; }
  1% { opacity: .75; }
  12.5%, 30% { stroke-dashoffset: 0; opacity: .75; }
  42%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes symap-network-travel {
  0% { stroke-dashoffset: 0; opacity: 0; }
  1% { opacity: 1; }
  12.5% { stroke-dashoffset: -1; opacity: 1; }
  13%, 100% { stroke-dashoffset: -1; opacity: 0; }
}
@keyframes symap-network-pulse {
  0% { opacity: 0; transform: scale(.7); }
  1% { opacity: .6; transform: scale(1); }
  8%, 100% { opacity: 0; transform: scale(2.8); }
}
@keyframes symap-network-glow {
  0%, 10%, 100% { opacity: 0; }
  1%, 4% { opacity: .8; }
}
@media (max-width: 700px) {
  .symap-network-hero .symap-hero-content { width: 86%; padding: 180px 0 56px; text-align: center; }
  .symap-network-hero .symap-hero-content .symap-h1 { max-width: none; font-size: 2rem; margin: 24px 0 18px; }
  .symap-network-hero .symap-hero-content .symap-lead,
  .symap-network-hero .symap-hero-content .symap-hero-sub { max-width: none; font-size: .9375rem; line-height: 1.6; }
  .symap-network-hero .symap-hero-content .symap-cta-row { max-width: none; justify-content: center; }
  .symap-network-dark .symap-network-art {
    top: 150px;
    left: 50%;
    width: min(160vw, 720px);
  }
  .symap-hero-fullwidth.symap-network-dark::after {
    background: linear-gradient(180deg, rgba(3,19,33,0), rgba(3,19,33,.15) 18%, rgba(3,19,33,.85) 40%, #031321 65%);
  }
  .symap-network-light .symap-hero-content { padding: 48px 0; text-align: left; }
  .symap-network-light .symap-hero-content .symap-cta-row { justify-content: flex-start; }
  .symap-network-light .symap-network-art {
    left: 75%;
    width: 1280px;
  }
  .symap-hero-fullwidth.symap-network-light::after {
    background: linear-gradient(90deg, rgba(255,255,255,.98), rgba(255,255,255,.92) 55%, rgba(255,255,255,.74));
  }
}
@media (prefers-reduced-motion: reduce) {
  .symap-network-flow, .symap-network-tip, .symap-network-signal, .symap-network-glow { display: none; animation: none !important; }
}

/* ===================== SHARED SUBPAGE HERO =====================
   One production contract for Projects, MFN Hub, Who We Are, Contact Us and
   Insights. The wrapper IDs keep other heroes and the project enquiry intact.
   The section type deliberately outranks the generated page styles regardless
   of enqueue order. Keep these settings here when rebuilding page bundles. */
:is(#symap-projects, #mfn-hub-v2, #symap-about, #symap-contact-v2, #symap-insights) > section:is(.hero, .contact-hero) {
  --subpage-hero-gutter: 80px;
  --subpage-hero-padding: 44px;
  --subpage-hero-title: clamp(34px, 3.6vw, 48px);
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  width: 100%;
  margin: 0;
  padding: 0;
  /* Overrides the older light-hero and contact !important minimums. */
  min-height: 480px !important;
  overflow: hidden;
  background-color: #f8fbff;
  background-position: center center;
  background-size: cover;
}
:is(#symap-projects, #mfn-hub-v2, #symap-about, #symap-contact-v2, #symap-insights) > section:is(.hero, .contact-hero)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, #f8fbff 0%, rgba(248,251,255,.97) 27%, rgba(248,251,255,.84) 46%, rgba(248,251,255,.08) 72%);
}
:is(#symap-projects, #mfn-hub-v2, #symap-about, #symap-contact-v2, #symap-insights) > section:is(.hero, .contact-hero) > :is(.hero-inner, .symap-hero-content) {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - var(--subpage-hero-gutter)));
  max-width: none;
  margin: 0 auto;
  padding: var(--subpage-hero-padding) 0;
  text-align: left;
  pointer-events: auto;
}
:is(#symap-projects, #mfn-hub-v2, #symap-about, #symap-contact-v2, #symap-insights) > section:is(.hero, .contact-hero) .hero-copy {
  width: 100%;
  max-width: 700px;
}
:is(#symap-projects, #mfn-hub-v2, #symap-about, #symap-contact-v2, #symap-insights) > section:is(.hero, .contact-hero) :is(.eyebrow, .contact-eyebrow) {
  max-width: none;
  margin: 0 0 16px;
  color: #32739d;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
}
:is(#symap-projects, #mfn-hub-v2, #symap-about, #symap-contact-v2, #symap-insights) > section:is(.hero, .contact-hero) :is(h1, .hero-title, .contact-title) {
  max-width: 700px;
  margin: 0;
  color: #102c42;
  font-size: var(--subpage-hero-title);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.035em;
  text-wrap: balance;
}
:is(#symap-projects, #mfn-hub-v2, #symap-about, #symap-contact-v2, #symap-insights) > section:is(.hero, .contact-hero) :is(h1, .hero-title, .contact-title) span {
  color: #266087;
}
:is(#symap-projects, #mfn-hub-v2, #symap-about, #symap-contact-v2, #symap-insights) > section:is(.hero, .contact-hero) :is(.lead, .contact-lead) {
  max-width: 680px;
  margin: 20px 0 0;
  color: #536575;
  font-size: 17px;
  line-height: 1.65;
  opacity: 1;
}
:is(#symap-projects, #mfn-hub-v2, #symap-about, #symap-contact-v2, #symap-insights) > section:is(.hero, .contact-hero) .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0 0;
}
:is(#symap-projects, #mfn-hub-v2, #symap-about, #symap-contact-v2, #symap-insights) > section:is(.hero, .contact-hero) :is(.button, .contact-mobile-action) {
  min-height: 46px;
  padding: 12px 20px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
:is(#symap-projects, #mfn-hub-v2) > section.hero :is(.reassurance, .verified) {
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.65;
}
:is(#symap-projects, #mfn-hub-v2, #symap-about, #symap-contact-v2, #symap-insights) > section:is(.hero, .contact-hero) canvas {
  z-index: 0;
  opacity: 1;
}
@media (max-width: 900px) {
  :is(#symap-projects, #mfn-hub-v2, #symap-about, #symap-contact-v2, #symap-insights) > section:is(.hero, .contact-hero) {
    --subpage-hero-gutter: 48px;
    --subpage-hero-padding: 36px;
    --subpage-hero-title: 38px;
  }
  :is(#symap-projects, #mfn-hub-v2, #symap-about, #symap-contact-v2, #symap-insights) > section:is(.hero, .contact-hero)::after {
    background: linear-gradient(90deg, rgba(248,251,255,.98), rgba(248,251,255,.92) 55%, rgba(248,251,255,.74));
  }
}
@media (max-width: 600px) {
  :is(#symap-projects, #mfn-hub-v2, #symap-about, #symap-contact-v2, #symap-insights) > section:is(.hero, .contact-hero) {
    --subpage-hero-gutter: 40px;
    --subpage-hero-padding: 34px;
    --subpage-hero-title: 34px;
    min-height: 0 !important;
  }
  :is(#symap-projects, #mfn-hub-v2, #symap-about, #symap-contact-v2, #symap-insights) > section:is(.hero, .contact-hero) :is(.lead, .contact-lead) {
    font-size: 16px;
  }
  :is(#symap-projects, #mfn-hub-v2, #symap-about, #symap-contact-v2, #symap-insights) > section:is(.hero, .contact-hero) .actions {
    flex-direction: column;
    align-items: stretch;
  }
  :is(#symap-projects, #mfn-hub-v2, #symap-about, #symap-contact-v2, #symap-insights) > section:is(.hero, .contact-hero) .actions .button {
    width: 100%;
  }
}

/* ===================== SECTION PANELS ===================== */
.symap-section-panel {
  background: var(--color-background);
  border-radius: 20px;
  padding: var(--space-8) var(--space-6) var(--space-12);
  margin: var(--space-8) 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Force section children to be full width (override WordPress constrained) */
.symap-section-panel > section,
.symap-section-panel section {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.symap-section-panel > section > *,
.symap-section-panel section > * {
  max-width: 100% !important;
}

/* Specific fix for services section */
#services,
#services > section,
#services .symap-service-grid {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.symap-section-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0f62fe, #0b3d91);
}

.symap-section-panel.alt {
  background: linear-gradient(135deg, #f8fafc 0%, #eef4ff 100%);
}

.symap-section-panel.highlight {
  background: linear-gradient(135deg, #eef4ff 0%, #dce9ff 100%);
  border: 2px solid #cfe0ff;
}

/* Section Content Alignment */
.symap-section-panel .symap-h2.centered,
.symap-section-panel.centered .symap-h2 {
  text-align: center;
}

.symap-section-panel .symap-muted.centered {
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Tool Section Title */
.symap-tool-title {
  font-size: 1.75rem;
  color: var(--color-text-dark);
  text-align: left;
  margin-bottom: var(--space-4);
}

/* Kicker (Featured Tools label) */
.symap-kicker.large {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-4);
}

/* When kicker large is followed by content (not symap-lead), add more spacing */
.symap-section-panel .symap-kicker.large {
  margin-bottom: var(--space-5);
}

/* Tools section lead text - full width */
#symap-tools .symap-lead {
  max-width: 100%;
  width: 100%;
  text-align: left;
}

/* Force full width for all tools section direct children */
#symap-tools > * {
  max-width: 100% !important;
  width: auto;
}

/* Form Container */
.symap-form-container {
  background: #fff;
  padding: var(--space-6);
  border-radius: var(--radius);
  max-width: 800px;
  margin: 0 auto;
}

/* ===================== PROFILE/FOUNDER ===================== */
.symap-profile {
  display: flex;
  justify-content: center;
  align-items: center;
}

.symap-profile-image {
  margin: 0;
  max-width: 300px;
}

.symap-profile-image img {
  width: 100%;
  height: auto;
  border-radius: 50%;
  display: block;
  border: 4px solid var(--color-primary-light);
}

.symap-profile-name {
  font-size: 1.5rem;
  color: var(--color-primary-darker);
  margin-bottom: var(--space-4);
}

/* ===================== MEDIA CONTAINERS ===================== */
.symap-media {
  border: 1px solid #d9e1ec;
  border-radius: var(--radius);
  padding: 0;
  background: var(--color-background);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(2, 6, 23, 0.04);
}

.symap-media.borderless {
  border: none;
  box-shadow: none;
  background: transparent;
}

.symap-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.symap-media figcaption {
  padding: 0.6rem 1rem;
  color: var(--color-text-light);
}

.symap-media.borderless figcaption {
  padding: 0;
  margin-top: 0.5rem;
}

/* Map Container */
.symap-map {
  height: 450px;
  overflow: hidden;
}

.symap-map iframe {
  border: 0;
  border-radius: var(--radius);
  display: block;
  width: 100%;
  height: 100%;
}

/* Map Full Height Fix */
#contact-info .symap-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: stretch;
}

#contact-info .symap-two-col > div:last-child {
  display: flex;
  flex-direction: column;
}

#contact-info .symap-media {
  flex: 1;
  height: 100% !important;
  min-height: 450px;
}

#contact-info .symap-media iframe {
  width: 100%;
  height: 100% !important;
  min-height: 450px;
}

@media (max-width: 768px) {
  #contact-info .symap-two-col { grid-template-columns: 1fr; }
  #contact-info .symap-media { height: 350px !important; min-height: 350px; }
  #contact-info .symap-media iframe { height: 350px !important; min-height: 350px; }
}

/* ===================== SLIDESHOW ===================== */
.symap-slideshow {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 6;   /* 4:3 ratio */
  overflow: hidden;
  margin-top: var(--space-6);
  background: #f8fafc;
  border-radius: var(--radius);
}

.symap-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.symap-slide.active {
  opacity: 1;
  z-index: 2;
}
.symap-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* fills container */
  object-position: top center; /* align to top */
  display: block;
  border-radius: var(--radius);
}