/* =====================================================================
   assets/css/hero-eco.css
   Ecosysteem-animatie in de homepage-hero (vervangt de groeilijn).
   Alleen aanvullingen: style.css blijft ongewijzigd.
   ===================================================================== */

/* Groeilijn-canvas staat nog in de HTML, maar wordt nooit getoond */
#growthCanvas[hidden],
#heroCanvas[hidden] { display: none !important; }

/* Hero: tekst links, ecosysteem rechts */
@media (min-width: 1025px) {
  .hero .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
  }
}

.hero .hero-visual.has-eco {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: auto;
  background: none;
}

.hero .hero-visual.has-eco .eco-stage {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

/* Tablet en mobiel: ecosysteem onder de tekst, iets kleiner */
@media (max-width: 1024px) {
  .hero .hero-visual.has-eco { margin-top: 40px; }
  .hero .hero-visual.has-eco .eco-stage { max-width: 480px; }
}
@media (max-width: 560px) {
  .hero .hero-visual.has-eco { margin-top: 28px; }
  .hero .hero-visual.has-eco .eco-stage { max-width: 360px; }
}

/* "Why Virtual Adventures": alleen nog de tekst, links uitgelijnd */
.about .eco-inner.is-solo { display: block; }
.about .eco-inner.is-solo .eco-copy { max-width: 760px; }

/* ---------------------------------------------------------------------
   Groeilijn "The digital age": brede band onderaan, boven het contactblok
   --------------------------------------------------------------------- */
.growth-band { padding: clamp(24px, 4vw, 48px) 0; }
.growth-band .growth-wrap {
  position: relative;
  width: 100%;
  height: clamp(260px, 34vw, 440px);
  overflow: hidden;
}
.growth-band #growthCanvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.growth-band .growth-meta {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
}
@media (max-width: 560px) {
  .growth-band .growth-wrap { height: 240px; }
}