/* =============================================================================
   Raven Tech — Services page styles
   OWNED BY PHASE 4 — do not edit from other phases.
   page-templates/services.php: hero, intro, service cards, who-we-serve,
   certifications, CTA split.

   Shared components also styled here (their only stylesheet, per file
   ownership): template-parts/components/hero-page.php, card-service.php,
   cta-split.php.
   ========================================================================== */

/* ========================================================= PAGE-TITLE HERO */
/* hero-page.php — Figma 42:139. Photo bg + light left wash + centered Title. */

.rt-hero-page {
	position: relative;
	min-height: max(260px, min(34vw, 502px));
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--rt-hero-tint);
}

.rt-hero-page__bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-size: cover;
	background-position: center;
}

.rt-hero-page__wash {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(-90deg, rgba(237, 242, 251, 0) 0%, var(--rt-hero-tint) 89.554%);
}

.rt-hero-page__inner {
	position: relative;
	width: 100%;
	text-align: center;
}

.rt-hero-page__title {
	margin: 0;
}

/* ================================================================== INTRO */
/* Figma 64:20 — left copy / right notched photo. */

.rt-services-intro {
	padding: max(40px, min(6vw, 80px)) 0;
}

.rt-services-intro__inner {
	display: grid;
	grid-template-columns: minmax(0, 599fr) minmax(0, 546fr);
	gap: max(24px, min(4vw, 51px));
	align-items: center;
}

.rt-services-intro__text .rt-subtitle {
	margin-bottom: 0.5em;
}

.rt-services-intro__text .rt-body {
	opacity: 0.8;
	margin-bottom: 0;
}

/* aspect-ratio is Safari 15+; without it these boxes have no intrinsic
   height and collapse to nothing. The padding-top percentage on a ::before
   is the pre-aspect-ratio equivalent (percentage padding resolves against
   the element's own width), scoped to browsers that lack the real thing. */
.rt-services-intro__photo {
	aspect-ratio: 546 / 324;
	width: 100%;
	background-size: cover;
	background-position: center;
	border-radius: var(--rt-radius);
	box-shadow: var(--rt-shadow);
}

/* ============================================================ SERVICE CARDS */
/* Figma 64:19 — one full-width dark card per `services` repeater row. */

.rt-service-cards {
	padding: max(20px, min(3vw, 40px)) 0 max(40px, min(6vw, 80px));
	display: flex;
	flex-direction: column;
	gap: max(24px, min(3.5vw, 42px));
}

.rt-service-card__box {
	position: relative;
	overflow: hidden;
	border-radius: var(--rt-radius);
	box-shadow: var(--rt-shadow);
	background-size: cover;
	background-position: center;
	display: grid;
	grid-template-columns: minmax(0, 469fr) minmax(0, 397fr);
	gap: max(24px, min(4vw, 101px));
	padding: max(28px, min(4.5vw, 80px)) max(24px, min(6vw, 104px));
	min-height: 488px;
	scroll-margin-top: 140px;
}

/* "Custom Security Systems" (3rd card): the source photo's ruler/pencil sits
   right behind the kicker text at a centered crop — shift the visible window
   down so the bright ruler edge clears the text instead of showing through
   the dark overlay as a stray highlight. */
.rt-service-cards .rt-service-card:nth-child(3) .rt-service-card__box {
	background-position: center 85%;
}

.rt-service-card__overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image:
		linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%),
		linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%);
}

.rt-service-card__left,
.rt-service-card__right {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.rt-service-card__kicker {
	margin-bottom: 0.6em;
}

.rt-service-card__headline {
	color: var(--rt-white);
	font-size: max(28px, min(3.2vw, 46px));
	margin-bottom: 0.4em;
}

.rt-service-card__text {
	color: var(--rt-white);
	opacity: 0.8;
	margin-bottom: 0;
	max-width: 469px;
}

/* Service-card bullet list — plain disc bullets per the mockup (43:208):
   white @80%, 24px indent, a blank line's worth of space between items. */
.rt-service-card__bullets {
	margin: 0;
	padding: 0 0 0 24px;
	list-style: disc;
	max-width: 397px;
	color: rgba(255, 255, 255, 0.8);
	font-size: 16px;
	line-height: 1.4;
	display: flex;
	flex-direction: column;
	gap: max(14px, min(1.6vw, 22px));
}

/* Red-check bullet list — the certifications section (ink text on white). */
.rt-check-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: max(14px, min(1.6vw, 22px));
}

.rt-check-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 16px;
	line-height: 1.4;
}

.rt-check-list__icon {
	flex: 0 0 auto;
	width: 21px;
	height: 21px;
	margin-top: 0.1em;
}


/* ============================================================= WHO WE SERVE */
/* Figma 64:16 — photo bg + white wash, offset frosted-card grid. */

