/**
 * give-fund-layout — the full-width slide variant.
 *
 * Only the challenger has a stylesheet. The cards variant is the page as it
 * stands and uses the giving page's own CSS, which is what makes it the
 * control in the strict sense: nothing about that arm is new, including its
 * styling.
 *
 * The anatomy is the problems page's fund slide, at its size: a 460px panel
 * with the photograph across the whole width under a warm overlay, a gold seam
 * down the middle, and a 580px copy column on the right. What is borrowed is
 * the composition. The rules are written against this test's own .abl- names
 * so that editing the problems page cannot restyle a running test, and so that
 * this file can be deleted the day the test is over.
 *
 * Two things it does that the problems page does not, both because this block
 * sits on the giving page rather than that one: the panels are anchors that
 * open the giving form rather than links to a fund page, and the call to
 * action types out the names of the people giving alongside on hover, which is
 * what the small cards do and is the behaviour being carried across rather
 * than lost.
 */

.abl-bands {
	display: flex;
	flex-direction: column;
	gap: 26px;
	width: 100%;
}

.abl-band {
	position: relative;
	display: block;
	width: 100%;
	min-height: 460px;
	overflow: hidden;
	border-radius: 30px;
	background: #1a1410;
	color: #fff;
	text-decoration: none;
}
/* The page's own rule paints every anchor gold, and it is more specific than a
   single class, so the panel's colour has to be restated: it is what every
   child inherits, and children of this panel must be white rather than link
   gold. */
