/* ==========================================================================
   Next Wave Systems — interactieve hero met robotarm (native core-blokken)
   Hero = core/cover .nw-hero-row (achtergrond-foto/video door de klant editbaar
   in de editor; copy + core/buttons .nw-aim erin). Het thema-script injecteert de
   robotarm-overlay bovenop de Cover-achtergrond. Werelden = core/columns .nw-worlds met 3
   core/column .nw-world. Mapping: Consultancy = terracotta, Research = groen,
   Technologies = blauw. Desktop-styling onder @media (min-width:761px); mobiel
   houdt een eenvoudige fallback.
   ========================================================================== */

.nw-hero-row, .nw-hero-row *, .nw-worlds, .nw-worlds *{ box-sizing:border-box; }

/* ---- Hero-rij (door de arm gehydrateerd) ---- */
.nw-hero-row{
  position:relative; isolation:isolate; overflow:hidden;
  /* Fallback-hoogte; de hoogte is door de klant editbaar via het Cover-blok
     (Afmetingen → Minimale hoogte). De inline min-height van het blok wint hiervan. */
  min-height:min(48vh,520px);
  color:#fff;
  background-color:#0b0d12;
  background-image:
    radial-gradient(60% 80% at 22% 28%, rgba(62,142,90,.85), transparent 60%),
    radial-gradient(55% 70% at 78% 30%, rgba(45,108,180,.85), transparent 62%),
    radial-gradient(70% 80% at 60% 92%, rgba(181,84,63,.8), transparent 60%),
    radial-gradient(40% 50% at 38% 70%, rgba(228,196,72,.5), transparent 60%);
  font-family:"Space Grotesk",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
}
.nw-hero-row > .wp-block-group__inner-container,
.nw-hero-row > .wp-block-cover__inner-container{ position:relative; z-index:3; }

/* Hero = core Cover-blok: laat het zich als blok gedragen (niet flex-centreren),
   zodat de bestaande padding/positionering klopt, en houd de Cover-achtergrond
   (overlay/foto/video) onder de robotarm-overlay (z-index 1). */
.nw-hero-row.wp-block-cover{ display:block; padding:0; margin-bottom:0; }

/* Werelden-kolommen strak tegen de hero: geen tussenruimte (block-gap weg). */
.nw-hero-row + .nw-worlds{ margin-top:0; }
.nw-hero-row > .wp-block-cover__background,
.nw-hero-row > img.wp-block-cover__image-background,
.nw-hero-row > video.wp-block-cover__video-background{ z-index:0; }

/* ---- Arm-overlay (geïnjecteerd) ---- */
.nw-arm-overlay{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.nw-arm{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

/* ---- Hero-copy ---- */
.nw-hero-row .nw-eyebrow{ margin:0 auto 14px 0; max-width:620px; font-size:12.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.78); }
.nw-hero-row .nw-headline{ margin:0 auto 0 0; max-width:640px; font-family:"Space Grotesk",Georgia,serif; font-weight:700; font-size:clamp(30px,4.6vw,58px); line-height:1.02; letter-spacing:-.015em; color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.45); }
.nw-hero-row .nw-headline em{ font-style:italic; font-weight:400; opacity:.92; }
.nw-hero-row .nw-sub{ margin:18px auto 0 0; max-width:46ch; font-size:clamp(14px,1.4vw,17px); line-height:1.5; color:rgba(255,255,255,.82); text-shadow:0 1px 12px rgba(0,0,0,.5); }

