/**
 * Monthly Giving child page (slug `monthly-giving`). Loaded only where the
 * marker class `ab-mg-` appears (inc/enqueue.php) — never site-wide. The hero's
 * donation widget reuses the shared `ab-giv-` form components (getinvolved.css +
 * getinvolved.js), so those load alongside this file on this page.
 *
 * Values follow the Figma "Monthly Giving CHILD" frame. Literal hexes are the
 * design's exact values where they sit between theme.json tokens; brand colours
 * use the theme presets.
 */

/* Shared inner rail + heading atoms ---------------------------------------- */
.ab-mg-hero__inner,
.ab-mg-why__inner,
.ab-mg-impact__inner,
.ab-mg-sadaqah__inner,
.ab-mg-story__inner,
.ab-mg-voices__inner,
.ab-mg-how__inner,
.ab-mg-final__inner {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
}
.ab-mg-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-mg-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-mg-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 — dark text/form panel + photo
   ========================================================================== */
.ab-mg-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
/* The panel + photo are direct children of a wp-block-group, so WordPress's global
   block-gap rule (:where(.wp-block-group) > * + *) stamps a margin-block-start on the
   photo — in a grid cell that pushes it down and breaks the split. Zero it out. */
.ab-mg-hero > * { margin-block: 0; }
.ab-mg-hero__panel {
	background: #2c2c33;
	padding: clamp(3rem, 1.5rem + 6vw, 100px) clamp(20px, 4vw, 100px);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ab-mg-hero__col { width: 100%; max-width: 600px; display: flex; flex-direction: column; gap: 40px; }
.ab-mg-hero__text { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.ab-mg-hero__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: #fff;
}
.ab-mg-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: #fff;
}
.ab-mg-hero__desc {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1.25rem; font-weight: 400; line-height: 1.55; color: #fff;
}
.ab-mg-hero__desc + .ab-mg-hero__desc { margin-top: -6px; }
.ab-mg-hero__form { width: 100%; max-width: 400px; margin-inline: auto; }
.ab-mg-hero__photo { position: relative; background: var(--wp--preset--color--ab-navy); min-height: 100%; }
.ab-mg-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab-mg-hero__photo img[src=""] { display: none; }

/* ==========================================================================
   2. Why monthly — image + copy with check bullets
   ========================================================================== */
