/**
 * File: assets/css/pages/about/base.css
 * Description: Base layout and hero styling for the About page.
 *
 * MAGIDA ABOUT PAGE PASS 9:
 * - Loads only on the About page.
 * - Keeps About page foundation separate from global/core template CSS.
 *
 * MAGIDA INNER PAGE HERO ALIGNMENT PASS 9.0:
 * - Locks the About hero rhythm to the same spacing system used by Services.
 *
 * MAGIDA ABOUT HERO ALIGNMENT/CONTAINMENT PASS 22.1:
 * - Adds About-only alignment overrides for the new global inner hero shell.
 * - Keeps old About page selectors in place while preventing the visual artwork from clipping on mobile.
 */

.magida-template--about {
	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--about::before {
	/* MAGIDA ABOUT PAGE PASS 9: Adds controlled studio atmosphere without relying on uploaded image assets yet. */
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(
			circle at 8% 6%,
			rgba(5, 223, 254, 0.12),
			transparent 33%
		),
		radial-gradient(
			circle at 92% 8%,
			rgba(124, 106, 251, 0.14),
			transparent 34%
		),
		linear-gradient(180deg, rgba(6, 7, 11, 0.06), rgba(6, 7, 11, 0.96) 54%);
}

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

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

.magida-about-section-header {
	max-width: 800px;
	margin-bottom: 38px;
}

.magida-about-section-header h2,
.magida-about-story h2,
.magida-about-beliefs h2,
.magida-about-brand h2,
.magida-about-stats h2,
.magida-about-proof h2,
.magida-about-final-cta h2 {
	margin: 0;
	font-size: clamp(2rem, 4vw, 4.35rem);
	line-height: 0.98;
	letter-spacing: -0.07em;
}

.magida-about-section-header p,
.magida-about-story p,
.magida-about-beliefs p,
.magida-about-brand p,
.magida-about-stats p,
.magida-about-proof p,
.magida-about-final-cta p {
	margin: 18px 0 0;
	max-width: 720px;
	color: var(--magida-text-soft);
	font-size: clamp(1rem, 1.45vw, 1.18rem);
	line-height: 1.8;
}

.magida-about-breadcrumb {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	/* MAGIDA INNER PAGE HERO ALIGNMENT PASS 9.0: Uses the same breadcrumb gap token as Services. */
	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-about-breadcrumb a {
	color: var(--magida-text-soft);
}

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

.magida-about-hero {
	position: relative;
	/* MAGIDA INNER PAGE HERO ALIGNMENT PASS 9.0: Matches the Services hero vertical rhythm exactly. */
	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-about-hero::after {
	/* MAGIDA ABOUT PAGE PASS 9: 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-about-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.78fr);
	/* MAGIDA INNER PAGE HERO ALIGNMENT PASS 9.0: Keeps the two-column hero spacing identical to Services. */
	gap: var(--magida-inner-hero-grid-gap);
	align-items: center;
}

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

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

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

.magida-about-hero__visual {
	position: relative;
	/* MAGIDA INNER PAGE HERO ALIGNMENT PASS 9.0: Locks visual shell height to Services. */
	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-about-hero__visual::before,
.magida-about-hero__visual::after {
	content: "";
	position: absolute;
	border: 1px solid rgba(190, 189, 229, 0.12);
	background: rgba(255, 255, 255, 0.026);
}

.magida-about-hero__visual::before {
	inset: 32px 32px auto 32px;
	height: 118px;
	border-radius: 20px;
}

.magida-about-hero__visual::after {
	right: 36px;
	bottom: 34px;
	width: 38%;
	height: 150px;
	border-radius: 28px;
	background: linear-gradient(
		135deg,
		rgba(5, 223, 254, 0.12),
		rgba(124, 106, 251, 0.12)
	);
}

.magida-about-hero__orb {
	position: absolute;
	width: 190px;
	height: 190px;
	border-radius: 50%;
	filter: blur(18px);
	opacity: 0.38;
}

.magida-about-hero__orb--cyan {
	top: 36px;
	left: 22px;
	background: rgba(5, 223, 254, 0.22);
}

.magida-about-hero__orb--violet {
	right: 18px;
	bottom: 28px;
	background: rgba(124, 106, 251, 0.25);
}

.magida-about-studio-mark {
	position: absolute;
	top: 82px;
	left: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 172px;
	height: 172px;
	border: 1px solid rgba(5, 223, 254, 0.26);
	border-radius: 34px;
	background:
		radial-gradient(
			circle at 28% 20%,
			rgba(5, 223, 254, 0.18),
			transparent 36%
		),
		linear-gradient(135deg, rgba(8, 11, 20, 0.92), rgba(18, 21, 38, 0.84));
	box-shadow:
		0 30px 80px rgba(0, 0, 0, 0.36),
		var(--magida-glow-soft);
	transform: translateX(-50%) rotate(-5deg);
}

.magida-about-studio-mark span {
	position: relative;
	z-index: 2;
	color: var(--magida-white);
	font-family: var(--magida-font-heading);
	font-size: 5rem;
	font-weight: 900;
	letter-spacing: -0.12em;
	text-shadow: var(--magida-glow-soft);
}

.magida-about-studio-mark__logo {
	/* MAGIDA HUMAN MEDIA PASS 23.5.3: Uses the real configured logo inside the existing About hero mark without changing the locked visual frame. */
	position: relative;
	z-index: 2;
	display: block;
	width: min(80%, 114px);
	max-height: 98px;
	object-fit: contain;
	filter: drop-shadow(0 0 20px rgba(5, 223, 254, 0.28));
}

.magida-about-studio-mark i {
	position: absolute;
	border: 1px solid rgba(190, 189, 229, 0.14);
	border-radius: inherit;
}

.magida-about-studio-mark i:first-of-type {
	inset: 18px;
}

.magida-about-studio-mark i:last-of-type {
	inset: 36px;
	border-color: rgba(5, 223, 254, 0.18);
}

.magida-about-visual-card {
	position: absolute;
	z-index: 3;
	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-about-visual-card--studio {
	left: 42px;
	bottom: 56px;
	width: min(74%, 360px);
	padding: 24px;
}

.magida-about-visual-card--studio small,
.magida-about-visual-card--stack span {
	color: var(--magida-cyan);
	font-family: var(--magida-font-heading);
	font-size: 0.74rem;
	font-weight: 900;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.magida-about-visual-card--studio strong {
	display: block;
	margin-top: 10px;
	color: var(--magida-white);
	font-family: var(--magida-font-heading);
	font-size: clamp(1.45rem, 3vw, 2.3rem);
	line-height: 0.98;
	letter-spacing: -0.06em;
}

.magida-about-visual-card--studio span {
	display: block;
	margin-top: 14px;
	color: var(--magida-text-soft);
}

.magida-about-visual-card--stack {
	top: 44px;
	right: 38px;
	display: grid;
	gap: 10px;
	padding: 18px;
}

.magida-about-visual-card--stack span {
	display: block;
	padding: 10px 12px;
	border: 1px solid rgba(190, 189, 229, 0.12);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.025);
	color: var(--magida-text);
}

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

.magida-about-story__copy {
	padding-top: 8px;
}

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

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

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

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

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

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

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

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

	.magida-about-hero__actions,
	.magida-about-final-cta__actions {
		width: 100%;
	}

	.magida-about-hero__actions .magida-button,
	.magida-about-final-cta__actions .magida-button {
		width: 100%;
	}

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

	.magida-about-studio-mark {
		top: 78px;
		width: 146px;
		height: 146px;
	}

	.magida-about-studio-mark span {
		font-size: 4.2rem;
	}

	.magida-about-studio-mark__logo {
		/* MAGIDA HUMAN MEDIA PASS 23.5.3: Keeps the real logo proportionate inside the smaller visual mark. */
		width: min(78%, 96px);
		max-height: 82px;
	}

	.magida-about-visual-card--studio {
		right: 24px;
		bottom: 28px;
		left: 24px;
		width: auto;
	}

	.magida-about-visual-card--stack {
		top: 24px;
		right: 24px;
		left: 24px;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		padding: 12px;
	}

	.magida-about-visual-card--stack span {
		padding: 9px 8px;
		text-align: center;
		font-size: 0.64rem;
	}

	.magida-about-story__grid {
		grid-template-columns: 1fr;
	}
}

/* MAGIDA ABOUT HERO ALIGNMENT/CONTAINMENT PASS 22.1:
   About has now been migrated to the global hero shell, so these overrides only tune the artwork inside
   the locked visual frame instead of changing the shared hero grid or page shell. */
@media (min-width: 1181px) {
	.magida-inner-hero--about .magida-about-hero__visual::before {
		/* MAGIDA PASS 22.1: Keeps the desktop decorative top panel inside the shorter, cleaner visual frame. */
		inset: 40px 40px auto 40px;
		height: 118px;
		border-radius: 22px;
	}

	.magida-inner-hero--about .magida-about-hero__visual::after {
		/* MAGIDA PASS 22.1: Reduces the lower decorative panel so it no longer competes with the studio card. */
		right: 46px;
		bottom: 38px;
		width: 34%;
		height: 132px;
	}

	.magida-inner-hero--about .magida-about-studio-mark {
		/* MAGIDA PASS 22.1: Pulls the M mark into the center of the visual instead of letting it drift into the card. */
		top: 96px;
		width: 168px;
		height: 168px;
	}

	.magida-inner-hero--about .magida-about-visual-card--studio {
		/* MAGIDA PASS 22.1: Raises the card slightly so it stays readable inside the tightened desktop visual. */
		left: 46px;
		bottom: 42px;
		width: min(68%, 360px);
	}

	.magida-inner-hero--about .magida-about-visual-card--stack {
		/* MAGIDA PASS 22.1: Aligns the chips with the visual frame instead of the old taller hero card. */
		top: 66px;
		right: 46px;
	}
}

@media (max-width: 760px) {
	.magida-inner-hero--about .magida-about-hero__visual::before {
		/* MAGIDA PASS 22.1: Moves the decorative panel behind the M mark on mobile. */
		inset: 76px 24px auto 24px;
		height: 118px;
		border-radius: 20px;
	}

	.magida-inner-hero--about .magida-about-hero__visual::after {
		/* MAGIDA PASS 22.1: Hides the lower decorative block on mobile so the studio card is never clipped. */
		display: none;
	}

	.magida-inner-hero--about .magida-about-hero__orb {
		/* MAGIDA PASS 22.1: Keeps glow orbs soft and contained inside the smaller mobile frame. */
		width: 150px;
		height: 150px;
		filter: blur(20px);
	}

	.magida-inner-hero--about .magida-about-hero__orb--cyan {
		top: 70px;
		left: -44px;
	}

	.magida-inner-hero--about .magida-about-hero__orb--violet {
		right: -36px;
		bottom: 56px;
	}

	.magida-inner-hero--about .magida-about-studio-mark {
		/* MAGIDA PASS 22.1: Shrinks and lifts the M mark so it reads clearly above the studio card. */
		top: 124px;
		width: 118px;
		height: 118px;
		border-radius: 24px;
	}

	.magida-inner-hero--about .magida-about-studio-mark span {
		font-size: 3.45rem;
	}

	.magida-inner-hero--about .magida-about-studio-mark__logo {
		/* MAGIDA HUMAN MEDIA PASS 23.5.3: Prevents the real logo from crowding the mobile mark rings. */
		width: min(76%, 76px);
		max-height: 68px;
	}

	.magida-inner-hero--about .magida-about-studio-mark i:first-of-type {
		inset: 12px;
	}

	.magida-inner-hero--about .magida-about-studio-mark i:last-of-type {
		inset: 25px;
	}

	.magida-inner-hero--about .magida-about-visual-card--stack {
		/* MAGIDA PASS 22.1: Keeps all three chips visible across narrow mobile widths. */
		top: 22px;
		right: 22px;
		left: 22px;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
		padding: 10px;
		border-radius: 18px;
	}

	.magida-inner-hero--about .magida-about-visual-card--stack span {
		min-width: 0;
		padding: 9px 5px;
		font-size: clamp(0.5rem, 1.8vw, 0.6rem);
		letter-spacing: 0.045em;
		line-height: 1;
		white-space: nowrap;
	}

	.magida-inner-hero--about .magida-about-visual-card--studio {
		/* MAGIDA PASS 22.1: Locks the readable card to the bottom of the visual frame without covering the chips. */
		right: 22px;
		bottom: 24px;
		left: 22px;
		width: auto;
		padding: 20px;
		border-radius: 18px;
	}

	.magida-inner-hero--about .magida-about-visual-card--studio small {
		font-size: 0.68rem;
		letter-spacing: 0.1em;
	}

	.magida-inner-hero--about .magida-about-visual-card--studio strong {
		font-size: clamp(1.28rem, 6vw, 1.72rem);
	}

	.magida-inner-hero--about .magida-about-visual-card--studio span {
		margin-top: 10px;
	}
}

@media (max-width: 480px) {
	.magida-inner-hero--about .magida-about-hero__visual::before {
		inset: 72px 18px auto 18px;
	}

	.magida-inner-hero--about .magida-about-studio-mark {
		top: 118px;
		width: 112px;
		height: 112px;
	}

	.magida-inner-hero--about .magida-about-studio-mark__logo {
		width: min(74%, 72px);
		max-height: 64px;
	}

	.magida-inner-hero--about .magida-about-visual-card--stack {
		right: 18px;
		left: 18px;
		gap: 6px;
		padding: 9px;
	}

	.magida-inner-hero--about .magida-about-visual-card--stack span {
		padding: 8px 4px;
		font-size: clamp(0.47rem, 2vw, 0.56rem);
	}

	.magida-inner-hero--about .magida-about-visual-card--studio {
		right: 18px;
		bottom: 22px;
		left: 18px;
		padding: 18px;
	}
}

/* MAGIDA ABOUT RESPONSIVE SPACING POLISH PASS 24.1.21:
   Tightens only the About page first fold and the first Story section so the approved hero remains premium
   without crowding the next section on small phones. */
@media (max-width: 760px) {
	.magida-about-section {
		padding: clamp(3.75rem, 13vw, 5rem) 0;
	}

	.magida-about-story {
		padding-top: clamp(4.25rem, 15vw, 5.5rem);
	}

	.magida-about-section-header h2,
	.magida-about-story h2,
	.magida-about-beliefs h2,
	.magida-about-brand h2,
	.magida-about-stats h2,
	.magida-about-proof h2,
	.magida-about-final-cta h2 {
		font-size: clamp(2.35rem, 12.4vw, 3.35rem);
		line-height: 0.96;
		letter-spacing: -0.065em;
	}

	.magida-inner-hero--about .magida-about-hero__visual::before {
		inset: 64px 20px auto 20px;
		height: 96px;
	}

	.magida-inner-hero--about .magida-about-studio-mark {
		top: 104px;
		width: 106px;
		height: 106px;
		border-radius: 22px;
	}

	.magida-inner-hero--about .magida-about-studio-mark__logo {
		width: min(74%, 68px);
		max-height: 60px;
	}

	.magida-inner-hero--about .magida-about-visual-card--stack {
		top: 18px;
		right: 18px;
		left: 18px;
		gap: 6px;
		padding: 8px;
	}

	.magida-inner-hero--about .magida-about-visual-card--studio {
		right: 18px;
		bottom: 18px;
		left: 18px;
		padding: 18px;
	}
}

@media (max-width: 480px) {
	.magida-inner-hero--about .magida-about-hero__visual::before {
		inset: 62px 16px auto 16px;
		height: 92px;
	}

	.magida-inner-hero--about .magida-about-studio-mark {
		top: 102px;
		width: 100px;
		height: 100px;
	}

	.magida-inner-hero--about .magida-about-studio-mark__logo {
		width: min(72%, 64px);
		max-height: 56px;
	}

	.magida-inner-hero--about .magida-about-visual-card--studio {
		right: 16px;
		bottom: 16px;
		left: 16px;
		padding: 16px;
	}
}

/* MAGIDA ABOUT HERO VISUAL LAYER SEPARATION PASS 24.1.21a:
   Desktop-only correction for the About hero artwork. The floating logo tile now clears the
   foreground studio card instead of creating a tight tangent at the card's top edge. */
@media (min-width: 1181px) {
	.magida-inner-hero--about .magida-about-studio-mark {
		/* MAGIDA PASS 24.1.21a: Lifts and slightly reduces the rear logo tile so it reads as a separate background layer. */
		top: 62px;
		left: 49%;
		width: 156px;
		height: 156px;
		border-radius: 31px;
	}

	.magida-inner-hero--about .magida-about-studio-mark__logo {
		/* MAGIDA PASS 24.1.21a: Keeps the configured logo balanced after the tile reduction. */
		width: min(78%, 102px);
		max-height: 88px;
	}

	.magida-inner-hero--about .magida-about-studio-mark i:first-of-type {
		inset: 16px;
	}

	.magida-inner-hero--about .magida-about-studio-mark i:last-of-type {
		inset: 32px;
	}
}