/*
 * Bloques de descripción de producto — frontend.
 *
 * Layout de dos columnas real con flexbox (no floats): la imagen y el texto
 * quedan alineados verticalmente sin importar cuál de los dos sea más alto,
 * y en móvil se apilan en columna con la imagen siempre arriba.
 *
 * La separación ENTRE bloques se hace con margin sobre cada bloque, nunca con
 * `gap` en el contenedor: el CSS personalizado del sitio (Personalizar → CSS
 * adicional) fuerza `display: block !important` sobre todo `div` hijo directo
 * del panel de pestañas de WooCommerce, y `.bapb-blocks` es justamente eso —
 * al perder `display:flex`, cualquier `gap` que se le ponga acá quedaría sin
 * efecto (los bloques aparecían pegados uno al otro). `.bapb-block` es un
 * <section>, así que esa regla no lo alcanza y sus márgenes sí se respetan.
 */

.bapb-blocks {
	margin: 32px 0;
}

/* Cuando el producto además tiene descripción general escrita, WooCommerce la
   imprime justo antes (ver BAPB_Product_Blocks_Render::render_description_tab).
   Sin este margen extra, el primer bloque queda pegado a ese texto. El sitio
   fuerza `margin: 0` sobre los div hijos del panel de pestañas, de ahí el
   padding-top en vez de un margin-top. */
.woocommerce-Tabs-panel > .bapb-blocks {
	padding-top: 8px;
}

.bapb-block {
	display: flex;
	align-items: center;
	gap: 48px;
}

.bapb-block + .bapb-block {
	margin-top: 72px;
}

.bapb-block__media {
	flex: 1 1 50%;
	min-width: 0;
}

.bapb-block__image {
	display: block;
	width: 100%;
	height: auto;
}

.bapb-block__body {
	flex: 1 1 50%;
	min-width: 0;
}

/* font-weight explícito: GeneratePress define `h3 { font-weight: normal }`
   (assets/css/main.css:252-257), así que sin esto el título del bloque se
   veía igual de fino que el texto y no se distinguía como encabezado. */
.bapb-block__title {
	margin: 0 0 16px;
	font-size: 1.5em;
	font-weight: 600;
	line-height: 1.3;
	color: #1a1a1a;
}

.bapb-block__text {
	line-height: 1.7;
}

.bapb-block__text p {
	margin: 0 0 1em;
}

.bapb-block__text p:last-child {
	margin-bottom: 0;
}

/* Texto a la izquierda, imagen a la derecha: mismo HTML, orden invertido. */
.bapb-block--image_right .bapb-block__media {
	order: 2;
}

.bapb-block--image_right .bapb-block__body {
	order: 1;
}

/* Bloques de ancho completo: una sola columna, sin dividir el espacio. */
.bapb-block--text_only .bapb-block__body,
.bapb-block--image_only .bapb-block__media {
	flex-basis: 100%;
}

.bapb-block--text_only {
	max-width: 900px;
}

/* Imagen centrada en su tamaño original: no se estira al ancho del contenedor,
   solo se reduce si no cabe. Pensado para imágenes verticales, donde estirar a
   todo el ancho las vuelve desproporcionadamente altas.

   El ancho real del archivo lo pone el PHP como estilo inline sobre
   .bapb-block__media (ver BAPB_Product_Blocks_Render::render_block), y la
   imagen sigue con `width: 100%` como el resto de los diseños. Deliberado:
   `width: auto` sobre la imagen NO sirve acá. WordPress 6.7 agrega `sizes="auto"`
   a las imágenes con carga diferida, y con ese valor el navegador recalcula el
   "tamaño natural" de la imagen en función del espacio que ocupa en pantalla —
   `width: auto` terminaba devolviendo el ancho del contenedor en vez del ancho
   del archivo, y la imagen se veía estirada igual que en el diseño de ancho
   completo. Topando el contenedor no hay ninguna circularidad posible. */
.bapb-block--image_centered {
	justify-content: center;
}

/* `width: 100%` acá + `max-width: {ancho real}px` inline desde el PHP: el ancho
   usado queda en el menor de los dos, así la imagen nunca se estira más allá de
   su tamaño real ni se sale de la pantalla en móvil.
   `min-width: 0` neutraliza el `min-width: auto` que traen por defecto los
   elementos de un contenedor flex o grid, que impide encogerse por debajo del
   contenido — es lo que dejaba que una imagen más ancha que la pantalla
   arrastrara el ancho de toda la página. */
.bapb-block--image_centered .bapb-block__media {
	flex: 0 1 auto;
	width: 100%;
	min-width: 0;
	margin-left: auto;
	margin-right: auto;
}

@media screen and (max-width: 768px) {
	.bapb-block {
		flex-direction: column;
		gap: 20px;
	}

	/* Separación entre bloques: en móvil todo va apilado en una sola columna,
	   así que sin un margen amplio el texto de un bloque queda pegado a la
	   imagen del siguiente y no se distingue dónde termina cada uno. */
	.bapb-block + .bapb-block {
		margin-top: 56px;
	}

	/* En columna, flex-basis pasa a aplicar sobre la altura: sin esto, el 50%
	   aplastaría la imagen y el texto en vez de dejarlos a su alto natural. */
	.bapb-block__media,
	.bapb-block__body {
		flex: 0 0 auto;
		width: 100%;
	}

	/* En móvil la imagen siempre va arriba, sin importar el diseño elegido. */
	.bapb-block--image_right .bapb-block__media {
		order: 1;
	}

	.bapb-block--image_right .bapb-block__body {
		order: 2;
	}
}