/**
 * Al Bader AC System - AC Services Page Section.
 *
 * Widget: widgets/class-ab-ac-services-page-widget.php
 * All colours / fonts come from the global tokens in ab-global.css, so
 * WP Admin > Theme Design controls this section too.
 *
 * @package Albader_Child
 */

.ab-acsv-wrap {
	--ab-acsv-accent: var(--ab-primary);
	--ab-acsv-accent-dark: var(--ab-primary-dark);
	/* Highlight-card accent + CTA follow the brand red, not a second colour. */
	--ab-acsv-card-accent: var(--ab-primary);
	--ab-acsv-cta-bg: var(--ab-primary);
	--ab-acsv-cta-bg-hover: var(--ab-primary-dark);
	--ab-acsv-card-radius: 14px;
	--ab-acsv-gap: 18px;
	--ab-acsv-cols: 4;
	--ab-acsv-sticky-top: 145px;

	/* Square-ish buttons in this section (global default is the 50px pill). */
	--ab-btn-radius: 8px;

	padding: 70px 0;
	font-family: var(--ab-font-body);
	color: var(--ab-text);
	/* "overflow: hidden" here would silently kill position:sticky on the
	   highlight card. "overflow-x: clip" still prevents sideways scroll but
	   does NOT create a scroll container, so sticky keeps working. */
	overflow-x: clip;
}

/* Astra/Elementor set overflow-x:hidden on html/body, which also kills
   sticky for everything inside. "clip" prevents sideways scroll the same
   way without creating a scroll container. Scoped with :has() so it only
   applies on pages that actually render a sticky card. */
html:has(.ab-acsv-feature.is-sticky),
body:has(.ab-acsv-feature.is-sticky) {
	overflow-x: clip;
	overflow-y: visible;
}

/* Elementor wraps the widget; a clipped ancestor also breaks sticky. */
.elementor-widget-ab_ac_services_page,
.elementor-widget-ab_ac_services_page > .elementor-widget-container {
	overflow: visible;
}

.ab-acsv-wrap.ab-acsv-bg-white {
	background: var(--ab-white);
}

.ab-acsv-wrap.ab-acsv-bg-grey {
	background: var(--ab-bg-light);
}

.ab-acsv-wrap .ab-container {
	width: min(1440px, calc(100% - 76px));
	margin: auto;
}

.ab-acsv-wrap *,
.ab-acsv-wrap *::before,
.ab-acsv-wrap *::after {
	box-sizing: border-box;
}

.ab-acsv-wrap ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ab-acsv-wrap img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* =====================================================================
 * 1. HERO
 * ================================================================== */
.ab-acsv-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
	align-items: center;
	gap: 40px;
	margin-bottom: 46px;
}

.ab-acsv-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: var(--ab-fw-bold);
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--ab-acsv-accent);
}

.ab-acsv-eyebrow::before,
.ab-acsv-eyebrow::after {
	content: "";
	width: 34px;
	height: 2px;
	background: var(--ab-acsv-accent);
	flex: none;
}

.ab-acsv-title {
	margin: 0 0 18px;
	font-family: var(--ab-font-heading);
	font-size: clamp(30px, 3.1vw, 48px);
	font-weight: var(--ab-fw-extrabold);
	line-height: 1.15;
	letter-spacing: -0.5px;
	color: var(--ab-dark);
}

.ab-acsv-title span {
	color: var(--ab-acsv-accent);
}

.ab-acsv-sub {
	max-width: 560px;
	margin: 0 0 26px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--ab-text);
}

/* Trust badges */
.ab-acsv-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0;
}

.ab-acsv-badge {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	padding: 0 22px;
	border-left: 1px solid var(--ab-border);
}

.ab-acsv-badge:first-child {
	padding-left: 0;
	border-left: 0;
}

.ab-acsv-badge-ico {
	display: grid;
	place-items: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: var(--ab-radius-sm);
	background: var(--ab-primary-soft);
	color: var(--ab-acsv-accent);
	font-size: 15px;
}

.ab-acsv-badge-txt {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
	min-width: 0;
	overflow-wrap: anywhere;
}

