/**
 * Image Slider Assist — front-end styles.
 *
 * Layers on top of the bundled Swiper (MIT) base CSS. Driven by the CSS custom
 * properties the PHP config + CommonStyle emit.
 *
 * @author Divi Assist
 */

/* Fill the module wrapper; the actual width / max-width / alignment come from
   the module's native Sizing group (Design → Sizing) applied to that wrapper —
   no hardcoded max-width here, so the slider is never force-stretched. */
.dia-image-slider-assist {
	width: 100%;
	position: relative;
}

/* ----- Main slider ------------------------------------------------------- */
.dia-image-slider-main {
	position: relative;
	width: 100%;
	height: var( --dia-slider-height, 500px );
	background: transparent;
	overflow: hidden;
}
.dia-image-slider-assist[data-auto-height="on"] .dia-image-slider-main { height: auto; }

/* 3D / stacking effects need the container to NOT clip their rotated + stacked
   slides. Swiper's own per-slide clipping keeps the active slide crisp; the
   parent section clips any lateral overflow. */
.dia-slider-effect-cube .dia-image-slider-main,
.dia-slider-effect-flip .dia-image-slider-main,
.dia-slider-effect-coverflow .dia-image-slider-main,
.dia-slider-effect-creative .dia-image-slider-main { overflow: visible; }
.dia-slider-effect-cube,
.dia-slider-effect-flip,
.dia-slider-effect-coverflow,
.dia-slider-effect-creative { overflow: hidden; }

/* Cube / flip are single-card stage effects — keep each slide the full width of
   the (max-width-constrained) stage so Swiper centres it. Slide radius is the
   native Slide Border group. */
.dia-slider-effect-cube .dia-image-slider-item.swiper-slide,
.dia-slider-effect-flip .dia-image-slider-item.swiper-slide { overflow: hidden; }

/* Thumbnails layout: left/right put main + thumbs side by side. */
.dia-slider-thumbs-left,
.dia-slider-thumbs-right { display: flex; gap: 14px; align-items: stretch; }
.dia-slider-thumbs-left .dia-image-slider-main,
.dia-slider-thumbs-right .dia-image-slider-main { flex: 1 1 auto; }
.dia-slider-thumbs-left .dia-image-slider-thumbs,
.dia-slider-thumbs-right .dia-image-slider-thumbs { flex: 0 0 auto; width: 110px; height: var( --dia-slider-height, 500px ); }

/* ----- Slide + card ------------------------------------------------------ */
/* Slide padding + border radius are the native Slide Spacing / Border groups. */
.dia-image-slider-item {
	height: 100%;
	box-sizing: border-box;
	background: transparent;
}
/* The slide is the Divi module wrapper — strip its default block spacing so
   Swiper's own width / spaceBetween math is not thrown off. */
.dia-image-slider-assist .dia-image-slider-item.swiper-slide {
	margin-top: 0;
	margin-bottom: 0;
	float: none;
}
/* Active/inactive scale + opacity apply only to the plain slide effect — the 3D
   effects (cube/flip/coverflow/creative) are driven entirely by Swiper's own
   inline transforms and must not be overridden here. */
.dia-slider-effect-slide .dia-image-slider-item {
	opacity: var( --dia-inactive-opacity, 1 );
	transform: scale( var( --dia-inactive-scale, 1 ) );
	transition: opacity 0.4s ease, transform 0.4s ease;
}
.dia-slider-effect-slide .dia-image-slider-item.swiper-slide-active,
.dia-slider-effect-slide .dia-image-slider-item.swiper-slide-visible {
	opacity: var( --dia-active-opacity, 1 );
	transform: scale( var( --dia-active-scale, 1 ) );
}

.dia-slider-card {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* ----- Image ------------------------------------------------------------- */
.dia-slider-image-wrap { position: relative; width: 100%; height: 100%; overflow: hidden; line-height: 0; }
.dia-slider-image-link { display: block; width: 100%; height: 100%; }
.dia-slider-image-wrap img,
.dia-slider-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var( --dia-image-fit, cover );
	object-position: var( --dia-image-position, center );
	opacity: var( --dia-image-opacity, 1 );
	transition: transform 0.5s ease;
}
.dia-slider-image-zoom .dia-slider-card:hover .dia-slider-image-wrap img { transform: scale( var( --dia-image-hover-scale, 1.08 ) ); }

