/**
 * Layout horizontal para [zz_blog_masonry zz_estructura="horizontal" layout="classic" ...]
 *
 * Imagen a la izquierda, texto a la derecha, 50%/50%, ambas columnas
 * estiradas a la misma altura (align-items: stretch) — la imagen rellena
 * recortando con object-fit: cover en vez de dejar hueco. Texto alineado
 * arriba con 30px de aire respecto a la imagen. Se "desconecta" por debajo
 * de 768px (mismo punto de corte que usa The7 en su propio grid), volviendo
 * al esquema vertical nativo del tema (imagen con su alto natural otra vez).
 *
 * Solo se activa dentro de .zz-structure-horizontal, que el shortcode añade
 * únicamente cuando zz_estructura="horizontal" y layout="classic".
 */

.zz-structure-horizontal article {
	display: flex !important;
	flex-direction: row !important;
	align-items: stretch;
}

.zz-structure-horizontal article .post-thumbnail-wrap,
.zz-structure-horizontal article .post-entry-content {
	width: 50% !important;
}

/*
 * La fila se estira (align-items: stretch) para que post-thumbnail-wrap y
 * post-entry-content siempre midan lo mismo de alto -sin esto, la columna
 * de la imagen se quedaba con su altura natural (la de su aspect-ratio) y
 * dejaba un hueco de 2-3px debajo antes de llegar al borde de la tarjeta,
 * mientras que el texto (con fondo propio) sí llenaba el hueco entero.
 *
 * Estirar la CAJA de post-entry-content no afecta al texto de dentro: sigue
 * empezando arriba con su margin-top de 30px, el espacio sobrante de abajo
 * queda vacío (parte del fondo de la tarjeta, invisible).
 *
 * Para la imagen sí hace falta algo más: al forzarle una altura que ya no
 * es la de su aspect-ratio original, hay que decirle que rellene recortando
 * (object-fit: cover) en vez de deformarse o dejar hueco. Se propaga
 * height:100% por toda la cadena de envoltorios porque los <div> no heredan
 * la altura de su padre por defecto.
 */
.zz-structure-horizontal article .post-thumbnail-wrap {
	flex-shrink: 0;
	height: 100%;
}

.zz-structure-horizontal .post-thumbnail-wrap .post-thumbnail,
.zz-structure-horizontal .post-thumbnail-wrap .post-thumbnail-rollover {
	height: 100%;
}

.zz-structure-horizontal .post-thumbnail-wrap img {
	height: 100% !important;
	object-fit: cover;
}

.zz-structure-horizontal article .post-entry-content {
	margin-top: 30px;
}

/*
 * Caso límite: zz_estructura="horizontal" combinado con zz_sin_imagen="y".
 * Sin imagen, tpl-layout.php no imprime post-thumbnail-wrap en absoluto (no
 * es que esté oculta, es que no existe en el DOM), así que post-entry-content
 * queda como único hijo de <article>. Sin esta regla se quedaría forzado al
 * 50% de ancho con un hueco vacío al lado; :only-child lo detecta sin JS y
 * le devuelve el 100%.
 */
.zz-structure-horizontal article .post-entry-content:only-child {
	width: 100% !important;
	margin-top: 0;
}

@media (max-width: 767px) {
	.zz-structure-horizontal article {
		display: block !important;
	}

	.zz-structure-horizontal article .post-thumbnail-wrap,
	.zz-structure-horizontal article .post-entry-content {
		width: 100% !important;
	}

	.zz-structure-horizontal article .post-entry-content {
		margin-top: 0;
	}

	/* Sin fila horizontal, la imagen vuelve a su alto natural (aspect-ratio
	   del tema), en vez de quedarse forzada al 100% de una altura que aquí
	   ya no aplica. */
	.zz-structure-horizontal article .post-thumbnail-wrap {
		height: auto;
	}

	.zz-structure-horizontal .post-thumbnail-wrap .post-thumbnail,
	.zz-structure-horizontal .post-thumbnail-wrap .post-thumbnail-rollover {
		height: auto;
	}

	.zz-structure-horizontal .post-thumbnail-wrap img {
		height: auto !important;
		object-fit: initial;
	}
}