/**
 * File: assets/css/pages/contact/base.css
 * Description: Contact page scoped styling.
 *
 * MAGIDA GLOBAL INNER HERO PASS 22.5:
 * - Contact hero structure now comes from the global inner hero shell.
 * - This file owns only Contact-specific page decoration and Contact visual artwork.
 *
 * MAGIDA CONTACT HERO PRICING MATCH PASS 22.5.4:
 * - Removes old Contact-only hero spacing variables that overrode the approved Pricing rhythm.
 * - Keeps the Contact visual inside the same global card height/width contract as Pricing.
 * - Prevents the inbox artwork from clipping while preserving the cinematic card feel.
 */

.magida-contact-page {
	position: relative;
	overflow: hidden;
}

.magida-contact-page::before,
.magida-contact-page::after {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
	border-radius: 999px;
	filter: blur(10px);
	opacity: 0.7;
}

.magida-contact-page::before {
	top: 16%;
	left: -130px;
	width: 320px;
	height: 320px;
	background: radial-gradient(
		circle,
		rgba(0, 214, 255, 0.18),
		transparent 66%
	);
}

.magida-contact-page::after {
	right: -160px;
	bottom: 8%;
	width: 360px;
	height: 360px;
	background: radial-gradient(
		circle,
		rgba(124, 92, 255, 0.18),
		transparent 68%
	);
}

.magida-contact-page > * {
	position: relative;
	z-index: 1;
}

.magida-contact-hero .magida-inner-hero__inner {
	/* CHANGE 22.5.4: Match Pricing's desktop vertical relationship instead of Contact's old center-heavy rhythm. */
	align-items: start;
}

.magida-contact-hero__description {
	max-width: 70ch;
}

.magida-contact-hero__actions {
	gap: 18px;
	margin-top: clamp(30px, 3vw, 42px);
}

.magida-contact-hero__actions .magida-button--ghost {
	background: rgba(255, 255, 255, 0.035);
	border-color: rgba(255, 255, 255, 0.12);
	color: rgba(231, 229, 255, 0.82);
}

.magida-contact-visual {
	/* CHANGE 22.5.4: Use the shared Pricing visual token. No local 520px hard stop. */
	position: relative;
	isolation: isolate;
	min-height: var(
		--magida-inner-page-visual-height,
		clamp(420px, 31vw, 520px)
	);
	height: var(--magida-inner-page-visual-height, clamp(420px, 31vw, 520px));
	overflow: hidden;
}

.magida-contact-visual::before,
.magida-contact-visual::after {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
}

.magida-contact-visual::before {
	inset: 14% 8% auto 7%;
	height: 2px;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(0, 214, 255, 0.9),
		rgba(124, 92, 255, 0.9),
		transparent
	);
	transform: rotate(-7deg);
	opacity: 0.8;
}

.magida-contact-visual::after {
	right: 14%;
	bottom: 10%;
	width: min(260px, 32%);
	aspect-ratio: 1;
	border-radius: 999px;
	background: radial-gradient(
		circle,
		rgba(0, 214, 255, 0.18),
		transparent 68%
	);
	opacity: 0.9;
}

.magida-contact-visual__halo {
	position: absolute;
	left: 12%;
	bottom: -8%;
	z-index: 0;
	width: 54%;
	aspect-ratio: 1.75;
	border-radius: 999px;
	background: radial-gradient(
		circle,
		rgba(0, 214, 255, 0.18),
		transparent 66%
	);
	filter: blur(8px);
}

.magida-contact-visual__panel {
	position: absolute;
	z-index: 1;
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 28px 70px rgba(0, 0, 0, 0.38);
}

.magida-contact-visual__panel--back {
	/* CHANGE 22.5.4: Insets scale inside the Pricing-sized shell and avoid top/bottom clipping. */
	inset: 13% 7% 15% 11%;
	border-radius: 34px;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 42%),
		linear-gradient(145deg, rgba(7, 16, 32, 0.94), rgba(29, 32, 72, 0.76));
	transform: rotate(-5deg);
}

.magida-contact-visual__panel--front {
	/* CHANGE 22.5.4: Front card now sits fully inside the global card, matching Pricing's contained visual feel. */
	inset: 20% 11% 18% 15%;
	padding: clamp(26px, 3.2vw, 42px);
	border-radius: 28px;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 42%),
		linear-gradient(150deg, rgba(4, 8, 20, 0.98), rgba(8, 11, 30, 0.96));
	box-shadow:
		0 24px 76px rgba(0, 0, 0, 0.42),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.magida-contact-visual__topline {
	position: absolute;
	top: 24px;
	left: 30px;
	display: inline-flex;
	gap: 8px;
}

.magida-contact-visual__topline span {
	width: 9px;
	height: 9px;
	border-radius: 999px;
	background: rgba(0, 214, 255, 0.75);
	box-shadow: 0 0 18px rgba(0, 214, 255, 0.35);
}

