/*
 * Services hub + service detail page styles (single-service.php).
 * Shared components (cta-banner, process-steps, faq-accordion) live in
 * components.css; only sections unique to the Services hub/detail views
 * are styled here.
 */

/* ---------- Shared hero (hub + detail) ---------- */

.service-hero {
	position: relative;
	overflow: hidden;
	padding: 6rem 0 6.5rem;
	min-height: 600px;
	display: flex;
	align-items: center;
}

.service-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.service-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.service-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(103deg, rgba(0, 0, 0, 0.78) 4%, rgba(0, 0, 0, 0.32) 60%), linear-gradient(90deg, rgba(29, 31, 101, 0.22), rgba(29, 31, 101, 0.22));
}

.service-hero__inner {
	position: relative;
	z-index: 1;
	/* max-width: 46rem; */
}

.service-hero__breadcrumb {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 1.5rem;
	font-family: var(--font-primary);
	font-weight: var(--font-weight-medium);
	font-size: 1.0625rem;
}

.service-hero__breadcrumb a {
	color: #ffffff;
}

.service-hero__breadcrumb a:hover {
	color: var(--primary-color);
}

.service-hero__breadcrumb span[aria-hidden] {
	color: rgba(255, 255, 255, 0.5);
}

.service-hero__breadcrumb-current {
	color: var(--primary-color);
}

.eyebrow-badge + .service-hero__title,
.service-hero__title {
	margin: 1.25rem 0 1.5rem;
}

.service-hero__title-accent {
	color: var(--primary-color);
}

.service-hero__text {
	color: rgba(255, 255, 255, 0.92);
	font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
	max-width: 37rem;
	margin-bottom: 2rem;
}

.service-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 2.25rem;
}

/* Hub-only: flat trade pills below the hero copy. */
.service-hero__pills {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	margin: 0;
	padding: 0;
}

.service-hero__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: #ffffff;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-sm);
	padding: 0.55rem 1.1rem;
	font-family: var(--font-primary);
	font-weight: var(--font-weight-semibold);
	font-size: 0.9375rem;
	color: var(--heading-color);
}

.service-hero__pill-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--primary-color);
	flex-shrink: 0;
}

/* Detail-only: icon + title/subtitle trust badges below the hero copy. */
.service-hero__badges {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	margin: 0;
	padding: 0;
}

.service-hero__badge {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.service-hero__badge-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: var(--radius-md);
	background: var(--accent-bg);
	color: var(--accent-color);
	flex-shrink: 0;
}

.service-hero__badge-title,
.service-hero__badge-subtitle {
	display: block;
}

.service-hero__badge-title {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-bold);
	color: #ffffff;
}

.service-hero__badge-subtitle {
	color: var(--primary-color);
	font-size: 0.9375rem;
}

/* ---------- Hub: core services list ---------- */

.hub-services-section {
	padding: var(--section-spacing) 0;
	background: #ffffff;
}

.hub-services-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.75rem;
}

.hub-service-card {
	grid-column: span 1;
	background: #ffffff;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-xl);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.hub-service-card--featured {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 1.05fr 1fr;
}

.hub-service-card--featured .hub-service-card__media {
	order: 2;
}

.hub-service-card--featured .hub-service-card__body {
	order: 1;
	justify-content: center;
}

.hub-service-card__media {
	position: relative;
	background: linear-gradient(160deg, #efe6d6, #dbc9ae);
}

.hub-service-card__img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	min-height: clamp(200px, 22vw, 260px);
	object-fit: cover;
	display: block;
}

.hub-service-card--featured .hub-service-card__img {
	aspect-ratio: auto;
	min-height: 100%;
	contain-intrinsic-size: auto none;
}

.hub-service-card__badge {
	position: absolute;
	top: 1.125rem;
	right: 1.375rem;
	background: #ffffff;
	box-shadow: var(--shadow-sm);
	border-radius: var(--radius-full);
	padding: 0.5rem 1rem;
	font-family: var(--font-primary);
	font-weight: var(--font-weight-bold);
	font-size: 1.0625rem;
	color: var(--primary-color);
}

