/**
 * Image Box widget — front-end & editor styles.
 *
 * The layout is a single flex container (.idcw-image-box). The image position
 * (top / left / right) is driven by the `idcw-position-*` prefix class that
 * Elementor adds to the widget wrapper from the "Image Position" control.
 *
 * @package ImageDetailCarouselWidget
 */

.idcw-image-box {
	display: flex;
	/* `gap` is set by the "Spacing" control; this is a sensible fallback. */
	gap: 20px;
}

/* ---- Image cell ---- */
.idcw-image {
	display: inline-flex;
	flex-shrink: 0;
	line-height: 0; /* removes the inline-image whitespace gap */
}

.idcw-image img {
	display: block;
	max-width: 100%;
	height: auto;
	/* Width / radius / filters / etc. are applied by the Style controls. */
}

/* ---- Content cell ---- */
.idcw-content {
	flex: 1 1 auto;
	min-width: 0; /* allows long words to wrap inside a flex item */
}

.idcw-title {
	margin: 0 0 10px;
}

.idcw-title a {
	text-decoration: none;
}

.idcw-description {
	margin: 0;
}

/* =====================================================================
 * Layout positions
 * ===================================================================== */

/* Image on top: stack vertically. Alignment follows the text-align control. */
.elementor-widget.idcw-position-top .idcw-image-box {
	flex-direction: column;
}

.elementor-widget.idcw-position-top.idcw-text-align-center .idcw-image-box {
	align-items: center;
}

.elementor-widget.idcw-position-top.idcw-text-align-left .idcw-image-box {
	align-items: flex-start;
}

.elementor-widget.idcw-position-top.idcw-text-align-right .idcw-image-box {
	align-items: flex-end;
}

/* Image on the left: row, image first. */
.elementor-widget.idcw-position-left .idcw-image-box {
	flex-direction: row;
}

/* Image on the right: row, image last. */
.elementor-widget.idcw-position-right .idcw-image-box {
	flex-direction: row-reverse;
}