/**
 * Solar Panels page only.
 *
 * Mirrors https://www.heritagebuildersnj.com/solar-panels
 */

.site-main--solar {
	padding: 0;
}

/* ── Hero ─────────────────────────────────────────────────────────── */

.solar-intro {
	display: flex;
	min-height: 500px;
}

.solar-intro__text {
	flex: 0 0 50%;
	background: rgb(28, 66, 110);
	padding: 80px 60px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.solar-intro__logo-panel {
	flex: 0 0 50%;
	background-color: #fff;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.solar-intro__title {
	margin: 0 0 1.5rem;
	font-family: var(--heritage-font-serif);
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 400;
	line-height: 1.1;
	color: #fff;
}

.solar-intro__body {
	margin: 0 0 2rem;
	font-family: var(--heritage-font);
	font-size: clamp(1rem, 1.5vw, 1.125rem);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.88);
}

.solar-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 55px;
	padding: 0 2rem;
	background: rgb(12, 83, 132);
	color: rgb(247, 247, 247);
	border: none;
	border-radius: 0;
	font-family: var(--heritage-font);
	font-size: 1rem;
	font-weight: 400;
	text-decoration: none;
	align-self: flex-start;
	transition: background 0.2s ease;
}

.solar-btn:hover,
.solar-btn:focus {
	background: rgb(10, 65, 105);
	color: #fff;
	text-decoration: none;
}

/* ── About ────────────────────────────────────────────────────────── */

.solar-about {
	display: flex;
	min-height: 600px;
}

.solar-about__image {
	flex: 0 0 41.666%;
	background-size: cover;
	background-position: center;
}

.solar-about__content {
	flex: 1;
	background: #fff;
	padding: 60px 40px 60px 60px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.solar-about__eyebrow {
	margin: 0 0 1rem;
	font-family: var(--heritage-font);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgb(86, 86, 86);
}

.solar-about__subtitle {
	margin: 0 0 1.5rem;
	font-family: var(--heritage-font-serif);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 400;
	line-height: 1.25;
	color: rgb(38, 38, 38);
}

.solar-about__body {
	margin: 0 0 2rem;
	font-family: var(--heritage-font);
	font-size: 1rem;
	line-height: 1.65;
	color: rgb(86, 86, 86);
}

.solar-about-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 55px;
	padding: 0 2rem;
	background: rgb(12, 83, 132);
	color: rgb(247, 247, 247);
	border: none;
	border-radius: 0;
	font-family: var(--heritage-font);
	font-size: 1rem;
	font-weight: 400;
	text-decoration: none;
	align-self: flex-start;
	transition: background 0.2s ease;
}

.solar-about-btn:hover,
.solar-about-btn:focus {
	background: rgb(10, 65, 105);
	color: #fff;
	text-decoration: none;
}

/* ── Contact section ──────────────────────────────────────────────── */

.solar-contact {
	display: flex;
	min-height: 520px;
	background: rgb(28, 66, 110);
}

.solar-contact__info {
	flex: 0 0 41.666%;
	padding: 60px 60px 60px 60px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2.5rem;
}

.solar-contact__item {
	display: flex;
	flex-direction: column;
}

.solar-contact__icon {
	color: rgba(255, 255, 255, 0.65);
	margin-bottom: 0.5rem;
}

.solar-contact__heading {
	margin: 0 0 0.25rem;
	font-family: var(--heritage-font-serif);
	font-size: 2.375rem;
	font-weight: 400;
	line-height: 1.1;
	color: #fff;
}

.solar-contact__value {
	margin: 0;
	font-family: var(--heritage-font);
	font-size: 1.25rem;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.75);
}

.solar-contact__value a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
}

.solar-contact__value a:hover {
	color: #fff;
	text-decoration: underline;
}

.solar-contact__photo {
	flex: 1;
	background-size: cover;
	background-position: center;
	border-radius: 12px 12px 0 0;
	margin: 20px 20px 0 0;
}

/* ── Responsive ───────────────────────────────────────────────────── */

@media (max-width: 900px) {
	.solar-intro {
		flex-direction: column;
	}

	.solar-intro__text {
		flex: none;
		padding: 60px 30px;
	}

	.solar-intro__logo-panel {
		flex: none;
		min-height: 300px;
	}

	.solar-about {
		flex-direction: column;
	}

	.solar-about__image {
		flex: none;
		min-height: 300px;
	}

	.solar-about__content {
		padding: 40px 30px;
	}

	.solar-contact {
		flex-direction: column;
	}

	.solar-contact__info {
		flex: none;
		padding: 50px 30px;
	}

	.solar-contact__photo {
		flex: none;
		min-height: 300px;
	}
}