/*
 * Focus Areas — patterns/focus-areas.php.
 *
 * Dark impact cards for the Donation page. Tokens only.
 */

.dr-focus-areas {
	background: var(--dr-color-bg-inverse);
	color: var(--dr-color-text-inverse);
	overflow: hidden;
	padding-block: clamp(var(--dr-space-8), 9vw, var(--dr-space-16));
	position: relative;
}

.dr-focus-areas__head {
	position: relative;
}

.wp-block-group.dr-focus-areas__head > * {
	margin-block: 0;
}

.dr-focus-areas__eyebrow {
	color: var(--dr-color-premium);
}

.dr-focus-areas__title {
	color: var(--dr-color-text-inverse);
	font-size: var(--dr-display-2);
	font-weight: var(--dr-font-weight-bold);
	letter-spacing: var(--dr-tracking-display-2);
	line-height: var(--dr-line-height-heading);
	margin-block-start: var(--dr-space-2);
	max-width: 48rem;
}

.dr-focus-areas__lead {
	color: color-mix(in srgb, var(--dr-color-text-inverse) 72%, transparent);
	font-size: var(--dr-font-size-400);
	line-height: var(--dr-line-height-body);
	margin-block-start: var(--dr-space-2);
	max-width: 47rem;
}

.dr-focus-areas__grid {
	display: grid;
	gap: var(--dr-space-3);
	grid-template-columns: 1fr;
	margin-block-start: var(--dr-space-6);
}

.dr-focus-card {
	border: var(--dr-border-width-1) solid color-mix(in srgb, var(--dr-color-text-inverse) 14%, transparent);
	border-radius: var(--dr-radius-5);
	box-shadow: var(--dr-shadow-2);
	isolation: isolate;
	min-height: 24rem;
	overflow: hidden;
	position: relative;
	transition:
		border-color var(--dr-duration-normal) var(--dr-ease-standard),
		box-shadow var(--dr-duration-normal) var(--dr-ease-standard),
		transform var(--dr-duration-normal) var(--dr-ease-standard);
	will-change: transform;
}

.dr-focus-card:hover,
.dr-focus-card:focus-within {
	border-color: color-mix(in srgb, var(--dr-color-premium) 52%, color-mix(in srgb, var(--dr-color-text-inverse) 14%, transparent));
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--dr-color-premium) 18%, transparent),
		0 1.5rem 3rem rgba(15, 23, 42, 0.1);
	transform: translateY(-0.375rem);
}

@media (prefers-reduced-motion: reduce) {
	.dr-focus-card {
		transition: none;
	}

	.dr-focus-card:hover,
	.dr-focus-card:focus-within {
		transform: none;
	}
}

.dr-focus-card__image,
.dr-focus-card__overlay {
	inset: 0;
	position: absolute;
}

.dr-focus-card__image {
	height: 100%;
	object-fit: cover;
	width: 100%;
	z-index: -2;
}

.dr-focus-card__overlay {
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--dr-color-bg-inverse) 16%, transparent), color-mix(in srgb, var(--dr-color-bg-inverse) 82%, transparent)),
		linear-gradient(90deg, color-mix(in srgb, var(--dr-color-bg-inverse) 68%, transparent), transparent);
	z-index: -1;
}

.dr-focus-card__inner {
	display: flex;
	flex-direction: column;
	min-height: inherit;
	padding: var(--dr-space-4);
	position: relative;
	z-index: 1;
}

.dr-focus-card__icon {
	align-items: center;
	background: color-mix(in srgb, var(--dr-color-bg-inverse) 42%, transparent);
	border: var(--dr-border-width-1) solid color-mix(in srgb, var(--dr-color-text-inverse) 18%, transparent);
	border-radius: var(--dr-radius-round);
	color: var(--dr-color-premium);
	display: inline-flex;
	flex: 0 0 auto;
	height: 4rem;
	justify-content: center;
	backdrop-filter: blur(14px);
	position: relative;
	z-index: 2;
	width: 4rem;
}

.dr-focus-card__icon svg {
	display: block;
	height: 2.125rem;
	width: 2.125rem;
}

.dr-focus-card__badge {
	align-self: flex-start;
	background: color-mix(in srgb, var(--dr-color-bg-inverse) 42%, transparent);
	border: var(--dr-border-width-1) solid color-mix(in srgb, var(--dr-color-text-inverse) 18%, transparent);
	border-radius: var(--dr-radius-round);
	color: var(--dr-color-premium);
	font-size: var(--dr-font-size-100);
	font-weight: var(--dr-font-weight-bold);
	letter-spacing: var(--dr-letter-spacing-wide);
	margin-block-start: var(--dr-space-3);
	padding: 0.45rem 0.7rem;
}

.dr-focus-card__content {
	margin-block-start: auto;
}

.dr-focus-card__title {
	color: var(--dr-color-text-inverse);
	font-size: var(--dr-font-size-500);
	font-weight: var(--dr-font-weight-bold);
	letter-spacing: var(--dr-letter-spacing-tight);
	line-height: var(--dr-line-height-heading);
	margin: 0;
}

