/**
 * Robust Service template styles.
 * Loaded by functions.php ONLY on tier-one `service` posts
 * (template: src/templates/partials/robust-service.php).
 * Accordion + lightbox behaviour: dist/js/robust-service.js.
 *
 * NOTE: This theme's SCSS build (gulp) is not available on this server, so this
 * is plain, hand-edited CSS — the single source of truth for this template.
 * Edit it directly; there is no compile step. Colour tokens like
 * var(--color-primary) / var(--color-text) are defined globally by the theme.
 */

.robust-service {
	padding-bottom: 80px;
}

.robust-service > section + section {
	margin-top: 80px;
}

/* ---- Hero (bespoke; replaces .masthead — featured image + the same red
 * gradient overlay the masthead uses). Eyebrow is an H1, headline an H2. ---- */
.robust-service__hero {
	position: relative;
	padding: 10rem 0;
	background-color: var(--color-text);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}

.robust-service__hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(
		180deg,
		rgba(107, 3, 3, 0.33) 0%,
		rgba(153, 45, 33, 0.7) 55%,
		rgba(191, 79, 58, 1) 100%
	);
}

.robust-service__hero-inner {
	position: relative;
	z-index: 1;
}

.robust-service__eyebrow {
	margin: 0 0 0.75rem;
	font-size: var(--small-font-size);
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #ecc6b1;
}

.robust-service__hero-headline {
	margin: 0;
	color: #fff;
	font-size: clamp(2.25rem, 4.5vw, calc(var(--base-font-size) * 3));
	line-height: 1.1;
}

.robust-service__hero-subline {
	margin: 1.25rem 0 0;
	max-width: 60ch;
	font-size: 20px;
	color: rgba(255, 255, 255, 0.92);
}

/* ---- Hero CTA buttons. Built on the theme's ._button (shape/typography); the
 * base button is already a transparent/white-outline "ghost" — perfect for the
 * red hero — and `.-solid` makes a white-filled primary for contrast. ---- */
.robust-service__hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 2rem;
}

.robust-service__hero-btn {
	margin: 0; /* override the ._button mixin's stacking margin; gap handles spacing */
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
}

.robust-service__btn-icon {
	flex: none;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Ghost button (e.g. Call Now): fill white on interaction. */
.robust-service__hero-btn:not(.-solid):hover,
.robust-service__hero-btn:not(.-solid):focus,
.robust-service__hero-btn:not(.-solid):active {
	background-color: #fff;
	border-color: #fff;
	color: var(--color-primary);
}

/* Solid white primary (Get a Free Quote) — pops against the red hero. */
.robust-service__hero-btn.-solid {
	background-color: #fff;
	border-color: #fff;
	color: var(--color-primary);
}

.robust-service__hero-btn.-solid:hover,
.robust-service__hero-btn.-solid:focus,
.robust-service__hero-btn.-solid:active {
	background-color: #f3f2f2;
	border-color: #f3f2f2;
	color: var(--color-primary);
}

/* ---- Content blocks: 50/50 media + content via CSS grid ---- */
.robust-service__block-heading {
	margin-bottom: 24px;
}

.robust-service__block-body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
}

/* Even-numbered blocks (-image-right): flip the media to the second column. */
.robust-service__block.-image-right .robust-service__block-media {
	order: 2;
}

/* Square media, cropped to fill. */
.robust-service__block-media img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
}

.robust-service__block-content {
	min-width: 0; /* let long words/URLs wrap instead of stretching the column */
}

/* ---- Mid-page CTA: full-width teal band, centred white content ---- */
.robust-service__midcta {
	padding: 64px 0;
	background-color: var(--color-tertiary);
	color: #fff;
	text-align: center;
}

.robust-service__midcta-icon svg {
	width: 44px;
	height: 44px;
	fill: #fff;
}

.robust-service__midcta-heading {
	margin: 1rem 0 0;
	color: #fff;
}

.robust-service__midcta-text {
	margin: 0.75rem auto;
	max-width: 60ch;
	color: rgba(255, 255, 255, 0.92);
	font-size: 18px;
}

/* Ghost button (white outline/text); fills white on interaction. */
.robust-service__midcta-btn {
	margin: 1.75rem 0 0;
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
}

.robust-service__midcta-btn:hover,
.robust-service__midcta-btn:focus,
.robust-service__midcta-btn:active {
	background-color: #fff;
	border-color: #fff;
	color: var(--color-tertiary);
}

