/* Eigen aanvullingen op de Webflow-stylesheet (na de migratie). Klein houden en per regel uitleggen. */

/* Home: YouTube-video boven de grote afbeelding, met witruimte (Geert, 16-10-2026) */
.home-video {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
@media (max-width: 767px) {
  .home-video {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
}

/* Artikelpagina: foto niet breder dan de tekstkolom (Geert, 16-10-2026: "veel te groot").
   Op desktop gelijk aan de tekstkolom (74,6% van de container = breedte van de tekstkolom, 16:9); op tablet/mobiel volle breedte. */
@media (min-width: 992px) {
  .article-image-wrapper > img.image {
    width: 74.6%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    /* Zonder clip tekent Chrome het bijgesneden deel buiten de box, over titel en datum heen
       (het img-element erft hier overflow: visible). Gevonden 16-10-2026. */
    overflow: clip;
    /* links uitlijnen met de tekstkolom; op brede schermen stond de foto anders gecentreerd */
    align-self: flex-start;
  }
}

/* BL-6: op heel smalle schermen (< 360 px, of 400% zoom) paste "Electrolysers" in de homekop niet
   (18 px horizontale overloop bij 320 px). Iets kleinere kop; boven 360 px niets veranderd. */
@media (max-width: 359px) {
  .hero_heading {
    font-size: 3.2rem;
  }
}

/* Vacaturetekst: vaste spacing via CSS in plaats van lege alinea's (Geert, 19-10-2026).
   Eén vaste ruimte tussen blokken (= 1 regel, 1.3em); niets extra's per lijstpunt.
   - titel (dikgedrukte alinea) staat direct boven zijn tekst
   - inleidende zin direct boven een lijst ("Your main responsibilities are:") staat direct boven die lijst
   - lijstpunten staan dicht bij elkaar (de algemene Webflow-regel `li` met 16/8 px padding geldt hier niet)
   Voor nieuwe vacatures: géén lege alinea's meer gebruiken; de ruimte komt hier vandaan. */
.rich-text-vacancy > p,
.rich-text-vacancy > ul {
  margin: 0 0 1.3em;
}
.rich-text-vacancy > p:has(> strong:only-child),
.rich-text-vacancy > p:has(+ ul) {
  margin-bottom: 0;
}
.rich-text-vacancy li {
  padding: 0 0 0.4em;
}
.rich-text-vacancy li:last-child {
  padding-bottom: 0;
}
/* Lettergrootte van de vacaturetekst: 14 pt, regelhoogte 1,3 (Geert, 20-10-2026; gelijk aan het Word-template).
   Een afwijkende grootte voor één vacature kan met `text_size` in de front matter (bv. `text_size: 15pt`); dat zet --vac-size via career.html. */
.rich-text-vacancy > p,
.rich-text-vacancy > ul,
.rich-text-vacancy li {
  font-size: var(--vac-size, 14pt);
  line-height: 1.3;
}
/* Projectblok met video (500kW Demonstrator): de video blijft ook op mobiel zichtbaar (de Webflow-regel verbergt .wide-img daar, omdat die daar een aparte mobiele afbeelding heeft). */
.hero-img-wrapper > video.wide-img {
  display: block;
}

/* Projectblok 500kW Demonstrator: zelfde plaatsing op desktop als de andere projecten (Webflow doet dat per blok met vaste node-id's):
   titel links (5 kolommen), toelichting rechts (kolom 6-12). Op tablet/mobiel is hero_grid een kolom en geldt de volgorde in de HTML. */
@media (min-width: 992px) {
  .hero_grid > .project-text {
    grid-area: 1 / 6 / 2 / 13;
  }
  .hero_grid > .project-title {
    grid-area: span 1 / span 5 / span 1 / span 5;
  }
}

/* Artikelkaarten (home en /news): afwisselend mintgroen (beeld links) en grijs (beeld rechts), op volgorde van de lijst (build.mjs: card_odd).
   Op tablet/mobiel staat het beeld in alle kaarten bovenaan (zoals in de Webflow-site, die dat per kaart met vaste node-id's deed). */
@media (max-width: 991px) {
  .article-card-wrapper > .card-img-wrapper {
    order: -9999;
  }
}

/* Artikeltekst: één opmaak voor alle nieuwsartikelen en publicaties (Geert, 20-10-2026; basis: artikel "Alquion takes final investment decision").
   Zelfde lettergrootte als de vacatures: 14 pt, regelhoogte 1,3. Vaste ruimte van 1 regel tussen blokken via CSS, dus geen lege alinea's in de tekst.
   - tussenkop (h2): dikgedrukt, zelfde grootte als de tekst, direct boven zijn tekst
   - kop van een bedrijf/contact onderaan (h3): groot, zoals in het basisartikel
   - citaat (alinea met class="quote") staat direct boven de dikgedrukte naam van de spreker
   - lijsten: compacte punten zoals bij de vacatures */
.rich-text-article-content.w-richtext > p,
.rich-text-article-content.w-richtext > ul,
.rich-text-article-content.w-richtext > ol,
.rich-text-article-content.w-richtext > h2,
.rich-text-article-content.w-richtext li {
  font-size: 14pt;
  line-height: 1.3;
}
.rich-text-article-content.w-richtext > p,
.rich-text-article-content.w-richtext > ul,
.rich-text-article-content.w-richtext > ol {
  margin: 0 0 1.3em;
}
.rich-text-article-content.w-richtext > h2 {
  margin: 0;
  font-weight: 700;
}
.rich-text-article-content.w-richtext > h3 {
  margin: 0 0 0.8em;
}
.rich-text-article-content.w-richtext > p.quote {
  margin-bottom: 0;
}
.rich-text-article-content.w-richtext li {
  padding: 0 0 0.4em;
}
.rich-text-article-content.w-richtext li:last-child {
  padding-bottom: 0;
}
/* Whitepaper-downloadknop: direct onder de foto en het bijschrift (Geert, 20-10-2026), in de stijl van de site (donkergroen, afgeronde pil). */
.article-image-wrapper > .button-2,
.rich-text-article-content .button-2 {
  float: none;
  display: inline-block;
  align-self: flex-start;
  padding: 0.9rem 1.75rem;
  border-radius: 9999px;
  background-color: #103a3b;
  color: #b9f4eb;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
.article-image-wrapper > .button-2 {
  margin-top: -2.5rem;
}
.article-image-wrapper > .button-2:hover,
.rich-text-article-content .button-2:hover {
  background-color: #0c2526;
}