.magida-contact-visual__label {
	position: absolute;
	top: 22px;
	right: 30px;
	margin: 0;
	font-size: 0.72rem;
	font-weight: 900;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(203, 200, 255, 0.72);
}

.magida-contact-visual__headline {
	position: relative;
	z-index: 2;
	margin: 0;
	font-size: clamp(2.7rem, 4.3vw, 4.65rem);
	line-height: 0.9;
	letter-spacing: -0.07em;
	color: #fff;
	text-shadow: 0 10px 34px rgba(0, 0, 0, 0.38);
}

.magida-contact-visual__headline span {
	display: block;
}

.magida-contact-visual__headline span::after {
	content: "→";
	display: inline-block;
	margin-left: 0.28em;
	font-size: 0.66em;
	font-weight: 800;
	color: rgba(255, 255, 255, 0.84);
	transform: translateY(-0.06em);
}

.magida-contact-visual__headline span:last-child::after {
	display: none;
}

.magida-contact-visual__rows {
	position: absolute;
	left: clamp(28px, 3.2vw, 42px);
	right: clamp(28px, 3.2vw, 42px);
	bottom: clamp(24px, 2.6vw, 34px);
	display: grid;
	gap: 13px;
}

.magida-contact-visual__rows span {
	display: block;
	height: 20px;
	border-radius: 999px;
	font-size: 0;
	background: linear-gradient(
		90deg,
		rgba(0, 214, 255, 0.62),
		rgba(70, 84, 171, 0.82),
		rgba(124, 92, 255, 0.62)
	);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

.magida-contact-visual__rows span:nth-child(2) {
	width: 82%;
}

.magida-contact-visual__rows span:nth-child(3) {
	width: 64%;
}

.magida-contact-visual__status {
	position: absolute;
	right: -7%;
	bottom: -11%;
	z-index: 1;
	width: 42%;
	min-width: 190px;
	padding: 24px;
	border: 1px solid rgba(0, 214, 255, 0.18);
	border-radius: 28px;
	background: linear-gradient(
		145deg,
		rgba(15, 35, 76, 0.88),
		rgba(52, 62, 132, 0.84)
	);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
}

.magida-contact-visual__status strong,
.magida-contact-visual__status span {
	display: block;
}

.magida-contact-visual__status strong {
	font-size: 0.76rem;
	font-weight: 900;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.92);
}

.magida-contact-visual__status span {
	margin-top: 8px;
	font-size: 0.82rem;
	line-height: 1.5;
	color: rgba(224, 229, 255, 0.68);
}

.magida-contact-visual__orb {
	position: absolute;
	z-index: 2;
	border-radius: 999px;
	pointer-events: none;
}

.magida-contact-visual__orb--one {
	top: 16%;
	left: 17%;
	width: 24px;
	height: 24px;
	border: 2px solid rgba(0, 214, 255, 0.42);
}

.magida-contact-visual__orb--two {
	right: 10%;
	bottom: 18%;
	width: 84px;
	height: 84px;
	background: radial-gradient(
		circle,
		rgba(124, 92, 255, 0.28),
		transparent 72%
	);
	filter: blur(1px);
}

@media (max-width: 1180px) {
	.magida-contact-hero .magida-inner-hero__inner {
		/* CHANGE 22.5.4: On tablet/mobile the global shell stacks Contact the same way Pricing stacks. */
		align-items: stretch;
	}

	.magida-contact-hero__description {
		max-width: 64ch;
	}
}

@media (max-width: 760px) {
	.magida-contact-hero__actions {
		align-items: stretch;
	}

	.magida-contact-visual__panel--back {
		inset: 13% 5% 17% 7%;
	}

	.magida-contact-visual__panel--front {
		inset: 20% 8% 18% 11%;
		padding: 28px;
	}

	.magida-contact-visual__label,
	.magida-contact-visual__topline {
		display: none;
	}

	.magida-contact-visual__headline {
		font-size: clamp(2.35rem, 12vw, 3.9rem);
	}

	.magida-contact-visual__status {
		display: none;
	}
}

@media (max-width: 480px) {
	.magida-contact-hero__actions {
		gap: 12px;
	}

	.magida-contact-visual__panel--front {
		inset: 21% 7% 20% 9%;
		border-radius: 24px;
	}

	.magida-contact-visual__headline {
		font-size: clamp(2.05rem, 15vw, 3.2rem);
	}

	.magida-contact-visual__rows {
		gap: 10px;
		bottom: 24px;
	}

	.magida-contact-visual__rows span {
		height: 16px;
	}
}

/* MAGIDA CONTACT HERO VISUAL BAND FIX PASS 24.1.22a:
   Keeps the animated row shimmer clipped inside each row so no pale band can cut across the hero artwork. */
.magida-contact-visual__rows span {
	position: relative;
	overflow: hidden;
}

.magida-contact-visual__rows span::after {
	border-radius: inherit;
}