/**
 * Imagen + Texto — [img_text_row].
 * Por defecto las columnas quedan lado a lado también en móvil (como la versión
 * anterior); con "Apilar" pasan a una debajo de la otra.
 */

.szit {
	display: flex;
	flex-direction: row;
	align-items: var( --szit-valign, center );
	gap: var( --szit-gap, 20px );
	box-sizing: border-box;
	width: 100%;
}

.szit--image-left {
	flex-direction: row-reverse;
}

/* flex-shrink 1: los anchos (%) se reducen en proporción para dejar lugar al
   espacio entre columnas. Antes 65% + 35% + espacio se desbordaba. */
.szit__text {
	flex: 0 1 var( --szit-text-w, 65% );
	min-width: 0;
	box-sizing: border-box;
	padding: var( --szit-pad, 15px );
	background: var( --szit-text-bg, transparent );
	color: var( --szit-color, #333 );
	font-size: var( --szit-size, 16px );
	font-weight: var( --szit-weight, 400 );
	line-height: var( --szit-lh, 1.5 );
	text-align: var( --szit-align, left );
}

.szit__text > :last-child {
	margin-bottom: 0;
}

.szit__image {
	display: flex;
	flex: 0 1 var( --szit-img-w, 35% );
	align-items: center;
	justify-content: var( --szit-img-align, center );
	min-width: 0;
	box-sizing: border-box;
	padding: var( --szit-pad, 15px );
	background: var( --szit-img-bg, transparent );
}

.szit__image picture {
	display: block;
	width: var( --szit-img-size, 100% );
}

.szit__image img {
	display: block;
	width: var( --szit-img-size, 100% );
	height: auto;
}

.szit__image picture img {
	width: 100%;
}

/* Apilar en tablet y móvil (≤1024px) */
@media ( max-width: 1024px ) {
	.szit--stack-tablet {
		flex-direction: column;
		align-items: stretch;
	}

	.szit--stack-tablet .szit__text,
	.szit--stack-tablet .szit__image {
		flex: none;
		width: 100%;
	}

	.szit--stack-tablet.szit--image-first .szit__image {
		order: -1;
	}

	.szit--stack-tablet .szit__image {
		justify-content: var( --szit-img-align-m, center );
	}
}

@media ( max-width: 767px ) {
	.szit {
		gap: var( --szit-gap-m, 10px );
	}

	.szit__text,
	.szit__image {
		padding: var( --szit-pad-m, 8px );
	}

	.szit__image {
		justify-content: var( --szit-img-align-m, center );
	}

	/* Apilar solo en móvil (≤767px) */
	.szit--stack-mobile {
		flex-direction: column;
		align-items: stretch;
	}

	.szit--stack-mobile .szit__text,
	.szit--stack-mobile .szit__image {
		flex: none;
		width: 100%;
	}

	.szit--stack-mobile.szit--image-first .szit__image {
		order: -1;
	}
}