/**
 * File: assets/css/pages/services/sections.css
 * Description: Section-specific styling for the Services page.
 *
 * MAGIDA SERVICES PAGE PASS 8:
 * - Keeps Services section styling isolated from base page/hero styling.
 */

.magida-services-main__stack {
	display: grid;
	gap: 24px;
}

.magida-service-detail {
	position: relative;
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr) minmax(280px, 0.65fr);
	gap: clamp(22px, 4vw, 52px);
	align-items: stretch;
	padding: clamp(22px, 4vw, 42px);
	overflow: hidden;
}

.magida-service-detail::before {
	/* MAGIDA SERVICES PAGE PASS 8: Gives each service block a controlled cinematic glow. */
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(
			circle at 8% 12%,
			rgba(5, 223, 254, 0.13),
			transparent 30%
		),
		radial-gradient(
			circle at 90% 18%,
			rgba(124, 106, 251, 0.12),
			transparent 32%
		);
	opacity: 0.95;
}

.magida-service-detail__visual {
	position: relative;
	display: grid;
	align-content: end;
	min-height: 250px;
	padding: 22px;
	border: 1px solid rgba(5, 223, 254, 0.2);
	border-radius: 24px;
	background:
		linear-gradient(
			135deg,
			rgba(5, 223, 254, 0.12),
			rgba(124, 106, 251, 0.12)
		),
		rgba(255, 255, 255, 0.025);
	overflow: hidden;
}

.magida-service-detail__visual::before {
	content: "";
	position: absolute;
	top: 22px;
	right: 22px;
	width: 54px;
	height: 54px;
	border: 1px solid rgba(5, 223, 254, 0.35);
	border-radius: 50%;
	box-shadow: var(--magida-glow-soft);
}

.magida-service-detail__visual span {
	position: relative;
	z-index: 2;
	color: rgba(252, 253, 254, 0.94);
	font-family: var(--magida-font-heading);
	font-size: clamp(4rem, 9vw, 7rem);
	font-weight: 900;
	line-height: 0.8;
	letter-spacing: -0.12em;
}

.magida-service-detail__visual i {
	display: block;
	width: 100%;
	height: 12px;
	margin-top: 10px;
	border-radius: var(--magida-radius-full);
	background: rgba(5, 223, 254, 0.18);
}

.magida-service-detail__visual i:nth-of-type(2) {
	width: 74%;
	background: rgba(124, 106, 251, 0.2);
}

.magida-service-detail__visual i:nth-of-type(3) {
	width: 48%;
}

.magida-service-detail__eyebrow {
	margin: 0 0 14px;
	color: var(--magida-cyan);
	font-family: var(--magida-font-heading);
	font-size: 0.8rem;
	font-weight: 900;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.magida-service-detail h3 {
	max-width: 760px;
	margin: 0;
	font-size: clamp(1.85rem, 3.6vw, 3.8rem);
	line-height: 0.98;
	letter-spacing: -0.065em;
}

.magida-service-detail__content > p:not(.magida-service-detail__eyebrow) {
	max-width: 720px;
	margin: 18px 0 0;
	color: var(--magida-text-soft);
	font-size: 1.06rem;
	line-height: 1.78;
}

.magida-service-detail__best-for {
	display: grid;
	gap: 8px;
	margin-top: 24px;
	padding: 18px;
	border: 1px solid rgba(190, 189, 229, 0.12);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.025);
}

.magida-service-detail__best-for strong {
	color: var(--magida-white);
	font-family: var(--magida-font-heading);
	font-size: 0.9rem;
}

.magida-service-detail__best-for span {
	color: var(--magida-text-soft);
	line-height: 1.65;
}

.magida-service-detail__points {
	display: grid;
	align-content: center;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.magida-service-detail__points li {
	position: relative;
	padding: 15px 16px 15px 40px;
	border: 1px solid rgba(190, 189, 229, 0.12);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.024);
	color: var(--magida-text-soft);
	line-height: 1.45;
}

.magida-service-detail__points li::before {
	content: "";
	position: absolute;
	top: 20px;
	left: 18px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--magida-cyan);
	box-shadow: var(--magida-glow-soft);
}

.magida-services-capabilities__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.magida-capability-card {
	position: relative;
	padding: 24px;
	overflow: hidden;
}

/* MAGIDA SERVICES PASS 24.1.36:
 * Keep capability cards clean by removing the repeated mini accent bars
 * from each card header. Section eyebrows keep the accent-line language.
 */
.magida-capability-card .magida-capability-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	width: auto;
	height: auto;
	margin-bottom: 10px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.magida-capability-card .magida-capability-card__icon small {
	color: var(--magida-cyan);
	font-size: 0.78rem;
	font-weight: 900;
	letter-spacing: 0.08em;
}

.magida-capability-card .magida-capability-card__icon i {
	display: none;
}

