/* ==========================================================================
   Services page
   1. Hero
   2. Keyhole window (layout; its motion is in assets/js/keyhole-window.js)
   3. Intro
   4. Service panels: flagship (dark) and bordered (light)
   5. Service tiles
   6. Motion: tile hover

   The support block, FAQ and closing CTA are shared: support.css and closing.css.
   ========================================================================== */

/* 1. Hero
   Brand blue, full bleed. Stacked on phones and tablets: copy, then the
   keyhole window. Desktop: copy about 45%, window about 55%.
   ========================================================================== */

.services-hero {
	--focus-color: var(--on-blue);

	overflow: clip; /* the window leans up to 12px toward the cursor */
	padding-block: var(--space-8) var(--space-section);
	color: var(--on-blue);
	background-color: var(--brand-blue);
}

.services-hero__inner {
	display: grid;
	gap: var(--space-8);
}

.services-hero__copy {
	display: grid;
	justify-items: start;
}

.services-hero__eyebrow {
	color: var(--on-blue);
}

/* Stat: yellow numeral (3.8:1 on brand blue, passes as large text), white label beside it.
   Markup from digiholic_stat(). */
.services-hero__stat {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-top: var(--space-5);
}

.services-hero__stat .stat__number {
	font-size: var(--text-3xl);
	color: var(--accent-yellow);
}

.services-hero__stat .stat__label {
	max-width: 8ch;
	margin-top: 0;
	font-weight: var(--weight-semibold);
}

.services-hero__title {
	margin-top: var(--space-5);
}

.services-hero__button {
	margin-top: var(--space-6);
}

@media (min-width: 64em) {
	.services-hero {
		padding-top: var(--space-9);
	}

	.services-hero__inner {
		grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
		align-items: center;
		gap: var(--space-7);
	}
}

/* 2. Keyhole window
   The keyhole cut-out (circle and tapered stem, 123 x 220 on the artwork grid)
   as a white window, clipped by #keyhole-window-clip in
   template-parts/services/hero.php. About 520px tall on desktop.

   Four bands of brand-blue names, each placed where the keyhole is wide enough
   for it. Band positions are percentages of the window, measured from the trace:
   1. upper circle, 2. the circle's widest point (largest, full strength),
   3. lower circle, 4. the middle of the stem's open space above the pause
   button (the stem runs from about 54% down). Each band stops short of the
   keyhole edge and fades out over its outer 12% to the white behind it, so
   names slip away rather than being sliced.
   Type sizes use cqw (percent of the window's width), so the bands keep their
   proportions at every size.
   ========================================================================== */

.keyhole-window {
	--keyhole-width: 10.5rem; /* about 300px tall */

	display: flex;
	flex-direction: column;
	align-items: center;
	/* Room between the keyhole and the hero's bottom edge when stacked. */
	padding-bottom: var(--space-6);
}

.keyhole-window__frame {
	position: relative;
	width: var(--keyhole-width);
	aspect-ratio: 123 / 220;
	container-type: inline-size;
}

.keyhole-window__view {
	position: absolute;
	inset: 0;
	background-color: var(--surface);
	clip-path: url("#keyhole-window-clip");
}

.keyhole-window__stage {
	position: absolute;
	inset: 0;
}

