/**
 * File: assets/css/pages/services/base.css
 * Description: Base layout and hero styling for the Services page.
 *
 * MAGIDA SERVICES PAGE PASS 8:
 * - Loads only on the Services page.
 * - Keeps Services page foundation separate from global/core template CSS.
 *
 * MAGIDA INNER PAGE HERO ALIGNMENT PASS 9.0:
 * - Locks the Services hero rhythm as the reference for internal page heroes.
 *
 * MAGIDA SERVICES GLOBAL HERO MIGRATION PASS 22.2:
 * - Keeps legacy Services selectors for compatibility while the outer hero shell is now global.
 * - Adds Services-only visual containment rules for the migrated hero artwork.
 */

.magida-template--services {
	position: relative;
	/* MAGIDA INNER PAGE HERO ALIGNMENT PASS 9.0: Shared internal-page hero rhythm so About and Services no longer drift. */
	--magida-inner-hero-padding-top: clamp(82px, 8vw, 118px);
	--magida-inner-hero-padding-bottom: 94px;
	--magida-inner-hero-breadcrumb-gap: 44px;
	--magida-inner-hero-grid-gap: clamp(34px, 6vw, 76px);
	--magida-inner-hero-visual-min-height: 430px;
	overflow: hidden;
}

.magida-template--services::before {
	/* MAGIDA SERVICES PAGE PASS 8: Adds premium page atmosphere without relying on image assets yet. */
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(
			circle at 12% 8%,
			rgba(5, 223, 254, 0.13),
			transparent 34%
		),
		radial-gradient(
			circle at 88% 10%,
			rgba(124, 106, 251, 0.14),
			transparent 36%
		),
		linear-gradient(180deg, rgba(6, 7, 11, 0.08), rgba(6, 7, 11, 0.96) 52%);
}

.magida-services-section {
	padding: 92px 0;
	border-top: 1px solid rgba(190, 189, 229, 0.08);
}

.magida-services-section:first-child {
	border-top: 0;
}

.magida-services-section-header {
	max-width: 760px;
	margin-bottom: 38px;
}

.magida-services-section-header h2,
.magida-services-intro h2,
.magida-services-approach h2,
.magida-services-quote-direction h2,
.magida-services-final-cta h2 {
	margin: 0;
	font-size: clamp(2rem, 4vw, 4.35rem);
	line-height: 0.98;
	letter-spacing: -0.07em;
}

.magida-services-section-header p,
.magida-services-intro p,
.magida-services-approach p,
.magida-services-quote-direction p,
.magida-services-final-cta p {
	margin: 18px 0 0;
	max-width: 700px;
	color: var(--magida-text-soft);
	font-size: clamp(1rem, 1.45vw, 1.18rem);
	line-height: 1.8;
}

.magida-services-breadcrumb {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	/* MAGIDA INNER PAGE HERO ALIGNMENT PASS 9.0: Uses the shared breadcrumb gap token. */
	margin-bottom: var(--magida-inner-hero-breadcrumb-gap);
	padding: 10px 14px;
	border: 1px solid rgba(190, 189, 229, 0.12);
	border-radius: var(--magida-radius-full);
	background: rgba(255, 255, 255, 0.025);
	color: var(--magida-text-muted);
	font-family: var(--magida-font-heading);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.magida-services-breadcrumb a {
	color: var(--magida-text-soft);
}

.magida-services-breadcrumb strong,
.magida-services-breadcrumb a:hover,
.magida-services-breadcrumb a:focus-visible {
	color: var(--magida-cyan);
}

.magida-services-hero {
	position: relative;
	/* MAGIDA INNER PAGE HERO ALIGNMENT PASS 9.0: Reference vertical rhythm for internal page heroes. */
	padding: var(--magida-inner-hero-padding-top) 0
		var(--magida-inner-hero-padding-bottom);
	border-bottom: 1px solid rgba(190, 189, 229, 0.1);
}

.magida-services-hero::after {
	/* MAGIDA SERVICES PAGE PASS 8: Thin premium glow line at the hero edge. */
	content: "";
	position: absolute;
	right: 8%;
	bottom: 0;
	left: 8%;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(5, 223, 254, 0.55),
		rgba(124, 106, 251, 0.4),
		transparent
	);
}