.magida-capability-card h3,
.magida-services-approach__cards h3,
.magida-process-step h3,
.magida-services-faq__item h3 {
	margin: 0;
	font-size: 1.12rem;
	letter-spacing: -0.04em;
}

.magida-capability-card p,
.magida-services-approach__cards p,
.magida-process-step p,
.magida-services-faq__item p {
	margin: 12px 0 0;
	color: var(--magida-text-soft);
	line-height: 1.72;
}

/* MAGIDA HUMAN MEDIA SERVICES PASS 23.5.4:
 * Optional service images live inside the existing locked service visual cards.
 * No image selected = no visual change to the approved Services page layout.
 */
.magida-service-detail__visual--has-media {
	background:
		linear-gradient(
			145deg,
			rgba(5, 223, 254, 0.12),
			rgba(124, 106, 251, 0.1)
		),
		rgba(6, 10, 22, 0.82);
}

.magida-service-detail__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	pointer-events: none;
}

.magida-service-detail__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(5, 8, 18, 0.18), rgba(5, 8, 18, 0.72)),
		radial-gradient(
			circle at 16% 12%,
			rgba(5, 223, 254, 0.22),
			transparent 38%
		),
		radial-gradient(
			circle at 88% 90%,
			rgba(124, 106, 251, 0.24),
			transparent 42%
		);
}

.magida-service-detail__media-image {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: cover;
	filter: saturate(0.82) contrast(1.06) brightness(0.62);
	transform: scale(1.03);
}

.magida-service-detail__visual--has-media > span,
.magida-service-detail__visual--has-media > i {
	position: relative;
	z-index: 3;
}

.magida-service-detail__visual--has-media .magida-service-detail__graphic {
	z-index: 3;
	background: rgba(4, 7, 15, 0);
	backdrop-filter: blur(1px);
}

.magida-services-approach__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
	gap: clamp(26px, 5vw, 56px);
	padding: clamp(26px, 5vw, 52px);
}

.magida-services-approach__cards {
	display: grid;
	gap: 16px;
}

.magida-services-approach__cards article {
	padding: 22px;
	border: 1px solid rgba(190, 189, 229, 0.12);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.024);
}

.magida-services-process__timeline {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
}

.magida-process-step {
	position: relative;
	padding: 24px;
}

.magida-process-step span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 28px;
	border: 1px solid rgba(5, 223, 254, 0.32);
	border-radius: 50%;
	color: var(--magida-cyan);
	font-family: var(--magida-font-heading);
	font-size: 0.78rem;
	font-weight: 900;
	box-shadow: var(--magida-glow-soft);
}

.magida-services-quote-direction__inner,
.magida-services-final-cta__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 0.62fr);
	gap: clamp(26px, 5vw, 54px);
	align-items: center;
	padding: clamp(26px, 5vw, 52px);
	background:
		radial-gradient(
			circle at 12% 18%,
			rgba(5, 223, 254, 0.13),
			transparent 34%
		),
		radial-gradient(
			circle at 92% 18%,
			rgba(124, 106, 251, 0.13),
			transparent 36%
		),
		var(--magida-panel);
}

.magida-services-quote-direction__cards {
	display: grid;
	gap: 14px;
}

.magida-services-quote-direction__cards article {
	display: grid;
	gap: 8px;
	padding: 20px;
	border: 1px solid rgba(190, 189, 229, 0.12);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.025);
}

.magida-services-quote-direction__cards strong {
	font-family: var(--magida-font-heading);
	font-size: 1rem;
}

.magida-services-quote-direction__cards span {
	color: var(--magida-text-soft);
	line-height: 1.6;
}

.magida-services-quote-direction__actions,
.magida-services-final-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	grid-column: 1 / -1;
}

.magida-services-faq__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.magida-services-faq__item {
	padding: 24px;
}

.magida-services-final-cta__inner {
	grid-template-columns: minmax(0, 1fr) auto;
}

.magida-services-final-cta {
	padding-bottom: 112px;
}

@media (max-width: 1180px) {
	.magida-service-detail {
		grid-template-columns: 180px minmax(0, 1fr);
	}

	.magida-service-detail__points {
		grid-column: 1 / -1;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.magida-services-process__timeline {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 880px) {
	.magida-service-detail,
	.magida-services-approach__inner,
	.magida-services-quote-direction__inner,
	.magida-services-final-cta__inner {
		grid-template-columns: 1fr;
	}

	.magida-service-detail__visual {
		min-height: 190px;
	}

	.magida-services-capabilities__grid,
	.magida-services-process__timeline,
	.magida-services-faq__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.magida-service-detail {
		padding: 20px;
	}

	.magida-service-detail__points,
	.magida-services-capabilities__grid,
	.magida-services-process__timeline,
	.magida-services-faq__grid {
		grid-template-columns: 1fr;
	}

	.magida-services-quote-direction__actions,
	.magida-services-final-cta__actions {
		flex-direction: column;
	}
}