/* ----- Overlay ----------------------------------------------------------- */
.dia-slider-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: transparent;
	opacity: var( --dia-overlay-opacity, 1 );
	mix-blend-mode: var( --dia-overlay-blend, normal );
	transition: background 0.4s ease, opacity 0.4s ease;
}
.dia-slider-card:hover .dia-slider-overlay { background: transparent; }
.dia-slider-ovanim-none .dia-slider-overlay { transition: none; }

/* ----- Content box ------------------------------------------------------- */
.dia-slider-content {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: var( --dia-content-align, flex-start );
	justify-content: var( --dia-content-justify, flex-end );
	gap: 10px;
	padding: 28px;
	text-align: var( --dia-content-text-align, left );
	box-sizing: border-box;
	pointer-events: none;
}
/* Content box padding + border radius are the native Content Box Spacing / Border groups. */
.dia-slider-content-box {
	max-width: var( --dia-content-max-width, 100% );
	background: transparent;
	-webkit-backdrop-filter: blur( var( --dia-content-blur, 0px ) );
	backdrop-filter: blur( var( --dia-content-blur, 0px ) );
	pointer-events: auto;
}
.dia-slider-content-box > :last-child { margin-bottom: 0; }
.dia-slider-content-box { text-align: var( --dia-content-text-align, left ); }

/* Content visibility. */
.dia-slider-visibility-hidden .dia-slider-content { display: none; }
.dia-slider-visibility-on-hover .dia-slider-content,
.dia-slider-visibility-on-active .dia-slider-content { opacity: 0; transition: opacity 0.4s ease; }
.dia-slider-visibility-on-hover .dia-slider-card:hover .dia-slider-content { opacity: 1; }
.dia-slider-visibility-on-active .swiper-slide-active .dia-slider-content { opacity: 1; }

/* Content animation (plays on active slide). */
.dia-slider-content-box {
	transition: opacity var( --dia-content-anim-duration, 500ms ) ease, transform var( --dia-content-anim-duration, 500ms ) ease, filter var( --dia-content-anim-duration, 500ms ) ease;
}
.dia-slider-canim-fade_up .dia-image-slider-item:not( .swiper-slide-active ) .dia-slider-content-box { opacity: 0; transform: translateY( 30px ); }
.dia-slider-canim-fade_down .dia-image-slider-item:not( .swiper-slide-active ) .dia-slider-content-box { opacity: 0; transform: translateY( -30px ); }
.dia-slider-canim-fade_left .dia-image-slider-item:not( .swiper-slide-active ) .dia-slider-content-box { opacity: 0; transform: translateX( 40px ); }
.dia-slider-canim-fade_right .dia-image-slider-item:not( .swiper-slide-active ) .dia-slider-content-box { opacity: 0; transform: translateX( -40px ); }
.dia-slider-canim-fade .dia-image-slider-item:not( .swiper-slide-active ) .dia-slider-content-box { opacity: 0; }
.dia-slider-canim-zoom_in .dia-image-slider-item:not( .swiper-slide-active ) .dia-slider-content-box { opacity: 0; transform: scale( 0.85 ); }
.dia-slider-canim-blur_in .dia-image-slider-item:not( .swiper-slide-active ) .dia-slider-content-box { opacity: 0; filter: blur( 8px ); }
.dia-slider-canim-clip_up .dia-image-slider-item:not( .swiper-slide-active ) .dia-slider-content-box { opacity: 0; clip-path: inset( 100% 0 0 0 ); }

/* ----- Badge / caption / description / button ---------------------------- */
/* Badge text, background, border and padding are the native Divi Badge group
   (Design → Badge); these are the unset defaults it overrides. */