.dr-focus-card__text {
	color: color-mix(in srgb, var(--dr-color-text-inverse) 72%, transparent);
	font-size: var(--dr-font-size-300);
	line-height: var(--dr-line-height-body);
	margin: var(--dr-space-1) 0 0;
}

.dr-focus-card__stat {
	align-items: baseline;
	display: flex;
	gap: var(--dr-space-1);
	margin: var(--dr-space-3) 0 0;
}

.dr-focus-card__stat strong {
	color: var(--dr-color-text-inverse);
	font-size: var(--dr-font-size-600);
	font-weight: var(--dr-font-weight-bold);
	line-height: 1;
}

.dr-focus-card__stat span {
	color: color-mix(in srgb, var(--dr-color-text-inverse) 64%, transparent);
	font-size: var(--dr-font-size-200);
	font-weight: var(--dr-font-weight-semibold);
}

.dr-focus-card__link {
	color: var(--dr-color-premium);
	display: inline-flex;
	font-size: var(--dr-font-size-200);
	font-weight: var(--dr-font-weight-bold);
	gap: 0.35rem;
	margin-block-start: var(--dr-space-3);
	text-decoration: none;
}

.dr-focus-card__link:hover {
	color: var(--dr-color-premium-strong);
}

.dr-focus-areas__footer {
	align-items: center;
	background: color-mix(in srgb, var(--dr-color-bg-inverse) 42%, transparent);
	border: var(--dr-border-width-1) solid color-mix(in srgb, var(--dr-color-text-inverse) 14%, transparent);
	border-radius: var(--dr-radius-5);
	display: grid;
	gap: var(--dr-space-3);
	margin-block-start: var(--dr-space-4);
	padding: var(--dr-space-4);
	transition:
		border-color var(--dr-duration-normal) var(--dr-ease-standard),
		box-shadow var(--dr-duration-normal) var(--dr-ease-standard),
		transform var(--dr-duration-normal) var(--dr-ease-standard);
	will-change: transform;
}

.dr-focus-areas__footer:hover,
.dr-focus-areas__footer:focus-within {
	border-color: color-mix(in srgb, var(--dr-color-premium) 52%, color-mix(in srgb, var(--dr-color-text-inverse) 14%, transparent));
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--dr-color-premium) 18%, transparent),
		0 1.5rem 3rem rgba(15, 23, 42, 0.1);
	transform: translateY(-0.375rem);
}

@media (prefers-reduced-motion: reduce) {
	.dr-focus-areas__footer {
		transition: none;
	}

	.dr-focus-areas__footer:hover,
	.dr-focus-areas__footer:focus-within {
		transform: none;
	}
}

.dr-focus-areas__footer-icon {
	align-items: center;
	background: color-mix(in srgb, var(--dr-color-bg-inverse) 42%, transparent);
	border: var(--dr-border-width-1) solid color-mix(in srgb, var(--dr-color-text-inverse) 18%, transparent);
	border-radius: var(--dr-radius-round);
	color: var(--dr-color-premium);
	display: inline-flex;
	height: 3.25rem;
	justify-content: center;
	width: 3.25rem;
}

.dr-focus-areas__footer-icon svg {
	height: 1.5rem;
	width: 1.5rem;
}

.dr-focus-areas__footer-copy h3 {
	color: var(--dr-color-text-inverse);
	font-size: var(--dr-font-size-500);
	line-height: var(--dr-line-height-heading);
	margin: 0;
}

.dr-focus-areas__footer-copy p {
	color: color-mix(in srgb, var(--dr-color-text-inverse) 72%, transparent);
	line-height: var(--dr-line-height-body);
	margin: var(--dr-space-1) 0 0;
}

.dr-focus-areas__cta {
	align-items: center;
	background: var(--dr-color-premium);
	border-radius: var(--dr-radius-3);
	color: var(--dr-color-bg-inverse);
	display: inline-flex;
	font-size: var(--dr-font-size-200);
	font-weight: var(--dr-font-weight-bold);
	justify-content: center;
	min-height: 3.25rem;
	padding-inline: var(--dr-space-3);
	text-decoration: none;
}

.dr-focus-areas__cta:hover {
	background: var(--dr-color-premium-strong);
	color: var(--dr-color-text-inverse);
}

@media (min-width: 48rem) {
	.dr-focus-areas__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dr-focus-card--large {
		grid-column: 1 / -1;
	}

	.dr-focus-areas__footer {
		grid-template-columns: auto 1fr;
	}

	.dr-focus-areas__cta {
		grid-column: 2;
		justify-self: start;
	}
}

@media (min-width: 72rem) {
	.dr-focus-areas__grid {
		grid-template-columns: minmax(0, 1.12fr) repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(2, minmax(18rem, auto));
	}

	.dr-focus-card {
		min-height: 18rem;
	}

	.dr-focus-card--large {
		grid-column: 1;
		grid-row: 1 / span 2;
		min-height: 100%;
	}

	.dr-focus-card--large .dr-focus-card__title {
		font-size: var(--dr-font-size-600);
	}

	.dr-focus-areas__footer {
		grid-template-columns: auto 1fr auto;
	}

	.dr-focus-areas__cta {
		grid-column: auto;
		justify-self: end;
	}
}