/* 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);
}

/* ===== P&ID LLM Agent: één op één overgenomen van /nl/industrie-en-havens/
   pid-digitalisering-cv-ocr/, waar hetzelfde blok staat. Daar leven deze regels in het
   paginabestand van die pagina, dus de maten, het artwork en het accordeoncontrast
   komen hier ongewijzigd mee. De accordeon zelf zit in _accordion.css. ===== */
#agent {
  position: relative;
  isolation: isolate;
  padding: var(--spacing-80) 0;
  background: var(--color-brand-navy);
  color: var(--white-text);
}

#agent::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/about-bg.7be2890657ad.svg");
  background-repeat: no-repeat;
  background-size: auto;
  background-position: 0 100%;
  z-index: -1;
  pointer-events: none;
}

#agent .pd-agent__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-16);
  align-items: start;
}

#agent .pd-agent__left {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  padding-right: calc(var(--spacing-80) - var(--spacing-16));
}

#agent .ih-heading {
  color: var(--white-text);
  margin: 0;
  text-align: left;
  max-width: 480px;
}

#agent .ih-heading span {
  color: var(--accent-orange);
}

#agent .pd-agent__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);
}

#agent .pd-agent__lead {
  max-width: none;
  margin: 0;
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  text-align: left;
}

#agent .accordion {
  max-width: none;
  margin: 0;
  display: grid;
  gap: 0;
  background: #0D1326;
  border: 1px solid rgba(7, 145, 143, 0.2);
  border-radius: 16px;
  overflow: hidden;
}

#agent .accordion__item {
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #222222;
}

#agent .accordion__item:last-child {
  border-bottom: none;
}

#agent .accordion__item summary {
  color: var(--white-text);
  background: transparent;
  padding: var(--spacing-24);
  padding-right: 64px;
  font-size: clamp(17px, 1.05vw, 20px);
  font-weight: var(--font-weight-600);
}

#agent .accordion__item[open] summary {
  background: #1F2330;
}

#agent .accordion__item summary::after {
  content: "+";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  font-weight: var(--font-weight-500);
  color: var(--color-brand-teal);
  background: #242425;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

#agent .accordion__item[open] summary::after {
  content: "\2212";
  color: var(--white-text);
  background: var(--color-brand-teal);
}

#agent .accordion__item-content {
  padding: 0 var(--spacing-24);
}

#agent .accordion__item[open] .accordion__item-content {
  padding: 0 var(--spacing-24) var(--spacing-24);
  background: #1F2330;
}

#agent .accordion__item-content p {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  font-size: clamp(14px, 2vw, 16px);
}

#agent .accordion__item a {
  color: var(--color-brand-teal);
}

/* ===== Demo-video en de groene CTA eronder ===== */
.pd-video {
  padding: var(--spacing-80) 0 0;
  background: #f7f8fa;
}

.pd-video__frame {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid #e2e4eb;
  overflow: hidden;
}

.pd-video__iframe {
  position: absolute;
  top: -2px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  border: 0;
}

/* De alinea onder de video hoort bij de kop erboven; dezelfde maat als de lead op de
   zusterpagina, maar op een lichte band en daarom in de secundaire tekstkleur. */
.pd-video__note {
  max-width: 820px;
  margin: var(--spacing-40) auto 0;
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.65;
  color: var(--secondary-text);
  text-align: center;
}

.pd-video__note a {
  color: var(--color-brand-teal);
  text-decoration: none;
  font-weight: var(--font-weight-600);
  transition: color 0.3s ease;
}

.pd-video__note a:hover,
.pd-video__note a:focus-visible {
  color: var(--color-brand-teal-300);
}

.pd-video__cta {
  margin: var(--spacing-40) calc(50% - 50vw) 0;
  padding: var(--spacing-80) var(--spacing-32);
  background-color: var(--color-brand-teal);
  background-image: url("../img/arr-bg.8c455f277e05.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  text-align: center;
}

.pd-video__cta h3 {
  margin: 0 0 var(--spacing-16);
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.3;
  font-weight: var(--font-weight-700);
  color: var(--white-text);
}

.pd-video__cta p {
  margin: 0 0 var(--spacing-40);
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.92);
}

/* Deze twee moeten na de regels hierboven staan: een media query voegt geen
   specificiteit toe, dus anders winnen de desktopdeclaraties van gelijk gewicht. */
@media (max-width: 1024px) {
  #agent .pd-agent__layout {
    grid-template-columns: 1fr;
  }

  #agent .pd-agent__left {
    padding-right: 0;
  }

  #agent .pd-agent__lead {
    max-width: 820px;
  }
}

@media (max-width: 640px) {
  #agent .pd-agent__lead,
  .pd-video__note,
  .pd-video__cta {
    text-align: left;
  }

  /* De telefoon is smaller dan het artwork, dus het schuift naar de rechterrand
     in plaats van onder de volle breedte van de tekst te lopen. */
  #agent::before {
    background-position: 30% 100%;
  }
}