.dia-slider-badge {
	display: inline-block;
	align-self: var( --dia-content-align, flex-start );
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #ffffff;
	background: #2563eb;
	border-radius: 4px;
}
.dia-slider-caption { margin: 0; color: #ffffff; font-size: 26px; line-height: 1.2; }
.dia-slider-description { margin: 0; color: rgba( 255, 255, 255, 0.9 ); font-size: 15px; line-height: 1.6; }
.dia-slider-description :last-child { margin-bottom: 0; }

/* Button styling is Divi's native button element (Design → Button). */
.dia-slider-content .et_pb_button {
	transition: color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}

/* ----- Arrows ------------------------------------------------------------ */
.dia-slider-arrow {
	position: absolute;
	z-index: 10;
	top: 50%;
	transform: translateY( -50% );
	display: flex;
	align-items: center;
	justify-content: center;
	width: var( --dia-arrow-size, 44px );
	height: var( --dia-arrow-size, 44px );
	font-size: var( --dia-arrow-icon-size, 20px );
	color: var( --dia-arrow-color, #ffffff );
	background: rgba( 17, 24, 39, 0.55 );
	border: none;
	border-radius: 50%;
	opacity: var( --dia-arrow-opacity, 1 );
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}
.dia-slider-arrow:hover {
	color: var( --dia-arrow-color-hover, #ffffff );
	background: rgba( 17, 24, 39, 0.85 );
	opacity: var( --dia-arrow-opacity-hover, 1 );
}
.dia-slider-arrow.swiper-button-disabled { opacity: 0.35; cursor: default; }
.dia-slider-prev { left: var( --dia-arrow-offset, 16px ); }
.dia-slider-next { right: var( --dia-arrow-offset, 16px ); }
.dia-slider-arrow-default { width: 12px; height: 12px; border-top: 2px solid currentColor; border-left: 2px solid currentColor; }
.dia-slider-prev .dia-slider-arrow-default { transform: rotate( -45deg ); margin-left: 4px; }
.dia-slider-next .dia-slider-arrow-default { transform: rotate( 135deg ); margin-right: 4px; }

/* Arrow positions. */
.dia-slider-arrows-outside-center .dia-slider-prev { left: calc( var( --dia-arrow-offset, 16px ) * -1 - var( --dia-arrow-size, 44px ) ); }
.dia-slider-arrows-outside-center .dia-slider-next { right: calc( var( --dia-arrow-offset, 16px ) * -1 - var( --dia-arrow-size, 44px ) ); }
.dia-slider-arrows-outside-center { padding: 0 calc( var( --dia-arrow-size, 44px ) + 12px ); }
.dia-slider-arrows-inside-bottom .dia-slider-arrow,
.dia-slider-arrows-outside-bottom .dia-slider-arrow { top: auto; bottom: 16px; transform: none; }
.dia-slider-arrows-inside-bottom .dia-slider-prev { left: auto; right: calc( var( --dia-arrow-offset, 16px ) + var( --dia-arrow-size, 44px ) + 8px ); }
.dia-slider-arrows-inside-bottom .dia-slider-next { right: var( --dia-arrow-offset, 16px ); }
.dia-slider-arrows-top-right .dia-slider-arrow { top: 16px; transform: none; }
.dia-slider-arrows-top-right .dia-slider-prev { left: auto; right: calc( var( --dia-arrow-offset, 16px ) + var( --dia-arrow-size, 44px ) + 8px ); }
.dia-slider-arrows-top-right .dia-slider-next { right: var( --dia-arrow-offset, 16px ); }
.dia-slider-arrows-bottom-right .dia-slider-arrow { top: auto; bottom: 16px; transform: none; }
.dia-slider-arrows-bottom-right .dia-slider-prev { left: auto; right: calc( var( --dia-arrow-offset, 16px ) + var( --dia-arrow-size, 44px ) + 8px ); }
.dia-slider-arrows-bottom-right .dia-slider-next { right: var( --dia-arrow-offset, 16px ); }
.dia-slider-arrows-custom .dia-slider-prev { left: var( --dia-arrow-x, 20px ); top: var( --dia-arrow-y, 50% ); right: auto; }
.dia-slider-arrows-custom .dia-slider-next { right: var( --dia-arrow-x, 20px ); top: var( --dia-arrow-y, 50% ); left: auto; }

/* ----- Pagination -------------------------------------------------------- */
.dia-slider-pagination {
	position: absolute;
	z-index: 10;
	left: 0;
	right: 0;
	bottom: var( --dia-pagination-offset, 16px );
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var( --dia-bullet-gap, 8px );
	pointer-events: none;
}
.dia-slider-pagination .swiper-pagination-bullet {
	pointer-events: auto;
	width: var( --dia-bullet-size, 10px );
	height: var( --dia-bullet-size, 10px );
	margin: 0 !important;
	background: rgba( 255, 255, 255, 0.55 );
	border-radius: 50%;
	opacity: 1;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.dia-slider-pagination .swiper-pagination-bullet-active { background: #ffffff; transform: scale( 1.25 ); }
.dia-slider-pagination.swiper-pagination-progressbar { height: 4px; background: rgba( 255, 255, 255, 0.3 ); bottom: 0; }
.dia-slider-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: #2563eb; }
.dia-slider-pagination.swiper-pagination-fraction { color: var( --dia-fraction-color, #ffffff ); font-size: 14px; font-weight: 600; }
.dia-slider-pagination-top-center { top: var( --dia-pagination-offset, 16px ); bottom: auto; }
.dia-slider-pagination-bottom-left { justify-content: flex-start; padding-left: 20px; }
.dia-slider-pagination-bottom-right { justify-content: flex-end; padding-right: 20px; }
.dia-slider-pagination-outside-bottom { position: relative; bottom: auto; margin-top: 14px; }

/* ----- Thumbnails -------------------------------------------------------- */
.dia-image-slider-thumbs { margin-top: 12px; overflow: hidden; }
.dia-slider-thumbs-top .dia-image-slider-thumbs { margin-top: 0; margin-bottom: 12px; }
.dia-slider-thumb {
	height: var( --dia-thumb-height, 90px );
	border-radius: 6px;
	overflow: hidden;
	cursor: pointer;
	opacity: var( --dia-thumb-opacity, 0.55 );
	border: 2px solid transparent;
	box-sizing: border-box;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}
.dia-slider-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dia-slider-thumb:hover { opacity: 1; }
.dia-slider-thumb.swiper-slide-thumb-active {
	opacity: var( --dia-thumb-active-opacity, 1 );
	border-color: var( --dia-thumb-active-border, #2563eb );
}

/* ----- Autoplay progress ------------------------------------------------- */
.dia-slider-autoplay-progress {
	position: absolute;
	z-index: 10;
	left: 0;
	right: 0;
	bottom: 0;
	height: var( --dia-progress-height, 4px );
	background: rgba( 255, 255, 255, 0.25 );
}
.dia-slider-autoplay-progress-bar {
	display: block;
	height: 100%;
	width: 0;
	background: #2563eb;
	border-radius: 0 2px 2px 0;
}

/* ----- Vertical direction ------------------------------------------------ */
.dia-slider-dir-vertical .dia-slider-pagination {
	left: auto;
	right: 12px;
	top: 50%;
	bottom: auto;
	transform: translateY( -50% );
	flex-direction: column;
}

/* ----- Responsive -------------------------------------------------------- */
@media ( max-width: 980px ) {
	.dia-slider-thumbs-left,
	.dia-slider-thumbs-right { flex-direction: column; }
	.dia-slider-thumbs-left .dia-image-slider-thumbs,
	.dia-slider-thumbs-right .dia-image-slider-thumbs { width: 100%; height: auto; }
}
@media ( max-width: 640px ) {
	.dia-slider-hide-arrows-mobile .dia-slider-arrow { display: none; }
	.dia-slider-hide-pagination-mobile .dia-slider-pagination { display: none; }
}

/* ----- Reduced motion ---------------------------------------------------- */
@media ( prefers-reduced-motion: reduce ) {
	.dia-slider-reduce-motion .dia-slider-image,
	.dia-slider-reduce-motion .dia-slider-content-box,
	.dia-slider-reduce-motion .dia-slider-overlay,
	.dia-slider-reduce-motion .dia-image-slider-item { transition: none !important; }
}

/* Default heading-level sizes for the title/caption (overridable via the
   Title font group in the Design tab). Applies to whichever h1-h6 tag the
   chosen heading level renders. */
h1.dia-slider-caption { font-size: 44px; }
h2.dia-slider-caption { font-size: 34px; }
h3.dia-slider-caption { font-size: 26px; }
h4.dia-slider-caption { font-size: 22px; }
h5.dia-slider-caption { font-size: 19px; }
h6.dia-slider-caption { font-size: 17px; }