/*
 * Verified responsive corrections for To Be Home public pages.
 * Every rule targets an exact Elementor element observed in the rendered DOM.
 */

.tbh-mobile-header-image {
	display: none;
}

@media (max-width: 767.98px) {
	/*
	 * Shared mobile typography: keep content at least 25px from both viewport
	 * edges and align all editorial copy to the left.
	 * Buttons, inputs and form labels are intentionally excluded.
	 */
	#main-wrap .elementor > .e-con.e-parent {
		--padding-right: 25px !important;
		--padding-left: 25px !important;
		padding-right: 25px !important;
		padding-left: 25px !important;
		box-sizing: border-box;
	}

	#main-wrap .elementor > .elementor-section > .elementor-container,
	#main-wrap .top-banner-wrap .banner-caption,
	.footer-wrap .container,
	.footer-wrap .container-fluid {
		padding-right: 25px !important;
		padding-left: 25px !important;
		box-sizing: border-box;
	}

	#main-wrap :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption),
	#main-wrap .elementor-widget-text-editor,
	#main-wrap .elementor-icon-box-content,
	.footer-wrap :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption) {
		text-align: left !important;
		text-align-last: left !important;
	}

	/*
	 * "Comprare casa" and "Vendere casa": three Houzez price tables were
	 * nested inside the middle third of an additional three-column wrapper.
	 * Remove the empty side columns and stack the actual cards.
	 */
	.elementor .elementor-element-098c862 {
		--width: 100% !important;
		display: flex !important;
		flex: 0 0 auto !important;
		flex-direction: column !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		padding: 30px 25px !important;
	}

	.elementor .elementor-element-098c862 > .elementor-element-7072228,
	.elementor .elementor-element-098c862 > .elementor-element-5680f5f {
		display: none !important;
	}

	.elementor .elementor-element-098c862 > .elementor-element-58e6fcb,
	.elementor .elementor-element-9f4c889,
	.elementor .elementor-element-aebf96c,
	.elementor .elementor-element-3cdc61c,
	.elementor .elementor-element-696c508,
	.elementor .elementor-element-c3137c9,
	.elementor .elementor-element-039d4ad,
	.elementor .elementor-element-d112fcd,
	.elementor .elementor-element-c3137c9 > .elementor-widget-container,
	.elementor .elementor-element-039d4ad > .elementor-widget-container,
	.elementor .elementor-element-d112fcd > .elementor-widget-container {
		--width: 100% !important;
		flex: 0 0 auto !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}

	.elementor .elementor-element-098c862 > .elementor-element-58e6fcb,
	.elementor .elementor-element-9f4c889,
	.elementor .elementor-element-aebf96c,
	.elementor .elementor-element-3cdc61c,
	.elementor .elementor-element-696c508 {
		padding: 0 !important;
	}

	.elementor .elementor-element-9f4c889 {
		display: flex !important;
		flex-direction: column !important;
		gap: 24px !important;
	}

	/*
	 * "Costruttori & Cantieri": the three service boxes retained a desktop
	 * row and became 98px wide. Stack them as full-width cards.
	 */
	.elementor .elementor-element-685d7fa {
		--width: 100% !important;
		display: flex !important;
		flex: 0 0 auto !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 24px !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		padding: 30px 25px !important;
	}

	.elementor .elementor-element-685d7fa > .elementor-element-d870237,
	.elementor .elementor-element-685d7fa > .elementor-element-7668066,
	.elementor .elementor-element-685d7fa > .elementor-element-10c7b0a,
	.elementor .elementor-element-c0fe344,
	.elementor .elementor-element-6292774,
	.elementor .elementor-element-54059e3,
	.elementor .elementor-element-c0fe344 .elementor-icon-box-wrapper,
	.elementor .elementor-element-6292774 .elementor-icon-box-wrapper,
	.elementor .elementor-element-54059e3 .elementor-icon-box-wrapper,
	.elementor .elementor-element-c0fe344 .elementor-icon-box-content,
	.elementor .elementor-element-6292774 .elementor-icon-box-content,
	.elementor .elementor-element-54059e3 .elementor-icon-box-content {
		--width: 100% !important;
		flex: 0 0 auto !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}

	.elementor .elementor-element-685d7fa > .elementor-element-d870237,
	.elementor .elementor-element-685d7fa > .elementor-element-7668066,
	.elementor .elementor-element-685d7fa > .elementor-element-10c7b0a {
		padding: 0 !important;
	}

	/*
	 * Home search builder: the visible label, Google autocomplete and location
	 * button exceeded their field by 36px. Overlay the label on the input and
	 * reserve a fixed column for the location button.
	 */
	.elementor .elementor-element-7c3ceab {
		width: 100% !important;
		max-width: 100% !important;
	}

	.elementor .elementor-element-7c3ceab .elementor-field-group-904f17b {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) 46px !important;
		grid-template-rows: 42px !important;
		align-items: center !important;
		column-gap: 6px !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		padding: 0 !important;
	}

	.elementor .elementor-element-7c3ceab .elementor-field-group-904f17b > .elementor-field-label {
		z-index: 2;
		grid-column: 1 !important;
		grid-row: 1 !important;
		width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 12px !important;
		overflow: hidden !important;
		text-overflow: ellipsis;
		white-space: nowrap !important;
		pointer-events: none;
	}

	.elementor .elementor-element-7c3ceab .elementor-field-group-904f17b > .hz-place-autocomplete-wrap {
		grid-column: 1 !important;
		grid-row: 1 !important;
		width: 100% !important;
		min-width: 0 !important;
	}

	.elementor .elementor-element-7c3ceab .elementor-field-group-904f17b gmp-place-autocomplete {
		display: block;
		width: 100% !important;
		min-width: 0 !important;
	}

	.elementor .elementor-element-7c3ceab .elementor-field-group-904f17b > .location-trigger {
		grid-column: 2 !important;
		grid-row: 1 !important;
		width: 46px !important;
		margin: 1px 0 !important;
	}

	/*
	 * "Chi siamo": make the 1440 × 960 photograph a real first row. The
	 * advantages remain in the green content row below instead of overlaying it.
	 */
	.page-id-18063 .elementor-element-2f5b491a {
		background-color: #6d7b70 !important;
		background-image: none !important;
	}

	.page-id-18063 .elementor-element-2f5b491a::before {
		content: "";
		position: relative !important;
		inset: auto !important;
		display: block !important;
		flex: 0 0 auto !important;
		order: -1;
		align-self: stretch;
		opacity: 1 !important;
		width: 100%;
		aspect-ratio: 3 / 2;
		background-color: #6d7b70;
		background-image: url("https://tobehome.touchinthebox.it/wp-content/uploads/2020/02/slider2-1.jpg");
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
	}

	/*
	 * "Vendere casa" and "Comprare casa": the 1440 × 960 photograph belonged
	 * to the lower text panel. Render it as the first flex item and leave both
	 * text widgets in their normal flow below the image.
	 */
	.page-id-20208 .elementor-element-gqw4w83no,
	.page-id-20218 .elementor-element-gqw4w83no {
		background-color: #171514 !important;
		background-image: none !important;
	}

	.page-id-20208 .elementor-element-ud19wbbhs,
	.page-id-20218 .elementor-element-ud19wbbhs {
		--gap: 28px !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		background-color: #171514 !important;
		background-image: none !important;
	}

	.page-id-20208 .elementor-element-ud19wbbhs::before,
	.page-id-20218 .elementor-element-ud19wbbhs::before {
		content: "";
		position: relative !important;
		inset: auto !important;
		display: block !important;
		flex: 0 0 auto !important;
		order: -1;
		align-self: stretch;
		opacity: 1 !important;
		width: 100%;
		aspect-ratio: 3 / 2;
		background-color: #171514;
		background-image: url("https://tobehome.touchinthebox.it/wp-content/uploads/2020/02/slider1.jpg");
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
	}

	/*
	 * Every Houzez image header: JavaScript creates a dedicated image row with
	 * the source aspect ratio. Captions and search forms then follow below it.
	 */
	.top-banner-wrap.tbh-mobile-header-ready {
		height: auto !important;
		min-height: 0 !important;
		overflow: visible !important;
	}

	.top-banner-wrap .banner-inner.tbh-mobile-header-stacked,
	.top-banner-wrap .banner-inner.houzez-parallax.tbh-mobile-header-stacked {
		position: relative !important;
		display: block !important;
		aspect-ratio: auto !important;
		height: auto !important;
		min-height: 0 !important;
		padding: 0 !important;
		background-color: var(--tbh-header-panel-bg, #ffffff) !important;
		background-image: none !important;
		background-attachment: scroll !important;
	}

	.top-banner-wrap .banner-inner.tbh-mobile-header-stacked::before {
		display: none !important;
	}

	.top-banner-wrap .banner-inner.tbh-mobile-header-stacked > .tbh-mobile-header-image {
		position: relative !important;
		inset: auto !important;
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		min-height: 1px;
		flex: 0 0 auto !important;
		background-color: var(--tbh-header-image-bg, #ffffff);
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
	}

	.top-banner-wrap .banner-inner.tbh-mobile-header-stacked > .align-self-center {
		position: relative !important;
		display: block !important;
		flex: 0 0 auto !important;
		align-self: auto !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
	}

	.top-banner-wrap .banner-inner.tbh-mobile-header-stacked .banner-caption {
		position: relative !important;
		inset: auto !important;
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 28px 25px 36px !important;
		transform: none !important;
		background-color: var(--tbh-header-panel-bg, #ffffff) !important;
		color: var(--tbh-header-text-color, #111111) !important;
		text-align: left !important;
	}

	.top-banner-wrap .banner-inner.tbh-mobile-header-stacked .banner-title {
		margin: 0 !important;
		color: var(--tbh-header-text-color, #111111) !important;
		font-size: clamp(28px, 7vw, 36px) !important;
		line-height: 1.15 !important;
		text-align: left !important;
	}

	.top-banner-wrap .banner-inner.tbh-mobile-header-stacked .banner-subtitle {
		margin: 12px 0 22px !important;
		color: var(--tbh-header-text-color, #111111) !important;
		font-size: clamp(17px, 4.5vw, 20px) !important;
		line-height: 1.4 !important;
		text-align: left !important;
	}

	/*
	 * "Costruttori & Cantieri": the empty image container had 500px of bottom
	 * padding and painted the 1170 × 786 photo at its natural width. Give the
	 * container the photo's true ratio and fit the whole image inside it.
	 */
	.page-id-20185 .elementor-element-0f705fe {
		--min-height: 0px !important;
		--padding-top: 0px !important;
		--padding-right: 0px !important;
		--padding-bottom: 0px !important;
		--padding-left: 0px !important;
		aspect-ratio: 1170 / 786 !important;
		height: auto !important;
		min-height: 0 !important;
		padding: 0 !important;
		background-color: #f8f8f8 !important;
		background-position: center center !important;
		background-repeat: no-repeat !important;
		background-size: contain !important;
	}
}