/* ==========================================================================
   Locations Section ("Where we work") — Home
   --------------------------------------------------------------------------
   Grid uses auto-fit/minmax rather than a fixed column count so it stays
   correct if the client adds a 4th, 5th, etc. location later — cards
   reflow naturally instead of leaving an orphaned card alone on a row.
   At exactly 3 items on a 1240px container this renders identically to a
   fixed 3-column grid.
   ========================================================================== */

.fae-locations__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	align-items: stretch;
}

.fae-locations__grid > .fae-reveal {
	height: 100%;
}

.fae-locations-card {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 260px;
	border-radius: 30px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background-color: #0f0f10;
	padding: 28px;
	text-decoration: none;
}

@media (min-width: 640px) {
	.fae-locations-card {
		padding: 36px;
	}
}

.fae-locations-card:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

.fae-locations-card__dash {
	display: block;
	width: 40px;
	height: 6px;
	margin-bottom: 24px;
	border-radius: 9999px;
	background-color: #c6f135;
}

.fae-locations-card__title {
	margin: 0;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: #ffffff;
}

.fae-locations-card__blurb {
	margin: 12px 0 0;
	font-size: 17px;
	line-height: 1.6;
	color: #a8a8b0;
}

.fae-locations-card__explore {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 32px;
	font-size: 14px;
	font-weight: 700;
	color: #ffffff;
	transition: color 0.15s ease;
}

.fae-locations-card:hover .fae-locations-card__explore {
	color: #c6f135;
}