/**
 * Waqf child page (slug `waqf`). Loaded only where the marker class `ab-wq-`
 * appears in the content (inc/enqueue.php) — never site-wide. The hero widget
 * reuses the shared ab-sac-form component, so sponsoracause.css + sponsoracause.js
 * load alongside this file on this page and style the form.
 *
 * Values follow the Figma "Waqf CHILD" frame. Literal hexes are the design's exact
 * values where they sit between theme.json tokens; brand colours use the presets.
 */

/* Shared inner rail + heading atoms ---------------------------------------- */
.ab-wq-what__inner,
.ab-wq-diff__inner,
.ab-wq-equip__inner,
.ab-wq-story__inner,
.ab-wq-final__inner {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
}
.ab-wq-eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.875rem; font-weight: 500; line-height: 1;
	letter-spacing: 1.4px; text-transform: uppercase;
	color: var(--wp--preset--color--ab-blue);
}
.ab-wq-h2 {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.875rem, 1.3rem + 2vw, 2.625rem);
	line-height: 1.15; font-weight: 600; text-transform: capitalize;
	color: var(--wp--preset--color--ab-navy);
}
.ab-wq-sub {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1.125rem; font-weight: 400; line-height: 1.65; color: #52525b;
}

/* ==========================================================================
   1. Hero — cream panel with the Waqf widget + photo
   ========================================================================== */
.ab-wq-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
/* Panel + photo are direct wp-block-group children; zero the global block-gap
   margin so the photo does not drop inside its grid cell (see mg/sac heroes). */
.ab-wq-hero > * { margin-block: 0; }
.ab-wq-hero__panel {
	background: #f5f2ed;
	padding: clamp(3rem, 1.5rem + 6vw, 100px) clamp(20px, 4vw, 100px);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ab-wq-hero__col { width: 100%; max-width: 600px; display: flex; flex-direction: column; gap: 40px; }
.ab-wq-hero__text { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.ab-wq-hero__eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem; font-weight: 500; line-height: 1;
	letter-spacing: 1.4px; text-transform: uppercase; color: var(--wp--preset--color--ab-blue);
}
.ab-wq-hero__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4rem);
	line-height: 1.1; font-weight: 700; color: var(--wp--preset--color--ab-navy);
}
.ab-wq-hero__desc {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1.25rem; font-weight: 400; line-height: 1.55; color: #52525b;
}
.ab-wq-hero__photo { position: relative; background: var(--wp--preset--color--ab-navy); min-height: 100%; }
.ab-wq-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab-wq-hero__photo img[src=""] { display: none; }

/* ==========================================================================
   2. What Waqf is — two-column explainer + hadith band
   ========================================================================== */
