/**
 * Foundation Right Pro - About Us page
 * Values grid, stats band, team grid, CTA banner.
 *
 * Loaded alongside home.css (shared about-grid/feature-row/process/quote-card
 * styles) and page-banner.css (shared inner-page banner) on page-about.php.
 * The Our Values card/grid styles here (.frp-value-card, .frp-values__grid)
 * are also reused as-is by the Contact Us template for its info and service
 * area cards.
 */

/* ==========================================================================
   1. Our Story - no "Call Our Team" box, so the media column needs less
   reserved space at the bottom than the homepage About section.
   ========================================================================== */

.frp-about__media--no-call {
	padding-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
}

/* ==========================================================================
   2. Our Values
   ========================================================================== */

.frp-values__intro {
	margin-top: var(--frp-space-3);
	font-size: var(--frp-fs-lead);
	line-height: var(--frp-lh-loose);
}

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

/* Cards-per-row is editable per page; each variant collapses gracefully. */
.frp-values__grid--cols-2 {
	grid-template-columns: repeat(2, 1fr);
}

.frp-values__grid--cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

.frp-values__grid--cols-4 {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
	.frp-values__grid--cols-3,
	.frp-values__grid--cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.frp-values__grid {
		grid-template-columns: 1fr;
	}
}

.frp-value-card {
	padding: var(--frp-space-8) var(--frp-space-6);
	border: 1.5px solid var(--frp-grey-100);
	border-radius: var(--frp-radius-lg);
	background: var(--frp-white);
	text-align: center;
	transition: border-color var(--frp-transition), box-shadow var(--frp-transition),
		transform var(--frp-transition);
}

.frp-value-card:hover {
	border-color: var(--frp-maroon);
	box-shadow: var(--frp-shadow-md);
	transform: translateY(-2px);
}

.frp-value-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: var(--frp-space-5);
	border-radius: var(--frp-radius-circle);
	background: var(--frp-maroon-10);
	color: var(--frp-maroon);
}

.frp-value-card__title {
	margin-bottom: var(--frp-space-2);
	font-size: var(--frp-fs-h4);
}

.frp-value-card__text {
	margin: 0;
	font-size: var(--frp-fs-sm);
	line-height: var(--frp-lh-snug);
}

/* ==========================================================================
   3. Stats band
   ========================================================================== */

.frp-stats {
	padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem);
	background: var(--frp-grey-50);
}

.frp-stats__grid {
	display: grid;
	gap: var(--frp-space-8);
	grid-template-columns: repeat(4, 1fr);
	text-align: center;
}

@media (max-width: 780px) {
	.frp-stats__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.frp-stat__number {
	display: block;
	color: var(--frp-maroon);
	font-family: var(--frp-font-heading);
	font-size: var(--frp-fs-h1);
	font-weight: var(--frp-fw-bold);
	line-height: 1;
}

.frp-stat__suffix {
	font-size: 0.6em;
}

.frp-stat__label {
	display: block;
	margin-top: var(--frp-space-2);
	color: var(--frp-grey-500);
	font-size: var(--frp-fs-sm);
	font-weight: var(--frp-fw-medium);
}

/* ==========================================================================
   4. Team
   ========================================================================== */

.frp-team__intro {
	margin-top: var(--frp-space-3);
	font-size: var(--frp-fs-lead);
	line-height: var(--frp-lh-loose);
}

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

@media (max-width: 780px) {
	.frp-team__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.frp-team__grid {
		grid-template-columns: 1fr;
	}
}

.frp-team-card {
	text-align: center;
}

.frp-team-card__media {
	overflow: hidden;
	margin-bottom: var(--frp-space-5);
	border-radius: var(--frp-radius-lg);
}

.frp-team-card__media img {
	width: 100%;
	aspect-ratio: 4 / 4.3;
	object-fit: cover;
	transition: transform var(--frp-transition-slow);
}

.frp-team-card:hover .frp-team-card__media img {
	transform: scale(1.04);
}

.frp-team-card__name {
	margin-bottom: var(--frp-space-1);
	font-size: var(--frp-fs-h4);
}

.frp-team-card__role {
	margin: 0;
	color: var(--frp-maroon);
	font-size: var(--frp-fs-sm);
	font-weight: var(--frp-fw-semibold);
}

/* ==========================================================================
   5. CTA banner
   ========================================================================== */

.frp-cta-banner {
	padding-block: clamp(3rem, 1.5rem + 5vw, 5.5rem);
	background: var(--frp-gradient-maroon);
	color: var(--frp-on-dark-70);
}

.frp-cta-banner__inner {
	max-width: 42rem;
	margin-inline: auto;
	text-align: center;
}

.frp-cta-banner__title {
	color: var(--frp-white);
}

.frp-cta-banner__text {
	margin: 0 0 var(--frp-space-8);
	font-size: var(--frp-fs-lead);
	line-height: var(--frp-lh-loose);
}

.frp-cta-banner__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--frp-space-4);
}

.frp-cta-banner__phone {
	gap: var(--frp-space-2);
}