.magida-services-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.78fr);
	/* MAGIDA INNER PAGE HERO ALIGNMENT PASS 9.0: Shared grid gap token prevents future page-to-page drift. */
	gap: var(--magida-inner-hero-grid-gap);
	align-items: center;
}

.magida-services-hero__title {
	max-width: 850px;
	margin: 0;
	font-size: clamp(4rem, 9.5vw, 8.8rem);
	line-height: 0.86;
	letter-spacing: -0.09em;
}

.magida-services-hero__description {
	max-width: 760px;
	margin: 28px 0 0;
	color: var(--magida-text-soft);
	font-size: clamp(1.08rem, 1.75vw, 1.45rem);
	line-height: 1.7;
}

.magida-services-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 34px;
}

.magida-services-hero__visual {
	position: relative;
	/* MAGIDA INNER PAGE HERO ALIGNMENT PASS 9.0: Shared visual shell height for About/Services hero consistency. */
	min-height: var(--magida-inner-hero-visual-min-height);
	border: 1px solid rgba(5, 223, 254, 0.2);
	border-radius: 30px;
	background:
		linear-gradient(135deg, rgba(12, 15, 26, 0.92), rgba(12, 15, 26, 0.62)),
		radial-gradient(
			circle at 16% 14%,
			rgba(5, 223, 254, 0.18),
			transparent 32%
		),
		radial-gradient(
			circle at 90% 24%,
			rgba(124, 106, 251, 0.18),
			transparent 34%
		);
	box-shadow:
		0 34px 100px rgba(0, 0, 0, 0.34),
		var(--magida-glow-soft);
	overflow: hidden;
}

.magida-services-hero__visual::before,
.magida-services-hero__visual::after {
	content: "";
	position: absolute;
	border: 1px solid rgba(190, 189, 229, 0.12);
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.026);
}

.magida-services-hero__visual::before {
	inset: 34px 34px auto 34px;
	height: 118px;
}

.magida-services-hero__visual::after {
	right: 36px;
	bottom: 38px;
	width: 42%;
	height: 160px;
	background: linear-gradient(
		135deg,
		rgba(5, 223, 254, 0.12),
		rgba(124, 106, 251, 0.12)
	);
}

.magida-services-visual-card {
	position: absolute;
	z-index: 2;
	border: 1px solid rgba(5, 223, 254, 0.22);
	border-radius: 20px;
	background: rgba(8, 11, 20, 0.84);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36);
	backdrop-filter: blur(18px);
}

.magida-services-visual-card--main {
	top: 72px;
	left: 52px;
	width: min(74%, 390px);
	padding: 28px;
}

.magida-services-visual-card--main strong {
	display: block;
	margin-top: 9px;
	color: var(--magida-white);
	font-family: var(--magida-font-heading);
	font-size: clamp(1.4rem, 3vw, 2.45rem);
	line-height: 0.98;
	letter-spacing: -0.06em;
}

.magida-services-visual-card__tag {
	display: inline-flex;
	margin-bottom: 8px;
	color: var(--magida-cyan);
	font-family: var(--magida-font-heading);
	font-size: 0.75rem;
	font-weight: 900;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.magida-services-visual-card__lines {
	display: grid;
	gap: 10px;
	margin-top: 24px;
}

.magida-services-visual-card__lines span {
	display: block;
	height: 10px;
	border-radius: var(--magida-radius-full);
	background: linear-gradient(
		90deg,
		rgba(5, 223, 254, 0.55),
		rgba(124, 106, 251, 0.18)
	);
}

.magida-services-visual-card__lines span:nth-child(2) {
	width: 76%;
}

.magida-services-visual-card__lines span:nth-child(3) {
	width: 54%;
}

.magida-services-visual-card--floating {
	right: 42px;
	bottom: 58px;
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 18px 20px;
}

.magida-services-visual-card--floating span {
	color: var(--magida-text);
	font-family: var(--magida-font-heading);
	font-size: 0.95rem;
	font-weight: 900;
}

.magida-services-visual-card--floating span + span::before {
	content: "→";
	margin-right: 10px;
	color: var(--magida-cyan);
}

.magida-services-intro__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
	gap: clamp(26px, 5vw, 72px);
	align-items: start;
}

