/**
 * Resources grid.
 * Hover mirrors Aircraft Collection Grid and uses transforms only, preventing
 * card or row layout shifts.
 */

.resources-grid {
	--rg-pad-block: 2.5rem;
	--rg-gap-row: 1.5rem;
	--rg-gap-col: 1.3125rem;
	--rg-radius: 0.75rem;
	--rg-media-height: 16rem;
	--rg-body-pad: 1.5rem;
	--rg-body-min-height: 12rem;
	--rg-copy-gap: 1.125rem;
	--rg-cta-gap: 2.25rem;
	--rg-slide: calc(var(--rg-cta-gap) + 2rem);
	--rg-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--rg-duration: 0.55s;
	--rg-image-duration: 0.7s;
	--rg-cols: 3;
	--rg-cols-tablet: 2;
	--rg-cols-mobile: 1;

	padding-block: var(--rg-pad-block);
	color: var(--color-navy);
	background-color: var(--color-white);
}

.resources-grid__inner {
	display: flex;
	flex-direction: column;
	gap: 3rem;
	width: 100%;
	max-width: var(--container-outer-max);
	margin-inline: auto;
	padding-inline: var(--container-pad-inline);
	box-sizing: border-box;
}

.resources-grid__visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.resources-grid__grid {
	display: grid;
	grid-template-columns: repeat(var(--rg-cols-mobile), minmax(0, 1fr));
	column-gap: var(--rg-gap-col);
	row-gap: var(--rg-gap-row);
	align-items: stretch;
}

.resources-grid__item {
	min-width: 0;
	align-self: stretch;
}

.resources-grid__item.is-hidden,
.resources-grid__item[hidden] {
	display: none;
}

.resources-grid__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
	border-radius: var(--rg-radius);
	overflow: hidden;
	background-color: var(--color-deck);
	transition: background-color 0.4s ease;
}

.resources-grid__card:focus-visible {
	outline: 2px solid var(--color-navy);
	outline-offset: 3px;
}

.resources-grid__media {
	position: relative;
	flex: 0 0 auto;
	width: 100%;
	height: var(--rg-media-height);
	overflow: hidden;
	background-color: #b8b8b8;
}

.resources-grid__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transform: scale(1);
	transform-origin: center;
	transition: transform var(--rg-image-duration) var(--rg-ease);
	will-change: transform;
}

.resources-grid__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0;
	min-height: var(--rg-body-min-height);
	margin-bottom: 0;
	padding: var(--rg-body-pad);
	box-sizing: border-box;
	background-color: var(--color-deck);
	transform: translateY(0);
	transition:
		transform var(--rg-duration) var(--rg-ease),
		background-color 0.4s ease,
		gap var(--rg-duration) var(--rg-ease),
		margin-bottom var(--rg-duration) var(--rg-ease);
	will-change: transform;
}

.resources-grid__copy {
	display: flex;
	flex-direction: column;
	gap: var(--rg-copy-gap);
	width: 100%;
}

.resources-grid__title {
	margin: 0;
	font-family: var(--font-family-display);
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--color-navy);
	transition: color 0.35s ease;
}

.resources-grid__excerpt {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	font-family: var(--font-family-sans);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--color-navy);
	opacity: 0.75;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	transition: color 0.35s ease;
}

.resources-grid__cta {
	display: inline-flex;
	align-items: center;
	align-self: flex-end;
	justify-content: flex-end;
	flex: 0 0 auto;
	gap: 1.25rem;
	max-height: 0;
	margin: 0;
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateY(0.35rem);
	transition:
		opacity 0.4s ease,
		visibility 0.4s ease,
		transform 0.4s var(--rg-ease),
		max-height var(--rg-duration) var(--rg-ease);
}

.resources-grid__cta-label {
	font-family: var(--font-family-sans);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.2375;
	letter-spacing: 0.02em;
	color: var(--color-white);
	white-space: nowrap;
}

.resources-grid__cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	padding: 0.5rem;
	box-sizing: border-box;
	border-radius: 50%;
	background-color: var(--color-white);
}

.resources-grid__cta-icon img {
	display: block;
	width: var(--btn-icon-img-size, 1.25rem);
	height: var(--btn-icon-img-size, 1.25rem);
	object-fit: contain;
}

.resources-grid__card:hover,
.resources-grid__card:focus-visible {
	background-color: var(--color-navy);
}

.resources-grid__card:hover .resources-grid__image,
.resources-grid__card:focus-visible .resources-grid__image {
	transform: scale(1.1);
}

.resources-grid__card:hover .resources-grid__body,
.resources-grid__card:focus-visible .resources-grid__body {
	gap: var(--rg-cta-gap);
	margin-bottom: calc(var(--rg-slide) * -1);
	background-color: var(--color-navy);
	transform: translateY(calc(var(--rg-slide) * -1));
}

.resources-grid__card:hover .resources-grid__title,
.resources-grid__card:focus-visible .resources-grid__title,
.resources-grid__card:hover .resources-grid__excerpt,
.resources-grid__card:focus-visible .resources-grid__excerpt {
	color: var(--color-white);
}

.resources-grid__card:hover .resources-grid__cta,
.resources-grid__card:focus-visible .resources-grid__cta {
	max-height: 2rem;
	overflow: visible;
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.resources-grid__actions {
	display: flex;
	justify-content: center;
	width: 100%;
}

.resources-grid__load-more {
	--btn-navy-font-size: 1rem;
	--btn-navy-font-weight: 400;
	--btn-navy-letter-spacing: 0.02em;
	--btn-navy-line-height: 1.2375;
	--btn-navy-min-height: 3rem;
	cursor: pointer;
}

.resources-grid__load-more[hidden] {
	display: none;
}

.resources-grid__load-more-label {
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.resources-grid__card,
	.resources-grid__image,
	.resources-grid__body,
	.resources-grid__title,
	.resources-grid__excerpt,
	.resources-grid__cta {
		transition: none;
	}

	.resources-grid__card:hover .resources-grid__image,
	.resources-grid__card:focus-visible .resources-grid__image,
	.resources-grid__card:hover .resources-grid__body,
	.resources-grid__card:focus-visible .resources-grid__body {
		margin-bottom: 0;
		transform: none;
	}
}

@media (min-width: 40rem) {
	.resources-grid {
		--rg-pad-block: 3.75rem;
		--rg-gap-row: 2.5rem;
		--rg-media-height: 18rem;
		--rg-body-pad: 2rem;
		--rg-body-min-height: 14.6875rem;
	}

	.resources-grid__grid {
		grid-template-columns: repeat(var(--rg-cols-tablet), minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.resources-grid {
		--rg-gap-row: 4rem;
		--rg-media-height: 22.4375rem;
	}

	.resources-grid__grid {
		grid-template-columns: repeat(var(--rg-cols), minmax(0, 1fr));
	}
}

@media (hover: none) {
	.resources-grid__card:focus-within {
		background-color: var(--color-navy);
	}

	.resources-grid__card:focus-within .resources-grid__image {
		transform: scale(1.1);
	}

	.resources-grid__card:focus-within .resources-grid__body {
		gap: var(--rg-cta-gap);
		margin-bottom: calc(var(--rg-slide) * -1);
		background-color: var(--color-navy);
		transform: translateY(calc(var(--rg-slide) * -1));
	}

	.resources-grid__card:focus-within .resources-grid__title,
	.resources-grid__card:focus-within .resources-grid__excerpt {
		color: var(--color-white);
	}

	.resources-grid__card:focus-within .resources-grid__cta {
		max-height: 2rem;
		overflow: visible;
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
	}
}