.hub-service-card__body {
	padding: 2.125rem 2.25rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.hub-service-card__heading {
	display: flex;
	align-items: center;
	gap: 1.125rem;
}

.hub-service-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: var(--eyebrow-bg);
	color: var(--primary-color);
	flex-shrink: 0;
}

.hub-service-card__icon img {
	display: block;
	width: 26px;
	height: 26px;
}

.hub-service-card__title {
	font-size: 1.375rem;
	margin: 0;
}

.hub-service-card__text {
	color: var(--text-color-light);
	margin: 0;
}

.hub-service-card__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.hub-service-card__list li {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	color: var(--text-color);
}

.hub-service-card__list-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	color: var(--primary-color);
	flex-shrink: 0;
	margin-top: 0.15rem;
}

.hub-service-card__list-icon img {
	display: block;
	width: 18px;
	height: 18px;
}

.hub-service-card__link {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-semibold);
	color: var(--primary-color);
	margin-top: auto;
}

.hub-load-more {
	display: flex;
	justify-content: center;
	margin-top: 3rem;
}

/* ---------- Hub: additional services ---------- */

.additional-services-section {
	padding: var(--section-spacing) 0;
	background: #ffffff;
}

.additional-services-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.375rem;
	margin-bottom: 2rem;
}

.additional-service-card {
	background: #ffffff;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	padding: 2rem 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.additional-service-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: var(--accent-bg);
	color: var(--accent-color);
	flex-shrink: 0;
}

.additional-service-card__icon img {
	display: block;
	width: 26px;
	height: 26px;
}

.additional-service-card__title {
	font-size: 1.25rem;
	margin: 0;
}

.additional-service-card__text {
	color: var(--text-color-light);
	margin: 0;
}

.additional-services-section__note {
	text-align: center;
	color: var(--text-color-light);
	margin: 0;
}

/* ---------- Detail: service overview ---------- */

.service-overview-section {
	padding: var(--section-spacing) 0;
	background: #ffffff;
}

.service-overview-grid {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 4.5rem;
	align-items: center;
}

.service-overview-media {
	position: relative;
	border-radius: var(--radius-xl);
	/* overflow: hidden; */
	box-shadow: var(--shadow-lg);
	background: linear-gradient(160deg, #efe6d6, #dbc9ae);
}

.service-overview-media__img {
	width: 100%;
	height: clamp(22rem, 38vw, 40rem);
	object-fit: cover;
	display: block;
	border-radius: var(--radius-xl);
}

.service-overview-media__badge-check {
	position: absolute;
	top: 3.125rem;
	left: -1.875rem;
	background: #ffffff;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	padding: 1rem 1.375rem 1rem 1rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	font-family: var(--font-primary);
	font-weight: var(--font-weight-semibold);
}

.service-overview-media__badge-check-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--accent-bg);
	color: var(--accent-color);
}

.service-overview-media__badge-stat {
	position: absolute;
	bottom: 2.5rem;
	right: -1.375rem;
	background: var(--primary-color);
	color: #ffffff;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	padding: 1.375rem 1.625rem;
	text-align: center;
}

.service-overview-media__badge-stat-number {
	display: block;
	font-family: var(--font-primary);
	font-weight: var(--font-weight-bold);
	font-size: 1.875rem;
}

.service-overview-media__badge-stat-label {
	display: block;
	font-size: 0.9375rem;
	opacity: 0.9;
}

.service-overview-content .section-heading {
	margin: 0.6rem 0 1rem;
}

.service-overview-content .section-description {
	margin-bottom: 0.75rem;
}

.service-overview-checklist {
	list-style: none;
	margin: 1.25rem 0 1.75rem;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.9rem 1.5rem;
}

.service-overview-checklist li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--font-primary);
	font-weight: var(--font-weight-medium);
	color: var(--heading-color);
}

.service-overview-checklist__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--primary-color);
	color: #ffffff;
	flex-shrink: 0;
}

/* ---------- Detail: benefits ---------- */

.service-benefits-section {
	padding: var(--section-spacing) 0;
	background: #fbf8f3;
}