.magida-services-intro__copy {
	padding-top: 8px;
}

.magida-services-editor {
	margin-top: 34px;
	padding: 28px;
}

.magida-services-editor > *:first-child {
	margin-top: 0;
}

.magida-services-editor > *:last-child {
	margin-bottom: 0;
}

@media (max-width: 1100px) {
	.magida-services-hero__inner {
		grid-template-columns: 1fr;
	}

	.magida-services-hero__visual {
		max-width: 680px;
	}
}

@media (max-width: 760px) {
	.magida-services-section {
		padding: var(--magida-section-padding-mobile) 0;
	}

	.magida-services-hero {
		/* MAGIDA INNER PAGE HERO ALIGNMENT PASS 9.0: Mobile hero padding remains compact and matches About. */
		padding: 54px 0 70px;
	}

	.magida-services-hero__title {
		font-size: clamp(3.15rem, 18vw, 5rem);
	}

	.magida-services-hero__actions,
	.magida-services-final-cta__actions,
	.magida-services-quote-direction__actions {
		width: 100%;
	}

	.magida-services-hero__actions .magida-button,
	.magida-services-final-cta__actions .magida-button,
	.magida-services-quote-direction__actions .magida-button {
		width: 100%;
	}

	.magida-services-hero__visual {
		min-height: 380px;
		border-radius: 24px;
	}

	.magida-services-visual-card--main {
		top: 34px;
		left: 24px;
		width: calc(100% - 48px);
	}

	.magida-services-visual-card--floating {
		right: 24px;
		bottom: 30px;
		left: 24px;
		justify-content: center;
	}

	.magida-services-intro__grid {
		grid-template-columns: 1fr;
	}
}

/* MAGIDA SERVICES GLOBAL HERO MIGRATION PASS 22.2:
   Services now uses template-parts/global/inner-hero.php for the outer shell.
   These rules only tune the artwork inside that shell, so they do not fight the global hero layout. */
@media (min-width: 1181px) {
	.magida-inner-hero--services .magida-services-hero__visual::before {
		/* MAGIDA PASS 22.2: Keeps the decorative top panel aligned inside the shorter global visual card. */
		inset: 38px 40px auto 40px;
		height: 112px;
		border-radius: 22px;
	}

	.magida-inner-hero--services .magida-services-visual-card--main {
		/* MAGIDA PASS 22.2: Raises the main service stack card so it reads cleanly in the global frame. */
		top: 58px;
		left: 46px;
		width: min(58%, 380px);
		padding: 26px;
	}

	.magida-inner-hero--services .magida-services-visual-window {
		/* MAGIDA PASS 22.2: Moves the coded window away from the lower action chips. */
		right: 36px;
		bottom: 106px;
		width: min(46%, 315px);
		min-height: 176px;
	}

	.magida-inner-hero--services .magida-services-visual-window__body {
		padding: 20px;
	}

	.magida-inner-hero--services .magida-services-visual-card--floating {
		/* MAGIDA PASS 22.2: Keeps Plan / Build / Grow anchored but not clipped. */
		right: 44px;
		bottom: 42px;
	}

	.magida-inner-hero--services .magida-services-visual-map {
		/* MAGIDA PASS 22.2: Aligns the journey pill with the new global visual rhythm. */
		left: 44px;
		bottom: 42px;
	}
}