.rt-who-we-serve {
	position: relative;
	padding: max(40px, min(6vw, 77px)) 0 max(60px, min(8vw, 100px));
	background-image: var(--rt-whoweserve-bg);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.rt-who-we-serve__wash {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(to bottom, #fff 0%, rgba(245, 245, 245, 0) 100%);
}

.rt-who-we-serve__inner {
	position: relative;
}

.rt-who-we-serve__head {
	max-width: 467px;
	margin-bottom: max(28px, min(4vw, 48px));
}

.rt-who-we-serve__head .rt-subtitle {
	margin-bottom: 0.3em;
}

.rt-who-we-serve__head .rt-body {
	opacity: 0.75;
	margin-bottom: 0;
}

.rt-serve-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: max(16px, min(2vw, 27px));
}

.rt-serve-card {
	background: rgba(255, 255, 255, 0.4);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: var(--rt-radius);
	box-shadow: var(--rt-shadow);
	padding: 26px;
	aspect-ratio: 278 / 308;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	overflow: hidden;
}

.rt-serve-card__icon {
	width: 40px;
	height: 40px;
	margin-bottom: 16px;
	flex: 0 0 auto;
}

.rt-serve-card__title {
	margin-bottom: 0.5em;
	overflow-wrap: break-word;
}

.rt-serve-card__text {
	margin-bottom: 0;
	color: var(--rt-ink-soft);
	overflow-wrap: break-word;
}

/* ============================================================ CERTIFICATIONS */
/* Figma 64:15 — left richtext title (gradient <em>) + body; right bullets. */

.rt-certifications {
	padding: max(40px, min(6vw, 90px)) 0;
}

.rt-certifications__inner {
	display: grid;
	grid-template-columns: minmax(0, 574fr) minmax(0, 452fr);
	gap: max(24px, min(4vw, 60px));
	align-items: center;
}

.rt-certifications__title {
	margin-bottom: 0.4em;
}

.rt-certifications__title em {
	font-style: normal;
	background: var(--rt-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.rt-certifications__text {
	opacity: 0.75;
}

.rt-certifications__bullets {
	color: var(--rt-ink-soft);
}

.rt-certifications__bullets li strong {
	color: var(--rt-black);
}

/* ================================================================= CTA SPLIT */
/* cta-split.php — Figma 64:18 (shared with the homepage: 7:530/7:541). */

.rt-cta-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 434px;
}

.rt-cta-split__text {
	background: var(--rt-gradient);
	color: var(--rt-white);
	padding: max(32px, min(5vw, 86px)) max(24px, min(6vw, 135px));
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.rt-cta-split__title {
	color: var(--rt-white);
	margin-bottom: 0.4em;
}

.rt-cta__accent {
	color: var(--rt-black);
}

.rt-cta-split__body {
	color: rgba(255, 255, 255, 0.75);
	max-width: 444px;
	margin-bottom: 1.6em;
}

.rt-cta-split__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.rt-cta-split__photo {
	background-size: cover;
	background-position: center;
	min-height: 280px;
}

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

@media (max-width: 1024px) {
	.rt-services-intro__inner {
		grid-template-columns: 1fr;
	}

	.rt-services-intro__photo {
		order: -1;
	}

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

	.rt-serve-card,
	.rt-serve-card[style] {
		grid-column: auto !important;
		grid-row: auto !important;
	}

	.rt-certifications__inner {
		grid-template-columns: 1fr;
	}

	.rt-cta-split {
		grid-template-columns: 1fr;
	}

	.rt-cta-split__photo {
		min-height: 260px;
	}
}

@media (max-width: 768px) {
	/* Let the cards be as tall as their content. The 278/308 ratio is a desktop
	   grid device — it keeps the four-across row even. Once the cards go two-up
	   and then full width they get much wider relative to their text, and the
	   ratio was forcing ~371px boxes around 195–247px of content, so a third to
	   a half of every card was empty. Row stretch still levels the two-up pairs,
	   but off content height rather than a fixed ratio. */
	.rt-serve-card {
		aspect-ratio: auto;
	}

	.rt-service-card__box {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.rt-service-card__bullets {
		max-width: none;
	}
}

@media (max-width: 480px) {
	.rt-serve-grid {
		grid-template-columns: 1fr;
	}

	.rt-cta-split__buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.rt-cta-split__buttons .rt-btn {
		text-align: center;
	}
}

/* ------------------------------------------- legacy: aspect-ratio fallback */
@supports not (aspect-ratio: 1 / 1) {
	.rt-services-intro__photo::before {
		content: "";
		display: block;
		padding-top: 59.3407%; /* 324 / 546 */
	}

	/* .rt-serve-card holds real content, so the padding-top trick can't apply.
	   The ratio is only in force above 768px (it resets to `auto` below), and
	   at 2-up widths the design already prefers content height — so the
	   fallback is just the design's 4-up card height as a floor. */
	@media (min-width: 1025px) {
		.rt-serve-card {
			min-height: 308px; /* 278 x 308 design card */
		}
	}
}

/* =============================================================================
   LEGACY FALLBACK — flexbox `gap`
   `gap` only works on flex containers from Safari 14.1; before that it is
   ignored outright and every flex row/stack in this file collapses to zero
   spacing. WebKit shipped flex `gap` and the `inset` shorthand in the same
   release, so `@supports not (inset: 0)` is an exact probe for "this engine
   has no flex gap" on Safari (and only catches a few pre-2020 Chrome/Firefox
   builds, which get the same correct spacing anyway).

   Recipes below, matching each container's direction:
     column        -> `> * + *` margin-top
     row, no wrap  -> `> * + *` margin-left
     row + wrap    -> margin-bottom on every child + margin-right on all but
                      the last, with a negative margin-bottom on the container
                      cancelling the trailing row. Containers that are
                      themselves children of another wrapping container skip
                      that compensation, since their parent already sets
                      margin-bottom on them.
   Modern browsers never see any of this.
   ========================================================================== */
@supports not (inset: 0) {
	/* column stacks */
	.rt-service-cards > * + * { margin-top: max(24px, min(3.5vw, 42px)); }
	.rt-service-card__bullets > * + * { margin-top: max(14px, min(1.6vw, 22px)); }
	.rt-check-list > * + * { margin-top: max(14px, min(1.6vw, 22px)); }

	/* single-line rows */
	.rt-check-list li > * + * { margin-left: 12px; }

	/* wrapping rows */
	.rt-cta-split__buttons > * { margin-bottom: 16px; }
	.rt-cta-split__buttons > *:not(:last-child) { margin-right: 16px; }
	.rt-cta-split__buttons { margin-bottom: -16px; }

	@media (max-width: 480px) {
		.rt-cta-split__buttons > * { margin-right: 0; }
	}
}