.service-benefits-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.service-benefit-card {
	background: #ffffff;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	padding: 2.25rem 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	overflow: hidden;
	transition: background 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.service-benefit-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: var(--radius-md);
	background: #f2ebe0;
	transition: background-color 180ms ease;
}

.service-benefit-card__icon img {
	display: block;
	width: 28px;
	height: 28px;
	transition: filter 180ms ease;
}

.service-benefit-card__title {
	font-size: 1.25rem;
	margin: 0;
}

.service-benefit-card__text {
	color: var(--text-color-light);
	margin: 0;
}

.service-benefit-card__title,
.service-benefit-card__text {
	transition: color 180ms ease;
}


.service-benefit-card:hover,
.service-benefit-card:focus-within {
	background: linear-gradient(150deg, #f08a24 0%, #a98b63 100%);
	border-color: #ece5d9;
	box-shadow: 0 10px 28px rgba(120, 100, 70, 0.14);
}


.service-benefit-card:hover .service-benefit-card__icon,
.service-benefit-card:focus-within .service-benefit-card__icon {
	background: rgba(255, 255, 255, 0.22);
}


.service-benefit-card:hover .service-benefit-card__title,
.service-benefit-card:focus-within .service-benefit-card__title {
	color: #ffffff;
}


.service-benefit-card:hover .service-benefit-card__text,
.service-benefit-card:focus-within .service-benefit-card__text {
	color: rgba(255, 255, 255, 0.85);
}

.service-benefit-card:hover .service-benefit-card__icon img,
.service-benefit-card:focus-within .service-benefit-card__icon img {
	filter: brightness(0) invert(1);
}

/* ---------- Background alternation: shared sections, scoped per view ----------
 * components.css intentionally leaves .process-section/.faq-section/
 * .cta-banner-section background unset (only padding) so each page can
 * alternate independently. Hub and detail both render via single-service.php
 * (body.single-service on both), so scope to the view-specific wrapper div
 * added in hub.php/detail.php instead of the shared body class.
 */

/* Hub: core(white) -> process(light) -> additional services(white) -> CTA(white). */
.services-hub-view .process-section {
	background: #fbf8f3;
}

/* The hub process uses the four step colours from the Services design. */
.services-hub-view .process-step__badge {
	background: #f08a24;
	color: #ffffff;
	box-shadow: 0 8px 10px rgba(240, 138, 36, 0.32);
}

.services-hub-view .process-step:nth-child(2) .process-step__badge {
	background: #a98b63;
	box-shadow: 0 8px 10px rgba(169, 139, 99, 0.32);
}

.services-hub-view .process-step:nth-child(3) .process-step__badge {
	background: #3f7a57;
	box-shadow: 0 8px 10px rgba(63, 122, 87, 0.32);
}

.services-hub-view .process-step:nth-child(4) .process-step__badge {
	background: #23201b;
	box-shadow: 0 8px 10px rgba(35, 32, 27, 0.3);
}

.services-hub-view .cta-banner-section {
	background: #ffffff;
	padding-top: 0px;
}

/* Detail: overview(white) -> benefits(light) -> process(white) -> gallery(light) -> faq(white) -> CTA(white). */
.service-detail-view .process-section {
	background: #ffffff;
}

.service-detail-view .process-step {
	text-align: center;
}

.service-detail-view .process-step__badge {
	margin-right: auto;
	margin-left: auto;
	background: #f08a24;
	color: #ffffff;
	box-shadow: 0 8px 10px rgba(240, 138, 36, 0.32);
}

.service-detail-view .process-step:nth-child(2) .process-step__badge {
	background: #a98b63;
	box-shadow: 0 8px 10px rgba(169, 139, 99, 0.32);
}

.service-detail-view .process-step:nth-child(3) .process-step__badge {
	background: #3f7a57;
	box-shadow: 0 8px 10px rgba(63, 122, 87, 0.32);
}

.service-detail-view .process-step:nth-child(4) .process-step__badge {
	background: #23201b;
	box-shadow: 0 8px 10px rgba(35, 32, 27, 0.3);
}

.service-detail-view .faq-section {
	background: #ffffff;
}

.service-detail-view .faq-item {
	border-radius: 20px;
}

.service-detail-view .faq-item[open] {
	border-color: #d9c7ac;
	box-shadow: 0 4px 18px rgba(120, 100, 70, 0.08);
}

.service-detail-view .faq-item summary {
	padding: 1.625rem 1.875rem;
	font-size: 1.25rem;
}

.service-detail-view .faq-item__question {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.service-detail-view .faq-item__number {
	display: inline-block;
	color: #8a6e4b;
	font-family: var(--font-secondary);
	font-size: 1.125rem;
	font-weight: var(--font-weight-medium);
	flex-shrink: 0;
}

.service-detail-view .faq-item__icon {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #f2ebe0;
	color: #23201b;
}

.service-detail-view .faq-item[open] .faq-item__icon {
	background: #f08a24;
	color: #ffffff;
}

.service-detail-view .faq-item__body {
	padding: 0 1.875rem 1.625rem 3.75rem;
	color: #5c564d;
}

.service-detail-view .cta-banner-section {
	background: #ffffff;
}

/* ---------- Detail: gallery ---------- */

.service-gallery-section {
	padding: var(--section-spacing) 0;
	background: #fbf8f3;
}

.service-gallery-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, 230px);
	gap: 1.25rem;
}