@media (max-width: 760px) {
	.magida-inner-hero--services .magida-services-hero__visual::before {
		/* MAGIDA PASS 22.2: Decorative panel becomes a soft backing layer on mobile. */
		inset: 82px 22px auto 22px;
		height: 128px;
		border-radius: 20px;
	}

	.magida-inner-hero--services .magida-services-hero__orb {
		/* MAGIDA PASS 22.2: Reduces glow noise inside the compact mobile frame. */
		width: 74px;
		height: 74px;
		opacity: 0.72;
	}

	.magida-inner-hero--services .magida-services-hero__orb--cyan {
		top: 24px;
		right: 18px;
	}

	.magida-inner-hero--services .magida-services-hero__orb--violet {
		bottom: 28px;
		left: 18px;
	}

	.magida-inner-hero--services .magida-services-visual-card--main {
		/* MAGIDA PASS 22.2: Keeps the main content fully inside the visual card on phones. */
		top: 22px;
		right: 22px;
		left: 22px;
		width: auto;
		padding: 20px;
		border-radius: 18px;
	}

	.magida-inner-hero--services .magida-services-visual-card--main strong {
		font-size: clamp(1.18rem, 6vw, 1.64rem);
	}

	.magida-inner-hero--services .magida-services-visual-card__lines {
		margin-top: 18px;
	}

	.magida-inner-hero--services .magida-services-visual-window {
		/* MAGIDA PASS 22.2: Gives the coded window its own lane instead of letting it hide under other cards. */
		right: 22px;
		bottom: 86px;
		left: 22px;
		width: auto;
		min-height: 126px;
		border-radius: 20px;
	}

	.magida-inner-hero--services .magida-services-visual-window__bar {
		padding: 11px 14px;
	}

	.magida-inner-hero--services .magida-services-visual-window__body {
		grid-template-columns: minmax(0, 1fr) 72px;
		gap: 14px;
		padding: 16px;
	}

	.magida-inner-hero--services .magida-services-visual-window__device {
		height: 94px;
		border-radius: 18px;
	}

	.magida-inner-hero--services .magida-services-visual-window__device strong {
		font-size: 1.8rem;
	}

	.magida-inner-hero--services .magida-services-visual-window__device span {
		top: 48px;
	}

	.magida-inner-hero--services .magida-services-visual-map {
		/* MAGIDA PASS 22.2: Hides the smallest journey pill on mobile to prevent artwork clipping. */
		display: none;
	}

	.magida-inner-hero--services .magida-services-visual-card--floating {
		/* MAGIDA PASS 22.2: Pins the workflow chips to the bottom of the visual shell. */
		right: 22px;
		bottom: 22px;
		left: 22px;
		justify-content: center;
		padding: 15px 14px;
		border-radius: 18px;
	}

	.magida-inner-hero--services .magida-services-visual-card--floating span {
		font-size: clamp(0.72rem, 3.2vw, 0.86rem);
	}
}

@media (max-width: 480px) {
	.magida-inner-hero--services .magida-services-visual-card--main,
	.magida-inner-hero--services .magida-services-visual-window,
	.magida-inner-hero--services .magida-services-visual-card--floating {
		right: 18px;
		left: 18px;
	}

	.magida-inner-hero--services .magida-services-visual-card--main {
		top: 18px;
		padding: 18px;
	}

	.magida-inner-hero--services .magida-services-visual-window {
		bottom: 80px;
	}

	.magida-inner-hero--services .magida-services-visual-window__body {
		grid-template-columns: minmax(0, 1fr) 64px;
		padding: 14px;
	}

	.magida-inner-hero--services .magida-services-visual-card--floating {
		bottom: 18px;
		gap: 8px;
		padding: 14px 10px;
	}

	.magida-inner-hero--services
		.magida-services-visual-card--floating
		span
		+ span::before {
		margin-right: 8px;
	}
}