.fdm-give-page a.abl-band,
.fdm-give-page a.abl-band:hover { color: #fff; }

/* The photograph.
 *
 * cover against a panel this wide means the crop is vertical only, so there is
 * nothing to pan horizontally: a subject sitting mid-frame ends up under the
 * copy column and no repositioning moves them. That is a re-crop, not a CSS
 * problem, and these are the giving page's own 3:2 stills, which are framed
 * for it.
 *
 * A slow scale on hover, resting at 1.02 so the edges never show. */
.abl-band__bg {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: #2c1f15;
	transform: scale(1.02);
	transition: transform 8s ease;
}
.abl-band:hover .abl-band__bg { transform: scale(1.06); }

/* Warm, and heavier on the right where the words are. Two gradients: one
   across for legibility under the copy, one up from the bottom so a light
   photograph does not leave the lower edge glaring. */
.abl-band__overlay {
	position: absolute;
	inset: 0;
	background:
		/* Heavier on the right than the problems page's, and measured rather
		   than copied: that page uses stills cropped for this layout, with the
		   subject in the left third. These are the giving page's card crops,
		   and two of them are bright across the whole frame — the Times Square
		   billboard puts white type behind white type. At 0.78 the statistic
		   reads over all eight, and the left half is left alone so the
		   photograph is still a photograph. */
		linear-gradient(to right,
			rgba(48, 32, 16, 0.18) 0%,
			rgba(38, 26, 14, 0.46) 42%,
			rgba(30, 20, 11, 0.78) 72%,
			rgba(28, 19, 10, 0.86) 100%
		),
		linear-gradient(to top,
			rgba(20, 14, 8, 0.34) 0%,
			rgba(20, 14, 8, 0.05) 60%
		);
}

.abl-band__panel {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-height: 460px;
	padding: 44px clamp(28px, 6vw, 96px);
	gap: clamp(24px, 3vw, 48px);
}

/* The seam. Fading at both ends, so it reads as light rather than as a border
   somebody drew. */
.abl-band__divider {
	flex: 0 0 1px;
	align-self: stretch;
	margin: 44px 0;
	background: linear-gradient(
		to bottom,
		rgba(216, 184, 106, 0) 0%,
		#b8963e 12%,
		#b8963e 88%,
		rgba(216, 184, 106, 0) 100%
	);
}

.abl-band__content {
	flex: 0 1 580px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}

/* The fund's own icon, painted through a mask so one white PNG takes the gold
   and matches every other icon on the page. */
.abl-band__icon {
	width: 56px;
	height: 56px;
	flex: none;
	background: #d8b86a;
	mask-repeat: no-repeat;
	mask-size: contain;
	mask-position: left center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	-webkit-mask-position: left center;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.abl-band__name {
	font-family: var(--font-body, "Raleway", sans-serif);
	font-size: clamp(19px, 1.7vw, 23px);
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	line-height: 1;
	color: #d8b86a;
}

/* The statistic is the headline here.
 *
 * On a card it is a supporting line under the fund's name; at this size it is
 * the largest thing in the panel. That is the substantive difference between
 * the two arms, and the thing the test is actually asking about. */
.abl-band__stat {
	margin: 0;
	font-family: var(--font-display, var(--font-body, "Raleway", sans-serif));
	font-size: clamp(24px, 2.6vw, 38px);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -0.005em;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.30);
	text-wrap: pretty;
}

.abl-band__with {
	font-family: var(--font-body, "Raleway", sans-serif);
	font-size: 15px;
	font-weight: 600;
	color: #fff;
}

/* Stacked, not side by side. At this size there is a column for them, and two
   people in a row would put a name under the panel's right edge. */
.abl-band__people {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.abl-person {
	display: flex;
	align-items: center;
	gap: 14px;
}
.abl-person__av {
	width: 52px;
	height: 52px;
	flex: none;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	border: 1px solid rgba(216, 184, 106, 0.55);
}
.abl-person__who {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	font-size: 15px;
}
.abl-person__who strong { font-weight: 700; color: #fff; }
.abl-person__role {
	font-size: 13.5px;
	font-weight: 300;
	color: rgba(255, 255, 255, 0.68);
}

/* ── the call to action, which types ──
 *
 * The same behaviour the small cards have, and the same reason for it: both
 * people are already on the panel in full, so this is not a disclosure. It
 * says the quiet part of the statistic above it, that giving here puts you
 * next to Tim and Laila rather than into a fund.
 *
 * The names are aria-hidden and the plain label stays in the accessibility
 * tree, because a screen reader has just read both names out of the panel and
 * a link that renames itself on hover is noise there. On a touch device the
 * label never changes, which is why it has to stand on its own.
 *
 * The animation itself is the giving page's, driven by the same script: it
 * looks for .abl-band__names exactly as it looks for the cards' equivalent. */
.abl-band__cta {
	display: inline-flex;
	align-items: baseline;
	gap: 9px;
	margin-top: 6px;
	font-family: var(--font-body, "Raleway", sans-serif);
	font-size: 17px;
	font-weight: 700;
	color: #e4af54;
}
.abl-band__arrow { font-size: 21px; }
.abl-band__names { display: none; }
/* A caret while the letters land, and nothing once they have. The box is
   pinned to its finished width by the script, so the caret marks the edge of
   what has been written rather than the edge of the box. */
.abl-band__names.is-typing::after {
	content: "|";
	margin-left: 1px;
	font-weight: 400;
	color: #e5cf8f;
	animation: ablCaret 620ms steps(1, end) infinite;
}
@keyframes ablCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (hover: hover) {
	.abl-band:hover .abl-band__say,
	.abl-band:focus-visible .abl-band__say { display: none; }
	.abl-band:hover .abl-band__names,
	.abl-band:focus-visible .abl-band__names {
		/* inline-block so the pinned width applies, and the baseline held so
		   the arrow beside it does not drop. */
		display: inline-block;
		white-space: nowrap;
		vertical-align: baseline;
		text-align: left;
	}
}
/* No underline on hover, on the label or the arrow.
 *
 * The panel already answers the hover twice, by typing the names out and by
 * scaling the photograph, and a third answer on the same gesture reads as a
 * plain web link rather than as a card. The small cards do not underline
 * either, and the two arms have to agree about everything except the thing
 * being tested. Stated rather than left to the cascade, because the whole
 * panel is an anchor and a browser default or a theme rule would otherwise
 * put a line under the lot. */
.fdm-give-page a.abl-band,
.fdm-give-page a.abl-band:hover,
.fdm-give-page a.abl-band:focus-visible,
.fdm-give-page a.abl-band:hover .abl-band__cta,
.fdm-give-page a.abl-band:hover .abl-band__names,
.fdm-give-page a.abl-band:hover .abl-band__arrow {
	text-decoration: none;
}

/* ── one column ──
 *
 * Below 820, the same place the problems page folds. The photograph stops
 * being the panel's background and becomes a 16:9 header above the words: a
 * copy column over a full-bleed photograph at phone width is a paragraph on a
 * picture, and the overlay that made it legible has to get so heavy that the
 * photograph is wasted anyway.
 *
 * The divider is reused rather than hidden. As a column child it lays itself
 * out as a horizontal rule, which keeps the gold seam between photograph and
 * words that the wide panel has between photograph and column. */
@media (max-width: 820px) {
	.abl-band {
		display: flex;
		flex-direction: column;
		min-height: 0;
		border-radius: 22px;
	}
	.abl-band__bg {
		position: relative;
		inset: auto;
		flex: 0 0 auto;
		width: 100%;
		aspect-ratio: 16 / 9;
		transform: none;
	}
	.abl-band:hover .abl-band__bg { transform: none; }
	/* The gradient existed to make words legible over the photograph. They are
	   under it now, so it only darkens a picture nobody is reading over. */
	.abl-band__overlay { display: none; }
	.abl-band__panel {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
		padding: 0 24px 28px;
		gap: 0;
	}
	.abl-band__divider {
		flex: 0 0 1px;
		align-self: stretch;
		width: 100%;
		height: 1px;
		margin: 0 0 24px;
		background: linear-gradient(to right,
			rgba(216, 184, 106, 0) 0%, #b8963e 12%, #b8963e 88%, rgba(216, 184, 106, 0) 100%);
	}
	.abl-band__content { flex: 1 1 auto; gap: 14px; }
	.abl-band__icon { width: 44px; height: 44px; }
	.abl-band__name { font-size: 15px; letter-spacing: 0.18em; }
	.abl-band__stat { font-size: clamp(23px, 6.4vw, 30px); }
	.abl-person__av { width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
	.abl-band__bg,
	.abl-band:hover .abl-band__bg { transition: none; transform: none; }
	.abl-band__names.is-typing::after { animation: none; }
}