/**
 * Responsive fixes for the Elementor pages.
 *
 * The pages were built at desktop width with values pinned in pixels and no
 * mobile counterparts, so they applied at every screen size. This corrects them
 * in CSS rather than by editing the pages, so nothing here is lost when the
 * pages are edited in Elementor — and deleting this file reverts all of it.
 *
 * Elementor's own breakpoints are used: 767px (mobile) and 1024px (tablet).
 * Section 3 lists specific element ids; those ids repeat across pages because
 * the pages were duplicated from each other, so they are matched without a page
 * prefix and fix every copy at once.
 */

/* ==========================================================================
   1. Nothing may be wider than the screen
   ========================================================================== */

@media (max-width: 767px) {
	/* Several widgets are pinned to 600px or 700px via
	   `width: var(--container-widget-width, 700px)`. A max-width cap reins
	   those in without disturbing widgets that were already fluid. */
	.elementor-element.elementor-widget {
		max-width: 100% !important;
	}

	/* Containers sized to a fraction of the row (60%, 65%, 20%) keep that
	   fraction on phones unless released, leaving slivers side by side.
	   Elementor already wraps the rows at this width. */
	.elementor-element.e-con {
		--width: 100%;
	}

	/* Guard against anything still overflowing horizontally. */
	.elementor-section,
	.elementor-container,
	.e-con,
	.e-con-inner {
		max-width: 100%;
	}
}

/* ==========================================================================
   2. Buttons
   ========================================================================== */

@media (max-width: 767px) {
	/* Several buttons carry 85px of padding on each side, which leaves no room
	   for the label on a phone. Clamp horizontal padding while keeping the
	   vertical padding and pill radius intact. */
	.elementor-widget-button .elementor-button {
		padding-inline: clamp(20px, 6vw, 48px) !important;
	}

	/* Buttons sitting in their own narrow container read better full width. */
	.elementor-widget-button .elementor-button {
		max-width: 100%;
	}
}

/* ==========================================================================
   3. Fixed line-heights that overlap when text wraps
   ========================================================================== */

/*
 * These headings set a line-height in pixels that is smaller than their own
 * font size, so as soon as the text wraps — which it always does on a phone —
 * the lines sit on top of each other.
 *
 * max() keeps the designed value as a floor and only intervenes when the font
 * is larger than the line box:
 *   a369029 / 0995c96 / 6465367 / 8e4606c  20px  (Home, Join Us cards)
 *   62fc4e3 / 9a27775                      35px  (Members, Contact headings)
 */

@media (max-width: 1024px) {
	.elementor-element-a369029 .elementor-heading-title,
	.elementor-element-0995c96 .elementor-heading-title,
	.elementor-element-6465367 .elementor-heading-title,
	.elementor-element-8e4606c .elementor-heading-title {
		line-height: max(1.3em, 20px) !important;
	}

	.elementor-element-62fc4e3 .elementor-heading-title,
	.elementor-element-9a27775 .elementor-heading-title {
		line-height: max(1.3em, 35px) !important;
	}
}

/* ==========================================================================
   4. Negative margins that pull elements over their neighbours
   ========================================================================== */

@media (max-width: 767px) {
	/* Cards pulled 40px up over the image above them. That overlap is the
	   intended desktop effect; on a phone the image is short enough that the
	   card lands on top of it. */
	.elementor-element-b419e00,
	.elementor-element-edd6887,
	.elementor-element-90ff9a7,
	.elementor-element-ef2bc63 {
		--margin-top: 0px;
	}

	/* Hero panel inset by -10px on every side. */
	.elementor-element-a8b9370 {
		--margin-top: 0px;
		--margin-bottom: 0px;
		--margin-left: 0px;
		--margin-right: 0px;
	}

	/* Hero intro text pulled -29px on every side, over the heading above it. */
	.elementor-element-e636516 {
		margin: 0 0 var(--kit-widget-spacing, 0px) 0 !important;
	}
}

/* ==========================================================================
   5. Tall fixed heights
   ========================================================================== */

@media (max-width: 767px) {
	/* 600px of forced height is most of a phone screen, and this one has no
	   tablet or mobile override to soften it. (The home page hero does have a
	   tablet value that cascades down, so it is deliberately left alone.) */
	.elementor-element-f2b9264 {
		--min-height: 60vh;
	}
}

/* ==========================================================================
   6. Background images
   ========================================================================== */

/* The parent theme sets background-attachment: fixed, which iOS Safari does not
   support — the image jumps or crops oddly while scrolling. */
@media (max-width: 1024px) {
	.hostinger-ai-background-image,
	.hostinger-ai-hero-for-online-store-2 {
		background-attachment: scroll;
	}
}