/* =========================================================================
   Boyle Built — Service Detail pages (shared)

   Generic components used by any "service detail" page in the
   /services/ family: service-intro, service-process, service-gallery
   (template-parts/services/). Originally written as page-specific CSS
   for the Barndominiums page (Phase I9, assets/css/barndominiums.css)
   against the canonical EPS Building Systems Figma frame
   (PmKYD86EAlc1bZBDF5dSGK, node 211:2). When the EPS Building Systems
   page itself was implemented (Phase I9, EPS pass) and needed the
   IDENTICAL section architecture, this file was promoted from
   barndominiums.css (moved verbatim, no rule changes) to this shared
   name rather than duplicating ~380 lines of CSS a second time.

   This is NOT yet a formalized "Service Detail template system" — no
   new PHP template-part was introduced, no CPT/meta-driven architecture
   was added. It is exactly what it was before: three reusable, content-
   agnostic components, now shared by two consumers (Barndominiums and
   EPS Building Systems) instead of one. Enqueued conditionally for both
   page templates — see inc/enqueue.php.

   The Internal Hero, Consultation CTA (scenic-image variant), and
   benefit row (principles-row, no-dividers modifier) are separate
   shared components — their styles live in internal-hero.css /
   consultation-strip.css / resource.css, not here.

   Measured against the canonical EPS Building Systems Figma frame
   (1024x1536 — a flattened raster image, so section heights/proportions
   were read from pixel-level screenshot crops rather than generated
   code). No tablet/mobile frame was supplied; those breakpoints are
   inferred conservatively from the established two-breakpoint system
   (base.css) and the patterns already used by the other interior/
   service pages.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Service Intro ("What is X?")
   ------------------------------------------------------------------------- */

.service-intro {
	background-color: var(--color-bg);
	padding: var(--space-section-v) var(--space-section-h);
}

.service-intro__inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
	max-width: 1280px;
	margin: 0 auto;
}

.service-intro__content {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.service-intro__eyebrow {
	margin: 0;
	color: var(--color-gold);
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 11px;
	text-transform: uppercase;
}

.service-intro__heading {
	margin: 0;
	color: var(--color-ink);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 30px;
	line-height: 1.15;
}

.service-intro__text {
	margin: 0;
	color: var(--color-body-muted);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.6;
}

.service-intro__grid {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-top: 8px;
}

.service-intro__item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.service-intro__item-icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	margin-top: 2px;
}

.service-intro__item-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.service-intro__item-title {
	margin: 0;
	color: var(--color-ink);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 15px;
}

.service-intro__item-description {
	margin: 0;
	color: var(--color-body-muted);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.55;
}

.service-intro__media {
	width: 100%;
	height: 260px;
}

.service-intro__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-card);
}

/* -------------------------------------------------------------------------
   Build Process (photo-steps)
   ------------------------------------------------------------------------- */

.service-process {
	background-color: var(--color-bg);
	padding: var(--space-section-v) var(--space-section-h);
}

.service-process__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	max-width: 1280px;
	margin: 0 auto;
}

.service-process__list {
	display: flex;
	flex-direction: column;
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.service-process__step {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.service-process__step-media {
	position: relative;
	width: 100%;
	height: 160px;
}

.service-process__step-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-card);
}

.service-process__step-number {
	position: absolute;
	bottom: -12px;
	left: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--color-primary-green);
	color: var(--color-text-light);
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 14px;
	border: 2px solid var(--color-bg);
}

.service-process__step-title {
	margin: 12px 0 0;
	color: var(--color-ink);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 16px;
}

.service-process__step-description {
	margin: 0;
	color: var(--color-body-muted);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.55;
}

.service-process__connector {
	display: none;
}

/* -------------------------------------------------------------------------
   Gallery ("Possibilities")
   ------------------------------------------------------------------------- */

