/* =============================================================================
   Homepage hero + trust stats — mobile/tablet only
   Template: home-new-may-2026.php
   Desktop (≥1025px): unchanged — rules scoped to max-width media queries
   ============================================================================= */

/* ── Kill legacy new-home.css hero gaps (white band above slider) ── */
body.page-template-home-new-may-2026 .preveda-page-content .hero-slider {
	margin-top: 0 !important;
	background: transparent !important;
	border-radius: 0 !important;
	overflow: visible !important;
}

body.page-template-home-new-may-2026 .preveda-page-content {
	overflow-x: hidden;
}

body.page-template-home-new-may-2026 .hero-slider-wrap {
	margin-top: 0 !important;
	margin-bottom: 0;
	line-height: normal;
	background: #0c1c2e;
	overflow: hidden;
	width: 100%;
	max-width: 100%;
}

body.page-template-home-new-may-2026 .hero-slider {
	background: transparent !important;
	width: 100%;
	max-width: 100%;
}

/* ── Tablet + mobile ≤1024px ─────────────────────────────────────────────── */
@media (max-width: 1024px) {

	/* Stack header above hero (desktop overlay is absolute) */
	body.page-template-home-new-may-2026 .site-header {
		position: relative !important;
		top: auto;
		left: auto;
		right: auto;
		margin-top: 0 !important;
	}

	body.page-template-home-new-may-2026 .logo-box {
		background: #fff;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	/* Compact hero once header no longer overlays it */
	body.page-template-home-new-may-2026 .hero-slider-wrap {
		height: min(clamp(360px, calc(100vw * 0.72), 520px), 62vh) !important;
	}

	body.page-template-home-new-may-2026 .hero-slide__content,
	body.page-template-home-new-may-2026 .hero-slide--reverse .hero-slide__content {
		padding-top: 0 !important;
	}

	body.page-template-home-new-may-2026 .hero-slider,
	body.page-template-home-new-may-2026 .hero-slider .slick-list,
	body.page-template-home-new-may-2026 .hero-slider .slick-track,
	body.page-template-home-new-may-2026 .hero-slider .slick-slide,
	body.page-template-home-new-may-2026 .hero-slider .slick-slide > div,
	body.page-template-home-new-may-2026 .hero-slide {
		height: 100% !important;
		min-height: inherit;
	}

	body.page-template-home-new-may-2026 .hero-slide__img {
		object-fit: cover;
		object-position: center 30%;
	}

	/* Bottom overlay on tablet/mobile — left-aligned slide text */
	body.page-template-home-new-may-2026 .hero-slide:not(.hero-slide--reverse)::after {
		display: block !important;
		content: '';
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		background: linear-gradient(
			0deg,
			rgba(0, 0, 0, 0.76) 0%,
			rgba(0, 0, 0, 0.45) 42%,
			rgba(0, 0, 0, 0.12) 68%,
			transparent 85%
		) !important;
	}

	body.page-template-home-new-may-2026 .hero-slide--reverse::after {
		display: none !important;
	}

	body.page-template-home-new-may-2026 .hero-slide__content,
	body.page-template-home-new-may-2026 .hero-slide--reverse .hero-slide__content {
		position: absolute;
		left: 0 !important;
		right: 0 !important;
		top: auto !important;
		bottom: 0;
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 max(16px, env(safe-area-inset-right, 0)) 52px max(16px, env(safe-area-inset-left, 0)) !important;
		margin: 0;
		box-sizing: border-box;
		justify-content: flex-end !important;
		align-items: flex-start !important;
		text-align: left !important;
	}

	body.page-template-home-new-may-2026 .hero-slide__title {
		font-size: clamp(20px, 5.5vw, 28px);
		margin-bottom: 10px;
		max-width: 100%;
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	body.page-template-home-new-may-2026 .hero-slide__sub {
		display: block !important;
		font-size: clamp(12px, 3.2vw, 14px);
		margin-bottom: 14px;
		max-width: min(100%, 36em);
		line-height: 1.5;
		overflow-wrap: anywhere;
		word-break: break-word;
		white-space: normal;
	}

	body.page-template-home-new-may-2026 .hero-slide__actions {
		flex-direction: column;
		align-items: stretch !important;
		justify-content: flex-start !important;
		width: 100%;
		max-width: 100%;
		gap: 10px;
	}

	body.page-template-home-new-may-2026 .hero-btn {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		justify-content: center;
		min-height: 48px;
		padding: 12px 16px;
		white-space: normal;
		text-align: center;
	}

	body.page-template-home-new-may-2026 .hero-dots {
		bottom: 14px;
		z-index: 12;
	}

	/* Trust stats — 2×2 grid */
	body.page-template-home-new-may-2026 .trust-stats {
		padding: 0;
	}

	body.page-template-home-new-may-2026 .trust-stats > .wrapper.trust-stats__inner {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: auto auto;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		gap: 0;
		justify-content: stretch !important;
		flex-wrap: nowrap !important;
	}

	body.page-template-home-new-may-2026 .trust-stat {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		gap: 6px;
		flex: none !important;
		width: 100%;
		min-width: 0;
		min-height: 88px;
		padding: 14px 10px;
		box-sizing: border-box;
		border-right: 1px solid rgba(255, 255, 255, 0.1);
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	body.page-template-home-new-may-2026 .trust-stat:nth-child(2n) {
		border-right: none;
	}

	body.page-template-home-new-may-2026 .trust-stat:nth-child(n + 3) {
		border-bottom: none;
	}

	body.page-template-home-new-may-2026 .trust-stat__figure {
		justify-content: center;
	}

	body.page-template-home-new-may-2026 .trust-stat__num {
		font-size: clamp(20px, 5vw, 24px);
	}

	body.page-template-home-new-may-2026 .trust-stat__suffix {
		font-size: clamp(14px, 3.5vw, 17px);
	}

	body.page-template-home-new-may-2026 .trust-stat__label {
		font-size: 10px;
		line-height: 1.35;
		max-width: 100%;
		word-break: break-word;
	}

	body.page-template-home-new-may-2026 .trust-brands {
		padding-left: max(12px, env(safe-area-inset-left, 0));
		padding-right: max(12px, env(safe-area-inset-right, 0));
		box-sizing: border-box;
	}

	body.page-template-home-new-may-2026 .trust-brands__eyebrow {
		padding-left: 4px;
		padding-right: 4px;
	}
}

/* ── Phone ≤768px ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

	body.page-template-home-new-may-2026 .hero-slider-wrap {
		height: min(clamp(300px, calc(100vw * 0.85), 420px), 56vh) !important;
	}

	body.page-template-home-new-may-2026 .hero-slider,
	body.page-template-home-new-may-2026 .hero-slider .slick-list,
	body.page-template-home-new-may-2026 .hero-slider .slick-track,
	body.page-template-home-new-may-2026 .hero-slider .slick-slide,
	body.page-template-home-new-may-2026 .hero-slider .slick-slide > div,
	body.page-template-home-new-may-2026 .hero-slide {
		height: 100% !important;
		min-height: inherit;
	}

	body.page-template-home-new-may-2026 .hero-slide__label {
		font-size: 9px;
		margin-bottom: 10px;
	}

	body.page-template-home-new-may-2026 .hero-slide__content,
	body.page-template-home-new-may-2026 .hero-slide--reverse .hero-slide__content {
		padding-bottom: 48px !important;
	}
}

/* ── Small phones ≤480px ──────────────────────────────────────────────────── */
@media (max-width: 480px) {

	body.page-template-home-new-may-2026 .hero-slider-wrap {
		height: min(clamp(280px, calc(100vw * 0.9), 380px), 52vh) !important;
	}

	body.page-template-home-new-may-2026 .hero-slider,
	body.page-template-home-new-may-2026 .hero-slider .slick-list,
	body.page-template-home-new-may-2026 .hero-slider .slick-track,
	body.page-template-home-new-may-2026 .hero-slider .slick-slide,
	body.page-template-home-new-may-2026 .hero-slider .slick-slide > div,
	body.page-template-home-new-may-2026 .hero-slide {
		height: 100% !important;
		min-height: inherit;
	}

	body.page-template-home-new-may-2026 .trust-stat {
		min-height: 80px;
		padding: 12px 8px;
	}

	body.page-template-home-new-may-2026 .trust-stat__label {
		font-size: 9px;
		letter-spacing: 0.03em;
	}
}

/* ── Very small 320px ─────────────────────────────────────────────────────── */
@media (max-width: 360px) {
	body.page-template-home-new-may-2026 .hero-slide__title {
		font-size: 18px;
	}

	body.page-template-home-new-may-2026 .hero-btn {
		font-size: 11px;
		padding: 11px 12px;
	}
}