/* ---- Werelden-kleuren (gedeeld door hero-markers en kaarten) ---- */
.nw-aim-consultancy, .nw-world-consultancy{ --a:#B5543F; --lab:#E69B86; --b:#E3C3B7; --bg:#F7ECE7; }
.nw-aim-research,     .nw-world-research{     --a:#3E8E5A; --lab:#76C593; --b:#BBD9C3; --bg:#EAF3EC; }
.nw-aim-technologies, .nw-world-technologies{ --a:#2D6CB4; --lab:#74A8E6; --b:#B7CDE6; --bg:#EAF1F9; }

/* ===========================  DESKTOP  =================================== */
@media (min-width:761px){
  .nw-hero-row{ padding:0; }
  .nw-hero-row > .wp-block-group__inner-container,
  .nw-hero-row > .wp-block-cover__inner-container{
    max-width:1240px; margin-inline:auto;
    padding:clamp(18px,3vh,32px) clamp(24px,5vw,64px) 44px;
  }

  /* ---- HERO COMPACTER: hoogte zit in de inhoud (min-height helpt niet zolang
     de content hoger is), dus hier het verticale ritme strak houden. ---- */
  /* Lege placeholder-blokken (lege eyebrow/paragraaf/quote) niet laten meetellen */
  .nw-hero-row .wp-block-cover__inner-container > p:empty,
  .nw-hero-row .wp-block-cover__inner-container > blockquote:empty,
  .nw-hero-row .nw-eyebrow:empty{ margin:0 !important; min-height:0; }
  /* NV-logo compacter */
  .nw-hero-row figure.wp-block-image{ margin:0 0 16px; }
  .nw-hero-row figure.wp-block-image img{ max-height:80px; width:auto; }
  /* Subtekst dichter onder de kop */
  .nw-hero-row .nw-sub{ margin-top:12px; }

  /* Markers tegen de onderrand, uitgelijnd bóven de 3 kolommen */
  .nw-hero-row .nw-aim-row{
    position:absolute; left:0; right:0; bottom:0; margin:0; width:100%;
    display:grid; grid-template-columns:repeat(3,1fr); gap:0; z-index:4;
    background:linear-gradient(0deg, rgba(8,10,14,.62), rgba(8,10,14,0));
  }
  .nw-hero-row .nw-aim{ margin:0; }
  .nw-hero-row .nw-aim .wp-block-button__link{
    display:flex; align-items:center; justify-content:center; gap:9px;
    width:100%; padding:14px 10px; border:0 !important; border-radius:0 !important;
    background:transparent !important; box-shadow:none !important;
    color:var(--lab) !important; font-weight:600; font-size:14px; letter-spacing:.02em;
    text-shadow:0 1px 6px rgba(0,0,0,.55); transition:color .25s ease;
  }
  .nw-hero-row .nw-aim .wp-block-button__link::before{
    content:""; width:9px; height:9px; border-radius:50%;
    background:var(--a); transition:box-shadow .25s ease;
  }
  .nw-hero-row .nw-aim.is-active .wp-block-button__link{ color:#fff !important; }
  .nw-hero-row .nw-aim.is-active .wp-block-button__link::before{
    box-shadow:0 0 0 4px color-mix(in srgb, var(--a) 35%, transparent);
  }

  /* Werelden strak tegen de hero: geen rij-wash, geen rij-radius, geen marge */
  .nw-worlds{ margin:0 auto; padding:0; background:none; border-radius:0;
    max-width:1240px; gap:14px; align-items:stretch; }
  .nw-world{ padding:22px 22px 24px; border:1px solid var(--b); background:var(--bg);
    border-radius:0 0 10px 10px; color:#3a424c;
    /* kolom als verticale flexbox zodat de knop onderaan gepind kan worden */
    display:flex; flex-direction:column; }
  /* duw de knoppen-wrapper naar de bodem → knoppen lijnen horizontaal op 1 hoogte uit */
  .nw-world .nw-world-btn{ margin-top:auto; margin-bottom:0; }
  .nw-world::before{ content:""; display:block; height:4px; width:46px; border-radius:2px;
    background:var(--a); margin-bottom:14px; transition:width .3s ease; }
  .nw-world.is-active{ box-shadow:0 14px 26px rgba(20,30,45,.14); }
  .nw-world.is-active::before{ width:100%; }
  .nw-world .nw-world-title{ margin:0 0 8px; font-size:22px; color:var(--a); }
  .nw-world p{ margin:0 0 16px; font-size:14px; line-height:1.5; color:#3a424c; }
  .nw-world .wp-block-button__link{ background:var(--a) !important; color:#fff !important;
    border-radius:7px; padding:9px 16px; font-size:13px; font-weight:600; }
  .nw-world figure.wp-block-image{ margin:0 0 14px; }
  .nw-world figure.wp-block-image img:not([src]){ display:none; }
}

/* ===========================  VOORPAGINA-SPACING  ====================== */
/* Hero strak onder het hoofdmenu: de boxed-content ruimte bóven de hero weg,
   en geen tussenruimte tussen de hero en de werelden-kolommen eronder. */
body.home .entry-content-wrap{ padding-top:0; }
body.home .content-container{ padding-top:0; }
body.home .entry-content > .nw-hero-row:first-child{ margin-top:0; }
body.home .entry-content > .nw-hero-row{ margin-bottom:0 !important; }
body.home .nw-hero-row + .nw-worlds{ margin-top:0 !important; }

/* ===========================  MOBIEL (fallback)  ======================== */
@media (max-width:760px){
  .nw-hero-row{ min-height:min(64vh,520px); padding:28px 20px; }
  .nw-hero-row .nw-aim-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
  .nw-worlds{ gap:12px; }
}