/**
 * BRO Electrical — "What We Do" homepage section.
 * Architectural, restrained treatment: hairline dividers instead of
 * boxed/shadowed cards, large type, subtle hover states only.
 */

.bro-what-we-do {
	background: var(--bro-offwhite);
	padding: var(--bro-section-spacing) 0;
}

.bro-what-we-do__intro {
	max-width: 46rem;
	margin: 0 0 clamp(3rem, 6vw, 5rem);
}

.bro-what-we-do__heading {
	font-size: var(--bro-text-h1);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--bro-text-on-light);
	margin: 0 0 1.5rem;
}

.bro-what-we-do__lead {
	font-size: var(--bro-text-lg);
	line-height: 1.6;
	color: var(--bro-text-muted-on-light);
	max-width: 62ch;
	margin: 0;
}

.bro-what-we-do__rule {
	height: 1px;
	margin: 0;
	background: var(--bro-border-on-light);
}

.bro-service-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bro-service-card {
	padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem) clamp(2.5rem, 4vw, 3rem);
	border-right: 1px solid var(--bro-border-on-light);
	border-bottom: 1px solid var(--bro-border-on-light);
	transition: background-color var(--bro-transition-base), transform var(--bro-transition-base);
}

.bro-service-grid > .bro-service-card:last-child {
	border-right: none;
}

.bro-service-card:focus-within {
	background: var(--bro-white);
	transform: translateY(-4px);
}

.bro-service-card:focus-within .bro-service-card__index {
	color: var(--bro-orange);
}

@media (hover: hover) and (pointer: fine) {
	.bro-service-card:hover {
		background: var(--bro-white);
		transform: translateY(-4px);
	}

	.bro-service-card:hover .bro-service-card__index {
		color: var(--bro-orange);
	}
}

.bro-service-card__index {
	display: block;
	font-family: var(--bro-font-display);
	font-size: var(--bro-text-sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--bro-text-muted-on-light);
	margin: 0 0 2rem;
	transition: color var(--bro-transition-base);
}

.bro-service-card__title {
	font-size: var(--bro-text-h3);
	font-weight: 700;
	line-height: 1.2;
	color: var(--bro-text-on-light);
	margin: 0 0 1rem;
}

.bro-service-card__text {
	font-size: var(--bro-text-base);
	line-height: 1.6;
	color: var(--bro-text-muted-on-light);
	margin: 0 0 2rem;
}

.bro-service-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--bro-font-display);
	font-size: var(--bro-text-xs);
	font-weight: 700;
	letter-spacing: var(--bro-tracking-label);
	text-transform: uppercase;
	color: var(--bro-text-on-light);
	text-decoration: none;
	padding-bottom: 0.35em;
	border-bottom: 1px solid var(--bro-border-on-light);
	transition: color var(--bro-transition-base), border-color var(--bro-transition-base);
}

.bro-service-card__link .bro-icon-arrow {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	transition: transform var(--bro-transition-base);
}

.bro-service-card__link:focus-visible {
	color: var(--bro-orange);
	border-color: var(--bro-orange);
}

.bro-service-card__link:focus-visible .bro-icon-arrow {
	transform: translateX(4px);
}

@media (hover: hover) and (pointer: fine) {
	.bro-service-card__link:hover {
		color: var(--bro-orange);
		border-color: var(--bro-orange);
	}

	.bro-service-card__link:hover .bro-icon-arrow {
		transform: translateX(4px);
	}
}

/* Scroll-reveal — progressive enhancement, only hides content once
   `bro-js` confirms JavaScript is available (see header.php). */
.bro-js .bro-reveal-fade {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 700ms var(--bro-ease), transform 700ms var(--bro-ease);
}

.bro-js .bro-reveal-fade.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.bro-js .bro-reveal-line {
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 700ms var(--bro-ease);
}

.bro-js .bro-reveal-line.is-visible {
	transform: scaleX(1);
}

/* Photography zoom-reveal — genuine BRO project photography only (never
   logos, badges, buttons, icons, reviews, FAQ or process/timeline content).
   Begins slightly smaller than its final displayed size and gently expands
   outward to scale(1), combined with a fade — never the reverse direction,
   and never larger than scale(1). Shared across every individual service
   page (House Rewires, Extensions & Renovations, Kitchen Electrics,
   Consumer Unit Upgrades and all future service pages) — apply
   `.bro-reveal-zoom` to any genuine project photograph further down a
   page, or `.bro-reveal-zoom bro-reveal-zoom--hero` together on that
   page's hero photograph only. reveal.js observes both automatically. */
.bro-js .bro-reveal-zoom {
	opacity: 0;
	transform: scale(0.94);
	transition: opacity 1400ms var(--bro-ease-photo-zoom), transform 1400ms var(--bro-ease-photo-zoom);
}

.bro-js .bro-reveal-zoom.is-visible {
	opacity: 1;
	transform: scale(1);
}

/* Hero variant — a touch less pronounced (0.96 vs 0.94) and a slightly
   slower transition, since it plays on initial page load (the hero is
   already in view when the observer attaches) rather than mid-scroll. */
.bro-js .bro-reveal-zoom--hero {
	transform: scale(0.96);
	transition-duration: 1700ms;
}

.bro-what-we-do__heading.bro-reveal-fade {
	transition-delay: 90ms;
}

.bro-what-we-do__lead.bro-reveal-fade {
	transition-delay: 180ms;
}

.bro-service-grid .bro-service-card:nth-child(1).bro-reveal-fade {
	transition-delay: 0ms;
}

.bro-service-grid .bro-service-card:nth-child(2).bro-reveal-fade {
	transition-delay: 120ms;
}

.bro-service-grid .bro-service-card:nth-child(3).bro-reveal-fade {
	transition-delay: 240ms;
}

@media (prefers-reduced-motion: reduce) {
	.bro-js .bro-reveal-fade,
	.bro-js .bro-reveal-line,
	.bro-js .bro-reveal-zoom,
	.bro-js .bro-reveal-zoom--hero {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

@media (max-width: 1023px) {
	.bro-service-grid {
		grid-template-columns: 1fr;
	}

	.bro-service-card {
		border-right: none;
	}
}