/**
 * Reports — front-end styles.
 *
 * Every selector is scoped under `.reports-grid` and every themeable
 * value is exposed as a CSS custom property with a sensible default.
 * Covers keep a portrait/poster aspect ratio (matches a report cover
 * page rather than a landscape photo) and are shown in full via
 * object-fit: contain so nothing gets cropped off a title/cover design.
 */
.reports-grid {
	--reports-accent: #0e649c;
	--reports-heading-color: #16233c;
	--reports-card-bg: #ffffff;
	--reports-card-border: #e7ebf0;
	--reports-card-radius: 10px;
	--reports-font: "Nunito", sans-serif;

	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 32px;
	font-family: var( --reports-font );
}

@media ( max-width: 900px ) {
	.reports-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 560px ) {
	.reports-grid {
		grid-template-columns: 1fr;
	}
}

.reports-grid__card {
	display: flex;
	flex-direction: column;
	gap: 18px;
	color: inherit;
	text-decoration: none;
	transition: transform 0.3s ease;
}

.reports-grid__card:hover,
.reports-grid__card:focus {
	color: inherit;
	text-decoration: none;
}

.reports-grid__card:hover {
	transform: translateY( -4px );
}

.reports-grid__photo-wrap {
	display: block;
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var( --reports-card-bg );
	border: 1px solid var( --reports-card-border );
	border-radius: var( --reports-card-radius );
	box-shadow: 0 6px 20px rgba( 16, 35, 60, 0.06 );
	transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.reports-grid__card:hover .reports-grid__photo-wrap {
	border-color: var( --reports-accent );
	box-shadow: 0 14px 28px rgba( 16, 35, 60, 0.12 );
}

.reports-grid__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.reports-grid__photo--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: #eaf3fa;
}

.reports-grid__photo--placeholder svg {
	width: 46px;
	height: 46px;
	fill: var( --reports-accent );
}

.reports-grid__title {
	text-align: center;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
	color: var( --reports-heading-color );
}

.reports-grid__card:hover .reports-grid__title {
	color: var( --reports-accent );
}