/*
 * Mobile refinements for the To Be Home "Chi siamo" page.
 * The stylesheet is enqueued only on the page whose slug is "chi-siamo".
 */

@media (max-width: 767.98px) {
	/*
	 * Normalize Elementor's mobile section spacing without changing desktop.
	 * This also prevents nested flex containers from overflowing horizontally.
	 */
	.elementor {
		overflow-x: clip;
	}

	.elementor > .e-con.e-parent {
		--padding-top: clamp(36px, 10vw, 52px) !important;
		--padding-right: 25px !important;
		--padding-bottom: clamp(36px, 10vw, 52px) !important;
		--padding-left: 25px !important;
		--gap: 28px !important;
		margin-block: 0 !important;
	}

	.elementor > .e-con.e-parent > .e-con-inner {
		flex-direction: column !important;
		align-items: stretch !important;
		row-gap: 28px !important;
	}

	/*
	 * Some sections retain their desktop flex direction and percentage widths
	 * on phones. That leaves an empty column beside a text column only a few
	 * characters wide. Make each nested content container a full-width row.
	 */
	.elementor > .e-con.e-parent.e-flex,
	.elementor > .e-con.e-parent .e-con.e-flex {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.elementor .e-con.e-child {
		--width: 100% !important;
		--flex-grow: 0 !important;
		--flex-shrink: 0 !important;
		--gap: 18px !important;
		flex: 0 0 auto !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}

	.elementor .elementor-widget {
		--width: 100% !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		align-self: stretch !important;
	}

	.elementor .elementor-widget-container {
		width: 100%;
		max-width: 100%;
	}

	/*
	 * Verified on the rendered page: this text widget retained 200px of
	 * padding on each side at a 500px viewport, leaving only 45px for text.
	 */
	.elementor .elementor-element-623c6c3d {
		--padding-left: 0px !important;
		--padding-right: 0px !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		margin-inline: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		padding-inline: 0 !important;
	}

	.elementor .elementor-element-623c6c3d > .elementor-widget-container,
	.elementor .elementor-element-623c6c3d p {
		width: 100% !important;
		max-width: none !important;
	}

	.elementor .elementor-element-623c6c3d p {
		text-align: left !important;
		white-space: normal !important;
		word-break: normal !important;
		overflow-wrap: normal !important;
	}

	/* Compatibility with sections created with Elementor's legacy columns. */
	.elementor .elementor-section .elementor-container {
		flex-wrap: wrap !important;
	}

	.elementor .elementor-section .elementor-column {
		width: 100% !important;
		max-width: 100% !important;
	}

	/*
	 * Elementor Grid containers need their own mobile override: flex rules do
	 * not affect them. Collapse every grid to one fluid column and make each
	 * item span that column.
	 */
	.elementor .e-con.e-grid,
	.elementor .e-con.e-grid > .e-con-inner,
	.elementor .e-grid {
		--grid-columns: 1 !important;
		grid-template-columns: minmax(0, 1fr) !important;
		grid-template-areas: none !important;
		grid-auto-flow: row !important;
		grid-auto-columns: minmax(0, 1fr) !important;
		column-gap: 0 !important;
		row-gap: 24px !important;
	}

	.elementor .e-con.e-grid > .e-con-inner > *,
	.elementor .e-con.e-grid > *,
	.elementor .e-grid > * {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		grid-column: 1 / -1 !important;
		justify-self: stretch !important;
	}

	/*
	 * First "Chi siamo" block: force a clean single-column flow and replace
	 * the desktop-height image panel with a proportionate mobile height.
	 */
	.elementor .elementor-element-4d83e67b {
		--min-height: 0 !important;
		--gap: 24px !important;
		min-height: 0 !important;
	}

	.elementor .elementor-element-4d83e67b > .e-con-inner {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 24px !important;
	}

	.elementor .elementor-element-4d83e67b > .e-con-inner > .e-con {
		width: 100% !important;
		max-width: 100% !important;
	}

	.elementor .elementor-element-1415f81a {
		--min-height: clamp(280px, 92vw, 380px) !important;
		width: 100% !important;
		min-height: clamp(280px, 92vw, 380px) !important;
		height: auto !important;
		background-position: center !important;
		background-size: cover !important;
	}

	.elementor img,
	.elementor video,
	.elementor iframe {
		max-width: 100%;
	}

	.elementor img {
		height: auto;
	}

	.elementor h1,
	.elementor h2,
	.elementor h3,
	.elementor h4,
	.elementor p {
		overflow-wrap: break-word;
		word-break: normal;
	}

	.elementor h1 {
		font-size: clamp(28px, 8vw, 38px);
		line-height: 1.12;
	}

	.elementor h2 {
		font-size: clamp(25px, 7vw, 34px);
		line-height: 1.16;
	}

	.elementor h3 {
		font-size: clamp(21px, 5.5vw, 28px);
		line-height: 1.22;
	}

	.elementor-widget-text-editor .elementor-widget-container > :first-child,
	.elementor-widget-heading .elementor-widget-container > :first-child {
		margin-top: 0;
	}

	.elementor-widget-text-editor .elementor-widget-container > :last-child,
	.elementor-widget-heading .elementor-widget-container > :last-child {
		margin-bottom: 0;
	}
}

@media (max-width: 479.98px) {
	.elementor > .e-con.e-parent {
		--padding-top: 36px !important;
		--padding-right: 25px !important;
		--padding-bottom: 36px !important;
		--padding-left: 25px !important;
		--gap: 24px !important;
	}

	.elementor > .e-con.e-parent > .e-con-inner {
		row-gap: 24px !important;
	}
}

/*
 * Tablets: prevent the full-screen calculation from creating an excessively
 * tall hero while preserving the desktop composition.
 */
@media (min-width: 768px) and (max-width: 991.98px) {
	.top-banner-wrap.top-banner-wrap-fullscreen {
		height: 440px !important;
		min-height: 440px !important;
	}

	.top-banner-wrap .banner-inner.houzez-parallax {
		height: 440px !important;
		min-height: 440px !important;
		background-position: center !important;
		background-attachment: scroll !important;
	}
}