/**
 * Shared program child-page components (Permanent Hospitals / School Screening /
 * Training). Loaded where the marker class `ab-prog-` appears (inc/enqueue.php).
 * Values are the exact Figma tokens for the Permanent Specialized Hospitals frame
 * (node 1060:45449). Full-bleed bands (1600) with a centered 1200 inner.
 */

/* Shared atoms ------------------------------------------------------------- */
.ab-prog-inner { max-width: var(--wp--style--global--wide-size, 1200px); margin-inline: auto; }
.ab-prog-eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.875rem; line-height: 1.43; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase;
	color: var(--wp--preset--color--ab-blue);
}
.ab-prog-eyebrow--ink { color: #2C2C33; }
.ab-prog-eyebrow--on-dark { color: #FFFFFF; }
.ab-prog-h2 {
	margin: 0; font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(2rem, 1.4rem + 2vw, 2.625rem); line-height: 1.24; font-weight: 600; text-transform: capitalize; color: #053A66;
}
.ab-prog-lede { margin: 0; font-size: 1.125rem; line-height: 1.44; color: #52525B; }

.ab-prog-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 12px 30px; border-radius: 4px; border: 0.6px solid transparent;
	font-family: var(--wp--preset--font-family--sans); font-size: 1rem; line-height: 1.44; font-weight: 500;
	text-decoration: none; cursor: pointer; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.ab-prog-btn--primary { background: var(--wp--preset--color--ab-orange); color: #fff; letter-spacing: 1.4px; text-transform: capitalize; }
.ab-prog-btn--primary:hover { background: var(--wp--preset--color--ab-orange-600); color: #fff; }
.ab-prog-btn--green { background: var(--wp--preset--color--ab-green); color: #fff; }
.ab-prog-btn--green:hover { background: #0b5a4d; color: #fff; }
.ab-prog-btn--white { background: #fff; color: var(--wp--preset--color--ab-green); padding: 12px 28px; letter-spacing: 0.2px; box-shadow: 0 10px 30px rgba(247,147,31,.12); }
.ab-prog-btn--white:hover { background: #f3faf8; color: var(--wp--preset--color--ab-green); }
.ab-prog-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.85); }
.ab-prog-btn--ghost:hover { background: rgba(255,255,255,.14); color: #fff; }
.ab-prog-link {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--wp--preset--font-family--sans); font-weight: 500; font-size: 1rem;
	color: var(--wp--preset--color--ab-blue); text-decoration: none;
}
.ab-prog-link:hover { text-decoration: underline; }
.ab-prog-link svg { width: 1.05em; height: 1.05em; }

/* 1. Hero (split, centered left) ------------------------------------------- */
.ab-prog-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.ab-prog-hero__left { background: var(--wp--preset--color--ab-peach); padding: 100px 40px; display: flex; align-items: center; justify-content: center; }
.ab-prog-hero__inner { width: 100%; max-width: 600px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 40px; }
.ab-prog-hero__title {
	margin: 0; font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(2.5rem, 1.2rem + 3.6vw, 4rem); line-height: 1.23; font-weight: 700; text-transform: capitalize; color: #2C2C33;
}
.ab-prog-hero .ab-prog-lede { font-size: 1.25rem; line-height: 1.45; text-transform: capitalize; color: #2C2C33; }
.ab-prog-hero__cta { margin-top: 0; }
.ab-prog-hero__media { margin: 0; }
.ab-prog-hero__media img { display: block; width: 100%; height: 100%; min-height: 642px; object-fit: cover; }

/* 2. The Basics (band + 5 stats) ------------------------------------------- */
.ab-prog-basics { padding: 100px 40px; background: rgba(247,249,251,.75); border-bottom: 1px solid #E9E9E9; }
.ab-prog-basics__inner { display: flex; flex-direction: column; align-items: center; gap: 60px; }
.ab-prog-basics__head { text-align: center; max-width: 820px; display: flex; flex-direction: column; gap: 16px; }
.ab-prog-basics__head .ab-prog-lede { font-size: 1.125rem; line-height: 1.44; }
.ab-prog-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; width: 100%; }
.ab-prog-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 50px 4px; text-align: center; border: 0.6px solid #D4D4D8; }
.ab-prog-stat__num { font-family: var(--wp--preset--font-family--serif); font-size: clamp(2rem, 1rem + 2.4vw, 3.5rem); line-height: 1.2; font-weight: 400; color: #52525B; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ab-prog-stat__suf { color: #F59423; }
.ab-prog-stat__label { font-family: var(--wp--preset--font-family--sans); font-size: 1.0625rem; line-height: 1.47; font-weight: 500; text-transform: capitalize; color: #52525B; }

/* 3. Big number band ------------------------------------------------------- */
.ab-prog-bignum { padding: 180px 40px; background: var(--wp--preset--color--ab-blue); border-bottom: 1px solid #E9E9E9; text-align: center; }
.ab-prog-bignum__inner { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.ab-prog-bignum__num { margin: 0; font-family: var(--wp--preset--font-family--sans); font-size: clamp(3.5rem, 1.5rem + 6vw, 8rem); line-height: 0.94; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.ab-prog-bignum__cap { margin: 0; font-style: italic; font-weight: 500; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.5625rem); line-height: 1.44; color: #fff; max-width: 800px; }

/* 4. Footprint (dynamic map + country cards) ------------------------------- */
.ab-prog-footprint { padding: 100px 40px; border-bottom: 1px solid #E9E9E9; }
.ab-prog-footprint__head { text-align: center; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.ab-prog-footprint__head .ab-prog-lede { max-width: 720px; }
.ab-prog-footprint__map { width: 100%; }
.ab-prog-footprint__map .ab-home-proof__mapwrap { width: 100%; margin: 0; padding: 0; border: 0; }
.ab-prog-footprint__map .ab-home-proof__map { position: relative; width: 100%; line-height: 0; }
.ab-prog-footprint__map .ab-home-proof__mapimg { display: block; width: 100%; height: auto; }
.ab-prog-footprint__map .ab-home-proof__marker { position: absolute; transform: translate(-50%,-50%); width: 15px; height: 15px; padding: 0; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: pointer; transition: transform .12s ease; }
.ab-prog-footprint__map .ab-home-proof__marker--reached { background: var(--wp--preset--color--ab-orange); }
.ab-prog-footprint__map .ab-home-proof__marker--hospital { background: #5ba3d6; }
.ab-prog-footprint__map .ab-home-proof__marker:hover,
.ab-prog-footprint__map .ab-home-proof__marker:focus-visible { transform: translate(-50%,-50%) scale(1.35); outline: none; z-index: 5; }
.ab-prog-footprint__map .ab-home-proof__tip { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 7px 11px; border-radius: 6px; background: var(--wp--preset--color--ab-navy); color: #fff; font-size: .8125rem; line-height: 1; opacity: 0; pointer-events: none; transition: opacity .12s ease; }
.ab-prog-footprint__map .ab-home-proof__marker:hover .ab-home-proof__tip,
.ab-prog-footprint__map .ab-home-proof__marker:focus-visible .ab-home-proof__tip { opacity: 1; }

.ab-prog-countries { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ab-prog-ccard { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; padding: 35px 25px; border: 0.4px solid #D4D4D8; border-radius: 8px; background: #fff; }
.ab-prog-ccard__name { margin: 0; font-family: var(--wp--preset--font-family--sans); font-size: 20px; font-weight: 500; line-height: 29px; color: #2C2C33; }
.ab-prog-ccard__stats { display: flex; align-items: flex-start; gap: 30px; }
.ab-prog-ccard__stat { display: flex; flex-direction: column; gap: 2px; }
.ab-prog-ccard__num { font-family: var(--wp--preset--font-family--sans); font-size: 32px; font-weight: 500; line-height: 46px; color: #0D72BA; font-variant-numeric: tabular-nums; }
.ab-prog-ccard__suf { font-size: 1em; }
.ab-prog-ccard__label { font-family: var(--wp--preset--font-family--sans); font-size: 12px; font-weight: 400; line-height: 17px; text-transform: uppercase; color: #52525B; }
.ab-prog-ccard__blurb { margin: 0; font-family: var(--wp--preset--font-family--sans); font-size: 14px; font-weight: 400; line-height: 20px; color: #52525B; flex: 1; }
.ab-prog-ccard .ab-prog-link { font-family: var(--wp--preset--font-family--sans); font-size: 14px; font-weight: 400; line-height: 30px; text-transform: capitalize; color: #0A5A95; gap: 4px; }
.ab-prog-ccard .ab-prog-link svg { width: 23px; height: 23px; }
/* Footprint variant without a map (School Screening): head + cards stack 40px. */
.ab-prog-footprint__stack { display: flex; flex-direction: column; gap: 40px; }

/* 4b. Why it matters (2-col: text + check bullets / image) ------------------ */
.ab-prog-why { padding: 100px 40px; background: #fff; border-bottom: 1px solid #E9E9E9; }
.ab-prog-why__inner { max-width: 1200px; margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch; }
.ab-prog-why__col { display: flex; flex-direction: column; gap: 30px; }
.ab-prog-why__text { display: flex; flex-direction: column; gap: 16px; }
.ab-prog-why__text .ab-prog-h2 { line-height: 1.24; }
.ab-prog-why__lede { margin: 0; font-family: var(--wp--preset--font-family--sans); font-size: 1.125rem; line-height: 1.44; color: #52525B; }
.ab-prog-why__list { list-style: none; margin: 0; padding: 25px 10px 0; display: flex; flex-direction: column; gap: 25px; }
.ab-prog-why__item { display: flex; align-items: flex-start; gap: 10px; }
.ab-prog-why__ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: #E6F1F9; color: var(--wp--preset--color--ab-blue); }
.ab-prog-why__ic svg { width: 16px; height: 16px; stroke-width: 2; }
.ab-prog-why__itext { display: flex; flex-direction: column; gap: 5px; }
.ab-prog-why__ititle { font-family: var(--wp--preset--font-family--sans); font-weight: 500; font-size: 1.125rem; line-height: 1.44; color: #52525B; }
.ab-prog-why__idesc { font-family: var(--wp--preset--font-family--sans); font-weight: 400; font-size: 0.9375rem; line-height: 1.47; color: #A1A1AA; }
.ab-prog-why .ab-prog-link { color: #0A5A95; text-transform: capitalize; align-self: flex-start; }
.ab-prog-why .ab-prog-link svg { width: 23px; height: 23px; }
.ab-prog-why__media { margin: 0; height: 100%; }
.ab-prog-why__media img { display: block; width: 100%; height: 100%; min-height: 560px; object-fit: cover; border-radius: 20px; }

/* 5. Testimonial (centered 1200 row: image 560 + text 600) ----------------- */
.ab-prog-story { padding: 100px 40px; background: #fff; border-bottom: 1px solid #E9E9E9; }
.ab-prog-story__inner { max-width: 1200px; margin-inline: auto; display: flex; align-items: center; gap: 40px; }
.ab-prog-story__media { margin: 0; flex: 1 1 560px; }
.ab-prog-story__media img { display: block; width: 100%; height: 362px; object-fit: cover; border-radius: 8px; }
.ab-prog-story__col { flex: 0 0 600px; max-width: 600px; display: flex; flex-direction: column; align-items: flex-start; gap: 35px; }
.ab-prog-story__textblock { display: flex; flex-direction: column; gap: 16px; }
.ab-prog-story__quote { margin: 0; font-family: var(--wp--preset--font-family--serif); font-style: italic; font-weight: 400; font-size: clamp(1.75rem, 1.1rem + 1.6vw, 2.625rem); line-height: 1.24; letter-spacing: -0.5px; color: #053A66; }
.ab-prog-story__patient { display: flex; align-items: center; gap: 20px; }
.ab-prog-story__avatar { flex: none; width: 70px; height: 70px; border-radius: 999px; object-fit: cover; background: #E8ECF1; }
.ab-prog-story__by { display: flex; flex-direction: column; gap: 3px; }
.ab-prog-story__name { font-family: var(--wp--preset--font-family--sans); font-weight: 400; font-size: 1.0625rem; line-height: 1.47; color: #2C2C33; }
.ab-prog-story__role { font-family: var(--wp--preset--font-family--sans); font-weight: 400; font-size: 0.8125rem; line-height: 1.46; text-transform: uppercase; color: #A1A1AA; }
.ab-prog-story__link { display: inline-flex; align-items: center; gap: 4px; font-family: var(--wp--preset--font-family--sans); font-weight: 500; font-size: 1rem; text-decoration: underline; text-transform: capitalize; color: #0A5A95; }
.ab-prog-story__link svg { width: 23px; height: 23px; }

/* 6. Giving (3 cards) ------------------------------------------------------ */
.ab-prog-give { padding: 100px 40px; background: var(--wp--preset--color--ab-cream); }
.ab-prog-give__inner { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.ab-prog-give__head { text-align: center; display: flex; flex-direction: column; gap: 16px; }
.ab-prog-gcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: 100%; }
.ab-prog-gcard { display: flex; flex-direction: column; gap: 12px; padding: 34px 30px; background: #fff; border: 1px solid #E9E9E9; border-radius: 12px; }
.ab-prog-gcard--blue { border-color: #CFE3F2; }
.ab-prog-gcard--green { border-color: #CFE7E0; }
.ab-prog-gcard__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 999px; }
.ab-prog-gcard__icon svg { width: 26px; height: 26px; }
.ab-prog-gcard__icon--blue { background: #E6F1F9; color: var(--wp--preset--color--ab-blue); }
.ab-prog-gcard__icon--green { background: #E4F1EE; color: var(--wp--preset--color--ab-green); }
.ab-prog-gcard__title { margin: 6px 0 0; font-size: 0.9375rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--wp--preset--color--ab-navy); }
.ab-prog-gcard__price { margin: 0; font-family: var(--wp--preset--font-family--sans); font-size: 1.0625rem; font-weight: 600; color: var(--wp--preset--color--ab-orange); }
.ab-prog-gcard__price--green { color: var(--wp--preset--color--ab-green); }
.ab-prog-gcard__body { margin: 0 0 8px; font-size: .9375rem; line-height: 1.55; color: var(--wp--preset--color--ab-muted); flex: 1; }
.ab-prog-gcard .ab-prog-btn { margin-top: auto; align-self: stretch; justify-content: center; }
.ab-prog-btn svg { width: 1.05em; height: 1.05em; }

/* 7. Zakat CTA (green band) ------------------------------------------------ */
.ab-prog-zakat { padding: 70px 40px; background: var(--wp--preset--color--ab-green); }
.ab-prog-zakat__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.ab-prog-zakat__text { display: flex; flex-direction: column; gap: 16px; max-width: 1000px; }
.ab-prog-zakat__title { margin: 0; font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.625rem); line-height: 1.24; font-weight: 400; text-transform: capitalize; color: #fff; }
.ab-prog-zakat__sub { margin: 0; font-size: 1.125rem; line-height: 1.67; text-transform: capitalize; color: #fff; }
.ab-prog-zakat__cta { flex: none; }

/* 8. Trust badges (5, with dividers) --------------------------------------- */
.ab-prog-trust { padding: 100px 40px; border-bottom: 1px solid #E9E9E9; }
.ab-prog-trust__inner { display: flex; flex-direction: column; align-items: center; gap: 60px; }
.ab-prog-trust__head { text-align: center; display: flex; flex-direction: column; gap: 16px; max-width: 800px; }
.ab-prog-trust__head .ab-prog-lede { color: #334E68; line-height: 1.44; }
.ab-prog-badges { display: flex; align-items: stretch; width: 100%; }
.ab-prog-badge { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 30px 20px; border-left: 1px solid #F5F2ED; }
.ab-prog-badge:first-child { border-left: 0; }
.ab-prog-badge__ic { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; background: #E6F1F9; color: var(--wp--preset--color--ab-blue); }
.ab-prog-badge__ic svg { width: 30px; height: 30px; }
.ab-prog-badge__ic--fill { background: var(--wp--preset--color--ab-blue); color: #fff; font-weight: 500; font-size: 1rem; }
.ab-prog-badge__t { font-family: var(--wp--preset--font-family--sans); font-weight: 500; font-size: 0.9375rem; line-height: 1.47; text-transform: capitalize; color: #52525B; }
.ab-prog-badge__s { font-family: var(--wp--preset--font-family--sans); font-weight: 400; font-size: 0.75rem; line-height: 1.42; text-transform: uppercase; color: #52525B; }

/* 9. Final CTA (blue gradient) --------------------------------------------- */
.ab-prog-cta { padding: 100px 40px; text-align: center; background: linear-gradient(287.51deg, #0D72BA 26.14%, #0A5A94 73.86%); }
.ab-prog-cta__inner { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.ab-prog-cta__title { margin: 0; font-family: var(--wp--preset--font-family--serif); font-size: clamp(2rem, 1.4rem + 2vw, 2.625rem); line-height: 1.24; font-weight: 600; text-transform: capitalize; color: #fff; }
.ab-prog-cta__sub { margin: 0; font-family: var(--wp--preset--font-family--serif); font-weight: 400; font-size: 1.125rem; line-height: 1.22; color: #fff; max-width: 743px; }
.ab-prog-cta__actions { padding-top: 8px; }
.ab-prog-cta__fine { margin: 0; font-family: var(--wp--preset--font-family--sans); font-size: 1rem; line-height: 1.44; color: #fff; }

/* 10. Related programs (dynamic image cards) ------------------------------- */
.ab-prog-related { padding: 100px 40px; background: rgba(247,249,251,.75); border-bottom: 1px solid #E9E9E9; }
.ab-prog-related__head { text-align: center; display: flex; flex-direction: column; gap: 16px; margin-bottom: 50px; }
.ab-prog-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ab-prog-rcard { display: flex; flex-direction: column; background: #fff; border: 0.5px solid #E1E1E1; border-radius: 8px; overflow: hidden; text-decoration: none; transition: box-shadow .15s ease, transform .15s ease; }
.ab-prog-rcard:hover { box-shadow: 0 10px 30px rgba(5,58,102,.1); transform: translateY(-2px); }
.ab-prog-rcard__photo { display: block; height: 200px; background: #dfe4ea center/cover no-repeat; }
.ab-prog-rcard__photo.is-empty { background: #E8ECF1; }
.ab-prog-rcard__body { display: flex; flex-direction: column; gap: 10px; padding: 25px 15px; }
.ab-prog-rcard__title { font-family: var(--wp--preset--font-family--sans); font-size: 1.0625rem; line-height: 1.47; font-weight: 500; color: #555555; }
.ab-prog-rcard__desc { font-family: var(--wp--preset--font-family--sans); font-size: 0.875rem; line-height: 1.43; color: #666666; }
.ab-prog-rcard__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 5px; padding-top: 15px; font-family: var(--wp--preset--font-family--sans); font-weight: 500; font-size: 0.75rem; line-height: 1.42; color: var(--wp--preset--color--ab-blue); }
.ab-prog-rcard__link svg { width: 14px; height: 14px; }

/* 4d. Big-number callout: comma-format graduates figure, not compact. Reuses
   .ab-prog-bignum; the training callout is shorter than the PSH one. */
.ab-prog-bignum--callout { padding: 100px 40px; }

/* 4e. Where we teach — college cards (dynamic ab_institute) ---------------- */
.ab-prog-colleges-band { padding: 100px 40px; background: rgba(247,249,251,.75); border-bottom: 1px solid #E9E9E9; }
.ab-prog-colleges-band__inner { max-width: 1200px; margin-inline: auto; display: flex; flex-direction: column; gap: 50px; }
.ab-prog-colleges-band__head { text-align: center; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.ab-prog-colleges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.ab-prog-college { display: flex; flex-direction: column; background: #fff; border: 0.5px solid #D4D4D8; border-radius: 8px; overflow: hidden; }
.ab-prog-college__media { display: block; height: 250px; background: #E8ECF1 center/cover no-repeat; }
.ab-prog-college__body { display: flex; flex-direction: column; gap: 20px; padding: 30px 35px; }
.ab-prog-college__country { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-family: var(--wp--preset--font-family--sans); font-size: 12px; font-weight: 500; line-height: 17px; text-transform: uppercase; color: #52525B; }
.ab-prog-college__dot { flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--wp--preset--color--ab-orange); }
.ab-prog-college__name { margin: 0; font-family: var(--wp--preset--font-family--sans); font-size: 17px; font-weight: 500; line-height: 1.44; color: #333333; }
.ab-prog-college__desc { margin: 0; font-family: var(--wp--preset--font-family--sans); font-size: 15px; font-weight: 400; line-height: 1.55; color: #666666; }
.ab-prog-college__divider { height: 1px; background: #D4D4D8; }
.ab-prog-college__badges { display: flex; flex-wrap: wrap; gap: 10px; }
.ab-prog-college__badge { display: inline-flex; padding: 5px 10px; border-radius: 5px; background: #F5F2ED; font-family: var(--wp--preset--font-family--sans); font-size: 13px; font-weight: 400; line-height: 19px; color: #52525B; }
.ab-prog-colleges-band__note { margin: 0; text-align: center; font-family: var(--wp--preset--font-family--sans); font-style: italic; font-size: 14px; line-height: 1.5; color: #52525B; }

/* 6b. What we teach — 3 curriculum pillars (reuses .ab-prog-gcard--blue) ---- */
.ab-prog-teach { padding: 100px 40px; background: var(--wp--preset--color--ab-cream); border-bottom: 1px solid #E9E9E9; }
.ab-prog-teach__inner { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.ab-prog-teach__head { text-align: center; display: flex; flex-direction: column; gap: 16px; max-width: 700px; }
.ab-prog-teach .ab-prog-gcard { gap: 24px; padding: 35px 25px; }
.ab-prog-teach .ab-prog-gcard__title { margin-top: 0; }

/* Responsive --------------------------------------------------------------- */
@media (max-width: 980px) {
	.ab-prog-hero { grid-template-columns: 1fr; }
	.ab-prog-hero__media img { min-height: 320px; }
	.ab-prog-hero__left { padding: 60px 24px; }
	.ab-prog-why__inner { grid-template-columns: 1fr; }
	.ab-prog-why__media { order: -1; }
	.ab-prog-why__media img { min-height: 320px; }
	.ab-prog-story__inner { flex-direction: column; align-items: stretch; }
	.ab-prog-story__media { flex-basis: auto; }
	.ab-prog-story__media img { height: 300px; }
	.ab-prog-story__col { flex-basis: auto; max-width: none; }
	.ab-prog-stats { grid-template-columns: repeat(3, 1fr); }
	.ab-prog-countries, .ab-prog-gcards, .ab-prog-related__grid { grid-template-columns: repeat(2, 1fr); }
	.ab-prog-badges { flex-wrap: wrap; }
	.ab-prog-badge { flex: 1 1 30%; border-left: 0; padding: 20px 10px; }
	.ab-prog-zakat__inner { flex-direction: column; align-items: flex-start; }
	.ab-prog-colleges { grid-template-columns: 1fr; }
	.ab-prog-basics, .ab-prog-footprint, .ab-prog-give, .ab-prog-trust, .ab-prog-cta, .ab-prog-related, .ab-prog-bignum, .ab-prog-zakat, .ab-prog-story, .ab-prog-why, .ab-prog-colleges-band, .ab-prog-teach { padding-left: 24px; padding-right: 24px; }
	.ab-prog-bignum { padding-top: 90px; padding-bottom: 90px; }
}
@media (max-width: 640px) {
	.ab-prog-stats { grid-template-columns: repeat(2, 1fr); }
	.ab-prog-countries, .ab-prog-gcards, .ab-prog-related__grid { grid-template-columns: 1fr; }
	.ab-prog-badge { flex-basis: 45%; }
	.ab-prog-college__body { padding: 25px; }
}