/* Hello Elementor Child — Related Projects widget.
 *
 * Defaults mirror html/05-Active Project Detail Template/assets/styles.css
 * (.related-grid / .related-card / .related-image / .related-card-label /
 * .related-card-title / .related-card-location) — minus font-family, which
 * the parent theme controls. Colors use the design-system CSS variables with
 * sensible hard-coded fallbacks so the widget looks correct out of the box
 * even on a page that doesn't expose the variable set.
 */

.hrp-wrap{
	/* Container only — sizing/padding come from Elementor's own controls. */
}

.hrp-grid{
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:32px;
	align-items:stretch;
}

.hrp-card{
	display:block;
	text-decoration:none;
	color:inherit;
	position:relative;
	height:100%;
	transition:
		transform var(--duration-default, 240ms) var(--easing-default, cubic-bezier(0.16, 1, 0.3, 1)),
		background-color var(--duration-default, 240ms) var(--easing-default, cubic-bezier(0.16, 1, 0.3, 1)),
		box-shadow var(--duration-default, 240ms) var(--easing-default, cubic-bezier(0.16, 1, 0.3, 1)),
		border-color var(--duration-default, 240ms) var(--easing-default, cubic-bezier(0.16, 1, 0.3, 1));
}

.hrp-card:hover{
	transform:translateY(-4px);
}

/* Left/Right image position — flex split with the body wrapper as the
 * second flex child. */
.hrp-card[data-pos="left"],
.hrp-card[data-pos="right"]{
	display:flex;
	gap:16px;
	align-items:flex-start;
}
.hrp-card[data-pos="right"]{ flex-direction:row-reverse; }
.hrp-card[data-pos="left"] .hrp-card-body,
.hrp-card[data-pos="right"] .hrp-card-body{
	flex:1 1 auto;
	min-width:0;
}

.hrp-card-image{
	aspect-ratio:3/2;
	overflow:hidden;
	background:var(--indigo, #1E2A38);
	margin-bottom:18px;
	position:relative;
}

.hrp-card-image img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transition:transform var(--duration-slow, 600ms) var(--easing-default, cubic-bezier(0.16, 1, 0.3, 1));
}

.hrp-card:hover .hrp-card-image img{
	transform:scale(1.04);
}

.hrp-card-image::after{
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;
	background-color:transparent;
	transition:background-color var(--duration-default, 240ms) var(--easing-default, cubic-bezier(0.16, 1, 0.3, 1));
}

.hrp-card-label{
	display:block;
	color:var(--gold-burnished, #9E7C2E);
	margin:0 0 8px 0;
	font-size:9px;
	letter-spacing:.08em;
	text-transform:uppercase;
	line-height:1.4;
}

.hrp-card-title{
	font-size:24px;
	color:var(--indigo, #1E2A38);
	line-height:1.15;
	font-weight:500;
	margin:0 0 4px 0;
	letter-spacing:-.005em;
}

.hrp-card-location{
	display:block;
	font-size:14px;
	font-style:italic;
	color:var(--gold-burnished, #9E7C2E);
}

.hrp-card-excerpt{
	margin:8px 0 0 0;
	font-size:14px;
	line-height:1.5;
	color:var(--indigo, #1E2A38);
	opacity:.8;
}

.hrp-empty{
	padding:48px 16px;
	text-align:center;
	color:var(--gold-burnished, #9E7C2E);
	font-style:italic;
}

/* Body wrapper used only for left/right image positions. */
.hrp-card-body{
	display:flex;
	flex-direction:column;
}

/* ─── Responsive ─────────────────────────────────────────────────────── */

/* Match the mockup: at narrow mid-widths the 3-up looks cramped, collapse
 * to 1-up. Two-up is enabled at tablet breakpoint via Elementor's
 * responsive Columns control. */
@media (max-width:1024px){
	.hrp-grid{
		grid-template-columns:repeat(2, minmax(0, 1fr));
	}
}

@media (max-width:600px){
	.hrp-grid{
		grid-template-columns:1fr;
		gap:32px;
	}
	.hrp-card[data-pos="left"],
	.hrp-card[data-pos="right"]{
		flex-direction:column;
	}
	.hrp-card[data-pos="left"] .hrp-card-image,
	.hrp-card[data-pos="right"] .hrp-card-image{
		flex:0 0 auto !important;
		width:100%;
	}
	.hrp-card-title{
		font-size:22px;
	}
}