/* -----------------------------------------------------------------------------
   CHILD COMPONENTS
   Purpose: Generic, reusable UI components built on top of the foundation.
            No brand-specific colors here. Keep things portable across projects.
   Ownership: Front-end / Component Library
   How to extend: Add a new section per component and keep the API (class names)
                  stable. Promote only patterns that are reused across pages.
   Notes:
   - Intentionally empty for this sprint. Populate when you identify truly
     reusable blocks from the project skin.
   -------------------------------------------------------------------------- */

/* Add reusable component CSS here (optional for now). */

/* Brand Icons */

.at--brand-iconbox:has(.jet-listing-dynamic-field__content), .at--brand-iconbox .jet-listing-dynamic-image img, .branded-icon .jet-listing-dynamic-image img {
  aspect-ratio: 1;
  align-content: center;
  justify-content: center;
  display: grid;
	width: 100%;
}

/* Hero Visuals */

.hero-visual {
	--hero-transition: all .3s ease-in-out .15s;}

.hero-visual .elementor-widget-icon-box {
  will-change: transform;
  transform: translateX(0);
  opacity: 0;
  transition: var(--hero-transition);}

.hero-visual:hover .elementor-widget-icon-box {
  transform: translateX(calc(-100% - .5rem));
  opacity: 1;}

.hero-visual .elementor-background-video-container {
  transform: scale(1);
  transition: var(--hero-transition);}

.hero-visual:hover .elementor-background-video-container {
  transform: scale(1.05);}

/* Infinite / Smooth Caroussel */

.infinite-linear .slick-track {
    transition-timing-function: linear !important;
}

/* Logo Caroussel */

.logo-caroussel .slick-track {
    gap: 3rem;
    display: flex;
}

.logo-caroussel img {
    height: 44px !important;
}

.fade--inout-color--link a:not(:hover) img {
filter: grayscale(100%) contrast(0%);
    opacity: .4;
}

.fade--inout-color--link a img {
	transition: opacity linear .6s, filter linear .3s;
}

/* Teaser Slider */

.team--teaser-slider  .jet-carousel__item.slick-slide:not(.slick-active) {
    opacity: 0;
	transform: scale(0);
    transition: opacity linear .15s, transform ease-out .6s;
}

.team--teaser-slider  .jet-carousel__item.slick-slide.slick-active {
    opacity: 1;
	transform: scale(1);
    transition: opacity linear .3s, transform ease-in .3s;

}
/* ---- LCP helpers ------ */

.page-header .hero-lcp--title { 
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(2 * 1.2em);        /* 2 regels */
}

.page-header .hero-lcp--excerpt { 
	  -webkit-line-clamp: 3; min-height: calc(3 * 1.2em);

}

/* Carousels / sliders */
.team--teaser-slider .jet-carousel__item-img { 
  width: 100%;
  height: auto;
  aspect-ratio: 1; 
  object-fit: cover;
}

@media screen and (min-width: 1024px) { 
/* Als de slide zelf hoogte nodig heeft vóór init: */
.team--teaser-slider .jet-carousel .slick-slide {
  height: 2rem;
}
}

/* Kill parallax/motion in de hero, ook als JS het toch init */
/* .page-header [data-jet-parallax],
.page-header .jet-parallax,
.page-header [class*="jet-parallax"],
.page-header [style*="transform"] {
  transform: none !important;
  will-change: auto !important;
  animation: none !important;
  background-attachment: scroll !important;
} */

/* ----- End helpers ----- */

/* Fade Masks */

.container--fade-inout {
	mask-image: linear-gradient(to right, transparent var(--main-container-px), black calc(4 * var(--main-container-px)), black calc(75% + var(--main-container-px)), transparent calc(100% - var(--main-container-px)));
}