/**
 * CDSWerx Interactive Info Images Widget
 *
 * EXACT 1:1 mirror of Qi Premium's interactive-info-images-default.min.css
 * with CDSWerx BEM class names. NO additions, NO "improvements".
 *
 * How it works (clip-path reveal, NOT content sliding):
 *   - Content always lives at translateX(100%) — to the RIGHT of the image
 *   - clip-path: inset(0 0 0 0) on each item clips content away
 *   - Active item: clip-path expands to inset(0 -100% 0 0) → reveals content
 *   - Content NEVER moves — the clipping area widens
 *   - Siblings after active slide right via translateX(100%)
 *   - Last-item trick: width:200%, translateX(50%) creates hidden expansion room
 *
 * BEM: .cdswerx-info-images
 *
 * @package CDSWerx_Widget_Library
 * @since   2.12.7
 */

/* ==========================================================================
   Base — desktop (mirrors Qi exactly)
   ========================================================================== */

.cdswerx-info-images {
	position: relative;
}

.cdswerx-info-images .cdswerx-info-images__items {
	display: flex;
	flex-direction: row;
	row-gap: 20px;
	column-gap: 20px;
	overflow: hidden;
}

.cdswerx-info-images .cdswerx-info-images__item {
	width: 100%;
	display: flex;
	position: relative;
	clip-path: inset(0 0 0 0);
	transition: .6s cubic-bezier(.61, 1, .88, 1);
	transform: translateZ(0);
}

.cdswerx-info-images .cdswerx-info-images__item .cdswerx-info-images__image {
	height: 100%;
	width: 100%;
}

/* Content: absolute, sits at translateX(100%) — to the RIGHT of the image.
   Clip-path on the parent item hides it. NO active transform change. */
.cdswerx-info-images .cdswerx-info-images__item .cdswerx-info-images__content {
	height: 100%;
	width: 100%;
	position: absolute;
	transition: 1s;
	transform: translateX(100%);
}

.cdswerx-info-images .cdswerx-info-images__item .cdswerx-info-images__content .cdswerx-info-images__content-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 10px;
	height: 100%;
	width: 100%;
}

.cdswerx-info-images .cdswerx-info-images__item .cdswerx-info-images__content .cdswerx-info-images__title {
	margin-top: 0;
}

/* --------------------------------------------------------------------------
   Last-item expansion trick (exact Qi mirror)
   -------------------------------------------------------------------------- */

.cdswerx-info-images .cdswerx-info-images__item:last-of-type {
	width: 200%;
	transform: translateX(50%);
}

.cdswerx-info-images .cdswerx-info-images__item:last-of-type .cdswerx-info-images__content {
	width: 50%;
}

.cdswerx-info-images .cdswerx-info-images__item:last-of-type::after {
	content: "";
	width: 100%;
	height: 100%;
}

/* --------------------------------------------------------------------------
   Active states (exact Qi mirror — NO content transform change)
   -------------------------------------------------------------------------- */

.cdswerx-info-images .cdswerx-info-images__item.cdswerx-info-images__item--active:not(:first-of-type) {
	clip-path: inset(0 -100% 0 0);
}

.cdswerx-info-images .cdswerx-info-images__item.cdswerx-info-images__item--active:first-of-type {
	clip-path: inset(0 -100% 0 0);
}

.cdswerx-info-images .cdswerx-info-images__item.cdswerx-info-images__item--active ~ .cdswerx-info-images__item:not(:last-of-type) {
	transform: translateX(100%);
}

.cdswerx-info-images .cdswerx-info-images__item.cdswerx-info-images__item--active:last-of-type {
	transform: translateX(0);
}

/* ==========================================================================
   Modifier additions (not in Qi — CDSWerx subtitle)
   ========================================================================== */

.cdswerx-info-images__subtitle {
	margin-top: 0;
}

/* ==========================================================================
   Image img — not in Qi source but needed for standalone widget
   (Qi inherits from its framework's global img styles)
   ========================================================================== */