.keyhole-window__band {
	position: absolute;
	top: var(--band-y);
	left: var(--band-left);
	right: var(--band-right);
	overflow: hidden;
	transform: translateY(-50%);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.keyhole-window__band--1 {
	--band-y: 14%;
	--band-left: 8%;
	--band-right: 8%;
	--band-size: 7cqw;
	--band-opacity: 0.6;
}

.keyhole-window__band--2 {
	--band-y: 28%;
	--band-left: 2%;
	--band-right: 2%;
	--band-size: 14cqw;
	--band-opacity: 1;
}

.keyhole-window__band--3 {
	--band-y: 43%;
	--band-left: 7%;
	--band-right: 11%;
	--band-size: 7cqw;
	--band-opacity: 0.55;
}

.keyhole-window__band--4 {
	--band-y: 72%;
	--band-left: 18%;
	--band-right: 20%;
	--band-size: 6cqw;
	--band-opacity: 0.45;
}

/* Each band starts at a different point, so the names never line up. */
.keyhole-window__track {
	display: flex;
	width: max-content;
	margin-left: var(--band-start, 0);
	padding-block: 0.15em;
}

.keyhole-window__band--1 .keyhole-window__track {
	--band-start: -2em;
}

.keyhole-window__band--3 .keyhole-window__track {
	--band-start: -5em;
}

.keyhole-window__band--4 .keyhole-window__track {
	--band-start: -1em;
}

.keyhole-window__name {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	font-size: var(--band-size);
	font-weight: var(--weight-extrabold);
	line-height: 1;
	white-space: nowrap;
	text-transform: uppercase;
	color: var(--brand-blue);
	opacity: var(--band-opacity);
}

/* The small yellow dot between names. Part of each name's box, so every name
   measures its own gap and recycles cleanly. */
.keyhole-window__name::after {
	content: "";
	flex-shrink: 0;
	width: 0.3em;
	height: 0.3em;
	margin-inline: 0.6em;
	background-color: var(--accent-yellow);
	border-radius: 50%;
}

.keyhole-window__defs {
	position: absolute;
}

/* Pause / play: a small brand-blue icon inside the keyhole, centred in the
   stem with a clear gap above its bottom edge. The stem's centre sits at 48.5%
   across. Blue focus ring, since it sits on white. */
.keyhole-window__toggle {
	--focus-color: var(--brand-blue);

	position: absolute;
	bottom: var(--space-5);
	left: 48.5%;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	color: var(--brand-blue);
	background-color: transparent;
	border: 0;
	border-radius: 50%;
	transform: translateX(-50%);
}

.keyhole-window__toggle[hidden] {
	display: none;
}

.keyhole-window__toggle:hover {
	color: var(--brand-blue-700);
	background-color: color-mix(in srgb, var(--brand-blue) 10%, transparent);
}

.keyhole-window__icon {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.keyhole-window__icon--play {
	display: none;
	fill: currentColor;
}

.keyhole-window.is-paused .keyhole-window__icon--pause {
	display: none;
}

.keyhole-window.is-paused .keyhole-window__icon--play {
	display: block;
}

@media (min-width: 40em) {
	.keyhole-window {
		--keyhole-width: 13rem;
	}
}

@media (min-width: 64em) {
	.keyhole-window {
		--keyhole-width: 18.25rem; /* 520px tall */

		padding-bottom: 0; /* centred beside the copy, well clear of the edge */
	}
}

@media (prefers-reduced-motion: reduce) {
	.keyhole-window__toggle {
		display: none;
	}
}

/* 3. Intro
   A pause on white between the blue hero and the dark panel.
   ========================================================================== */

.services-intro {
	padding-block: var(--space-section);
	background-color: var(--surface);
}

.services-intro__title {
	max-width: 22ch;
	margin-top: var(--space-4);
	font-size: var(--text-4xl);
	color: var(--brand-blue);
}

/* 4. Service panels
   Flagship: full width on brand-blue-900, white text.
   Bordered: training and consulting, full-width white panels, stacked.
   ========================================================================== */

.service-panel__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
}

.service-panel__title {
	max-width: 20ch;
}

/* Outline button. Colour set per panel. */
.service-panel__button {
	min-height: 2.75rem;
	padding-inline: var(--space-5);
	color: var(--panel-ink);
	background-color: transparent;
	box-shadow: inset 0 0 0 2px var(--panel-ink);
}

.service-panel__button:hover {
	color: var(--panel-ground);
	background-color: var(--panel-ink);
}

.service-panel .service-tiles {
	margin-top: var(--space-7);
}

.service-panel--flagship {
	--panel-ink: var(--on-blue);
	--panel-ground: var(--brand-blue-900);
	--focus-color: var(--on-blue);

	padding-block: var(--space-section);
	color: var(--on-blue);
	background-color: var(--brand-blue-900);
}

.service-panel--flagship .service-panel__title {
	font-size: var(--text-3xl);
}

.service-pair {
	padding-block: var(--space-section);
	background-color: var(--surface);
}

.service-pair__inner {
	display: grid;
	gap: var(--space-7);
}

.service-panel--bordered {
	--panel-ink: var(--brand-blue);
	--panel-ground: var(--surface);

	padding: var(--space-6);
	border: 2px solid var(--brand-blue);
	border-radius: var(--radius-md);
}

.service-panel--bordered .service-panel__title {
	color: var(--brand-blue);
}

@media (min-width: 40em) {
	.service-panel--bordered {
		padding: var(--space-7);
	}
}

/* 5. Service tiles
   Icon, name and description, always shown. Tiles in a row share the height
   of the tallest. 1 column on phones, 2 from tablet. Desktop: the flagship
   goes to 4, with its two wide tiles spanning 2 so the 14 fill 4 full rows;
   consulting goes to 3 (3 x 2).
   ========================================================================== */

.service-tiles {
	display: grid;
	gap: var(--space-4);
	margin: 0;
}

.service-tile__inner {
	display: grid;
	align-content: start;
	gap: var(--space-3);
	height: 100%;
	padding: var(--space-5);
	color: inherit;
	text-decoration: none;
	border: 1px solid var(--tile-border);
	border-radius: var(--radius-md);
	background-color: var(--tile-ground);
}

.service-tile__icon {
	width: 1.75rem;
	height: 1.75rem;
	color: var(--tile-icon);
}

.service-tile__name {
	font-size: var(--text-lg);
	font-weight: var(--weight-bold);
	line-height: var(--leading-snug);
	color: var(--tile-name);
}

.service-tile__desc {
	max-width: var(--measure);
	font-size: var(--text-sm);
	line-height: var(--leading-body);
	color: var(--tile-desc);
}

.service-tile:hover .service-tile__inner,
.service-tile__inner:focus-visible {
	border-color: var(--tile-border-hover);
}

.service-tile:hover .service-tile__icon,
.service-tile__inner:focus-visible .service-tile__icon {
	color: var(--tile-icon-hover);
}

/* Dark tiles: white icons and text; the icon turns yellow on hover as the small accent. */
.service-panel--flagship .service-tiles {
	--tile-ground: color-mix(in srgb, var(--on-blue) 5%, var(--brand-blue-900));
	--tile-border: color-mix(in srgb, var(--on-blue) 16%, var(--brand-blue-900));
	--tile-border-hover: var(--on-blue);
	--tile-icon: var(--on-blue);
	--tile-icon-hover: var(--accent-yellow);
	--tile-name: var(--on-blue);
	--tile-desc: var(--on-blue);
}

/* Light tiles: blue icons and names, ink descriptions. */
.service-panel--bordered .service-tiles {
	--tile-ground: var(--surface-100);
	--tile-border: var(--border-subtle);
	--tile-border-hover: var(--brand-blue);
	--tile-icon: var(--brand-blue);
	--tile-icon-hover: var(--brand-blue-900);
	--tile-name: var(--brand-blue);
	--tile-desc: var(--ink);
}

@media (min-width: 40em) {
	.service-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.service-tile--wide {
		grid-column: span 2;
	}
}

@media (min-width: 64em) {
	.service-tile__inner {
		padding: var(--space-6);
	}

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

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

/* 6. Motion: tile hover
   The tile lifts 4px as its border brightens and its icon changes colour.
   Under reduced motion the colours still change, without the lift or fade.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.service-tile__inner {
		transition:
			transform 0.2s ease-out,
			border-color 0.2s ease-out;
	}

	.service-tile__icon {
		transition: color 0.2s ease-out;
	}

	.service-tile:hover .service-tile__inner,
	.service-tile__inner:focus-visible {
		transform: translateY(-4px);
	}

	.service-panel__button {
		transition:
			color 0.2s ease-out,
			background-color 0.2s ease-out;
	}
}