/* Digital twins en industriële AI (/nl/digital-twins-industriele-ai/) — procesindustrie landing */

section {
  margin-bottom: 0;
}

/* ===== Hero intro link ===== */
.nl-hero__intro a {
  color: var(--color-brand-teal-300);
  text-decoration: none;
  transition: color 0.3s ease;
}

.nl-hero__intro a:hover,
.nl-hero__intro a:focus-visible {
  color: var(--color-brand-teal);
}

/* In #waarom vallen de kolommen samen met de kaartgrid van #wat-we-bouwen eronder: twee even
   brede kolommen met dezelfde tussenruimte. Het blok zelf doet 1fr 1.5fr met een gat van
   spacing-80, waardoor de kolomranden niet op die van de volgende sectie zouden vallen.
   Alleen boven het breekpunt van het blok, anders zou de id-specificiteit de stapelweergave
   op mobiel overschrijven. */
@media (min-width: 981px) {
  #waarom .section-narrative-split__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-16);
  }
}

/* De callout in #waarom staat standaard op --secondary-bg, dezelfde kleur als de sectie nu
   heeft. Op deze pagina dus wit, zodat het blok weer als kader leest. */
#waarom .section-narrative-split__callout {
  background: #fff;
}

/* De intro in #waarom bestaat uit twee alinea's; de blokstijl zet margin op 0, dus het
   onderlinge gat zetten we hier. Beide alinea's blijven binnen 550px, zodat de regel lengte
   leesbaar blijft nu de kolommen even breed zijn. */
#waarom .section-narrative-split__intro {
  max-width: 550px;
}

#waarom .section-narrative-split__intro + .section-narrative-split__intro {
  margin-top: var(--spacing-16);
}

/* Deze drie secties dragen de secundaire achtergrond, net als de blokken op de andere
   NL-pagina's. Ze staan niet naast elkaar: #wat-we-bouwen, #sectoren, #referenties en #faq
   ertussen dragen hun eigen vlak (wit of navy), zodat de pagina in banden leest. */
#waarom,
#integratie,
#aanpak {
  background: var(--secondary-bg);
}

/* Het bf-expertise-blok zet alleen padding-bottom, geen padding-top; zonder deze regel raakt
   de donkere kaart de bovenrand van de sectie. Zelfde maat als de ih-section eromheen. */
#integratie {
  padding-top: var(--spacing-80);
}

/* De CTA onder de kaart in #integratie: gecentreerd en met dezelfde tussenruimte als de
   inline CTA's op de zusterpagina's. _buttons.css levert alleen de knop zelf. */
#integratie .bf-expertise__cta {
  margin-top: var(--spacing-40);
  display: flex;
  justify-content: center;
}

/* #wat-we-bouwen krijgt in _ih-blocks.css maar 24px bovenruimte. Op deze pagina staat er een
   grijze band boven, dus dezelfde maat als de andere secties. */
#wat-we-bouwen {
  padding-top: var(--spacing-80);
}

/* De referentiesectie zet de cases in vier kolommen waar het basisbestand er drie doet.
   De tussenmaten blijven gelijk aan _ih-blocks.css, zodat tablet en mobiel
   hetzelfde gedrag houden als op de zusterpagina's. */
@media (min-width: 1200px) {
  #referenties .ih-cases__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* #sectoren en #referenties dragen sinds de jongste revisie elkaars oppervlak: de donkere
   band staat boven, de witte eronder, en alleen de inhoud is van plaats gewisseld. De kaarten
   wisselen mee, elk naar de kaartstijl die het huis voor die ondergrond gebruikt: de
   redenenlijst krijgt de donkere kaart van .ki-dark-section op de zusterpagina's
   (halftransparant wit, witte kop, lichte tekst), de casekaarten de lichte kaart van
   .section-challenges--grid op deze pagina zelf (secundaire achtergrond, donkere tekst).
   Zonder die omkering houdt elke kaart het vlak van de band waar hij vandaan komt: licht op
   donker en omgekeerd, wat als contrast blokken op de pagina komt te liggen. */
#sectoren .ls-reasons__item {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

#sectoren .ls-reasons__title {
  color: var(--white-text);
}

#sectoren .ls-reasons__desc {
  color: rgba(255, 255, 255, 0.8);
}

#sectoren .ls-reasons__desc a {
  color: var(--color-brand-teal-300);
}

#sectoren .ls-reasons__desc a:hover,
#sectoren .ls-reasons__desc a:focus-visible {
  color: var(--color-brand-teal);
}

/* Closing link of a card on its own line, as in the sector cards on the sister
   NL pages (e.g. /nl/industrie-en-havens/). */
#sectoren .ls-reasons__desc + .ls-reasons__desc {
  margin-top: var(--spacing-16);
}

#referenties .ih-cases__item {
  background: var(--secondary-bg);
  border-color: transparent;
}

#referenties .ih-cases__item h3 {
  color: var(--primary-text);
}

#referenties .ih-cases__item p {
  color: var(--secondary-text);
}