.cdswerx-info-images .cdswerx-info-images__item .cdswerx-info-images__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   Tablet — ≤ 1024px (exact Qi mirror)
   Column layout, image 50% / content 50% side-by-side, NO animation.
   Note: Qi uses 3-level specificity (.items .item .child) at tablet.
   ========================================================================== */

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

	.cdswerx-info-images .cdswerx-info-images__items {
		flex-direction: column;
	}

	.cdswerx-info-images .cdswerx-info-images__items .cdswerx-info-images__item .cdswerx-info-images__image {
		width: 50%;
	}

	.cdswerx-info-images .cdswerx-info-images__items .cdswerx-info-images__item .cdswerx-info-images__content {
		width: 50%;
		right: 0;
		left: auto;
		transform: none;
	}

	.cdswerx-info-images .cdswerx-info-images__items .cdswerx-info-images__item:last-of-type {
		width: 100%;
		transform: none;
	}

	.cdswerx-info-images .cdswerx-info-images__items .cdswerx-info-images__item:last-of-type .cdswerx-info-images__content {
		width: 50%;
	}

	.cdswerx-info-images .cdswerx-info-images__items .cdswerx-info-images__item:last-of-type::after {
		display: none;
	}

	.cdswerx-info-images .cdswerx-info-images__items .cdswerx-info-images__item.cdswerx-info-images__item--active:not(:first-of-type) {
		clip-path: inset(0 0 0 0);
	}

	.cdswerx-info-images .cdswerx-info-images__items .cdswerx-info-images__item.cdswerx-info-images__item--active:first-of-type {
		clip-path: inset(0 0 0 0);
	}

	.cdswerx-info-images .cdswerx-info-images__items .cdswerx-info-images__item.cdswerx-info-images__item--active ~ .cdswerx-info-images__item:not(:last-of-type) {
		transform: none;
	}

	.cdswerx-info-images .cdswerx-info-images__items .cdswerx-info-images__item.cdswerx-info-images__item--active:last-of-type {
		transform: none;
	}
}

/* ==========================================================================
   Mobile — ≤ 680px (exact Qi mirror)
   Wrapped, stacked, content position:relative, NO animation
   ========================================================================== */

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

	.cdswerx-info-images .cdswerx-info-images__items {
		flex-wrap: wrap;
	}

	.cdswerx-info-images .cdswerx-info-images__items .cdswerx-info-images__item {
		flex-direction: column;
	}

	.cdswerx-info-images .cdswerx-info-images__items .cdswerx-info-images__item .cdswerx-info-images__image {
		width: 100%;
	}

	.cdswerx-info-images .cdswerx-info-images__items .cdswerx-info-images__item .cdswerx-info-images__content {
		position: relative;
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}

	.cdswerx-info-images .cdswerx-info-images__items .cdswerx-info-images__item .cdswerx-info-images__content .cdswerx-info-images__content-inner {
		padding-left: 0;
		padding-right: 0;
	}

	.cdswerx-info-images .cdswerx-info-images__items .cdswerx-info-images__item:last-of-type .cdswerx-info-images__content {
		width: 100%;
	}
}

/* =====================================================================
 * Subtitle Icon
 * =================================================================== */

.cdswerx-info-images__subtitle {
	display: inline-flex;
	align-items: center;
}

.cdswerx-info-images__subtitle-icon {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.cdswerx-info-images__subtitle-icon svg {
	display: block;
}

/* =====================================================================
 * List Marker Styles
 * =================================================================== */

/* Base list defaults — outside position with left indent so wrapped text aligns
   flush with the first line, not under the bullet. Resets browser margin.
   Users can override via the List Margin / List Padding Elementor controls. */
.cdswerx-info-images__text ul,
.cdswerx-info-images__text ol {
	margin: 0;
	padding: 0 0 0 1.5em;
	list-style-position: outside;
}

/* None mode — hide markers, keep ul/li tags */
.cdswerx-info-images__text--marker-none ul,
.cdswerx-info-images__text--marker-none ol {
	list-style: none;
}

/* Numbers marker view */
.cdswerx-info-images__text--marker-numbers ul,
.cdswerx-info-images__text--marker-numbers ol {
	list-style-type: decimal;
}

/* Bullets marker view — style controlled via Elementor selector */

/* Icon marker view — hide native markers, use flex for icon placement */
.cdswerx-info-images__text--marker-icon ul,
.cdswerx-info-images__text--marker-icon ol {
	list-style-type: none;
	padding-left: 0;
}

.cdswerx-info-images__text--marker-icon li {
	display: flex;
	align-items: baseline;
}

.cdswerx-info-images__list-marker {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	line-height: 1;
}

.cdswerx-info-images__list-marker svg {
	display: block;
}

/* List Style Position — Inside: bullets/markers flush-left with surrounding text */
.cdswerx-info-images__text--list-inside ul,
.cdswerx-info-images__text--list-inside ol {
	list-style-position: inside;
	padding-left: 0;
}

/* List Hover Underline — animated underline on li a hover */
.cdswerx-info-images__text--list-underline li a {
	background-image: linear-gradient(transparent calc(100% - 1px), currentColor 1px);
	background-size: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.55s cubic-bezier(0.32, 0.32, 0.15, 1.17);
	text-decoration: none;
}

.cdswerx-info-images__text--list-underline li a:hover {
	background-size: 100% 100%;
}

/* =====================================================================
 * Title Link (when link_mode = title or both)
 * ===================================================================== */
.cdswerx-info-images__title-link {
	text-decoration: none;
	color: inherit;
}

.cdswerx-info-images__title-link:hover {
	color: inherit;
	text-decoration: none;
}