.ab-acsv-badge-txt strong,
.ab-acsv-badge-txt em {
	font-style: normal;
	font-size: 13.5px;
	font-weight: var(--ab-fw-semibold);
	color: var(--ab-dark);
}

/* Hero media */
.ab-acsv-hero-media {
	position: relative;
	align-self: stretch;
}

/* Wrapper prefix beats Elementor's ".elementor img { border-radius: 0 }". */
.ab-acsv-wrap .ab-acsv-hero-img {
	width: 100%;
	height: 100%;
	min-height: 320px;
	object-fit: cover;
	border-radius: 28px 28px 28px 90px;
}

/* Floating "Need Expert Advice?" card */
.ab-acsv-advice {
	position: absolute;
	right: 22px;
	bottom: 22px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 380px;
	padding: 14px 18px;
	border-radius: var(--ab-acsv-card-radius);
	background: var(--ab-white);
	box-shadow: 0 10px 34px rgba(0, 0, 0, .14);
}

.ab-acsv-advice-ico {
	display: grid;
	place-items: center;
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--ab-acsv-accent);
	color: var(--ab-white);
	font-size: 17px;
}

.ab-acsv-advice-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.ab-acsv-advice-title {
	font-family: var(--ab-font-heading);
	font-size: 15px;
	font-weight: var(--ab-fw-bold);
	color: var(--ab-dark);
}

.ab-acsv-advice-text {
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--ab-text);
}

.ab-acsv-advice-arrow {
	display: grid;
	place-items: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--ab-border);
	color: var(--ab-dark);
	font-size: 12px;
	text-decoration: none;
	transition: background var(--ab-transition), color var(--ab-transition), border-color var(--ab-transition);
}

.ab-acsv-advice-arrow:hover {
	background: var(--ab-acsv-accent);
	border-color: var(--ab-acsv-accent);
	color: var(--ab-white);
}

/* =====================================================================
 * 2. MAIN: highlight card + services grid
 * ================================================================== */
.ab-acsv-main {
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 2fr);
	gap: 28px;
	align-items: start;
}

.ab-acsv-main--nofeature {
	grid-template-columns: minmax(0, 1fr);
}

/* ---------- Highlight card ----------
 * The grid item is the full-height column; the card inside it is what
 * sticks. Making the grid item itself sticky is unreliable, because its
 * containing block is the grid area rather than the column box.
 */
.ab-acsv-feature-col {
	align-self: stretch;
	height: 100%;
	min-width: 0;
}

.ab-acsv-feature {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
	border-radius: 20px;
	background: linear-gradient(160deg, #f3f5f8 0%, #fafbfc 55%, var(--ab-white) 100%);
	/* Hugs its own content, and follows the grid while it scrolls. */
	height: fit-content;
}

.ab-acsv-feature.is-sticky {
	position: sticky;
	top: var(--ab-acsv-sticky-top, 145px);
}

.ab-acsv-feature-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: .22;
	pointer-events: none;
	/* Fades the photo out behind the text block, so any image stays
	   readable instead of fighting the copy. */
	-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .9) 45%, #000 100%);
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .9) 45%, #000 100%);
}

.ab-acsv-feature-body {
	position: relative;
	z-index: 1;
	padding: 30px 30px 26px;
}

.ab-acsv-feature-ico {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: 20px;
	border-radius: 50%;
	background: var(--ab-acsv-card-accent);
	color: var(--ab-white);
	font-size: 20px;
}

.ab-acsv-feature-title {
	margin: 0 0 12px;
	font-family: var(--ab-font-heading);
	font-size: clamp(24px, 2vw, 32px);
	font-weight: var(--ab-fw-extrabold);
	line-height: 1.2;
	color: var(--ab-dark);
}

.ab-acsv-feature-text {
	margin: 0 0 22px;
	max-width: 330px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ab-text);
}

.ab-acsv-feature-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 26px;
}

.ab-acsv-feature-list li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--ab-text);
}

.ab-acsv-feature-list i {
	display: grid;
	place-items: center;
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--ab-acsv-card-accent);
	color: var(--ab-white);
	font-size: 10px;
}

