/* ------------------------- Scaling system -------------------------------------------------- */
/* ------------------------- 01. SCALING SYSTEM -------------------------------------------------- */
/* Desktop */
:root {
  --size-unit: 16;
  /* body font-size in design - no px */
  --size-container-ideal: 1920;
  /* screen-size in design - no px */
  --size-container-min: 992px;
  --size-container-max: 2560px;
  --size-container: clamp(var(--size-container-min), 100dvw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));

  /* Container schaal-factoren */
  --container-medium-scale: 0.85;
  --container-small-scale: 0.7;

  --vh: 1vh;
  /* fallback before JS runs */
  --full-screen-height: 100dvh;
  --over-screen-height: 150dvh;
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 991;
    /* screen-size in design - no px */
    --size-container-min: 768px;
    --size-container-max: 991px;
    --full-screen-height: calc(var(--vh) * 100);

    --container-medium-scale: 0.9;
    --container-small-scale: 0.8;
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 767;
    /* screen-size in design - no px */
    --size-container-min: 480px;
    --size-container-max: 767px;

    --container-medium-scale: 1;
    --container-small-scale: 1;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 479;
    /* screen-size in design - no px */
    --size-container-min: 320px;
    --size-container-max: 479px;

    --container-medium-scale: 1;
    --container-small-scale: 1;
  }
}

body {
  font-size: var(--size-font);
}

.section-bg-wrap {
  position: relative;
  max-width: 2560px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  /* clipt de absolute bg */
}

