.sq-two-column-section__layout {
  --bs-gutter-y: 6.4rem;
}

.sq-two-column-section__left,
.sq-two-column-section__right {
  display: flex;
  flex-direction: column;
}

.sq-align-center {
  justify-content: center;
}

.sq-align-bottom {
  justify-content: flex-end;
}

/* Het uitlijnveld verplaatst alleen de inhoud ónder de titel; die blijft bovenaan.
   justify-content op de kolom kan dat niet — de kolom heeft één flexchild — dus
   verdeelt het contentblok de vrije ruimte zelf met auto-marges. Zonder titel
   ontbreekt --has-title en blijft de kolom-justify-content leidend. */
.sq-two-column-section__left.sq-align-center > .sq-two-column-section__left-content--has-title,
.sq-two-column-section__left.sq-align-bottom > .sq-two-column-section__left-content--has-title {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* De vrije ruimte gaat naar het eerste element ná de titel; is er niets te
   verdelen, dan wordt auto 0 en blijft de normale titelafstand staan. */
.sq-two-column-section__left.sq-align-center > .sq-two-column-section__left-content--has-title > .sq-two-column-section__title-reveal + *,
.sq-two-column-section__left.sq-align-bottom > .sq-two-column-section__left-content--has-title > .sq-two-column-section__title-reveal + * {
  margin-top: auto;
}

/* center verdeelt de resterende ruimte gelijk boven en onder de inhoud onder de titel. */
.sq-two-column-section__left.sq-align-center > .sq-two-column-section__left-content--has-title > :last-child {
  margin-bottom: auto;
}

.sq-two-column-section__title {
  color: var(--text-color--accent);
}

/* Opent dit blok de pagina, dan is de titel een h1 maar verandert de opmaak niet.
   De globale h1-regel in style.css zet een eigen margin-bottom; deze regel houdt
   hem gelijk aan de h2-variant. */
h1.sq-two-column-section__title {
  margin-bottom: 1rem;
}

.sq-two-column-section__title-reveal {
  overflow: hidden;
}

.sq-two-column-section__text,
.sq-two-column-section__right .sq-rich-text {
  color: var(--text-color--support);
}

/* Geneste image-blok in een kolom: het origineel geeft de figure een afronding en
   een max-width van column-width(5)/(3), die het kale <figure class="sq-media"> uit
   de helper zelf niet meebrengt. Gescoped op .sq-block--two-column, want
   fixed_title_section gebruikt hetzelfde geneste blok. */
.sq-block--two-column .sq-nested-block--image .sq-media {
  border-radius: 1.6rem;
  overflow: hidden;
}

@media only screen and (min-width: 1000px) {
  /* column-width(5) uit de bron: contentbreedte * 5/12 - gutter * 7/12. */
  .sq-block--two-column .sq-nested-block--image .sq-media {
    max-width: calc((100vw - var(--gutter) * 2) * 5 / 12 - var(--gutter) * 7 / 12);
  }
}

@media only screen and (min-width: 1400px) {
  /* column-width(3): contentbreedte * 3/12 - gutter * 9/12. */
  .sq-block--two-column .sq-nested-block--image .sq-media {
    max-width: calc((100vw - var(--gutter) * 2) * 3 / 12 - var(--gutter) * 9 / 12);
  }
}

/* Bootstraps col-lg-* schakelt op 992px, de Sqills-md op 1000px; deze regel houdt
   de kolommen gestapeld tot de overige desktopregels hieronder meedoen. */
@media only screen and (max-width: 999px) {
  .sq-two-column-section__left,
  .sq-two-column-section__right {
    width: 100%;
  }
}

@media only screen and (min-width: 1000px) {
  /* Origineel two-column-section .section: padding valt op md volledig weg; de
     verticale ruimte komt van .leftContainer/.rightContainer (var(--header-height)). */
  .sq-block--two-column {
    min-height: var(--window-height);
    padding: 0;
  }

  /* Origineel .container: volle sectiehoogte met een gutter ertussen. Neutraliseert
     de negatieve marges van Bootstraps .row en de zijpadding van .col-. */
  .sq-two-column-section__layout {
    min-height: var(--window-height);
    align-items: stretch;
    gap: var(--gutter);
    margin: 0;
  }

  /* Origineel column-width(6), oftewel (contentbreedte - gutter) / 2. */
  .sq-two-column-section__layout > .sq-two-column-section__left,
  .sq-two-column-section__layout > .sq-two-column-section__right {
    width: calc((100% - var(--gutter)) / 2);
    padding: var(--header-height) 0;
    /* --bs-gutter-y verzorgt de stapelruimte op mobiel; naast elkaar duwt hij
       de kolommen alleen omlaag. */
    margin-top: 0;
  }

  /* right_column_width = third: het origineel versmalt alleen de rechterkolom naar
     column-width(4) en laat de linker op column-width(6) staan. */
  .sq-two-column--right-third .sq-two-column-section__layout > .sq-two-column-section__right {
    width: calc((100% - var(--gutter) * 2) / 3);
  }

  /* Bij `third` blijft er ruimte over die tússen de kolommen hoort te vallen, zodat
     de rechterkolom op de paginamarge eindigt. Bij half/half is dit een no-op. */
  .sq-two-column--right-third .sq-two-column-section__layout {
    justify-content: space-between;
  }

  /* space-between is de standaard uit het origineel, maar het uitlijnveld
     (sq-align-center / sq-align-bottom) moet er wel overheen kunnen. */
  .sq-two-column-section__layout > .sq-two-column-section__left:not(.sq-align-center):not(.sq-align-bottom),
  .sq-two-column-section__layout > .sq-two-column-section__right:not(.sq-align-center):not(.sq-align-bottom) {
    justify-content: space-between;
  }

  /* De overflow-right variant heeft een harde hoogte nodig in plaats van min-height,
     anders groeit de rij mee met de rechterkolom en valt er niets te scrollen. Die
     hoogte hoort bij de horizontale scrollrichting — daar hangt in het origineel ook
     de wheel-overname aan — en is daarom als enige regelgroep hier gescoped;
     `:where()` houdt de specificiteit gelijk aan wat eromheen staat. */
  :where(body.scroll_horizontal) .sq-block--two-column.sq-two-column--overflow-right {
    height: var(--window-height);
  }

  :where(body.scroll_horizontal) .sq-block--two-column.sq-two-column--overflow-right .sq-two-column-section__container {
    height: 100%;
  }

  :where(body.scroll_horizontal) .sq-block--two-column.sq-two-column--overflow-right .sq-two-column-section__layout {
    height: calc(var(--window-height) - 19.2rem);
    /* Bootstraps .row zet flex-wrap: wrap, en dan rekt stretch de kolommen tot de
       inhoud in plaats van tot de hoogte hierboven — dan klipt niets af. */
    flex-wrap: nowrap;
  }

  :where(body.scroll_horizontal) .sq-block--two-column.sq-two-column--overflow-right .sq-two-column-section__right {
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  :where(body.scroll_horizontal) .sq-block--two-column.sq-two-column--overflow-right .sq-two-column-section__right-content {
    height: 100%;
    position: relative;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: var(--header-height) 0;
  }

  :where(body.scroll_horizontal) .sq-block--two-column.sq-two-column--overflow-right .sq-two-column-section__right-content::-webkit-scrollbar {
    display: none;
  }
}

/* Verticale pagina: meelopende titel. Het origineel zet de titel in een eigen
   <header> met `position: sticky; top: 40px`, alleen op desktop. Sticky werkt hier
   uitsluitend omdat .sq-theme-section op `overflow-x: clip` staat en niet op hidden:
   clip maakt geen scrollcontainer, hidden wel. */
@media only screen and (min-width: 1000px) {
  /* .left-content is precies zo hoog als de titel zelf en geeft de sticky doos dan
     geen ruimte om in te schuiven; flex-grow laat hem de kolom vullen. */
  :where(body.scroll_vertical) .sq-two-column-section__left > .sq-two-column-section__left-content {
    flex-grow: 1;
  }

  :where(body.scroll_vertical) .sq-two-column-section__title-reveal {
    position: sticky;
    top: 4rem;
  }
}