/* =============================================================================
   HAI Cover Carousel - fixed-height track, per-slide ratio, CSS scroll-snap
   Slide width = track height x own image ratio, so mixed portrait/landscape
   images sit side by side without letterboxing or a height jump. No slider
   library: the track stays drag/swipe-able with JavaScript disabled.
   Elementor Style-tab controls override the defaults defined here.
   ============================================================================= */

/* -- Wrapper --------------------------------------------------------------- */

.hai-cc {
	--hai-cc-h: 520px;
	--hai-cc-gap: 16px;
	--hai-cc-pijl: 52px;
	--hai-cc-transition: 400ms;

	display: flex;
	flex-direction: column;
	width: 100%;
	box-sizing: border-box;
}

/* Overlay variant needs a positioning context for the arrow row. */
.hai-cc--pijlen-overlay {
	position: relative;
}

/* -- Track ------------------------------------------------------------------ */

.hai-cc__track {
	display: flex;
	gap: var(--hai-cc-gap);
	height: var(--hai-cc-h);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;     /* Firefox */
	-ms-overflow-style: none;  /* legacy Edge */
	box-sizing: border-box;
	width: 100%;
}

.hai-cc__track::-webkit-scrollbar {
	display: none;
}

.hai-cc__track:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* -- Slide (figure) ---------------------------------------------------------- */

/*
 * Width follows from the per-slide custom property --hai-cc-ratio, set
 * inline server-side from the attachment metadata (width/height), so there
 * is no layout shift once the image itself loads. Entries without a known
 * ratio (dynamic-tag URLs) fall back to 1.5 here until the JS ratio
 * fallback sets the real value from naturalWidth/naturalHeight.
 */
.hai-cc__track figure {
	margin: 0;
	flex: 0 0 auto;
	height: 100%;
	width: calc(var(--hai-cc-h) * var(--hai-cc-ratio, 1.5));
	scroll-snap-align: start;
	overflow: hidden;
	position: relative;
}

.hai-cc__track figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hai-cc__track figure a {
	display: block;
	width: 100%;
	height: 100%;
}

/* -- Arrows row --------------------------------------------------------------- */

.hai-cc__arrows {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.hai-cc--pijlen-onder-rechts .hai-cc__arrows {
	justify-content: flex-end;
}

.hai-cc--pijlen-onder-links .hai-cc__arrows {
	justify-content: flex-start;
}

/* Overlay: arrows float on top of the track, vertically centred. */
.hai-cc--pijlen-overlay .hai-cc__arrows {
	position: absolute;
	inset: 0;
	justify-content: space-between;
	align-items: center;
	pointer-events: none;
	margin-top: 0;
}

.hai-cc--pijlen-overlay .hai-cc__arrow {
	pointer-events: auto;
}

/* -- Arrow button -------------------------------------------------------------- */

.hai-cc__arrow {
	width: var(--hai-cc-pijl);
	height: var(--hai-cc-pijl);
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.15);
	background-color: #ffffff;
	color: #1a1a1a;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	flex-shrink: 0;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.hai-cc__arrow:hover {
	background-color: #f2f2f2;
}

.hai-cc__arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.hai-cc__arrow svg {
	width: 40%;
	height: 40%;
	display: block;
}