.container {
  max-width: var(--size-container);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.container.medium {
  max-width: calc(var(--size-container) * var(--container-medium-scale));
}

.container.small {
  max-width: calc(var(--size-container) * var(--container-small-scale));
}

/* ------------------------- Transitions -------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a,
li,
ul,
ol {
  transition-property: background, font-size;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(.77, 0, .18, 1);
}

img {
  transition-property: box-shadow, background, filter;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(.77, 0, .18, 1);
}

/* ------------------------- Lenis: CSS -------------------------------------------------- */

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* ------------------------- Remove empty CMS items -------------------------------------------------- */

[data-cms-section]:not(:has(.w-dyn-item)) {
  display: none;
}

/* ------------------------- Cursor selection -------------------------------------------------- */
::selection {
  background: var(--_theme---cursor-select-bg);
  color: var(--_theme---cursor-select-text);
}

::-moz-selection {
  /* Code for Firefox */
  background: var(--_theme---cursor-select-bg);
  color: var(--_theme---cursor-select-text);
}

/* ------------------------- Hide -------------------------------------------------- */

.hide {
  display: none !important;
}

@media screen and (min-width: 992px) {

  .hide,
  .hide-desktop {
    display: none !important;
  }
}

@media screen and (min-width: 480px) {

  .hide,
  .hide-desktop-tablet {
    display: none !important;
  }
}

@media screen and (max-width: 991px) {

  .hide,
  .hide-tablet-mobile {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .hide-mobile-landscape {
    display: none !important;
  }
}

@media screen and (max-width: 479px) {
  .hide-mobile {
    display: none !important;
  }
}

/* ------------------------- Tab accessibility -------------------------------------------------- */
*[tabindex]:focus-visible,
input[type="file"]:focus-visible {
  outline: 0.125rem solid var(--color-mode-default--focus-state);
  outline-offset: 0.125rem;
}

/* ------------------------- Rich text reset -------------------------------------------------- */

/* Get rid of top margin on first element in any rich text element */
.w-richtext> :not(div):first-child,
.w-richtext>div:first-child> :first-child {
  margin-top: 0 !important;
}

/* Get rid of bottom margin on last element in any rich text element */
.w-richtext>:last-child,
.w-richtext ol li:last-child,
.w-richtext ul li:last-child {
  margin-bottom: 0;
}

/* ------------------------- Hide Scrollbar -------------------------------------------------- */

body ::-webkit-scrollbar {
  display: none;
}

/* Chrome, Safari, Opera */
body {
  -ms-overflow-style: none;
}

/* IE & Edge */
html {
  scrollbar-width: none;
}

/* Firefox */

/* ------------------------- Global padding/margin utility -------------------------------------------------- */

.margin-0 {
  margin: 0rem !important;
}

.padding-0 {
  padding: 0rem !important;
}

.margin-top {
  margin-right: 0rem !important;
  margin-bottom: 0rem !important;
  margin-left: 0rem !important;
}

.padding-top {
  padding-right: 0rem !important;
  padding-bottom: 0rem !important;
  padding-left: 0rem !important;
}

.margin-right {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
  margin-left: 0rem !important;
}

.padding-right {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
  padding-left: 0rem !important;
}

.margin-bottom {
  margin-top: 0rem !important;
  margin-right: 0rem !important;
  margin-left: 0rem !important;
}

.padding-bottom {
  padding-top: 0rem !important;
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}

.margin-left {
  margin-top: 0rem !important;
  margin-right: 0rem !important;
  margin-bottom: 0rem !important;
}

.padding-left {
  padding-top: 0rem !important;
  padding-right: 0rem !important;
  padding-bottom: 0rem !important;
}

.margin-horizontal {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
}

.padding-horizontal {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
}

.margin-vertical {
  margin-right: 0rem !important;
  margin-left: 0rem !important;
}

.padding-vertical {
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}

/* ------------------------- Section space -------------------------------------------------- */
/* Section Spacing */
[section-space="small"] {
  padding-top: var(--_layout---section--space-small);
  padding-bottom: var(--_layout---section--space-small);
}

[section-space="medium"] {
  padding-top: var(--_layout---section--space-medium);
  padding-bottom: var(--_layout---section--space-medium);
}

[section-space="large"] {
  padding-top: var(--_layout---section--space-large);
  padding-bottom: var(--_layout---section--space-large);
}

/* Section Spacing - Top Only */
[section-space-top="small"] {
  padding-top: var(--_layout---section--space-small);
  padding-bottom: 0;
}

[section-space-top="medium"] {
  padding-top: var(--_layout---section--space-medium);
  padding-bottom: 0;
}

[section-space-top="large"] {
  padding-top: var(--_layout---section--space-large);
  padding-bottom: 0;
}

/* Section Spacing - Bottom Only */
[section-space-bottom="small"] {
  padding-top: 0;
  padding-bottom: var(--_layout---section--space-small);
}

[section-space-bottom="medium"] {
  padding-top: 0;
  padding-bottom: var(--_layout---section--space-medium);
}

[section-space-bottom="large"] {
  padding-top: 0;
  padding-bottom: var(--_layout---section--space-large);
}

/* ------------------------- Remove highlights on mobile link tap -------------------------------------------------- */

body {
  -webkit-tap-highlight-color: transparent;
}

:focus {
  outline: 0;
}

/* ------------------------- Text clarity -------------------------------------------------- */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ------------------------- Text truncate -------------------------------------------------- */

/* Truncate after 1 line */
.text-truncate-line-01 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* Truncate after 2 lines */
.text-truncate-line-02 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Truncate after 3 lines */
.text-truncate-line-03 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Truncate after 4 lines */
.text-truncate-line-04 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

/* ------------------------- Webflow overrides -------------------------------------------------- */

button {
  all: unset;
  cursor: pointer;
  pointer-events: auto;
}

button:focus {
  outline: revert;
}

/* 
Make the following elements inherit typography styles from the parent and not have hardcoded values. 
Important: You will not be able to style for example "All Links" in Designer with this CSS applied.
Uncomment this CSS to use it in the project. Leave this message for future hand-off.
*/

a,
.w-input,
.w-select,
.w-tab-link,
.w-nav-link,
.w-dropdown-btn,
.w-dropdown-toggle,
.w-dropdown-link {
  color: inherit;
  text-decoration: inherit;
  font-size: inherit;
}

/* Remove the default Webflow icons from Input- Select and Text Area fields */
input,
select,
textarea {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important
}

/* Dropdown Toggle */
.w-dropdown-toggle,
.w-dropdown-toggle.w--open {
  margin: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* ------------------------- Extras -------------------------------------------------- */

/* Lottie path */
.lottie path {
  stroke: currentColor;
  fill: currentColor;
}

/* ------------------------- NAVIGATION -------------------------------------------------- */

/* Geen gap meer — ruimte komt van margin-right op de dot zelf */
.nav__link,
.nav__mobile-link {
  grid-column-gap: 0;
  grid-row-gap: 0;
  gap: 0;
}

.nav__dot {
  display: block;
  width: 0;
  height: 0.5em;
  margin-right: 0;
  border-radius: 50vw;
  background-color: #ff8975;
  flex: 0 0 auto;
  opacity: 0;
  transform: scale(0.4);
  will-change: width, margin, opacity, transform;
}

.nav__dark {
  pointer-events: none;
}

.navigation[data-nav-status="active"] .nav__dark {
  pointer-events: auto;
  cursor: pointer;
}

.nav__dark {
  position: fixed;
  left: 0;
  right: 0;
  top: env(safe-area-inset-top);
  bottom: env(safe-area-inset-bottom);
}

/* ------------------------- VIDEO PLAYERS -------------------------------------------------- */

/* --- MINI SHOWREEL PLAYER --- */
[data-mini-showreel-status="active"] .mini-showreel__click {
  display: none;
}

[data-mini-showreel-status] .mini-showreel__info {
  transition: margin 1s cubic-bezier(0.87, 0, 0.13, 1);
}

[data-mini-showreel-status="active"] .mini-showreel__info {
  margin-top: -2.75em;
}

[data-mini-showreel-status] .mini-showreel__card {
  transition: margin 1s cubic-bezier(0.87, 0, 0.13, 1);
}

[data-mini-showreel-status="active"] .mini-showreel__card {
  margin-top: 1.375em;
  margin-bottom: 1.375em;
}

[data-mini-showreel-status] .mini-showreel-lightbox__dark {
  transition: all 1s cubic-bezier(0.87, 0, 0.13, 1);
}

[data-mini-showreel-status="active"] .mini-showreel-lightbox__dark {
  opacity: 1;
  visibility: visible;
}

/* --- VIDEO PLAYER --- */

/* Animation */
[data-bunny-player-init] :is(.bunny-player__placeholder, .bunny-player__dark, .bunny-player__playpause, .bunny-player__loading) {
  transition: opacity 0.3s linear, visibility 0.3s linear;
}

/* Placeholder */
[data-bunny-player-init][data-player-status="playing"] .bunny-player__placeholder,
[data-bunny-player-init][data-player-status="paused"] .bunny-player__placeholder,
[data-bunny-player-init][data-player-activated="true"][data-player-status="ready"] .bunny-player__placeholder {
  opacity: 0;
  visibility: hidden;
}

/* Dark Overlay */
[data-bunny-player-init][data-player-status="paused"] .bunny-player__dark,
[data-bunny-player-init][data-player-status="playing"][data-player-hover="active"] .bunny-player__dark {
  opacity: 0.3;
}

[data-bunny-player-init][data-player-status="playing"] .bunny-player__dark {
  opacity: 0;
}

/* Play/Pause */
[data-bunny-player-init][data-player-status="playing"] .bunny-player__playpause,
[data-bunny-player-init][data-player-status="loading"] .bunny-player__playpause {
  opacity: 0;
}

[data-bunny-player-init][data-player-status="playing"][data-player-hover="active"] .bunny-player__playpause {
  opacity: 1;
}

[data-bunny-player-init][data-player-status="playing"] .bunny-player__play-svg,
[data-bunny-player-init][data-player-status="loading"] .bunny-player__play-svg {
  display: none;
}

[data-bunny-player-init][data-player-status="playing"] .bunny-player__pause-svg,
[data-bunny-player-init][data-player-status="loading"] .bunny-player__pause-svg {
  display: block;
}

/* Loading */
[data-bunny-player-init][data-player-status="loading"] .bunny-player__loading {
  opacity: 1;
  visibility: visible;
}

/* Interface */
.bunny-player__interface {
  transition: all 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

[data-bunny-player-init][data-player-status="playing"] .bunny-player__interface,
[data-bunny-player-init][data-player-status="loading"] .bunny-player__interface {
  opacity: 0;
  transform: translateY(1em) rotate(0.001deg);
}

[data-bunny-player-init][data-player-status="playing"][data-player-hover="active"] .bunny-player__interface,
[data-bunny-player-init][data-player-status="loading"][data-player-hover="active"] .bunny-player__interface {
  opacity: 1;
  transform: translateY(0em) rotate(0.001deg);
}

/* Timeline */
[data-bunny-player-init][data-player-status="idle"][data-player-activated="false"] .bunny-player__timeline,
[data-bunny-player-init][data-player-status="ready"][data-player-activated="false"] .bunny-player__timeline {
  pointer-events: none;
}

/* Timeline Handle */
[data-bunny-player-init] .bunny-player__timeline-handle {
  transition: transform 0.15s ease-in-out;
}

[data-bunny-player-init][data-timeline-drag="true"] .bunny-player__timeline-handle {
  transform: translate(-50%, -50%) scale(1);
}

/* Fullscreen */
[data-bunny-player-init][data-player-fullscreen="true"] .bunny-player__fullscreen-shrink-svg {
  display: block;
}

[data-bunny-player-init][data-player-fullscreen="true"] .bunny-player__fullscreen-scale-svg {
  display: none;
}

/* Mute */
[data-bunny-player-init][data-player-muted="true"] .bunny-player__volume-mute-svg {
  display: block;
}

[data-bunny-player-init][data-player-muted="true"] .bunny-player__volume-up-svg {
  display: none;
}

/* Cover Mode */
[data-bunny-player-init][data-player-update-size="cover"] {
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
}

[data-bunny-player-init][data-player-update-size="cover"] [data-player-before] {
  display: none;
}

[data-bunny-player-init][data-player-update-size="cover"][data-player-fullscreen="false"] .bunny-player__video {
  object-fit: cover;
}

/* Mini Showreel Player: Extra CSS */

[data-mini-showreel-status="not-active"] [data-bunny-player-init][data-player-status] .bunny-player__placeholder {
  opacity: 1;
  visibility: visible;
}

[data-mini-showreel-status="not-active"] [data-bunny-player-init][data-player-status] .bunny-player__dark {
  opacity: 0;
}

[data-mini-showreel-status="not-active"] [data-bunny-player-init] .bunny-player__playpause {
  opacity: 0;
}

[data-mini-showreel-status="not-active"] [data-bunny-player-init] .bunny-player__interface {
  opacity: 0;
  transform: translateY(1em) rotate(0.001deg);
}

/* ------------------------- BUTTON CSS -------------------------------------------------- */
[data-underline-link] {
  text-decoration: none;
  position: relative;
}

/* Link met arrow layout */
[data-underline-link="alt"] {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

[data-underline-link]::before,
[data-underline-link="alt"]::before,
[data-underline-link="alt"]::after {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.45s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}

[data-underline-link="alt"]::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
  transition-delay: 0.3s;
}

[data-underline-link="alt"]::after {
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
  transition-delay: 0s;
}

/* Arrow styling */
.link-arrow {
  display: inline-flex;
  align-items: center;
  transition: transform 0.45s cubic-bezier(0.625, 0.05, 0, 1);
}

.link-arrow svg {
  width: 1em;
  height: auto;
  display: block;
}

@media (hover: hover) and (pointer: fine) {

  [data-hover]:hover [data-underline-link]::before,
  [data-underline-link]:hover::before {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
  }

  [data-hover]:hover [data-underline-link="alt"]::before,
  [data-underline-link="alt"]:hover::before {
    transform-origin: right;
    transform: scaleX(0) rotate(0.001deg);
    transition-delay: 0s;
  }

  [data-hover]:hover [data-underline-link="alt"]::after,
  [data-underline-link="alt"]:hover::after {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
    transition-delay: 0.3s;
  }

  /* Arrow beweegt naar rechts bij hover */
  [data-underline-link="alt"]:hover .link-arrow {
    transform: translateX(0.3em);
  }
}

/* ------------------------- BOUNCY BUTTON -------------------------------------------------- */

:root {
  --ease-elastic: linear(0,
      0.55 7.5%,
      0.85 12%,
      0.95 14%,
      1.03 16.5%,
      1.09 20%,
      1.13 22%,
      1.14 23%,
      1.15 24.5%,
      1.15 26%,
      1.13 28%,
      1.11 31%,
      1.05 39%,
      1.02 43%,
      0.99 47%,
      0.98 52%,
      0.97 59%,
      1.002 81%,
      1);
}

/* Only apply hover animations if they are actually not supported */
@media (hover:hover) and (pointer:fine) {

  .btn-bounce,
  .btn-bounce-text,
  .btn-bounce-text__wrap {
    transition: transform 0.65s var(--ease-elastic);
  }

  /* Fake a duplicate text element using text shadow without blur  */
  /* We save the distance in a variable for easy use in the CSS animation */
  .btn-bounce-text {
    --text-duplicate-distance: 3em;
    text-shadow: 0px var(--text-duplicate-distance) currentColor;
  }

  /* Scale down the button and rotate it slightly */
  .btn-bounce:hover {
    transform: scale(0.92) rotate(-3deg);
  }

  /* Rotate the text wrapper in the opposite direction so it appears straight */
  .btn-bounce:hover .btn-bounce-text__wrap {
    transform: rotate(3deg);
  }

  /* Move up the text span to reveal its text-shadow */
  .btn-bounce:hover .btn-bounce-text {
    transform: translate(0px, calc(-1 * var(--text-duplicate-distance)));
  }

}

/* ------------------------- ARTIKEL CARD: HOVER -------------------------------------------------- */

.artikel-card__img {
  transition: transform 0.3s cubic-bezier(0.38, 0.005, 0.215, 1);
}

@media (hover: hover) and (pointer: fine) {
  .artikel-card[data-wf--artikel-card--variant="is--small"]:hover .artikel-card__img {
    transform: scale(1.05);
  }
}

/* ------------------------- PAGINATION FILTER LIST-------------------------------------------------- */

/* Verberg de wrapper als alles al getoond wordt */
.load-more[data-load-more-state="all-shown"] .load-more__btn {
  display: none;
}

/* ------------------------- ARTIKEL CARD: HOVER -------------------------------------------------- */

/* ============================================
   PARTNER LOGO GRID
   ============================================ */

.partner-logo__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  grid-auto-flow: dense;
  column-gap: 16px;
  row-gap: 16px;
}

/* Fallback voor álle items: 2 kolommen × 2 rijen */
.partner-logo__item {
  grid-column: span 2;
  grid-row: span 2;
}

/* Vaste posities voor de eerste 7 partners */
.partner-logo__item:nth-child(1) {
  grid-area: 2 / 1 / 4 / 3;
}

.partner-logo__item:nth-child(2) {
  grid-area: 3 / 4 / 5 / 6;
}

.partner-logo__item:nth-child(3) {
  grid-area: 3 / 8 / 5 / 10;
}

.partner-logo__item:nth-child(4) {
  grid-area: 1 / 11 / 3 / 13;
}

.partner-logo__item:nth-child(5) {
  grid-area: 5 / 2 / 7 / 4;
}

.partner-logo__item:nth-child(6) {
  grid-area: 6 / 5 / 8 / 7;
}

.partner-logo__item:nth-child(7) {
  grid-area: 6 / 10 / 8 / 12;
}

/* ============================================
   TABLET  ≤ 991px
   8 kolommen · scattered layout met gaten
   ============================================ */
@media (max-width: 991px) {
  .partner-logo__grid {
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: auto;
    grid-auto-flow: row;
  }

  .partner-logo__item,
  .partner-logo__item:nth-child(-n+7) {
    grid-area: auto;
    grid-column: span 2;
    grid-row: span 1;
  }

  .partner-logo__item:nth-child(1) {
    grid-column: 1 / span 2;
  }

  .partner-logo__item:nth-child(2) {
    grid-column: 7 / span 2;
  }

  .partner-logo__item:nth-child(3) {
    grid-column: 2 / span 2;
  }

  .partner-logo__item:nth-child(4) {
    grid-column: 5 / span 2;
  }

  .partner-logo__item:nth-child(5) {
    grid-column: 1 / span 2;
  }

  .partner-logo__item:nth-child(6) {
    grid-column: 6 / span 2;
  }

  .partner-logo__item:nth-child(7) {
    grid-column: 3 / span 2;
  }
}

/* ============================================
   MOBIEL  ≤ 767px
   6 kolommen · scattered layout met gaten
   ============================================ */
@media (max-width: 767px) {
  .partner-logo__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .partner-logo__item,
  .partner-logo__item:nth-child(-n+7) {
    grid-column: span 2;
    grid-row: span 1;
  }

  /* Scattered patroon over 6 cols.
     Elk item is 2 cols breed → mogelijke startpunten: 1, 3, 5 */
  .partner-logo__item:nth-child(1) {
    grid-column: 1 / span 2;
  }

  .partner-logo__item:nth-child(2) {
    grid-column: 2 / span 2;
  }

  .partner-logo__item:nth-child(3) {
    grid-column: 3 / span 2;
  }

  .partner-logo__item:nth-child(4) {
    grid-column: 1 / span 2;
  }

  .partner-logo__item:nth-child(5) {
    grid-column: 2 / span 2;
  }

  .partner-logo__item:nth-child(6) {
    grid-column: 3 / span 2;
  }

  .partner-logo__item:nth-child(7) {
    grid-column: 1 / span 2;
  }
}

/* ------------------------- DRAW SVG UNDERLINE BOX -------------------------------------------------- */

[data-draw-line-box] svg {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: visible !important;
}

/* ------------------------- ARTICLE DETAIL -------------------------------------------------- */

.rich-text-regular[data-rich-text-layout] {
  width: 100%;

  /* Easy spacing controls */

  /* Space above each divider, except the first one */
  --article-divider-space-top: 4em;

  /* Space below each divider, before the H2/content grid starts */
  --article-divider-space-bottom: 4em;

  /* Space between rich text blocks inside the right column */
  --article-content-gap: 1em;

  /* Extra breathing room around large editorial blocks */
  --article-block-extra-gap: 0.5em;

  /* Space between H2 and content on mobile */
  --article-mobile-heading-gap: 1.5em;

  /* Mobile section spacing */
  --article-mobile-divider-space-top: 3em;
  --article-mobile-divider-space-bottom: 2em;
  --article-mobile-content-gap: 1.75em;

  /* Width controls */
  --article-content-max-width: 48em;
  --article-heading-max-width: 12em;

  /* Quote offset */
  --article-quote-padding-left: 0.75em;

  /* Quote author controls */
  --article-quote-author-space-top: 1.5em;
  --article-quote-author-size: 0.45em;
  --article-quote-author-image-size: 2em;
}

/* Dividers */

.rich-text-regular[data-rich-text-layout]>.rt-section-divider {
  margin-top: var(--article-divider-space-top);
  margin-bottom: var(--article-divider-space-bottom);
}

/* First divider appears directly at the start of the rich text */
.rich-text-regular[data-rich-text-layout]>.rt-section-divider:first-child {
  margin-top: 0;
}

/* Generated section grid */

.rt-section-grid {
  padding-top: 0;
  padding-bottom: 0;
}

.rt-section-heading {
  grid-column: 1 / span 2;
  grid-row: 1;
}

.rt-section-content {
  grid-column: 3 / span 4;
  grid-row: 1;

  display: flex;
  flex-direction: column;
  gap: var(--article-content-gap);

  width: 100%;
  max-width: var(--article-content-max-width);
}

/* Reset default Rich Text spacing inside JS layout */

.rt-section-heading>*,
.rt-section-content>*,
.rt-fallback-content>* {
  margin-top: 0;
  margin-bottom: 0;
}

.rt-section-heading h2 {
  margin-top: 0;
  margin-bottom: 0;

  max-width: var(--article-heading-max-width);
}

/* Content rhythm */

/* Larger blocks need a bit more air, otherwise it feels pasted in */
.rt-section-content>blockquote,
.rt-section-content>figure,
.rt-section-content>.w-richtext-figure-type-image {
  margin-top: var(--article-block-extra-gap);
  margin-bottom: var(--article-block-extra-gap);
}

/* Lists */
.rt-section-content ul,
.rt-section-content ol {
  padding-left: 1.25em;
}

.rt-section-content li+li {
  margin-top: 0.5em;
}

/* Images / figures */
.rt-section-content figure {
  width: 100%;
}

.rt-section-content figure img,
.rt-section-content img {
  width: 100%;
  height: auto;
}

/* Optional caption breathing */
.rt-section-content figcaption {
  margin-top: 0.75em;
}

/* Blockquote */
/*
  Keeps quote text aligned with normal text,
  while the border/padding visually moves left by the existing padding amount.
*/
.rt-section-content blockquote {
  margin-left: calc(-1 * var(--article-quote-padding-left));
  padding-left: var(--article-quote-padding-left);
}

/* Fallback content before first H2 */

.rt-fallback-grid {
  padding-top: 0;
  padding-bottom: 0;
}

.rt-fallback-content {
  grid-column: 3 / span 4;
  grid-row: 1;

  display: flex;
  flex-direction: column;
  gap: var(--article-content-gap);

  width: 100%;
  max-width: var(--article-content-max-width);
}

/* Author // Quote block */

/* Hide the original CMS author source wherever it sits */
[data-quote-author-source] {
  display: none !important;
}

.quote-author-source-wrap {
  display: none !important;
}

/* Show the cloned author inside the quote */
.rt-section-content blockquote [data-quote-author-clone] {
  display: flex !important;
}

/* Author clone inside blockquote */
.rt-section-content blockquote .author {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5em;

  width: fit-content;
  margin-top: var(--article-quote-author-space-top);

  font-size: var(--article-quote-author-size);
  line-height: 1.2;
}

/* Avatar wrapper inside blockquote */
.rt-section-content blockquote .author__image-wrap {
  flex: 0 0 auto;
  width: var(--article-quote-author-image-size);
  height: var(--article-quote-author-image-size);
  aspect-ratio: 1 / 1;

  overflow: hidden;
  border-radius: 50%;
}

/* Avatar image inside blockquote */
.rt-section-content blockquote .author__image {
  display: block;
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;
}

/* Author text inside blockquote */
.rt-section-content blockquote .author__text {
  font-family: Saans, sans-serif;
  font-size: 1em;
  line-height: 1.2em;
  font-weight: 500;
}

/* Mobile + Tablet */

@media (max-width: 991px) {
  .rich-text-regular[data-rich-text-layout] {
    /* Stacked rhythm */
    --article-divider-space-top: 3em;
    --article-divider-space-bottom: 1.25em;
    --article-content-gap: 1em;
    --article-block-extra-gap: 0.75em;

    --article-heading-max-width: none;
    --article-quote-author-size: 0.6em;
    --article-quote-author-image-size: 2.25em;
  }

  .rt-section-heading,
  .rt-section-content,
  .rt-fallback-content {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .rt-section-heading {
    margin-bottom: 0.75em;
  }

  .rt-section-heading h2 {
    max-width: 10em;
  }

  .rt-section-content,
  .rt-fallback-content {
    gap: var(--article-content-gap);
    max-width: none;
  }

  .rich-text-regular[data-rich-text-layout]>.rt-section-divider {
    margin-top: var(--article-divider-space-top);
    margin-bottom: var(--article-divider-space-bottom);
  }

  /* First divider still gets spacing, just less than following sections */
  .rich-text-regular[data-rich-text-layout]>.rt-section-divider:first-child {
    margin-top: 1.5em;
  }

  .rt-section-content>blockquote {
    margin-top: 1em;
    margin-bottom: 1em;
  }

  .rt-section-content>figure,
  .rt-section-content>.w-richtext-figure-type-image {
    margin-top: var(--article-block-extra-gap);
    margin-bottom: var(--article-block-extra-gap);
  }

  .rt-section-content blockquote {
    margin-left: calc(-1 * var(--article-quote-padding-left));
    padding-left: var(--article-quote-padding-left);
  }
}

/* ------------------------- ACCORDION CSS-------------------------------------------------- */
/* Animate Accordion Bottom Grid */
.accordion-css__item-bottom {
  transition: grid-template-rows 0.45s cubic-bezier(0.625, 0.05, 0, 1);
}

[data-accordion-status="active"] .accordion-css__item-bottom {
  grid-template-rows: 1fr;
}

/* Animate Icon */
.accordion-css__item-icon {
  transition: transform 0.45s cubic-bezier(0.625, 0.05, 0, 1);
}

[data-accordion-status="active"] .accordion-css__item-icon {
  transform: rotate(0.001deg);
}

/* Animate Icon Line */
.accordion-css__icon-line {
  transition: transform 0.45s cubic-bezier(0.625, 0.05, 0, 1);
}

[data-accordion-status="active"] .accordion-css__icon-line.is-02 {
  transform: rotate(180deg);
}

/* ------------------------- FORM-------------------------------------------------- */

/* Field: Error */
[data-validate].is--error input,
[data-validate].is--error textarea,
[data-validate].is--error select {
  border-color: #fff;
}

[data-validate].is--error .form-field-icon.is--error,
[data-validate].is--error .radiocheck-field-icon.is--error {
  opacity: 1;
}

/* Field: Success */
[data-validate].is--success .form-field-icon.is--success,
[data-validate].is--success .radiocheck-field-icon.is--success {
  opacity: 1;
}

/* Field: Custom Radio or Checkbox */
[data-form-validate] .radiocheck-field input:focus-visible~.radiocheck-custom {
  background-color: #fff;
  color: #fff;
}

[data-form-validate] .radiocheck-field input:focus-visible:checked~.radiocheck-custom,
[data-form-validate] .radiocheck-field input:checked~.radiocheck-custom {
  background-color: #fff;
  color: #fff;
}

[data-form-validate] .radiocheck-field .radiocheck-label.is--small {
  margin-top: 0.125em;
}

[data-validate].is--error .radiocheck-custom {
  border-color: #fff;
}

[data-validate].is--error input:checked~.radiocheck-custom {
  border-color: #2A0C16;
}
/* Vinkje verborgen als de checkbox niet aangevinkt is */
[data-form-validate] .radiocheck-field .radiocheck-check-svg {
  opacity: 0;
}

/* Vinkje zichtbaar zodra de checkbox aangevinkt is */
[data-form-validate] .radiocheck-field input:checked ~ .radiocheck-custom .radiocheck-check-svg {
  opacity: 1;
}

/* ------------------------- FILTER FEATURED ITEM -------------------------------------------------- */

/* Of als je liever data-attributes gebruikt */
.artikel-item[data-featured="true"] {
  grid-column: 1 / -1;
}

/* ---------- CHIP STYLING (filter-btn binnen .filter-bar__chips) ---------- */

.filter-bar__chips .filter-btn {
  animation: chip-in 0.3s cubic-bezier(0.2, 0, 0, 1) both;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0, 0, 1);
}

.filter-bar__chips .filter-btn[data-filter-status="active"] {
  background-color: var(--_colors---swatch--white);
  color: inherit;
}

.filter-bar__chips .filter-btn:hover {
  opacity: 0.5;
}

.filter-bar__chips .filter-btn .filter-btn_icon {
  transform: rotate(45deg);
}

.filter-bar__chips .filter-btn[data-chip-leaving="true"] {
  animation: none;
  transform: scale(0.7);
  opacity: 0;
  pointer-events: none;
}

@keyframes chip-in {
  from {
    transform: scale(0.7);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* ---------- DROPDOWN active state (paars) ---------- */
.filter-dropdown .filter-btn[data-filter-status="active"] {
  background-color: var(--_colors---swatch--purple-dark);
  color: #efeeec;
}

/* ---------- DROPDOWN active icon rotatie (+ → ×) ---------- */
.filter-dropdown .filter-btn[data-filter-status="active"] .filter-btn_icon {
  transform: rotate(45deg);
}

/* ---------- HOVER op niet-actieve dropdown buttons ---------- */
.filter-dropdown .filter-btn:not([data-filter-status="active"]):hover .filter-btn_icon {
  transform: rotate(180deg);
}

/* ---------- BALK ---------- */

.filter-bar__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1em;
  transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1);
}

.filter-group[data-filter-open="true"] .filter-bar__arrow {
  transform: rotate(180deg);
}

/* ---------- DROPDOWN (animated height via grid-trick) ---------- */
.filter-dropdown {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  transition: grid-template-rows 0.45s cubic-bezier(0.2, 0, 0, 1);
  overflow: hidden;
}

.filter-group[data-filter-open="true"] .filter-dropdown {
  grid-template-rows: minmax(0, 1fr);
}

.filter-dropdown>.filter-buttons {
  overflow: hidden;
  min-height: 0;
}

/* ---------- ICON rotatie: + wordt × bij actieve state ---------- */
.filter-btn_icon {
  transition: transform 0.3s ease;
}

.filter-btn[data-filter-status="active"] .filter-btn_icon {
  transform: rotate(45deg);
}

/* ---------- ITEM SHOW / HIDE STATES ---------- */
.artikel-item[data-filter-status="active"] {
  transition: opacity 0.5s cubic-bezier(0.2, 0, 0, 1),
    transform 0.5s cubic-bezier(0.2, 0, 0, 1);
  transform: scale(1) rotate(0.001deg);
  opacity: 1;
  visibility: visible;
  position: relative;
}
.artikel-item[data-filter-status="transition-out"] {
  transition: opacity 0.35s cubic-bezier(0.2, 0, 0, 1),
    transform 0.35s cubic-bezier(0.2, 0, 0, 1);
  transform: scale(0.9) rotate(0.001deg);
  opacity: 0;
  visibility: visible;
}
.artikel-item[data-filter-status="not-active"] {
  transform: scale(0.9) rotate(0.001deg);
  opacity: 0;
  visibility: hidden;
  position: absolute;
}

/* ---------- RESET-BTN VISIBILITY ---------- */
.reset-btn {
  transition: opacity 0.4s cubic-bezier(0.2, 0, 0, 1),
    visibility 0.4s cubic-bezier(0.2, 0, 0, 1);
  opacity: 0;
  visibility: hidden;
}

.reset-btn[data-filter-status="active"] {
  opacity: 1;
  visibility: visible;
}