.ab-acsv-feature-btn {
	--ab-btn-padding: 10px 24px;
	margin-top: 18px;
}

/* Trust strip inside the highlight card */
.ab-acsv-feature-trust {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	width: 94%;
	margin: 0 auto 14px;
	padding: 12px;
	border-radius: var(--ab-acsv-card-radius);
	background: var(--ab-white);
	box-shadow: var(--ab-shadow);
}

.ab-acsv-feature-trust li {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 0 12px;
	border-left: 1px solid var(--ab-border);
}

.ab-acsv-feature-trust li:first-child {
	border-left: 0;
}

.ab-acsv-trust-ico {
	display: grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--ab-bg-light);
	color: var(--ab-dark);
	font-size: 14px;
}

.ab-acsv-trust-txt {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
	min-width: 0;
}

.ab-acsv-trust-txt strong,
.ab-acsv-trust-txt em {
	font-style: normal;
	font-size: 12.5px;
	font-weight: var(--ab-fw-semibold);
	color: var(--ab-dark);
}

/* ---------- Services grid ---------- */
.ab-acsv-grid-head {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 20px;
}

.ab-acsv-grid-title {
	margin: 0;
	font-family: var(--ab-font-heading);
	font-size: clamp(22px, 2vw, 30px);
	font-weight: var(--ab-fw-extrabold);
	line-height: 1.2;
	color: var(--ab-dark);
	white-space: nowrap;
}

.ab-acsv-grid-line {
	flex: 1 1 auto;
	height: 1px;
	background: var(--ab-border);
}

.ab-acsv-grid-note {
	margin: 0;
	flex: 0 1 auto;
	max-width: 340px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ab-muted);
	text-align: right;
}

.ab-acsv-grid {
	display: grid;
	grid-template-columns: repeat(var(--ab-acsv-cols, 4), minmax(0, 1fr));
	gap: var(--ab-acsv-gap);
}

/* Card */
.ab-acsv-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--ab-border);
	border-radius: var(--ab-acsv-card-radius);
	background: var(--ab-white);
	text-decoration: none !important;
	transition: transform var(--ab-transition), box-shadow var(--ab-transition), border-color var(--ab-transition);
}

/* Hover applies to every card, linked or not. */
.ab-acsv-card:hover {
	transform: translateY(-5px);
	border-color: var(--ab-acsv-accent);
	box-shadow: 0 16px 34px rgba(209, 13, 20, .14);
}

.ab-acsv-card-media {
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--ab-bg-light);
	overflow: hidden;
}

.ab-acsv-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.ab-acsv-card:hover .ab-acsv-card-media img {
	transform: scale(1.07);
}

/* Red wash over the photo on hover. */
.ab-acsv-card-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ab-acsv-accent);
	opacity: 0;
	transition: opacity var(--ab-transition);
}

.ab-acsv-card:hover .ab-acsv-card-media::after {
	opacity: .14;
}

.ab-acsv-card-foot {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px 14px;
	margin-top: -22px;
	position: relative;
	z-index: 1;
	background: var(--ab-white);
	border-radius: var(--ab-acsv-card-radius) var(--ab-acsv-card-radius) 0 0;
}

.ab-acsv-card-ico {
	display: grid;
	place-items: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--ab-primary-soft);
	color: var(--ab-acsv-accent);
	font-size: 14px;
}

