/* Section layouts for the page_sections builder. One block per layout. */

.sec { padding-block: 72px; }
.sec + .sec { padding-top: 24px; }
.sec h2 { font-size: clamp(30px, 3.6vw, 46px); }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
.sec-head p, .sec-intro { color: var(--muted); max-width: 46ch; }
.sec-intro { margin: 12px 0 28px; }

/* ---- hero ----------------------------------------------------------- */
.hero {
	background: var(--hero); color: var(--ink);
	display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center;
	padding-block: 72px 84px; overflow: hidden;
}
.hero h1 { font-size: clamp(42px, 6.2vw, 82px); letter-spacing: -.01em; color: var(--ink); }
.hero h1 .accent { display: block; color: var(--rose); }
.hero__lead { font-size: 20px; max-width: 36ch; margin-top: 24px; }
.hero__actions { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero + .sec { padding-top: 96px; }

/* campaign variant */
.hero--campaign h1 { font-size: clamp(38px, 5.2vw, 68px); }
.hero--butter { background: var(--butter); }
.hero--blush { background: var(--blush); }
.hero--sage { background: var(--sage); }
.eyebrow { font: 600 16px var(--display); margin-bottom: 14px; }
.eyebrow a { color: var(--navy); text-decoration: none; }
.eyebrow a::before { content: "\2039  "; }
.hero__amount { font: 700 34px var(--display); color: var(--navy); margin-top: 16px; }
.hero__amount span { font-weight: 500; font-size: 22px; color: var(--ink); }
.portrait--hero { width: min(100%, 460px); }
/* Hero swoosh sits on the left: mirror it so the loop still wraps the photo. */
.portrait--hero .swoosh { right: auto; left: -8%; transform: scaleX(-1); }
.portrait--icon .portrait__circle { background: var(--white); }

/* ---- text ----------------------------------------------------------- */
.text { display: grid; gap: 22px; }
.text--split { grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; }
.text--split h2 { font-size: clamp(34px, 4.2vw, 54px); }
.text--split .prose p:first-child { font-size: 21px; }
.hl { font-style: normal; color: var(--sky-ink); position: relative; white-space: nowrap; z-index: 0; }
.hl::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -.06em; height: .18em;
	background: var(--sun); border-radius: 999px; z-index: -1;
}

/* ---- steps ---------------------------------------------------------- */
.steps h2 { margin-bottom: 32px; }
.steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.steps__item {
	border: 1px solid var(--line); border-radius: var(--radius); background: var(--white);
	padding: 28px 26px; display: grid; gap: 12px; align-content: start;
}
.steps__n {
	width: 52px; height: 52px; border-radius: 50%; background: var(--sky-soft); color: var(--navy);
	display: grid; place-items: center; font: 700 24px var(--display);
}
.steps__item h3 { font-size: 24px; }
.steps__item p { color: var(--muted); font-size: 17px; }