.ab-wq-what { background: #fff; padding: clamp(3.5rem, 2rem + 6vw, 100px) clamp(20px, 5vw, 40px); border-bottom: 1px solid #e9e9e9; }
.ab-wq-what__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.ab-wq-what__head { display: flex; flex-direction: column; gap: 16px; }
.ab-wq-what__head .ab-wq-h2 { text-transform: none; }
.ab-wq-what__body { display: flex; flex-direction: column; gap: 1rem; }
.ab-wq-what__body p { margin: 0; font-family: var(--wp--preset--font-family--sans); font-size: 1rem; line-height: 1.7; color: #52525b; }
.ab-wq-hadith { margin: 40px 0 0; padding: 45px 35px; border-radius: 8px; background: var(--wp--preset--color--ab-green); }
.ab-wq-hadith__quote {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1.375rem; font-style: italic; font-weight: 400; line-height: 1.45; color: #fff;
}

/* ==========================================================================
   3. Know the difference — three comparison cards
   ========================================================================== */
.ab-wq-diff { background: #f5f2ed; padding: clamp(3.5rem, 2rem + 6vw, 100px) clamp(20px, 5vw, 40px); border-bottom: 1px solid #e9e9e9; }
.ab-wq-diff__head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 2.5rem; }
.ab-wq-h2--left { text-transform: none; }
.ab-wq-diff__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; align-items: stretch; }
.ab-wq-kind {
	display: flex; flex-direction: column; gap: 16px;
	padding: 35px 25px; border: 0.5px solid #e1e1e1; border-radius: 8px; background: #fff;
}
.ab-wq-kind__title { display: flex; flex-direction: column; gap: 6px; }
.ab-wq-kind__name { margin: 0; font-family: var(--wp--preset--font-family--serif); font-size: 1.375rem; font-weight: 400; text-transform: capitalize; color: #2c2c33; }
.ab-wq-kind__tag { margin: 0; font-family: var(--wp--preset--font-family--sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; color: #52525b; }
.ab-wq-kind__row { display: flex; flex-direction: column; gap: 6px; }
.ab-wq-kind__label { margin: 0; font-family: var(--wp--preset--font-family--sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; color: #52525b; }
.ab-wq-kind__text { margin: 0; font-family: var(--wp--preset--font-family--sans); font-size: 1rem; line-height: 1.45; color: #52525b; }
.ab-wq-kind__link { margin-top: auto; font-family: var(--wp--preset--font-family--sans); font-size: 1.0625rem; font-weight: 500; text-transform: capitalize; text-decoration: none; }
.ab-wq-kind__link--green { color: var(--wp--preset--color--ab-green); }
.ab-wq-kind__link--blue { color: var(--wp--preset--color--ab-blue); }
.ab-wq-kind__link:hover, .ab-wq-kind__link:focus-visible { text-decoration: underline; }

/* ==========================================================================
   4. Equipment selector — category cards + priced list + fallbacks
   ========================================================================== */
.ab-wq-equip { background: #fff; padding: clamp(3.5rem, 2rem + 6vw, 100px) clamp(20px, 5vw, 40px); border-bottom: 1px solid #e9e9e9; scroll-margin-top: 90px; }
.ab-wq-equip__head { display: flex; flex-direction: column; align-items: center; gap: 1rem; max-width: 800px; margin: 0 auto 3.125rem; text-align: center; }
.ab-wq-equip__assurance { margin: 0; font-family: var(--wp--preset--font-family--sans); font-size: 1.1875rem; font-weight: 500; color: var(--wp--preset--color--ab-green); }

.ab-wq-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 2.5rem; }
.ab-wq-cat {
	display: flex; flex-direction: column; gap: 30px;
	padding: 35px; border: 0.6px solid #a1a1aa; border-radius: 16px; background: #fff;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.03);
}
.ab-wq-cat--featured { background: #f1fffb; border: 1px solid var(--wp--preset--color--ab-green); }
.ab-wq-cat__count { font-family: var(--wp--preset--font-family--sans); font-size: 0.75rem; font-weight: 500; text-transform: uppercase; color: #a1a1aa; }
.ab-wq-cat--featured .ab-wq-cat__count { color: var(--wp--preset--color--ab-green); }
.ab-wq-cat__name { margin: 0; font-family: var(--wp--preset--font-family--sans); font-size: 1.5rem; font-weight: 500; line-height: 1.25; color: #333; }
.ab-wq-cat__from { margin: 0; font-family: var(--wp--preset--font-family--sans); font-size: 0.9375rem; color: #52525b; }

.ab-wq-list { margin: 0 0 2.5rem; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; }
.ab-wq-item {
	display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 20px;
	padding: 25px; border: 0.6px solid #d4d4d8; border-radius: 8px;
}
.ab-wq-item__amount { font-family: var(--wp--preset--font-family--sans); font-size: 1.5rem; font-weight: 500; letter-spacing: 1.4px; text-align: center; color: var(--wp--preset--color--ab-blue); }
.ab-wq-item__details { display: flex; flex-direction: column; gap: 10px; padding-left: 40px; }
.ab-wq-item__name { margin: 0; font-family: var(--wp--preset--font-family--sans); font-size: 1.125rem; font-weight: 500; letter-spacing: 1.4px; text-transform: capitalize; color: #52525b; }
.ab-wq-item__text { margin: 0; font-family: var(--wp--preset--font-family--sans); font-size: 0.9375rem; line-height: 1.5; color: #52525b; }
.ab-wq-item__link { justify-self: end; white-space: nowrap; font-family: var(--wp--preset--font-family--sans); font-size: 0.9375rem; font-weight: 500; text-transform: capitalize; color: var(--wp--preset--color--ab-green); text-decoration: none; }
.ab-wq-item__link:hover, .ab-wq-item__link:focus-visible { text-decoration: underline; }

.ab-wq-more { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.ab-wq-more__card { display: flex; flex-direction: column; gap: 20px; padding: 40px 35px; border-radius: 8px; }
.ab-wq-more__card--green { background: var(--wp--preset--color--ab-green); }
.ab-wq-more__card--cream { background: #faf7f4; border: 1px solid #d4d4d8; }
.ab-wq-more__title { margin: 0; text-align: center; font-family: var(--wp--preset--font-family--sans); font-size: 1.5rem; font-weight: 500; letter-spacing: 0.4px; color: #fff; }
.ab-wq-more__title--dark { color: #2c2c33; }
.ab-wq-more__text { margin: 0; flex: 1; font-family: var(--wp--preset--font-family--sans); font-size: 1.125rem; line-height: 1.5; color: #fff; }
.ab-wq-more__text--muted { color: #52525b; }
.ab-wq-more__btn {
	align-self: flex-start; display: inline-flex; align-items: center; justify-content: center;
	padding: 12px 30px; border-radius: 4px; border: 1.5px solid transparent;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem; font-weight: 500; letter-spacing: 0.4px; text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.ab-wq-more__btn--white { background: #fff; color: var(--wp--preset--color--ab-green); }
.ab-wq-more__btn--white:hover, .ab-wq-more__btn--white:focus-visible { background: #eef6f3; }
.ab-wq-more__btn--outline { background: transparent; color: var(--wp--preset--color--ab-blue); border-color: var(--wp--preset--color--ab-blue); }
.ab-wq-more__btn--outline:hover, .ab-wq-more__btn--outline:focus-visible { background: var(--wp--preset--color--ab-blue); color: #fff; }

/* ==========================================================================
   5. Dedicate your Waqf — image + copy
   ========================================================================== */
.ab-wq-story { background: #fff; padding: clamp(3.5rem, 2rem + 6vw, 100px) clamp(20px, 5vw, 40px); border-bottom: 1px solid #e9e9e9; }
.ab-wq-story__grid { display: grid; grid-template-columns: 560fr 600fr; gap: 40px; align-items: center; }
.ab-wq-story__media { border-radius: 8px; overflow: hidden; background: var(--wp--preset--color--ab-line); aspect-ratio: 560 / 330; }
.ab-wq-story__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ab-wq-story__media img[src=""] { display: none; }
.ab-wq-story__body { display: flex; flex-direction: column; gap: 35px; }
.ab-wq-story__head { display: flex; flex-direction: column; gap: 16px; }
.ab-wq-story__h2 { margin: 0; font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.875rem, 1.3rem + 2vw, 2.625rem); line-height: 1.15; font-weight: 400; letter-spacing: -0.5px; color: var(--wp--preset--color--ab-navy); }
.ab-wq-story__text { display: flex; flex-direction: column; gap: 1rem; }
.ab-wq-story__text p { margin: 0; font-family: var(--wp--preset--font-family--sans); font-size: 1rem; line-height: 1.7; color: #52525b; }
.ab-wq-story__btn {
	align-self: flex-start; display: inline-flex; align-items: center; justify-content: center;
	padding: 12px 30px; border-radius: 4px;
	background: var(--wp--preset--color--ab-green); color: #fff;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem; font-weight: 500; letter-spacing: 0.4px; text-decoration: none;
	transition: background-color 0.15s ease;
}
.ab-wq-story__btn:hover, .ab-wq-story__btn:focus-visible { background: #0c5b4d; }

/* ==========================================================================
   6. Final CTA — peach band
   ========================================================================== */
.ab-wq-final { background: #fef3e6; padding: clamp(3rem, 2rem + 4vw, 90px) clamp(20px, 5vw, 40px); }
.ab-wq-final__inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.ab-wq-final__eyebrow { margin: 0; font-family: var(--wp--preset--font-family--sans); font-size: 0.875rem; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; color: var(--wp--preset--color--ab-blue); }
.ab-wq-final__h2 { margin: 0.75rem 0 0; font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.875rem, 1.3rem + 2vw, 2.625rem); line-height: 1.2; font-weight: 400; text-transform: capitalize; color: var(--wp--preset--color--ab-navy); }
.ab-wq-final__text { margin: 0; max-width: 70ch; font-family: var(--wp--preset--font-family--sans); font-size: 1.125rem; line-height: 1.5; color: #52525b; }
.ab-wq-final__btn {
	display: inline-flex; align-items: center; justify-content: center; margin-top: 0.5rem;
	padding: 12px 30px; border-radius: 4px;
	background: var(--wp--preset--color--ab-orange); color: #fff;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem; font-weight: 500; letter-spacing: 0.4px; text-decoration: none;
	transition: background-color 0.15s ease;
}
.ab-wq-final__btn:hover, .ab-wq-final__btn:focus-visible { background: var(--wp--preset--color--ab-orange-600); }
.ab-wq-final__links { display: flex; flex-wrap: wrap; gap: 30px; align-items: center; justify-content: center; margin-top: 0.25rem; }
.ab-wq-final__link { font-family: var(--wp--preset--font-family--sans); font-size: 0.9375rem; font-weight: 500; text-transform: capitalize; text-decoration: none; }
.ab-wq-final__link--green { color: var(--wp--preset--color--ab-green); }
.ab-wq-final__link--blue { color: var(--wp--preset--color--ab-blue); }
.ab-wq-final__link:hover, .ab-wq-final__link:focus-visible { text-decoration: underline; }
.ab-wq-final__note { margin: 0.5rem 0 0; font-family: var(--wp--preset--font-family--sans); font-size: 0.8125rem; font-style: italic; font-weight: 300; color: #52525b; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
	.ab-wq-hero { grid-template-columns: 1fr; }
	.ab-wq-hero__photo { min-height: 320px; order: -1; }
	.ab-wq-what__cols { grid-template-columns: 1fr; gap: 20px; }
	.ab-wq-diff__grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
	.ab-wq-cats { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
	.ab-wq-more { grid-template-columns: 1fr; }
	.ab-wq-story__grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
	.ab-wq-item { grid-template-columns: 1fr; gap: 6px; }
	.ab-wq-item__amount { text-align: left; }
	.ab-wq-item__details { padding-left: 0; }
	.ab-wq-item__link { justify-self: start; margin-top: 6px; }
}
@media (max-width: 560px) {
	.ab-wq-hero__desc { font-size: 1.125rem; }
	.ab-wq-final__links { flex-direction: column; gap: 12px; }
}