/*
 * Imatge sagnada al caixó d'una secció Divi. L'alçada la marca el text.
 *
 * A la secció: classe seccio-imatge-bleed.
 * La fila és text + imatge. La imatge queda a la dreta i surt fins al caire.
 * Afegeix imatge-esquerra a la secció per pintar imatge + text.
 *
 * Les columnes queden a mitges, sense gutter. L'espai entre el text i la foto
 * és --bleed-espai, el mateix que el gutter de Divi d'aquella web.
 * Només a partir de 981px, i només a la web pública. Al visor de Divi
 * les columnes es queden normals perquè s'hi pugui canviar la foto.
 *
 * Grups de 2+ seccions consecutives: seccio-imatge-bleed.js les iguala a la més alta.
 */

@media (min-width: 981px) {
	body:not(.et-fb) .et_pb_gutters1 .seccio-imatge-bleed { --bleed-espai: 0%; }
	body:not(.et-fb) .et_pb_gutters2 .seccio-imatge-bleed { --bleed-espai: 3%; }
	body:not(.et-fb) .et_pb_gutters3 .seccio-imatge-bleed { --bleed-espai: 5.5%; }
	body:not(.et-fb) .et_pb_gutters4 .seccio-imatge-bleed { --bleed-espai: 8%; }

	body:not(.et-fb) .seccio-imatge-bleed {
		--bleed-espai: 5.5%;
		position: relative;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	body:not(.et-fb) .seccio-imatge-bleed > .et_pb_row {
		display: flex !important;
		flex-wrap: nowrap;
		align-items: stretch;
		position: static;
		/* Omple l'espai de la secció sense reheretar el min-height (evita sumar paddings 2 cops). */
		flex: 1 1 auto;
		width: 100%;
	}

	body:not(.et-fb) .seccio-imatge-bleed > .et_pb_row > .et_pb_column {
		position: static;
		float: none !important;
		width: 50% !important;
		max-width: 50% !important;
		flex: 0 0 50% !important;
		margin-right: 0 !important;
		margin-left: 0 !important;
	}

	/* Columna de text: centrada verticalment quan la secció creix. */
	body:not(.et-fb) .seccio-imatge-bleed > .et_pb_row > .et_pb_column:first-child {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-right: var(--bleed-espai);
	}

	/* Caixó a 50%: Divi posa width:100% al mòdul i ignora right si width no és auto. */
	body:not(.et-fb) .seccio-imatge-bleed .et_pb_image {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;
		right: auto;
		margin: 0;
		width: 50% !important;
		max-width: none !important;
		height: 100% !important;
	}

	body:not(.et-fb) .seccio-imatge-bleed .et_pb_image .et_pb_image_wrap {
		position: absolute;
		inset: 0;
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		overflow: hidden;
		border-radius: 0;
	}

	body:not(.et-fb) .seccio-imatge-bleed .et_pb_image img {
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		object-fit: cover !important;
		object-position: center;
		border-radius: 0;
	}

	body:not(.et-fb) .seccio-imatge-bleed.imatge-esquerra > .et_pb_row > .et_pb_column:first-child {
		margin-left: auto !important;
		padding-right: 0;
		padding-left: var(--bleed-espai);
	}

	body:not(.et-fb) .seccio-imatge-bleed.imatge-esquerra > .et_pb_row > .et_pb_column:last-child {
		width: 0 !important;
		max-width: 0 !important;
		flex: 0 0 0% !important;
		height: 0;
		margin: 0 !important;
		padding: 0;
		overflow: visible;
	}

	body:not(.et-fb) .seccio-imatge-bleed.imatge-esquerra .et_pb_image {
		left: 0;
		right: auto;
		width: 50% !important;
	}
}