/* =============================================================================
   SERVICE PAGE -- shared layout for the individual service pages
   (/services/air-filter-installation/ etc.). Ported from the live site.
   Hero styles live in split-contact-hero.css (.services-hero modifier).
   ============================================================================= */

/* =============================================================================
   WHY US -- image + bordered editorial copy
   ============================================================================= */

.service-page__why-us {
	padding-top: var(--section-y);
	padding-bottom: var(--section-y);
}

.service-page__why-us .layout-section__inner {
	display:        flex;
	flex-direction: row;
	align-items:    center;
	gap:            var(--space-xl);
}

.service-page__why-us .layout-section__inner .left {
	flex: 0 0 400px;
}

.service-page__why-us .layout-section__inner .right {
	border-left: 2px solid var(--color-border-subtle);
	padding:     10px 0 10px var(--space-l);
}

.service-page__why-us .layout-section__inner .right h2 {
	margin-bottom: var(--space-2xs);
}

/* =============================================================================
   BADGES -- three icon badges over a full-bleed photo
   ============================================================================= */

.service-page__badges {
	padding-top: var(--section-y-md);
	padding-bottom: var(--section-y-md);
	background-image:    url("../images/air-handler-unit-with-filter-desktop-background.webp");
	background-size:     cover;
	background-repeat:   no-repeat;
	background-position: 50% 50%;
}

.service-page__badges .layout-section__inner {
	display:        flex;
	flex-direction: row;
	color:          var(--color-bg-subtle);
}

/* Live relied on Oxygen's flex column for the centered stack; declared
   explicitly here. */
.service-page__badges__single {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	flex:           1;
}

.service-page__badges__single__img-container {
	width:           60px;
	height:          60px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	overflow:        hidden;
	margin-bottom:   var(--space-m);
}

.service-page__badges__single__img-container img {
	max-width:  100%;
	max-height: 100%;
	width:      auto;
	height:     auto;
}

.service-page__badges__single p {
	font-weight: var(--weight-black);
	text-align:  center;
	line-height: 1.2;
	font-size: var(--text-h5);
}

/* =============================================================================
   CONTACT FORM
   ============================================================================= */

.service-page__contact-form {
	padding-top: var(--section-y-md);
	background-color: var(--color-bg-subtle);
}

.service-page__contact-form .layout-section__inner {
	display:        flex;
	flex-direction: row;
	gap:            var(--space-xl);
}

.service-page__contact-form .layout-section__inner h2 {
	margin-bottom: var(--space-m);
}

.service-page__contact-form .left {
	flex: 0 0 400px;
}

.service-page__contact-form .right {
	width:            100%;
	background-color: var(--color-bg-primary);
	padding:          var(--space-l);
	border:           1px solid var(--color-border-subtle);
	border-radius:    var(--radius-m);
}

/* =============================================================================
   FEATURES -- numbered 4-step grid overhanging the gray section
   ============================================================================= */

.service-page__features {
	padding-top: var(--section-y);
	margin-bottom: var(--section-y);
	background-color: var(--color-bg-subtle);
	border-bottom:    1px solid var(--color-border-subtle);
}

.service-page__features h2 {
	margin-bottom: var(--space-l);
}

.service-page__features__grid {
	padding:               var(--space-l) 0 0 0;
	display:               grid;
	grid-template-columns: repeat(4, 1fr);
	gap:                   var(--space-l);
	margin-bottom:         calc(-1 * var(--space-4xl));
	align-items:           stretch;
}

.service-page__features__grid li {
	background-color: var(--color-bg-primary);
	padding:          0 20px 20px 20px;
	border:           1px solid var(--color-border-subtle);
	border-radius:    var(--radius-m);
	position:         relative;
}

.service-page__features__grid__number {
	width:            40px;
	height:           40px;
	background-color: var(--color-accent);
	color:            var(--color-bg-primary);
	border-radius:    var(--radius-max);
	display:          flex;
	align-items:      center;
	justify-content:  center;
	font-size: var(--text-h4);
	font-weight:      var(--weight-black);
	margin-top:       -20px;
	margin-bottom:    var(--space-m);
}

.service-page__features__grid li h3 {
	font-size: var(--text-h4);
	margin-bottom: var(--space-xs);
}

.service-page__features__grid li p {
	line-height: var(--leading-slim);
}

/* =============================================================================
   VALUE PROPOSITION -- editorial copy + three bordered cards
   ============================================================================= */

.service-page__value-proposition {
	padding-top: var(--section-y);
	padding-bottom: var(--section-y);
}

.service-page__value-proposition h2 {
	margin-bottom: var(--space-m);
	max-width:     500px;
}

/* Live relied on Oxygen's default flex-direction:column for the card stack;
   declared explicitly here. */
.service-page__value-proposition__columns {
	display:        flex;
	flex-direction: row;
	gap:            var(--space-xl);
}

.service-page__value-proposition__columns .right {
	display:        flex;
	flex-direction: column;
	flex:           0 0 500px;
	gap:            20px;
}

.service-page__value-proposition__columns .right li {
	padding:       var(--space-m) 20px;
	border:        1px solid var(--color-border-subtle);
	border-radius: var(--radius-m);
}

.service-page__value-proposition__columns .right li h3 {
	color:         var(--color-accent);
	margin-bottom: var(--space-2xs);
}

.service-page__value-proposition__columns .right li p {
	line-height: var(--leading-slim);
}

/* =============================================================================
   FAQ SECTION -- accordion component styles live in faq.css
   ============================================================================= */

.service-page__faq {
	padding-bottom: var(--section-y);
}

.service-page__faq h2 {
	margin-bottom: var(--space-l);
}

.service-page__faq #frequently-asked-questions {
	width: 100%;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media ( max-width: 1024px ) {

	.service-page__why-us .layout-section__inner {
		flex-direction: column;
		align-items:    flex-start;
		gap:            10px;
	}

	.service-page__why-us .layout-section__inner .left {
		flex:      auto;
		width:     100%;
		max-width: 500px;
	}

	.service-page__contact-form .layout-section__inner {
		flex-direction: column;
		gap:            var(--space-l);
	}

	.service-page__contact-form .left {
		flex: auto;
	}

	.service-page__features__grid {
		grid-template-columns: repeat(2, 1fr);
		row-gap:               var(--space-2xl);
	}

	.service-page__value-proposition h2 {
		max-width: none;
	}

	.service-page__value-proposition__columns {
		flex-direction: column;
	}

	.service-page__value-proposition__columns .right {
		flex: auto;
	}

}

@media ( max-width: 768px ) {

	.service-page__badges .layout-section__inner {
		flex-direction: column;
		align-items:    center;
		gap:            var(--space-l);
	}

	.service-page__features__grid {
		grid-template-columns: 1fr;
	}

}

/* =============================================================================
   QUOTE FORM
   Lives inside .service-page__contact-form .right, which already supplies the
   white card, the 25px padding and the m radius. Field metrics match the
   /contact/ form so the two read as the same component.
   ============================================================================= */

.service-quote-form__row {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   var(--field-gap);
}

.service-quote-form__field {
	display:        flex;
	flex-direction: column;
	min-width:      0;
}

/* The field labels float inside their controls (global.css). Only the
   legend is still a heading above its group. */
.service-quote-form legend {
	margin-bottom: 6px;
	font-size:     var(--text-body-small);
	font-weight:   var(--weight-bold);
}

/* Quote-form controls are .field (global.css); nothing here deviates. */

@media ( max-width: 768px ) {

	.service-quote-form__row {
		grid-template-columns: 1fr;
	}

}