/* ---- campaign cards ------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cards--1 { grid-template-columns: minmax(0, 380px); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.card {
	border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--white);
	display: grid; grid-template-rows: auto 1fr; text-decoration: none; color: inherit;
	transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(44, 74, 110, .10); color: inherit; }
.card__art { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--sky-soft); overflow: hidden; }
.card__art--butter { background: var(--butter); }
.card__art--blush { background: var(--blush); }
.card__art--sage { background: var(--sage); }
.card__art svg { width: 46%; height: auto; }
.card__img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 22px 22px 24px; display: grid; gap: 8px; align-content: start; }
.card__amt { font: 700 30px var(--display); color: var(--navy); }
.card h3 { font-size: 21px; }
.card p { font-size: 16px; color: var(--muted); }
.card__go { font: 600 16px var(--display); color: var(--sky-ink); margin-top: 6px; }
@media (max-width: 1000px) { .cards, .cards--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cards, .cards--2, .cards--3 { grid-template-columns: 1fr; } }

/* ---- story ---------------------------------------------------------- */
.story { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.story--right { grid-template-columns: 1.1fr .9fr; }
.story--right .portrait { order: 2; }
.portrait--story { width: min(100%, 420px); color: var(--sky); }
.portrait--story .portrait__circle {
	background:
		radial-gradient(circle at 50% 40%, var(--butter) 0 22%, transparent 23%),
		linear-gradient(200deg, #fbe6df, #f3c3b3);
}
.portrait--story .swoosh { top: -4%; bottom: auto; right: auto; left: -8%; width: 78%; transform: scaleX(-1); z-index: 2; }
/* Same treatment as the hero: mirrored, loop at the upper left. */
.portrait--story .portrait__circle { z-index: 1; }
.story__text { display: grid; gap: 18px; }
.story__link a { font: 600 18px var(--display); }

/* ---- needs (slate band) -------------------------------------------- */
.needs {
	background: var(--slate); color: var(--white);
	display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: start;
	padding-block: 80px;
}
.sec + .needs { padding-top: 80px; }
.needs + .sec { padding-top: 96px; }
.needs h2 { color: var(--white); }
.needs h2 .accent { color: var(--sun); }
.needs__intro { display: grid; gap: 16px; }
.needs__intro p { color: #eef4fa; max-width: 40ch; }
.needs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.needs__list li { border: 2px solid rgba(255, 255, 255, .4); border-radius: 999px; padding: 8px 18px; font-weight: 600; font-size: 16px; }
.needs__list li.is-hot { background: var(--sun); border-color: var(--sun); color: var(--ink); }
.needs__drop { margin-top: 28px; border-top: 1px solid rgba(255, 255, 255, .25); padding-top: 22px; display: grid; gap: 4px; color: #eef4fa; font-size: 16px; }
.needs__drop-h { font: 600 20px var(--display); color: var(--white); }

/* ---- grouped list --------------------------------------------------- */
.groups__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.groups__card { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: var(--white); display: grid; gap: 10px; align-content: start; }
.groups__card h3 { font-size: 22px; }
.groups__card ul { margin: 0; padding-left: 1.1em; color: var(--muted); display: grid; gap: 4px; font-size: 17px; }

/* ---- give CTA ------------------------------------------------------- */
.give-cta { display: grid; grid-template-columns: 1.3fr auto; gap: 30px; align-items: center; padding-block: 96px; }
.give-cta h2 { font-size: clamp(34px, 4.4vw, 58px); max-width: 18ch; }
.give-cta h2 .accent { color: var(--sky-ink); }
.give-cta p { color: var(--muted); margin-top: 14px; max-width: 52ch; }

/* ---- form ----------------------------------------------------------- */
.give-form { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; }
.give-form__head { display: grid; gap: 14px; }
.give-form__head > p { color: var(--muted); }
.give-form__aside { font-size: 16px; border-top: 1px solid var(--line); padding-top: 16px; }
.give-form__form { border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; background: var(--white); }

/* ---- contact -------------------------------------------------------- */
.contact { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: start; }
.contact__details { display: grid; gap: 16px; }
.contact__list { margin: 8px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; }
.contact__list dt { font: 600 17px var(--display); color: var(--navy); }
.contact__list dd { margin: 0; color: var(--muted); }
.contact__form { border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }

/* ---- campaign body -------------------------------------------------- */
.campaign-body { display: grid; grid-template-columns: 1.2fr .8fr; gap: 56px; align-items: start; padding-top: 96px; }
.inside { border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: grid; gap: 14px; }
.inside h2 { font-size: 26px; }
.inside__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.inside__list li { padding-left: 26px; position: relative; color: var(--ink); }
.inside__list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 12px; border-radius: 50%; background: var(--sun); }

/* ---- FAQ ------------------------------------------------------------ */
.faq h2 { margin-bottom: 24px; }
.faq__list { display: grid; gap: 12px; max-width: 820px; }
.faq__item { border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px; }
.faq__item summary { font: 600 19px var(--display); color: var(--navy); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-size: 24px; line-height: 1; color: var(--sky-ink); }
.faq__item[open] summary::after { content: "\2212"; }
.faq__item .prose { margin-top: 12px; }

/* ---- gallery -------------------------------------------------------- */
.gallery h2 { margin-bottom: 24px; }
.gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.gallery__grid figure { margin: 0; }
.gallery__grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; }

/* ---- stacking on small screens ------------------------------------- */
@media (max-width: 860px) {
	.hero, .text--split, .story, .story--right, .needs, .give-cta, .give-form, .contact, .campaign-body { grid-template-columns: 1fr; }
	.hero { padding-block: 48px 56px; }
	.portrait, .portrait--hero { width: min(100%, 360px); }
	.story .portrait, .story--right .portrait { order: -1; }
	.sec { padding-block: 56px; }
	.hero + .sec { padding-top: 64px; }
}
@media (max-width: 520px) {
	body { font-size: 17px; }
	.give-form__form, .contact__form { padding: 18px; }
}

/* ---- Fluent Forms: match the site ---------------------------------- */
.fluentform .ff-el-group { margin-bottom: 18px; }
.fluentform .ff-el-input--label label { font: 600 16px var(--display); color: var(--navy); }
.fluentform .ff-el-form-control {
	border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 14px;
	font: inherit; font-size: 16px; color: var(--ink); background: var(--white);
}
.fluentform .ff-el-form-control:focus { border-color: var(--sky-ink); box-shadow: 0 0 0 3px var(--sky-soft); outline: 0; }
.fluentform .ff-el-form-check label { font-size: 16px; color: var(--ink); }
.fluentform .ff-btn-submit,
.fluentform .ff-btn-submit:hover {
	background: var(--navy) !important; color: var(--white) !important; border: 0;
	border-radius: 999px; padding: 13px 28px; font: 600 18px var(--display); line-height: 1;
}
.fluentform .ff-btn-submit:hover { background: var(--sky-ink) !important; }
.fluentform .ff-message-success, .ff-message-success {
	border: 1px solid var(--line); border-left: 4px solid var(--sun-deep); border-radius: 12px;
	background: var(--white); color: var(--ink); padding: 16px 18px; box-shadow: none;
}
.fluentform .error, .fluentform .text-danger { color: var(--rose); font-size: 14px; }

/* Footer newsletter: compact */
.sfoot__col--signup .fluentform .ff-el-group { margin-bottom: 8px; }
.sfoot__col--signup .fluentform .ff-el-form-control { padding: 9px 14px; font-size: 15px; }
.sfoot__col--signup .fluentform .ff-btn-submit { padding: 10px 20px; font-size: 16px; }
.sfoot__col--signup .ff-el-turnstile, .sfoot__col--signup .ff-el-group:has(.cf-turnstile) { transform: scale(.85); transform-origin: left top; margin-bottom: 0; }

/* Donation amount buttons */
.fluentform .ff_list_buttons .ff-el-form-check { margin: 0 8px 8px 0 !important; border: 0 !important; }
.fluentform .ff_list_buttons .ff-el-form-check label > span {
	display: inline-block; border: 1.5px solid var(--line) !important; border-radius: 999px !important;
	padding: 10px 20px !important; font: 600 17px var(--display); color: var(--navy); background: var(--white);
	box-shadow: none !important;
}
.fluentform .ff_list_buttons .ff-el-form-check.ff_item_selected label > span,
.fluentform .ff_list_buttons .ff-el-form-check label:hover > span {
	background: var(--sun) !important; border-color: var(--sun) !important; color: var(--navy) !important;
}
.fluentform .ff_payment_item_price, .fluentform .ff_item_price_wrapper { font: 700 24px var(--display); color: var(--navy); }

/* ---- Section background bands (set per section in the editor) -------- */
.sec-bg { background: var(--white); }
.sec-bg--sky { background: var(--sky-soft); }
.sec-bg--butter { background: var(--butter); }
.sec-bg--blush { background: var(--blush); }
.sec-bg--sage { background: var(--sage); }
.sec-bg--navy { background: var(--navy); }
.sec-bg--slate { background: var(--slate); }

/* A band paints the colour, so the section inside sits on it. */
.sec-bg > .sec, .sec-bg > .hero, .sec-bg > .needs { background: transparent; }

/* Two bands of the same colour in a row read as one, so drop the doubled gap. */
.sec-bg + .sec-bg > .sec { padding-top: 24px; }

/* Dark bands: lift the text off the colour. */
.sec-bg--navy, .sec-bg--slate { color: #eef4fa; }
.sec-bg--navy h2, .sec-bg--navy h3, .sec-bg--slate h2, .sec-bg--slate h3 { color: var(--white); }
.sec-bg--navy .hl, .sec-bg--slate .hl { color: var(--white); }
.sec-bg--navy p, .sec-bg--slate p, .sec-bg--navy li, .sec-bg--slate li { color: #eef4fa; }
.sec-bg--navy .prose, .sec-bg--slate .prose,
.sec-bg--navy .sec-head p, .sec-bg--slate .sec-head p,
.sec-bg--navy .sec-intro, .sec-bg--slate .sec-intro { color: #dbe8f4; }
.sec-bg--navy .prose p:first-child, .sec-bg--slate .prose p:first-child { color: var(--white); }
.sec-bg--navy a:not(.pill), .sec-bg--slate a:not(.pill) { color: var(--sun); }
.sec-bg--navy .accent, .sec-bg--slate .accent { color: var(--sun); }
.sec-bg--navy .pill--navy, .sec-bg--slate .pill--navy { color: var(--white); }
.sec-bg--navy .pill--navy:hover, .sec-bg--slate .pill--navy:hover { background: var(--white); border-color: var(--white); color: var(--navy); }
.sec-bg--navy .steps__item, .sec-bg--slate .steps__item,
.sec-bg--navy .groups__card, .sec-bg--slate .groups__card,
.sec-bg--navy .inside, .sec-bg--slate .inside,
.sec-bg--navy .give-form__form, .sec-bg--slate .give-form__form,
.sec-bg--navy .contact__form, .sec-bg--slate .contact__form { border-color: rgba(255, 255, 255, .3); }
.sec-bg--navy .steps__item p, .sec-bg--slate .steps__item p,
.sec-bg--navy .card p, .sec-bg--slate .card p,
.sec-bg--navy .groups__card ul, .sec-bg--slate .groups__card ul { color: var(--muted); }
.sec-bg--navy .steps__item, .sec-bg--slate .steps__item,
.sec-bg--navy .card, .sec-bg--slate .card,
.sec-bg--navy .groups__card, .sec-bg--slate .groups__card { background: var(--white); color: var(--ink); }
.sec-bg--navy .steps__item h3, .sec-bg--slate .steps__item h3,
.sec-bg--navy .card h3, .sec-bg--slate .card h3,
.sec-bg--navy .groups__card h3, .sec-bg--slate .groups__card h3 { color: var(--navy); }
.sec-bg--navy .faq__item, .sec-bg--slate .faq__item { background: var(--white); }
.sec-bg--navy .faq__item summary, .sec-bg--slate .faq__item summary { color: var(--navy); }
.sec-bg--navy .faq__item .prose, .sec-bg--slate .faq__item .prose { color: var(--muted); }

/* Light bands: cards keep a white face so they stay readable. */
.sec-bg--butter .steps__item, .sec-bg--blush .steps__item, .sec-bg--sage .steps__item, .sec-bg--sky .steps__item,
.sec-bg--butter .groups__card, .sec-bg--blush .groups__card, .sec-bg--sage .groups__card, .sec-bg--sky .groups__card,
.sec-bg--butter .faq__item, .sec-bg--blush .faq__item, .sec-bg--sage .faq__item, .sec-bg--sky .faq__item { background: var(--white); }