/* Related articles block — Figma 1009:12497 desktop / 1009:13872 mobile.
   Heading 1009:12499 (32/38, weight 700, #093B4D, -0.04em).
   Card 1009:12501 (white bg, radius 10, padding 24/24/32/24, gap 32 image→body,
   title 24/30 weight 700 -0.012em, excerpt 18/23 grey-01, "Read more" 16 semibold underline). */

.rw-block-related-articles {
	background: var(--rw-color-bg-gray);
}

.rw-block-related-articles__head {
	display: flex;
	flex-direction: column;
	gap: var(--rw-space-sm);
	margin-bottom: 32px;
	max-width: 50rem;
}

.rw-block-related-articles__heading {
	/* Figma 1009:12499 — 32px / 38px / -0.04em / weight 700 / Primary Green */
	font-family: var(--rw-font-text);
	font-weight: 700;
	font-size: 2rem;       /* 32px */
	line-height: 2.375rem; /* 38px */
	letter-spacing: -0.04em;
	color: var(--rw-color-primary-green);
	margin: 0;
}

.rw-block-related-articles__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--rw-space-lg);
	align-items: start;
}

.rw-block-related-articles__card {
	display: flex;
}

/* Card per Figma 1009:12501 — white bg, radius 10, padding 24/24/32/24,
   internal flex column with gap between thumb and body. */
.rw-block-related-articles__link {
	display: flex;
	flex-direction: column;
	gap: var(--rw-space-lg); /* 32px between thumb and body */
	width: 100%;
	padding: 1.5rem 1.5rem 2rem; /* 24px top/sides, 32px bottom */
	background: var(--rw-color-white);
	border-radius: var(--rw-radius-lg);
	color: inherit;
	text-decoration: none;
}

.rw-block-related-articles__thumb {
	position: relative;
	width: 100%;
	aspect-ratio: 376 / 282; /* Figma card image ratio */
	overflow: hidden;
	border-radius: var(--rw-radius-xs); /* 4px per Figma 1009:12503 */
	background: var(--rw-color-bg-mist);
}

.rw-block-related-articles__image,
.rw-block-related-articles__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.rw-block-related-articles__link:hover .rw-block-related-articles__image,
.rw-block-related-articles__link:hover .rw-block-related-articles__thumb img {
	transform: scale(1.03);
}

.rw-block-related-articles__body {
	display: flex;
	flex-direction: column;
	gap: var(--rw-space-md); /* 24px between text block and Read more */
}

.rw-block-related-articles__text {
	display: flex;
	flex-direction: column;
	gap: var(--rw-space-sm); /* 16px between title and excerpt */
}

.rw-block-related-articles__title {
	/* Figma 1009:12506 — 24px / 30px / -0.012em / weight 700 / Primary Green */
	font-family: var(--rw-font-text);
	font-weight: 700;
	font-size: 1.5rem;     /* 24px */
	line-height: 1.875rem; /* 30px */
	letter-spacing: -0.012em;
	color: var(--rw-color-primary-green);
	margin: 0;
	transition: color 0.2s ease;
}

.rw-block-related-articles__excerpt {
	/* Figma 1009:12508 — 18px / 23px / -0.012em / weight 400 / Grey 01 */
	font-family: var(--rw-font-text);
	font-weight: 400;
	font-size: 1.125rem;    /* 18px */
	line-height: 1.4375rem; /* 23px */
	letter-spacing: -0.012em;
	color: var(--rw-color-grey-01);
	margin: 0;
}

.rw-block-related-articles__cta {
	/* Figma 1009:12509 — 16px / 14px / weight 600 / Primary Green / underline */
	font-family: var(--rw-font-text);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	color: var(--rw-color-primary-green);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.rw-block-related-articles__link:hover .rw-block-related-articles__title {
	color: var(--rw-color-primary-blue);
}

/* ===== Responsive — Figma 1009:13872 shows 2 cards on mobile ===== */
@media (max-width: 767px) {
	.rw-block-related-articles__grid {
		grid-template-columns: 1fr;
		gap: var(--rw-space-lg);
	}
	.rw-block-related-articles__card:nth-child(n+3) {
		display: none;
	}
	.rw-block-related-articles__head {
		margin-bottom: var(--rw-space-xl);
	}
	.rw-block-related-articles__link {
		padding: 1.25rem 1.25rem 1.5rem;
	}
}