/* ==========================================================================
   Recent Posts Showcase — front-end styles
   Desktop: 40/60 side-by-side layout
   Tablet:  stacked, featured on top, 4 posts in a clean 2x2 grid below
   Mobile:  stacked, featured on top, 4 posts as a minimal single-column list
   ========================================================================== */

.rps-wrapper * {
	box-sizing: border-box;
}

.rps-wrapper {
	width: 100%;
}

/* ---------- Base / Desktop layout: featured (40%) | grid (60%) ---------- */

.rps-wrapper .rps-layout {
	display: grid;
	grid-template-columns: 40fr 60fr;
	align-items: stretch;
	gap: 24px;
	width: 100%;
}

.rps-wrapper .rps-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.rps-wrapper .rps-card--featured {
	height: 100%;
}

.rps-wrapper .rps-card__image {
	width: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.rps-wrapper .rps-card__content {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.rps-wrapper .rps-card__title {
	margin: 0 0 12px 0;
	line-height: 1.3;
	white-space: normal;   /* always show the full title, never truncate */
	overflow: visible;
	word-break: break-word;
}

.rps-wrapper .rps-card__title-link {
	transition: color 0.2s ease;
}

.rps-wrapper .rps-card--featured .rps-card__excerpt {
	margin: 0 0 20px 0;
	line-height: 1.6;
}

.rps-wrapper .rps-card__footer {
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.rps-wrapper .rps-card__readmore {
	text-decoration: underline;
	text-underline-offset: 4px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	font-size: 0.8em;
	white-space: nowrap;
}

.rps-wrapper .rps-card__date {
	font-size: 0.85em;
	white-space: nowrap;
}

/* 2x2 grid of the 4 non-featured posts (desktop + tablet) */
.rps-wrapper .rps-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 24px;
}

/* ==========================================================================
   Tablet — stack featured on top, keep the 4 posts as a tidy 2x2 grid
   ========================================================================== */

@media (max-width: 1024px) {
	.rps-wrapper .rps-layout {
		grid-template-columns: 1fr;  /* full-width stack, no more 40/60 */
		gap: 20px;
	}
	.rps-wrapper .rps-card--featured .rps-card__image {
		height: 300px;
	}
	.rps-wrapper .rps-grid {
		gap: 20px;
	}
}

/* ==========================================================================
   Mobile — featured on top (shorter image), 4 posts become a clean,
   minimal single-column list instead of 4 separate boxes
   ========================================================================== */

@media (max-width: 767px) {
	.rps-wrapper .rps-layout {
		gap: 16px;
	}

	.rps-wrapper .rps-card--featured .rps-card__image {
		height: 220px;
	}

	.rps-wrapper .rps-card__content {
		padding: 16px !important;
	}

	/* Turn the 2x2 grid into a single, clean vertical list */
	.rps-wrapper .rps-grid {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	/* Minimal list-row look: strip the boxed card style, use a divider line instead */
	.rps-wrapper .rps-card--grid {
		border: none !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		background: transparent !important;
	}

	.rps-wrapper .rps-card--grid .rps-card__content {
		padding: 16px 4px !important;
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	}

	/* Remove the divider under the last item so the list ends cleanly */
	.rps-wrapper .rps-card--grid:last-child .rps-card__content {
		border-bottom: none;
	}

	.rps-wrapper .rps-card--grid .rps-card__title {
		margin-bottom: 8px;
		font-size: 0.95em;
	}

	.rps-wrapper .rps-card__footer {
		gap: 10px;
	}
}

/* ---------- Small phones: tighten spacing a bit more ---------- */

@media (max-width: 400px) {
	.rps-wrapper .rps-card--featured .rps-card__image {
		height: 180px;
	}
	.rps-wrapper .rps-card__content {
		padding: 12px !important;
	}
	.rps-wrapper .rps-card--grid .rps-card__content {
		padding: 12px 2px !important;
	}
	.rps-wrapper .rps-card__readmore,
	.rps-wrapper .rps-card__date {
		font-size: 0.75em;
	}
}