.ab-mg-why { background: #fff; padding: clamp(3.5rem, 2rem + 6vw, 100px) clamp(20px, 5vw, 40px); }
.ab-mg-why__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.ab-mg-why__media { border-radius: 8px; overflow: hidden; background: var(--wp--preset--color--ab-line); aspect-ratio: 580 / 627; }
.ab-mg-why__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ab-mg-why__media img[src=""] { display: none; }
.ab-mg-why__body { display: flex; flex-direction: column; gap: 30px; }
.ab-mg-why__head { display: flex; flex-direction: column; gap: 16px; }
.ab-mg-why__h2 { text-transform: none; }
.ab-mg-why__intro { color: #555; }
.ab-mg-why__bullets { display: flex; flex-direction: column; gap: 25px; padding-top: 25px; margin: 0; list-style: none; }
.ab-mg-bullet { display: flex; gap: 10px; align-items: flex-start; }
.ab-mg-bullet__mark {
	flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; border-radius: 50%;
	background: #e6f1f9; color: var(--wp--preset--color--ab-blue);
}
.ab-mg-bullet__mark svg { width: 14px; height: 12px; display: block; }
.ab-mg-bullet__text {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1.125rem; line-height: 1.5; color: #52525b;
}
.ab-mg-bullet__text strong { font-weight: 600; color: #2c2c33; }
.ab-mg-why__link, .ab-mg-story__link {
	display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase;
	color: #0a5a95; text-decoration: none;
}
.ab-mg-why__link svg, .ab-mg-story__link svg { width: 20px; height: 8px; }
.ab-mg-why__link:hover, .ab-mg-why__link:focus-visible,
.ab-mg-story__link:hover, .ab-mg-story__link:focus-visible { text-decoration: underline; }

/* ==========================================================================
   3. Monthly impact — four tier cards
   ========================================================================== */
.ab-mg-impact { background: #f7f9fb; padding: clamp(3.5rem, 2rem + 6vw, 100px) clamp(20px, 5vw, 40px); border-bottom: 1px solid #e9e9e9; }
.ab-mg-impact__head { display: flex; flex-direction: column; align-items: center; gap: 1rem; max-width: 800px; margin: 0 auto 3.125rem; text-align: center; }
.ab-mg-impact__sub { color: #33506a; }
.ab-mg-impact__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; }
.ab-mg-tier {
	position: relative; display: flex; flex-direction: column;
	padding: 35px; border: 1px solid #d4d4d8; border-radius: 16px; background: #fff;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.03);
}
.ab-mg-tier--featured { border-color: var(--wp--preset--color--ab-orange); box-shadow: 0 4px 24px rgba(247, 147, 31, 0.1); }
.ab-mg-tier__badge {
	position: absolute; top: -14px; left: 35px;
	padding: 6px 12px; border-radius: 999px;
	background: var(--wp--preset--color--ab-orange); color: #fff;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem; font-weight: 500; letter-spacing: 0.24px; text-transform: uppercase;
}
.ab-mg-tier__amount { display: flex; flex-direction: column; gap: 0; margin-bottom: 30px; }
.ab-mg-tier__value {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 3.125rem; line-height: 1.1; font-weight: 400; color: #000;
}
.ab-mg-tier--custom .ab-mg-tier__value { font-family: var(--wp--preset--font-family--sans); color: var(--wp--preset--color--ab-blue); }
.ab-mg-tier__label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem; font-weight: 500; letter-spacing: 0.2px; text-transform: uppercase; color: #52525b;
}
.ab-mg-tier__body { flex: 1; display: flex; flex-direction: column; gap: 0.625rem; margin-bottom: 30px; }
.ab-mg-tier__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1.0625rem; font-weight: 500; line-height: 1.3; color: #333;
}
.ab-mg-tier__text {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem; font-weight: 400; line-height: 1.5; color: #666;
}
.ab-mg-tier__field {
	display: flex; align-items: center; gap: 6px;
	padding: 15px; margin-bottom: 15px; border-radius: 16px; background: #f5f2ed;
	font-family: var(--wp--preset--font-family--sans); font-size: 1rem; color: #52525b;
}
.ab-mg-tier__field .ab-mg-tier__cur { color: #52525b; }
.ab-mg-tier__field input {
	flex: 1 1 auto; min-width: 0; border: 0; background: transparent;
	font: inherit; color: #52525b; -moz-appearance: textfield;
}
.ab-mg-tier__field input::-webkit-outer-spin-button,
.ab-mg-tier__field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ab-mg-tier__field input:focus { outline: none; }
.ab-mg-tier__btn {
	display: inline-flex; align-items: center; justify-content: center;
	margin-top: auto; padding: 12px 30px; border-radius: 4px; border: 1px solid transparent;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem; font-weight: 600; letter-spacing: 0.2px; text-decoration: none;
	cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease;
}
.ab-mg-tier__btn--solid { background: var(--wp--preset--color--ab-orange); color: #fff; }
.ab-mg-tier__btn--solid:hover, .ab-mg-tier__btn--solid:focus-visible { background: var(--wp--preset--color--ab-orange-600); }
.ab-mg-tier__btn--outline { background: #fff; color: var(--wp--preset--color--ab-blue); border-color: var(--wp--preset--color--ab-blue); }
.ab-mg-tier__btn--outline:hover, .ab-mg-tier__btn--outline:focus-visible { background: var(--wp--preset--color--ab-blue); color: #fff; }

/* ==========================================================================
   4. Sadaqah band — green
   ========================================================================== */
.ab-mg-sadaqah { background: var(--wp--preset--color--ab-green); padding: clamp(3rem, 2rem + 4vw, 90px) clamp(20px, 5vw, 40px); }
.ab-mg-sadaqah__inner { display: flex; flex-direction: column; align-items: center; gap: 1.875rem; text-align: center; }
.ab-mg-sadaqah__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: #fff; }
.ab-mg-sadaqah__h2 { margin: 0; font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.875rem, 1.3rem + 2vw, 2.5rem); line-height: 1.2; font-weight: 400; text-transform: capitalize; color: #fff; }
.ab-mg-sadaqah__text { margin: 0; max-width: 80ch; font-family: var(--wp--preset--font-family--sans); font-size: 1.25rem; line-height: 1.5; color: #fff; }
.ab-mg-sadaqah__actions { display: flex; flex-wrap: wrap; gap: 25px; align-items: center; justify-content: center; margin-top: 0.5rem; }
.ab-mg-sadaqah__btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 12px 30px; border-radius: 4px;
	background: #fff; color: var(--wp--preset--color--ab-green);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem; font-weight: 500; letter-spacing: 0.2px; text-decoration: none;
	transition: background-color 0.15s ease;
}
.ab-mg-sadaqah__btn:hover, .ab-mg-sadaqah__btn:focus-visible { background: #eef6f3; }
.ab-mg-sadaqah__link {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem; font-weight: 500; letter-spacing: 0.2px;
	color: #fff; text-decoration: none; border-bottom: 1px solid #fff; padding-bottom: 2px;
}
.ab-mg-sadaqah__link:hover, .ab-mg-sadaqah__link:focus-visible { opacity: 0.85; }

/* ==========================================================================
   5. Human story — image + pull quote
   ========================================================================== */
.ab-mg-story { background: #fff; padding: clamp(3.5rem, 2rem + 6vw, 100px) clamp(20px, 5vw, 40px); border-bottom: 1px solid #e9e9e9; }
.ab-mg-story__grid { display: grid; grid-template-columns: 560fr 600fr; gap: 40px; align-items: center; }
.ab-mg-story__media { border-radius: 8px; overflow: hidden; background: var(--wp--preset--color--ab-line); aspect-ratio: 560 / 347; }
.ab-mg-story__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ab-mg-story__media img[src=""] { display: none; }
.ab-mg-story__body { display: flex; flex-direction: column; gap: 35px; }
.ab-mg-story__head { display: flex; flex-direction: column; gap: 16px; }
.ab-mg-story__quote {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.375rem);
	line-height: 1.25; font-weight: 400; font-style: italic; letter-spacing: -0.5px;
	color: var(--wp--preset--color--ab-navy);
}
.ab-mg-story__person { display: flex; align-items: center; gap: 20px; }
.ab-mg-story__avatar { flex: 0 0 auto; width: 70px; height: 70px; border-radius: 50%; object-fit: cover; background: var(--wp--preset--color--ab-line); }
.ab-mg-story__avatar[src=""] { visibility: hidden; }
.ab-mg-story__name { margin: 0; font-family: var(--wp--preset--font-family--sans); font-size: 1.0625rem; font-weight: 400; color: #2c2c33; }
.ab-mg-story__role { margin: 3px 0 0; font-family: var(--wp--preset--font-family--sans); font-size: 0.8125rem; letter-spacing: 0.2px; text-transform: uppercase; color: #a1a1aa; }

/* ==========================================================================
   6. Member voices — three testimonial cards
   ========================================================================== */
.ab-mg-voices { background: #faf8f4; padding: clamp(3.5rem, 2rem + 6vw, 100px) clamp(20px, 5vw, 40px); }
.ab-mg-voices__head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 2.5rem; }
.ab-mg-voices__h2 { text-transform: none; }
.ab-mg-voices__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ab-mg-voice { display: flex; flex-direction: column; gap: 25px; padding: 35px 25px; border: 1px solid #d4d4d8; border-radius: 8px; background: transparent; }
.ab-mg-voice__quote { margin: 0; font-family: var(--wp--preset--font-family--sans); font-size: 1.125rem; font-weight: 300; font-style: italic; line-height: 1.5; color: #2c2c33; }
.ab-mg-voice__name { margin: 0; font-family: var(--wp--preset--font-family--sans); font-size: 1.0625rem; font-weight: 500; text-align: right; text-transform: capitalize; color: #52525b; }
.ab-mg-voice__role { margin: 5px 0 0; font-family: var(--wp--preset--font-family--sans); font-size: 0.9375rem; text-align: right; text-transform: capitalize; color: #a1a1aa; }

/* ==========================================================================
   7. How it works — four icon cards
   ========================================================================== */
.ab-mg-how { background: #fff; padding: clamp(3.5rem, 2rem + 6vw, 100px) clamp(20px, 5vw, 40px); }
.ab-mg-how__head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 2.5rem; }
.ab-mg-how__h2 { text-transform: none; }
.ab-mg-how__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ab-mg-step { display: flex; flex-direction: column; align-items: center; gap: 30px; padding: 25px 20px; text-align: center; }
.ab-mg-step__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; border: 1px solid var(--wp--preset--color--ab-orange); border-radius: 50%; }
.ab-mg-step__icon svg { width: 40px; height: 40px; display: block; color: var(--wp--preset--color--ab-blue); }
.ab-mg-step__body { display: flex; flex-direction: column; gap: 0.625rem; }
.ab-mg-step__title { margin: 0; font-family: var(--wp--preset--font-family--sans); font-size: 1.375rem; font-weight: 500; line-height: 1.2; text-transform: capitalize; color: #52525b; }
.ab-mg-step__text { margin: 0; font-family: var(--wp--preset--font-family--sans); font-size: 1.125rem; font-weight: 400; line-height: 1.5; color: #52525b; }

/* ==========================================================================
   8. Final CTA — peach band
   ========================================================================== */
.ab-mg-final { background: #fef3e6; padding: clamp(3rem, 2rem + 4vw, 90px) clamp(20px, 5vw, 40px); }
.ab-mg-final__inner { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; text-align: center; }
.ab-mg-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-mg-final__h2 { margin: 0; font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.875rem, 1.3rem + 2vw, 2.5rem); line-height: 1.2; font-weight: 400; text-transform: capitalize; color: var(--wp--preset--color--ab-navy); }
.ab-mg-final__text { margin: 0; max-width: 70ch; font-family: var(--wp--preset--font-family--sans); font-size: 1.25rem; line-height: 1.5; color: #52525b; }
.ab-mg-final__actions { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: center; margin-top: 0.75rem; }
.ab-mg-final__btn { display: inline-flex; align-items: center; gap: 6px; padding: 12px 30px; border-radius: 4px; border: 1px solid transparent; font-family: var(--wp--preset--font-family--sans); font-size: 1rem; font-weight: 500; letter-spacing: 0.2px; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; }
.ab-mg-final__btn--solid { background: var(--wp--preset--color--ab-orange); color: #fff; }
.ab-mg-final__btn--solid:hover, .ab-mg-final__btn--solid:focus-visible { background: var(--wp--preset--color--ab-orange-600); }
.ab-mg-final__btn--outline { background: transparent; color: var(--wp--preset--color--ab-blue); border-color: var(--wp--preset--color--ab-blue); }
.ab-mg-final__btn--outline:hover, .ab-mg-final__btn--outline:focus-visible { background: var(--wp--preset--color--ab-blue); color: #fff; }
.ab-mg-final__note { margin: 0.25rem 0 0; font-family: var(--wp--preset--font-family--sans); font-size: 0.8125rem; font-style: italic; font-weight: 300; color: #52525b; }

/* SR-only helper (scoped) */
.ab-mg-hero .screen-reader-text, .ab-mg-impact .screen-reader-text {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
	.ab-mg-hero { grid-template-columns: 1fr; }
	.ab-mg-hero__photo { min-height: 320px; }
	.ab-mg-why__grid { grid-template-columns: 1fr; }
	.ab-mg-why__media { aspect-ratio: 16 / 10; }
	.ab-mg-story__grid { grid-template-columns: 1fr; }
	.ab-mg-impact__grid { grid-template-columns: repeat(2, 1fr); }
	.ab-mg-voices__grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
	.ab-mg-how__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.ab-mg-impact__grid { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; }
	.ab-mg-how__grid { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; }
	.ab-mg-hero__desc, .ab-mg-sadaqah__text, .ab-mg-final__text { font-size: 1.125rem; }
}