.service-gallery-item {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

.service-gallery-item--1 {
	grid-column: 1 / 2;
	grid-row: 1 / 3;
}

.service-gallery-item--2 {
	grid-column: 2 / 4;
	grid-row: 1;
}

.service-gallery-item--3 {
	grid-column: 4;
	grid-row: 1;
}

.service-gallery-item--4 {
	grid-column: 2;
	grid-row: 2;
}

.service-gallery-item--5 {
	grid-column: 3 / 5;
	grid-row: 2;
}

.service-gallery-item__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--transition-slow);
}

.service-gallery-item:hover .service-gallery-item__img {
	transform: scale(1.04);
}

.service-gallery-item__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.375rem;
	background: linear-gradient(to top, rgba(35, 32, 27, 0.82), rgba(35, 32, 27, 0));
	color: #ffffff;
	font-family: var(--font-primary);
	font-weight: var(--font-weight-semibold);
	font-size: 1.125rem;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity var(--transition-base), transform var(--transition-base);
	pointer-events: none;
}

.service-gallery-item:hover .service-gallery-item__caption,
.service-gallery-item:focus-within .service-gallery-item__caption {
	opacity: 1;
	transform: translateY(0);
}

/* ---------- Responsive ---------- */

@media (max-width: 1199.98px) {
	.additional-services-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 991.98px) {
	.hub-services-grid {
		grid-template-columns: 1fr;
	}

	.hub-service-card--featured {
		grid-template-columns: 1fr;
	}

	.hub-service-card--featured .hub-service-card__media,
	.hub-service-card--featured .hub-service-card__body {
		order: initial;
	}

	.additional-services-grid {
		grid-template-columns: repeat(2, 1fr);
	}

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

	.service-benefits-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.service-gallery-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, 230px);
	}

	.service-gallery-item--1 { grid-column: 1; grid-row: 1 / 3; }
	.service-gallery-item--2 { grid-column: 2; grid-row: 1; }
	.service-gallery-item--3 { grid-column: 2; grid-row: 2; }
	.service-gallery-item--4 { grid-column: 1; grid-row: 3; }
	.service-gallery-item--5 { grid-column: 2; grid-row: 3; }
}

@media (max-width: 767.98px) {
	.additional-services-grid,
	.service-benefits-grid {
		grid-template-columns: 1fr;
	}

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

	.service-gallery-grid {
		grid-template-columns: 1fr;
		grid-template-rows: none;
	}

	.service-gallery-item {
		grid-column: 1 !important;
		grid-row: auto !important;
		height: 230px;
	}

	.service-overview-media__badge-check,
	.service-overview-media__badge-stat {
		position: static;
		margin-top: 1rem;
		display: inline-flex;
	}
}