/* ═══════════════════════════════════════════════════════════════
   Service Detail page sections — Industrial Refined Dark design.
   Auto-loaded by functions.php (glob css/*.css).

   Existing classes REUSED (defined in style.css):
     summit-hero + summit-page-hero  — hero cover
     summit-cta                      — final CTA band
     summit-btn / summit-btn-ghost   — buttons

   New classes defined HERE:
     .sd-intro-section   .sd-cards-section
     .sd-included-section .sd-steps-section
     .gridbg  .sd-dark
     .sd-section-label  .sd-num
     .sd-head  .sd-head--dark  .sd-sub
     .sd-intro  .sd-intro-media  .sd-intro-copy
     .sd-cards  .sd-card  .sd-card-body  .sd-card-eyebrow
     .sd-inc-cols  .sd-inc
     .sd-steps  .sd-step  .sd-step-num
═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   SHARED SECTION FOUNDATION
───────────────────────────────────────────────────────────────*/
.sd-intro-section,
.sd-cards-section,
.sd-included-section,
.sd-steps-section {
	padding: 96px 48px;
	position: relative;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Background colours */
.sd-intro-section    { background-color: var(--c-ink2); }
.sd-cards-section    { background-color: var(--c-ink); border-top: 1px solid rgba(255,255,255,0.05); }
.sd-included-section { background-color: var(--c-ink2); }
.sd-steps-section    { background-color: var(--c-ink); border-top: 1px solid rgba(255,255,255,0.05); }

/* Subtle crosshatch grid texture (used on intro + included) */
.gridbg {
	background-image:
		linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
	background-size: 48px 48px;
}

/* Max-width container — every direct child of a section group */
.sd-intro-section    > *,
.sd-cards-section    > *,
.sd-included-section > *,
.sd-steps-section    > * {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}

/* ─────────────────────────────────────────────────────────────
   SECTION LABEL  (numbered eyebrow)
   Block: <p class="sd-section-label"><span class="sd-num">01</span> Label</p>
───────────────────────────────────────────────────────────────*/
.sd-section-label {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.6875rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--c-blue-l);
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 24px;
}

.sd-section-label::after {
	content: '';
	display: block;
	width: 32px;
	height: 1px;
	background: var(--c-blue-l);
	opacity: 0.5;
}

.sd-num {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 0.9rem;
	color: rgba(61,151,220,0.55);
	letter-spacing: 0.04em;
}

/* ─────────────────────────────────────────────────────────────
   SECTION HEAD  (h2 + sub paragraph)
   Block: <div class="wp-block-group sd-head"> ... </div>
───────────────────────────────────────────────────────────────*/
.sd-head.wp-block-group {
	margin-bottom: 52px;
}

.sd-head .wp-block-heading {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: clamp(1.875rem, 2.8vw, 2.875rem);
	line-height: 1.0;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: var(--c-paper);
	margin-top: 0;
	margin-bottom: 16px;
}

.sd-head .sd-sub {
	font-size: 0.9375rem;
	line-height: 1.72;
	color: rgba(246,246,243,0.60);
	max-width: 680px;
	margin: 0;
}

/* Dark variant for steps section */
.sd-head--dark .wp-block-heading { color: var(--c-paper); }
.sd-head--dark .sd-sub            { color: rgba(246,246,243,0.52); }

/* ─────────────────────────────────────────────────────────────
   INTRO SECTION  (image left, copy right)
   .sd-intro        = wp-block-columns wrapper
   .sd-intro-media  = image column
   .sd-intro-copy   = text column
───────────────────────────────────────────────────────────────*/
.sd-intro.wp-block-columns {
	gap: 0 !important;
	align-items: stretch;
	margin-top: 0;
	margin-bottom: 0;
}

/* Image column */
.sd-intro-media.wp-block-column {
	padding: 0 !important;
	overflow: hidden;
}

.sd-intro-media .wp-block-image {
	margin: 0;
	height: 100%;
}

.sd-intro-media .wp-block-image img {
	width: 100%;
	height: 100%;
	min-height: 380px;
	object-fit: cover;
	object-position: center;
	display: block;
	filter: brightness(0.80) contrast(1.06) saturate(0.88);
}

/* Copy column */
.sd-intro-copy.wp-block-column {
	padding: 56px 60px 56px 68px !important;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.sd-intro-copy .wp-block-heading {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: clamp(1.875rem, 2.5vw, 2.75rem);
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: var(--c-paper);
	line-height: 1.0;
	margin-top: 0;
	margin-bottom: 24px;
}

.sd-intro-copy p {
	font-size: 0.9375rem;
	line-height: 1.75;
	color: rgba(246,246,243,0.66);
	margin-bottom: 18px;
}

.sd-intro-copy p:last-of-type { margin-bottom: 0; }

.sd-intro-copy .wp-block-buttons { margin-top: 28px; }

/* ─────────────────────────────────────────────────────────────
   CARDS SECTION  (two-column image + detail cards)
   .sd-cards     = wp-block-columns
   .sd-card      = wp-block-column
   .sd-card-body = inner wp-block-group
───────────────────────────────────────────────────────────────*/
.sd-cards.wp-block-columns {
	gap: 4px !important;
	align-items: stretch;
	margin-top: 0;
	margin-bottom: 0;
}

.sd-card.wp-block-column {
	background: var(--c-ink2);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 0 !important;
}

.sd-card .wp-block-image { margin: 0; }

.sd-card .wp-block-image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
	display: block;
	filter: brightness(0.78) contrast(1.06) saturate(0.86);
	transition: filter 0.3s ease;
}

