/*
 * Imatge sagnada al caixó d'una secció Divi 4.
 *
 * A la secció: classe seccio-imatge-bleed.
 * Opcional: imatge-esquerra (text a la dreta). L’ordre de columnes al builder
 * pot ser text+imatge o imatge+text; el CSS mira on és .et_pb_image.
 *
 * La fila conserva l’amplada Divi (p. ex. 80% / max 1080); no s’estira al max-width.
 * Només ≥981px i web pública (fora del Visual Builder).
 */

@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;
		align-items: center;
	}

	body:not(.et-fb) .seccio-imatge-bleed > .et_pb_row {
		display: flex !important;
		flex-wrap: nowrap;
		align-items: stretch;
		position: static;
		flex: 1 1 auto;
		align-self: center;
		gap: 0 !important;
		column-gap: 0 !important;
		row-gap: 0 !important;
	}

	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;
		min-width: 0;
		margin-right: 0 !important;
		margin-left: 0 !important;
	}

	body:not(.et-fb) .seccio-imatge-bleed > .et_pb_row > .et_pb_column:not(:has(.et_pb_image)) {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-right: var(--bleed-espai);
	}

	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:has(.et_pb_image) {
		order: -1;
	}

	body:not(.et-fb) .seccio-imatge-bleed.imatge-esquerra > .et_pb_row > .et_pb_column:not(:has(.et_pb_image)) {
		padding-right: 0;
		padding-left: var(--bleed-espai);
	}

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