/**
 * Floor Ready Pro - Location template
 *
 * Styles for the sections unique to template-location.php: Overview,
 * Local Considerations, Gallery and Cities Served. Page Header is styled
 * in about.css, and Services/Why Us/Testimonials/CTA in home.css/about.css
 * — this template loads all of them alongside this file.
 */

/* ----------------------------------------------------------------------
 * Overview
 * -------------------------------------------------------------------- */
.frp-location-intro {
	padding-top: var(--frp-space-20);
	padding-bottom: var(--frp-space-20);
}

.frp-location-intro__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--frp-space-16);
}

.frp-location-intro__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--frp-radius-lg);
}

.frp-location-intro__text {
	margin-top: var(--frp-space-4);
	color: var(--frp-grey-500);
}

.frp-location-intro__stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--frp-space-8);
	margin-top: var(--frp-space-8);
	padding-top: var(--frp-space-8);
	border-top: var(--frp-border);
}

.frp-location-intro__stat-number {
	display: block;
	font-family: var(--frp-font-heading);
	font-size: var(--frp-fs-h2);
	font-weight: var(--frp-fw-bold);
	color: var(--frp-gold);
	line-height: 1;
}

.frp-location-intro__stat-label {
	display: block;
	margin-top: var(--frp-space-2);
	font-size: var(--frp-fs-xs);
	font-weight: var(--frp-fw-medium);
	color: var(--frp-grey-500);
	text-transform: uppercase;
	letter-spacing: var(--frp-ls-eyebrow);
}

/* ----------------------------------------------------------------------
 * Local considerations / climate
 * -------------------------------------------------------------------- */
.frp-location-climate {
	padding-top: var(--frp-space-20);
	padding-bottom: var(--frp-space-20);
	background: var(--frp-grey-50);
}

.frp-location-climate__text {
	margin-top: var(--frp-space-4);
	max-width: 65ch;
	color: var(--frp-grey-500);
}

.frp-location-climate__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--frp-space-6);
}

.frp-location-climate-card {
	padding: var(--frp-space-6);
	background: var(--frp-white);
	border-radius: var(--frp-radius-lg);
	box-shadow: var(--frp-shadow-sm);
	transition: box-shadow var(--frp-transition), transform var(--frp-transition);
}

.frp-location-climate-card:hover {
	box-shadow: var(--frp-shadow-md);
	transform: translateY(-4px);
}

.frp-location-climate-card__title {
	margin-bottom: var(--frp-space-2);
	font-size: var(--frp-fs-h5);
	color: var(--frp-gold);
}

.frp-location-climate-card__text {
	font-size: var(--frp-fs-sm);
	line-height: var(--frp-lh-loose);
}

/* ----------------------------------------------------------------------
 * Gallery
 * -------------------------------------------------------------------- */
.frp-location-gallery {
	padding-top: var(--frp-space-20);
	padding-bottom: var(--frp-space-20);
}

.frp-location-gallery__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--frp-space-4);
}

.frp-location-gallery__item img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--frp-radius-md);
	transition: transform var(--frp-transition-slow);
}

.frp-location-gallery__item {
	overflow: hidden;
	border-radius: var(--frp-radius-md);
}

.frp-location-gallery__item:hover img {
	transform: scale(1.06);
}

/* ----------------------------------------------------------------------
 * Cities served
 * -------------------------------------------------------------------- */
.frp-location-areas {
	padding-top: var(--frp-space-20);
	padding-bottom: var(--frp-space-20);
	background: var(--frp-grey-50);
}

.frp-location-areas__text {
	margin-top: var(--frp-space-4);
	max-width: 65ch;
	color: var(--frp-grey-500);
}

.frp-location-areas__body {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--frp-space-10);
	padding: var(--frp-space-8);
	background: var(--frp-white);
	border-radius: var(--frp-radius-lg);
	box-shadow: var(--frp-shadow-sm);
}

.frp-location-areas__cities {
	display: flex;
	flex-wrap: wrap;
	gap: var(--frp-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
	flex: 1;
	min-width: 260px;
}

.frp-location-areas__city {
	display: inline-flex;
	align-items: center;
	gap: var(--frp-space-2);
	padding: var(--frp-space-2) var(--frp-space-4);
	background: var(--frp-grey-50);
	border-radius: var(--frp-radius-pill);
	font-size: var(--frp-fs-sm);
	font-weight: var(--frp-fw-medium);
	color: var(--frp-ink);
}

.frp-location-areas__city .frp-icon {
	color: var(--frp-gold);
}

.frp-location-areas__contact {
	display: flex;
	flex-direction: column;
	gap: var(--frp-space-2);
	flex-shrink: 0;
}

.frp-location-areas__phone,
.frp-location-areas__address {
	display: flex;
	align-items: center;
	gap: var(--frp-space-2);
	margin: 0;
	font-size: var(--frp-fs-sm);
	font-weight: var(--frp-fw-medium);
	color: var(--frp-ink);
}

.frp-location-areas__phone .frp-icon,
.frp-location-areas__address .frp-icon {
	flex-shrink: 0;
	color: var(--frp-gold);
}

.frp-location-areas__phone:hover {
	color: var(--frp-gold);
}

/* ----------------------------------------------------------------------
 * Responsive
 * -------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.frp-location-intro__grid {
		grid-template-columns: 1fr;
	}

	.frp-location-climate__grid,
	.frp-location-gallery__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.frp-location-areas__body {
		flex-direction: column;
	}
}

@media (max-width: 640px) {
	.frp-location-intro,
	.frp-location-climate,
	.frp-location-gallery,
	.frp-location-areas {
		padding-top: var(--frp-space-12);
		padding-bottom: var(--frp-space-12);
	}

	.frp-location-climate__grid,
	.frp-location-gallery__grid {
		grid-template-columns: 1fr;
	}

	.frp-location-intro__stats {
		gap: var(--frp-space-6);
	}

	.frp-location-areas__body {
		padding: var(--frp-space-5);
	}
}