/**
 * BRO Electrical — main Projects hub page (page-projects.php).
 * Four large editorial project features, alternating photo/text sides —
 * deliberately not a grid of small cards. Separate file/handle from the
 * pre-existing projects.css (the homepage's own "Featured Projects"
 * section, Projects 1-3) to avoid any collision.
 */

.bro-projects-page section {
	padding: var(--bro-section-spacing) 0;
}

/* Defensive: a long single word in a heading should break rather than
   overflow (same fix applied to project-case-study.css). */
.bro-projects-page h1,
.bro-projects-page h2 {
	overflow-wrap: break-word;
}

/* ---- Hero / intro ---- */

.bro-projects-page__hero {
	background: var(--bro-charcoal);
}

.bro-projects-page__hero-inner {
	max-width: 46rem;
}

.bro-projects-page__hero-inner h1 {
	font-size: var(--bro-text-hero);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--bro-white);
	margin: 1rem 0 1.5rem;
}

.bro-projects-page__hero-inner p {
	font-size: var(--bro-text-lg);
	line-height: 1.6;
	color: var(--bro-text-muted-on-dark);
	max-width: 58ch;
	margin: 0;
}

/* ---- Project tiles ---- */

.bro-projects-page__tiles {
	background: var(--bro-offwhite);
}

.bro-projects-page__tiles > .bro-projects-page__tile:not(:last-child) {
	margin-bottom: clamp(4rem, 9vw, 8rem);
}

.bro-projects-page__tile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(2.5rem, 6vw, 5.5rem);
}

.bro-projects-page__tile--reverse {
	flex-direction: row-reverse;
}

.bro-projects-page__tile-media {
	flex: 1 1 460px;
	max-width: 34rem;
}

.bro-projects-page__tile-media img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	aspect-ratio: 4 / 5;
	border-radius: var(--bro-radius-sm);
	background: var(--bro-white);
}

.bro-projects-page__tile-body {
	flex: 1 1 420px;
	max-width: 34rem;
}

.bro-projects-page__tile-body h2 {
	font-size: var(--bro-text-h1);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--bro-text-on-light);
	margin: 0.75rem 0 1.5rem;
}

.bro-projects-page__tile-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1.75rem 2.5rem;
	margin: 0 0 1.75rem;
	padding: 1.25rem 0;
	border-top: 1px solid var(--bro-border-on-light);
	border-bottom: 1px solid var(--bro-border-on-light);
}

.bro-projects-page__tile-meta dt {
	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-orange-burnt);
	margin: 0 0 0.35rem;
}

.bro-projects-page__tile-meta dd {
	font-family: var(--bro-font-display);
	font-size: var(--bro-text-base);
	font-weight: 600;
	color: var(--bro-text-on-light);
	margin: 0;
}

.bro-projects-page__tile-body > p {
	font-size: var(--bro-text-base);
	line-height: 1.65;
	color: var(--bro-text-muted-on-light);
	max-width: 56ch;
	margin: 0 0 1.75rem;
}

.bro-projects-page__tile-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--bro-font-display);
	font-size: var(--bro-text-sm);
	font-weight: 700;
	letter-spacing: var(--bro-tracking-label);
	text-transform: uppercase;
	color: var(--bro-text-on-light);
	text-decoration: none;
}

.bro-projects-page__tile-link .bro-icon-arrow {
	transition: transform var(--bro-transition-base);
}

@media (hover: hover) and (pointer: fine) {
	.bro-projects-page__tile-link:hover .bro-icon-arrow,
	.bro-projects-page__tile-link:focus-visible .bro-icon-arrow {
		transform: translateX(4px);
	}
}

.bro-projects-page__tile-link:hover,
.bro-projects-page__tile-link:focus-visible {
	color: var(--bro-orange);
}

@media (max-width: 900px) {
	.bro-projects-page__tile,
	.bro-projects-page__tile--reverse {
		flex-direction: column;
	}

	.bro-projects-page__tile-media,
	.bro-projects-page__tile-body {
		max-width: 100%;
	}
}

/* ---- Final CTA ---- */

.bro-projects-page__cta {
	background: var(--bro-charcoal);
	text-align: center;
}

.bro-projects-page__cta-inner {
	max-width: 40rem;
	margin: 0 auto;
}

.bro-projects-page__cta-inner h2 {
	font-size: var(--bro-text-h1);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	color: var(--bro-white);
	margin: 1rem 0 1.5rem;
}

.bro-projects-page__cta-inner p {
	font-size: var(--bro-text-base);
	line-height: 1.65;
	color: var(--bro-text-muted-on-dark);
	margin: 0 0 2rem;
}

.bro-projects-page__cta-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}

@media (max-width: 480px) {
	.bro-projects-page__cta-actions .bro-btn {
		white-space: normal;
		text-align: center;
	}
}