/**
 * Ravenna Homes — site plan grid.
 *
 * Column count comes from the shortcode as --rh-site-plan-columns; everything
 * else is a custom property you can retune from Avada ▸ Custom CSS.
 */

.rh-site-plan {
	display: grid;
	grid-template-columns: repeat( var(--rh-site-plan-columns, 2), minmax( 0, 1fr ) );
	gap: var(--rh-site-plan-gap, 30px);
	align-items: start;
}

.rh-site-plan-item {
	position: relative;
}

.rh-site-plan-link {
	display: block;
	line-height: 0;
	text-decoration: none !important; /* Avada's underline rule carries an ID */
	transition: opacity 150ms ease, transform 150ms ease;
}

.rh-site-plan-link:hover,
.rh-site-plan-link:focus-visible {
	opacity: 0.9;
}

.rh-site-plan-link:focus-visible {
	outline: 2px solid var(--rh-navy, #063d5d);
	outline-offset: 3px;
}

.rh-site-plan-image {
	display: block;
	width: 100%;
	height: auto;
	border: var(--rh-site-plan-border, 1px solid #e0e0e0);
	background: #fff;
}

/* Site plans are wide, detailed drawings — two across is already tight on a
   tablet and unreadable on a phone. */
@media ( max-width: 1024px ) {

	.rh-site-plan {
		grid-template-columns: repeat( min( var(--rh-site-plan-columns, 2), 2 ), minmax( 0, 1fr ) );
	}
}

@media ( max-width: 640px ) {

	.rh-site-plan {
		grid-template-columns: 1fr;
		gap: calc( var(--rh-site-plan-gap, 30px) * 0.7 );
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.rh-site-plan-link {
		transition: none;
	}
}