.ab-acsv-card-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.ab-acsv-card-title {
	font-size: 13.5px;
	font-weight: var(--ab-fw-semibold);
	line-height: 1.35;
	color: var(--ab-dark);
	transition: color var(--ab-transition);
	/* Always reserve two lines so every card foot lines up, and clamp
	   anything longer instead of pushing the card taller. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.7em;
}

.ab-acsv-card:hover .ab-acsv-card-title {
	color: var(--ab-acsv-accent);
}

.ab-acsv-card-desc {
	font-size: 12px;
	line-height: 1.45;
	color: var(--ab-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ab-acsv-card-arrow {
	flex: none;
	margin-top: 9px;
	font-size: 11px;
	color: var(--ab-muted);
	transition: transform var(--ab-transition), color var(--ab-transition);
}

.ab-acsv-card:hover .ab-acsv-card-arrow {
	transform: translateX(3px);
	color: var(--ab-acsv-accent);
}

/* =====================================================================
 * 3. WHY CHOOSE BAR
 * ================================================================== */
.ab-acsv-bottom {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 26px;
	margin-top: 34px;
	padding: 18px 18px 18px 30px;
	border: 1px solid var(--ab-border);
	border-radius: 20px;
	background: var(--ab-white);
	box-shadow: var(--ab-shadow);
}

.ab-acsv-bottom-title {
	font-family: var(--ab-font-heading);
	font-size: clamp(19px, 1.5vw, 24px);
	font-weight: var(--ab-fw-extrabold);
	line-height: 1.25;
	color: var(--ab-dark);
	max-width: 200px;
}

.ab-acsv-bottom-title span {
	display: block;
	color: var(--ab-acsv-accent);
}

.ab-acsv-bottom-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
}

.ab-acsv-bottom-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 4px 22px;
	border-left: 1px solid var(--ab-border);
}

.ab-acsv-bottom-list li:first-child {
	border-left: 0;
}

.ab-acsv-bottom-ico {
	display: grid;
	place-items: center;
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--ab-bg-light);
	color: var(--ab-dark);
	font-size: 16px;
}

.ab-acsv-bottom-txt {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ab-acsv-bottom-txt strong {
	font-size: 14px;
	font-weight: var(--ab-fw-bold);
	color: var(--ab-dark);
	line-height: 1.3;
}

.ab-acsv-bottom-txt em {
	font-style: normal;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--ab-text);
}

/* CTA box */
.ab-acsv-bottom-cta {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 20px 22px;
	border-radius: var(--ab-acsv-card-radius);
	background: var(--ab-acsv-cta-bg);
	color: var(--ab-white) !important;
	text-decoration: none !important;
	transition: transform var(--ab-transition), box-shadow var(--ab-transition);
}

.ab-acsv-bottom-cta:hover {
	transform: translateY(-2px);
	background: var(--ab-acsv-cta-bg-hover);
	box-shadow: 0 12px 26px rgba(209, 13, 20, .3);
}

.ab-acsv-bottom-cta-txt {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.ab-acsv-bottom-cta-txt strong {
	font-family: var(--ab-font-heading);
	font-size: 19px;
	font-weight: var(--ab-fw-bold);
	line-height: 1.2;
}

.ab-acsv-bottom-cta-txt em {
	font-style: normal;
	font-size: 13px;
	opacity: .85;
}

.ab-acsv-bottom-cta-arrow {
	display: grid;
	place-items: center;
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--ab-white);
	color: var(--ab-acsv-cta-bg);
	font-size: 14px;
	transition: transform var(--ab-transition);
}

.ab-acsv-bottom-cta:hover .ab-acsv-bottom-cta-arrow {
	transform: translateX(3px);
}

/* =====================================================================
 * RESPONSIVE
 * ================================================================== */

/* Laptop */
@media (max-width: 1280px) {
	.ab-acsv-wrap .ab-container {
		width: calc(100% - 56px);
	}

	.ab-acsv-main {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr);
	}

	.ab-acsv-grid-note {
		display: none;
	}
}

/* Tablet landscape */
@media (max-width: 1100px) {
	.ab-acsv-wrap {
		--ab-acsv-cols: 3;
	}

	.ab-acsv-main {
		grid-template-columns: minmax(0, 1fr);
	}

	.ab-acsv-feature-col {
		height: auto;
	}

	/* "static" here would break the card's containing block and let the
	   absolutely-positioned background image escape and cover the whole
	   section. "relative" turns sticky off and keeps the anchor intact. */
	.ab-acsv-feature,
	.ab-acsv-feature.is-sticky {
		position: relative;
		top: auto;
		height: auto;
	}

	.ab-acsv-feature-text {
		max-width: none;
	}
}