.service-gallery {
	background-color: var(--color-bg);
	padding: var(--space-section-v) var(--space-section-h);
}

.service-gallery__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	max-width: 1280px;
	margin: 0 auto;
}

.service-gallery__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	width: 100%;
}

.service-gallery__tile {
	position: relative;
	height: 140px;
	border-radius: var(--radius-card);
	overflow: hidden;
}

.service-gallery__tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.service-gallery__tile-label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 10px 12px;
	background: linear-gradient(to top, rgba(13, 20, 15, 0.75), transparent);
	color: var(--color-text-light);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 12px;
}

/* -------------------------------------------------------------------------
   Tablet (601–1024px)
   ------------------------------------------------------------------------- */

@media (min-width: 601px) {
	.service-intro__heading {
		font-size: 34px;
	}

	.service-intro__grid {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.service-intro__item {
		flex: 0 0 calc(50% - 12px);
	}

	.service-intro__media {
		height: 340px;
	}

	.service-process__list {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 32px 24px;
	}

	.service-process__step {
		flex: 0 0 calc(50% - 12px);
	}

	.service-process__connector {
		display: none;
	}

	.service-gallery__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.service-gallery__tile {
		height: 160px;
	}
}

/* -------------------------------------------------------------------------
   Desktop (1025px+)
   ------------------------------------------------------------------------- */

@media (min-width: 1025px) {
	.service-intro__inner {
		flex-direction: row;
		align-items: center;
		gap: 56px;
	}

	.service-intro__content,
	.service-intro__media {
		flex: 1;
		min-width: 0;
	}

	.service-intro__heading {
		font-size: 38px;
	}

	.service-intro__grid {
		flex-wrap: wrap;
	}

	.service-intro__item {
		flex: 0 0 calc(50% - 10px);
	}

	.service-intro__media {
		height: 420px;
		align-self: stretch;
	}

	.service-process__list {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: 0;
	}

	.service-process__step {
		flex: 1;
		min-width: 0;
	}

	.service-process__step-media {
		height: 120px;
	}

	/* Confirmed by the EPS Figma frame: an arrow connector sits between
	   each step at desktop only — the tablet/mobile stacked grid has no
	   room for one and reads fine without it. */
	.service-process__connector {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 24px;
		padding-top: 60px;
		opacity: 0.5;
	}

	.service-gallery__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.service-gallery__tile {
		height: 180px;
	}
}

/* -------------------------------------------------------------------------
   Card grid (service-cards.php — barn types, variants)
   ------------------------------------------------------------------------- */

.service-cards {
	background-color: var(--color-bg);
	padding: var(--space-section-v) var(--space-section-h);
}

.service-cards + .service-cards {
	padding-top: 0;
}

.service-cards__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	max-width: 1280px;
	margin: 0 auto;
}

.service-cards__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-card-gap);
	width: 100%;
}

.service-cards__card {
	display: flex;
	flex-direction: column;
	background-color: #fff;
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-card);
	overflow: hidden;
}

.service-cards__media {
	height: 200px;
}

.service-cards__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.service-cards__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
}

.service-cards__title {
	margin: 0;
	color: var(--color-ink);
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 22px;
}

.service-cards__description {
	margin: 0;
	color: var(--color-body-muted);
	font-family: var(--font-body);
	font-size: 13px;
	line-height: 1.6;
}

.service-cards__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 6px;
	color: var(--color-ink);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 11px;
	text-decoration: none;
	text-transform: uppercase;
}

.service-cards__link:focus-visible {
	outline: 2px solid var(--color-ink);
	outline-offset: 2px;
}

.service-cards__arrow {
	display: block;
	width: 12px;
	height: 12px;
}

@media (min-width: 601px) {
	.service-cards__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1025px) {
	.service-cards__grid {
		grid-template-columns: repeat(var(--service-cards-cols, 3), minmax(0, 1fr));
	}

	.service-cards__media {
		height: 180px;
	}
}