/* ---- Gallery: full-width dark band, centred white content ----
 * The section is full-bleed (no _container) so the dark background spans the
 * viewport; .robust-service__gallery-inner ._container constrains the content.
 * The 80px section margins (from `> section + section`) give white breathing
 * room above/below so the band sits cleanly between the white sections. */
.robust-service__gallery {
	padding: 72px 0;
	background-color: var(--color-text);
	color: #fff;
	text-align: center;
}

/* White heading on the dark band (overrides the default red). */
.robust-service__gallery .robust-service__gallery-inner h3 {
	color: #fff;
}

/* ---- Gallery grid: 4 cols desktop, 3 tablet, 1 mobile ---- */
.robust-service__gallery-grid {
	margin-top: 32px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.robust-service__gallery-item {
	display: block;
	overflow: hidden;
	border-radius: 8px;
	cursor: zoom-in;
}

.robust-service__gallery-item img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.robust-service__gallery-item:hover img,
.robust-service__gallery-item:focus-visible img {
	transform: scale(1.05);
}

/* ---- FAQ accordion (markup emitted by the [service_faq] shortcode) ----
 * Progressive enhancement: without JS every answer stays open and readable.
 * robust-service.js adds `.is-enhanced` to the section, which collapses the
 * answers and turns the questions into accordion toggles. */
.robust-service__faq .faq-accordion {
	margin-top: 24px;
}

.robust-service__faq .faq-item {
	border-top: 1px solid #c9c7c5;
}

.robust-service__faq .faq-item:last-child {
	border-bottom: 1px solid #c9c7c5;
}

.robust-service__faq .faq-question {
	margin: 0;
	padding: 20px 0;
	color: #1e1e1e;
}

.robust-service__faq .faq-answer {
	color: var(--color-text);
	padding-bottom: 20px;
}

.robust-service__faq .faq-answer p {
	margin: 0;
}

/* Enhanced (JS active) ------------------------------------------------- */
.robust-service__faq.is-enhanced .faq-question {
	position: relative;
	padding-right: 44px;
	cursor: pointer;
	user-select: none;
}

.robust-service__faq.is-enhanced .faq-question:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* Plus indicator that rotates open. */
.robust-service__faq.is-enhanced .faq-question::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 8px;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	background:
		linear-gradient(var(--color-primary), var(--color-primary)) center / 14px 2px no-repeat,
		linear-gradient(var(--color-primary), var(--color-primary)) center / 2px 14px no-repeat;
	transition: transform 0.3s ease;
}

.robust-service__faq.is-enhanced .faq-item.is-open .faq-question::after {
	transform: rotate(135deg);
}

/* Collapse with max-height (universally supported — no reliance on grid fr
 * interpolation). Closed answers are clamped to 0 and clipped; JS sets the open
 * height inline. The bottom spacing lives on the inner <p> so it's part of the
 * measured/clipped height and never trimmed. */
.robust-service__faq.is-enhanced .faq-answer {
	max-height: 0;
	padding-bottom: 0;
	overflow: hidden;
	transition: max-height 0.35s ease;
}

.robust-service__faq.is-enhanced .faq-answer > * {
	padding-bottom: 20px;
}

/* ---- Lightbox (built by dist/js/robust-service.js) ---- */
.robust-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5vmin;
	background: rgba(15, 15, 15, 0.92);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.robust-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.robust-lightbox__img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.robust-lightbox__btn {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease;
}

.robust-lightbox__btn:hover,
.robust-lightbox__btn:focus-visible {
	background: rgba(255, 255, 255, 0.28);
}

.robust-lightbox__close {
	top: 16px;
	right: 16px;
}

.robust-lightbox__prev {
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
}

.robust-lightbox__next {
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
}

/* ---- Responsive ---- */
@media (max-width: 992px) {
	.robust-service__gallery-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.robust-service {
		padding-bottom: 60px;
	}
	.robust-service__hero {
		padding: 4.5rem 0 3.5rem;
	}
	.robust-service__gallery,
	.robust-service__midcta {
		padding: 48px 0;
	}
	.robust-service > section + section {
		margin-top: 56px;
	}
	/* Stack media above content on mobile, regardless of alternating side. */
	.robust-service__block-body {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.robust-service__block.-image-right .robust-service__block-media {
		order: 0;
	}
}

@media (max-width: 576px) {
	.robust-service__gallery-grid {
		grid-template-columns: 1fr;
	}
	.robust-lightbox__prev {
		left: 8px;
	}
	.robust-lightbox__next {
		right: 8px;
	}
}