.sd-card:hover .wp-block-image img {
	filter: brightness(0.88) contrast(1.04) saturate(0.93);
}

/* Card body area */
.sd-card-body.wp-block-group {
	padding: 32px 36px 40px !important;
	flex: 1;
	display: flex;
	flex-direction: column;
	border-top: 3px solid var(--c-blue);
}

.sd-card-eyebrow {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-blue-l);
	margin: 0 0 10px;
}

.sd-card-body .wp-block-heading {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1.5rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--c-paper);
	line-height: 1.05;
	margin-top: 0;
	margin-bottom: 14px;
}

.sd-card-body p:not(.sd-card-eyebrow) {
	font-size: 0.9375rem;
	line-height: 1.72;
	color: rgba(246,246,243,0.60);
	flex: 1;
	margin-bottom: 22px;
}

/* Checklist within cards */
.sd-card-body .wp-block-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sd-card-body .wp-block-list li {
	font-family: var(--font-body);
	font-size: 0.875rem;
	line-height: 1.65;
	color: rgba(246,246,243,0.55);
	padding-left: 20px;
	position: relative;
	margin-bottom: 7px;
}

.sd-card-body .wp-block-list li::before {
	content: '\2014'; /* em dash */
	position: absolute;
	left: 0;
	color: var(--c-blue-l);
	font-size: 0.75rem;
	line-height: 1.7;
}

/* ─────────────────────────────────────────────────────────────
   INCLUDED SECTION  (checklist columns)
   .sd-inc-cols = wp-block-columns
   .sd-inc      = wp-block-column (individual checklist group)
───────────────────────────────────────────────────────────────*/
.sd-inc-cols.wp-block-columns {
	gap: 4px !important;
	align-items: stretch;
	margin-top: 0;
	margin-bottom: 0;
}

.sd-inc.wp-block-column {
	background: var(--c-ink);
	padding: 44px 48px !important;
	border-top: 3px solid var(--c-blue);
}

.sd-inc .wp-block-heading {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1.0625rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--c-blue-l);
	margin-top: 0;
	margin-bottom: 28px;
}

.sd-inc .wp-block-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sd-inc .wp-block-list li {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: rgba(246,246,243,0.68);
	padding-left: 24px;
	position: relative;
	margin-bottom: 13px;
}

.sd-inc .wp-block-list li:last-child { margin-bottom: 0; }

.sd-inc .wp-block-list li::before {
	content: '\2713'; /* check mark */
	position: absolute;
	left: 0;
	color: var(--c-blue-l);
	font-weight: 700;
	font-size: 0.8125rem;
	line-height: 1.65;
}

/* ─────────────────────────────────────────────────────────────
   STEPS SECTION  (numbered process cards)
   .sd-steps    = wp-block-columns
   .sd-step     = wp-block-column (individual step)
   .sd-step-num = large ghost number
───────────────────────────────────────────────────────────────*/
.sd-steps.wp-block-columns {
	gap: 4px !important;
	align-items: stretch;
	margin-top: 0;
	margin-bottom: 0;
}

.sd-step.wp-block-column {
	background: var(--c-ink2);
	padding: 44px 40px 48px !important;
	border-top: 3px solid var(--c-blue);
	display: flex;
	flex-direction: column;
}

.sd-step-num {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: clamp(3rem, 4vw, 4rem);
	line-height: 1;
	color: rgba(17,113,186,0.20);
	letter-spacing: -0.02em;
	margin: 0 0 16px;
}

.sd-step .wp-block-heading {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1.25rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--c-paper);
	line-height: 1.1;
	margin: 0 0 14px;
}

.sd-step p:not(.sd-step-num) {
	font-size: 0.9375rem;
	line-height: 1.72;
	color: rgba(246,246,243,0.56);
	margin: 0;
	flex: 1;
}

/* ─────────────────────────────────────────────────────────────
   SUMMIT CTA override (service-detail context)
   .summit-cta already has background + padding from style.css.
   Only supplement here: ensure button wrapper centres.
───────────────────────────────────────────────────────────────*/
.summit-cta .summit-cta-buttons.wp-block-buttons {
	justify-content: center !important;
}

/* ─────────────────────────────────────────────────────────────
   MOBILE  — stack at 768px
───────────────────────────────────────────────────────────────*/
@media (max-width: 768px) {

	.sd-intro-section,
	.sd-cards-section,
	.sd-included-section,
	.sd-steps-section {
		padding: 72px 24px;
	}

	/* Intro: stack vertically */
	.sd-intro.wp-block-columns {
		flex-direction: column !important;
	}

	.sd-intro-media.wp-block-column,
	.sd-intro-copy.wp-block-column {
		flex: 0 0 auto !important;
		max-width: 100% !important;
	}

	.sd-intro-media .wp-block-image img { min-height: 240px; }

	.sd-intro-copy.wp-block-column {
		padding: 40px 24px !important;
	}

	/* Cards: stack vertically */
	.sd-cards.wp-block-columns {
		flex-direction: column !important;
	}

	/* Included: stack vertically */
	.sd-inc-cols.wp-block-columns {
		flex-direction: column !important;
	}

	/* Steps: stack vertically */
	.sd-steps.wp-block-columns {
		flex-direction: column !important;
	}

	.sd-inc.wp-block-column,
	.sd-step.wp-block-column {
		flex: 0 0 auto !important;
		max-width: 100% !important;
	}
}