/**
 * Tablet and phone layout fixes for The Cocktail Clinic.
 *
 * Elementor’s tablet breakpoint on this site is max-width: 1024px.
 * These rules stay inside that range (and the phone range, max-width: 767px)
 * so a 1440px laptop keeps the current desktop layout.
 */

/* Phone: Elementor locks some widgets (the homepage and about video) at 460px,
   which is wider than a 390px screen and scrolls the page sideways. */
@media (max-width: 767px) {
	.elementor-widget.elementor-widget__width-initial,
	.elementor-widget.elementor-widget-mobile__width-initial {
		width: min(100%, var(--container-widget-width, 100%)) !important;
		max-width: 100% !important;
	}

	.elementor-widget-image img,
	.elementor-widget-video .elementor-wrapper,
	.elementor-widget-video video {
		max-width: 100%;
	}

	body {
		overflow-x: clip;
	}
}

/* iPad portrait and iPad Pro portrait: the homepage service row is four
   25% columns, and the label under each name is set to 8px. Two columns
   and a readable label. Titles stay at Elementor’s tablet size. */
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-155 .elementor-top-section .elementor-col-25,
	.elementor-337 .elementor-top-section .elementor-col-25 {
		width: 50% !important;
	}

	.elementor-155 .elementor-icon-box-description,
	.elementor-337 .elementor-icon-box-description {
		font-size: 13px !important;
		letter-spacing: 1px !important;
		line-height: 1.4em !important;
	}
}

/* Service and treatment rows: tablet CSS shifts the photo with a large
   negative background-position, so the picture sits outside the image column.
   Recenter it. Leave each row’s own background-size (cover or contain) alone. */
@media (max-width: 1024px) {
	.elementor-inner-section > .elementor-container > .elementor-column.elementor-col-33 > .elementor-widget-wrap {
		background-position: center center !important;
	}
}

/* Portrait tablets, including iPad (768), iPad 10th (820) and iPad Air (834).
   The treatment row is image ~220px, text ~360px, button ~175px, which
   crushes the copy and the button. Stack the three columns.
   1024px and 1440px keep the three-column row. */
@media (min-width: 768px) and (max-width: 900px) {
	.elementor-inner-section > .elementor-container {
		flex-wrap: wrap;
	}

	.elementor-inner-section > .elementor-container > .elementor-column.elementor-col-33 {
		width: 100% !important;
	}

	.elementor-inner-section > .elementor-container > .elementor-column.elementor-col-33:first-child,
	.elementor-inner-section > .elementor-container > .elementor-column.elementor-col-33:first-child > .elementor-widget-wrap {
		min-height: 260px;
	}

	/* One Thai services row forces a 334px spacer at the tablet breakpoint
	   and opens a hole under that card. The spacer is only that tall below
	   1025px, so the laptop height is unchanged. */
	.elementor-element-3249f12f > .elementor-widget-container > .elementor-spacer > .elementor-spacer-inner,
	.elementor-element-3249f12f .elementor-spacer-inner {
		height: 260px !important;
	}

	/* A few service pages (HIFU, nose surgery) are wider than an 834px
	   screen because a widget width is locked in pixels. */
	.elementor-widget.elementor-widget__width-initial,
	.elementor-widget.elementor-widget-tablet__width-initial {
		width: min(100%, var(--container-widget-width, 100%)) !important;
		max-width: 100% !important;
	}

	/* Individual service pages keep a 50/50 image-and-text row from 768px
	   up. On a portrait iPad each half is about 350–400px, so the photo and
	   the copy are cramped and a wide image can spill past the screen.
	   Phone already stacks these. The homepage and contact pages are not
	   in this list, and 1440px is outside this query. */
	body.page-id-93 .elementor-top-column.elementor-col-50,
	body.page-id-95 .elementor-top-column.elementor-col-50,
	body.page-id-360 .elementor-top-column.elementor-col-50,
	body.page-id-353 .elementor-top-column.elementor-col-50,
	body.page-id-571 .elementor-top-column.elementor-col-50,
	body.page-id-617 .elementor-top-column.elementor-col-50,
	body.page-id-694 .elementor-top-column.elementor-col-50,
	body.page-id-720 .elementor-top-column.elementor-col-50,
	body.page-id-735 .elementor-top-column.elementor-col-50,
	body.page-id-745 .elementor-top-column.elementor-col-50,
	body.page-id-862 .elementor-top-column.elementor-col-50,
	body.page-id-892 .elementor-top-column.elementor-col-50,
	body.page-id-905 .elementor-top-column.elementor-col-50,
	body.page-id-913 .elementor-top-column.elementor-col-50,
	body.page-id-918 .elementor-top-column.elementor-col-50,
	body.page-id-921 .elementor-top-column.elementor-col-50,
	body.page-id-924 .elementor-top-column.elementor-col-50,
	body.page-id-931 .elementor-top-column.elementor-col-50,
	body.page-id-934 .elementor-top-column.elementor-col-50,
	body.page-id-937 .elementor-top-column.elementor-col-50,
	body.page-id-941 .elementor-top-column.elementor-col-50,
	body.page-id-966 .elementor-top-column.elementor-col-50,
	body.page-id-986 .elementor-top-column.elementor-col-50,
	body.page-id-997 .elementor-top-column.elementor-col-50,
	body.page-id-1012 .elementor-top-column.elementor-col-50,
	body.page-id-1027 .elementor-top-column.elementor-col-50,
	body.page-id-1040 .elementor-top-column.elementor-col-50,
	body.page-id-1057 .elementor-top-column.elementor-col-50,
	body.page-id-1093 .elementor-top-column.elementor-col-50,
	body.page-id-1142 .elementor-top-column.elementor-col-50,
	body.page-id-1147 .elementor-top-column.elementor-col-50,
	body.page-id-1162 .elementor-top-column.elementor-col-50 {
		width: 100% !important;
		min-width: 0;
	}

	/* Three-up cards on the som-filler, mi-PRP and nose-package pages.
	   The footer uses the same column class, so it is left as it is. */
	body.page-id-571 .elementor-top-section:not(.elementor-element-3ac63c1) > .elementor-container > .elementor-column.elementor-col-33,
	body.page-id-617 .elementor-top-section:not(.elementor-element-3ac63c1) > .elementor-container > .elementor-column.elementor-col-33,
	body.page-id-937 .elementor-top-section:not(.elementor-element-3ac63c1) > .elementor-container > .elementor-column.elementor-col-33,
	body.page-id-941 .elementor-top-section:not(.elementor-element-3ac63c1) > .elementor-container > .elementor-column.elementor-col-33,
	body.page-id-1093 .elementor-top-section:not(.elementor-element-3ac63c1) > .elementor-container > .elementor-column.elementor-col-33,
	body.page-id-1142 .elementor-top-section:not(.elementor-element-3ac63c1) > .elementor-container > .elementor-column.elementor-col-33 {
		width: 100% !important;
	}

	body.page-id-918 .elementor-widget-image img,
	body.page-id-997 .elementor-widget-image img,
	body.page-id-1147 .elementor-widget-image img,
	body.page-id-1162 .elementor-widget-image img,
	body.page-id-694 .elementor-widget-image img,
	body.page-id-720 .elementor-widget-image img {
		max-width: 100%;
		height: auto;
	}
}