/* Tablet portrait */
@media (max-width: 991px) {
	.ab-acsv-wrap {
		padding: 50px 0;
	}

	.ab-acsv-hero {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.ab-acsv-hero-img {
		min-height: 280px;
		border-radius: 20px;
	}

	.ab-acsv-advice {
		right: 16px;
		bottom: 16px;
		max-width: calc(100% - 32px);
	}

	.ab-acsv-bottom {
		grid-template-columns: minmax(0, 1fr);
		padding: 22px;
		gap: 20px;
	}

	.ab-acsv-bottom-title {
		max-width: none;
	}

	.ab-acsv-bottom-title span {
		display: inline;
	}

	.ab-acsv-bottom-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ab-acsv-bottom-cta {
		justify-content: space-between;
	}
}

/* Mobile: 2 service cards per row */
@media (max-width: 767px) {
	.ab-acsv-wrap {
		--ab-acsv-cols: 2;
		--ab-acsv-gap: 12px;
		padding: 40px 0;
	}

	.ab-acsv-wrap .ab-container {
		width: calc(100% - 36px);
	}

	.ab-acsv-hero {
		margin-bottom: 32px;
	}

	.ab-acsv-eyebrow::after {
		display: none;
	}

	.ab-acsv-sub {
		font-size: 15px;
	}

	/* Badges: 2 per row, no dividers, nothing bleeding into the next cell */
	.ab-acsv-badges {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px 10px;
		align-items: start;
	}

	.ab-acsv-badge,
	.ab-acsv-badge:first-child {
		padding: 0;
		border-left: 0;
		align-items: flex-start;
	}

	.ab-acsv-badge-ico {
		width: 34px;
		height: 34px;
		font-size: 14px;
	}

	.ab-acsv-badge-txt strong,
	.ab-acsv-badge-txt em {
		font-size: 12.5px;
	}

	.ab-acsv-hero-img {
		min-height: 230px;
	}

	/* Advice card moves under the image so it never covers the photo */
	.ab-acsv-advice {
		position: static;
		max-width: none;
		margin-top: 14px;
		box-shadow: 0 6px 20px rgba(0, 0, 0, .1);
	}

	.ab-acsv-feature-body {
		padding: 24px 20px 20px;
	}

	.ab-acsv-feature-trust {
		grid-template-columns: minmax(0, 1fr);
		width: calc(100% - 28px);
		margin: 0 auto 14px;
		gap: 12px;
		padding: 14px;
	}

	.ab-acsv-feature-trust li,
	.ab-acsv-feature-trust li:first-child {
		padding: 0;
		border-left: 0;
	}

	/* Grid heading stacks, line hidden */
	.ab-acsv-grid-head {
		gap: 12px;
		margin-bottom: 16px;
	}

	.ab-acsv-grid-title {
		font-size: 22px;
		white-space: normal;
	}

	.ab-acsv-card-media {
		aspect-ratio: 1 / 1;
	}

	.ab-acsv-card-foot {
		padding: 10px 10px 12px;
		gap: 8px;
		margin-top: -18px;
	}

	.ab-acsv-card-ico {
		width: 28px;
		height: 28px;
		font-size: 12px;
	}

	.ab-acsv-card-title {
		font-size: 12px;
		line-height: 1.3;
		min-height: 2.6em;
	}

	.ab-acsv-card-arrow {
		display: none;
	}

	/* Bottom bar stacks */
	.ab-acsv-bottom-list {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.ab-acsv-bottom-list li,
	.ab-acsv-bottom-list li:first-child {
		padding: 0;
		border-left: 0;
	}

	.ab-acsv-bottom-cta-txt strong {
		font-size: 17px;
	}
}

/* Small phones */
@media (max-width: 400px) {
	.ab-acsv-wrap {
		--ab-acsv-gap: 10px;
	}

	.ab-acsv-card-title {
		font-size: 11.5px;
	}

	.ab-acsv-badges {
		gap: 12px;
	}
}

/* Motion preference */
@media (prefers-reduced-motion: reduce) {
	.ab-acsv-wrap * {
		transition: none !important;
	}

	.ab-acsv-card:hover {
		transform: none;
	}

	.ab-acsv-card:hover .ab-acsv-card-media img {
		transform: none;
	}
}