/**
 * Moyo Placement Page — v1.0.0
 *
 * File: masterstudy-child/inc/pages/placement/placement.css
 * Sections: Hero, Stats, Process, Alumni, CTA
 * All colors use moyo-brand.css variables.
 */


/* ===================================================
   1. HERO — Dark navy with grid pattern + breadcrumb
   =================================================== */
.moyo-placement-hero {
	position: relative;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(-50vw + 50%) !important;
	margin-right: 0 !important;
	background: var(--moyo-hero-bg, #0c2340);
	padding: 48px 40px 56px;
	text-align: center;
	overflow: hidden;
	box-sizing: border-box;
}

.moyo-placement-hero__bg {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
	background-size: 60px 60px;
	pointer-events: none;
}

.moyo-placement-hero__inner {
	position: relative;
	z-index: 1;
	max-width: var(--moyo-container-max, 1200px);
	margin: 0 auto;
}

/* Breadcrumb */
.moyo-placement-hero__breadcrumb {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
}

.moyo-placement-hero__breadcrumb-link {
	font-family: var(--moyo-font-body, 'Poppins', sans-serif) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	color: rgba(255,255,255,0.65) !important;
	text-decoration: none;
	transition: color var(--moyo-transition, 0.2s ease);
}

.moyo-placement-hero__breadcrumb-link:hover {
	color: var(--moyo-on-primary, #ffffff) !important;
}

.moyo-placement-hero__breadcrumb-sep {
	color: rgba(255,255,255,0.35);
	display: inline-flex;
}

.moyo-placement-hero__breadcrumb-current {
	font-family: var(--moyo-font-body, 'Poppins', sans-serif) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--moyo-on-primary, #ffffff) !important;
}

/* Title */
.moyo-placement-hero__title {
	font-family: var(--moyo-font-heading, 'Poppins', sans-serif) !important;
	font-size: 48px !important;
	font-weight: 700 !important;
	color: var(--moyo-on-primary, #ffffff) !important;
	line-height: 1.2 !important;
	margin-bottom: 16px !important;
}

/* Subtitle */
.moyo-placement-hero__subtitle {
	font-family: var(--moyo-font-body, 'Poppins', sans-serif) !important;
	font-size: 17px !important;
	font-weight: 400 !important;
	color: rgba(255,255,255,0.7) !important;
	line-height: 1.7 !important;
	max-width: 680px;
	margin: 0 auto;
}

/* Entrance animation */
@keyframes moyoPlacementFadeUp {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}

.moyo-placement-hero__breadcrumb { animation: moyoPlacementFadeUp 0.6s ease 0.1s both; }
.moyo-placement-hero__title      { animation: moyoPlacementFadeUp 0.6s ease 0.25s both; }
.moyo-placement-hero__subtitle   { animation: moyoPlacementFadeUp 0.6s ease 0.4s both; }


/* ===================================================
   2. STATS STRIP — count-up numbers
   =================================================== */
.moyo-placement-stats {
	position: relative;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(-50vw + 50%) !important;
	margin-right: 0 !important;
	padding: 80px 0;
	background: var(--moyo-bg, #f3f4f6);
	box-sizing: border-box;
}

.moyo-placement-stats__inner {
	display: grid;
	max-width: var(--moyo-container-max, 1200px);
	margin: 0 auto;
	padding: 0 40px;
}

.moyo-placement-stats__item {
	text-align: center;
	padding: 32px 20px;
	position: relative;
}

.moyo-placement-stats__item:not(:last-child)::after {
	content: '';
	position: absolute;
	right: 0;
	top: 25%;
	height: 50%;
	width: 1px;
	background: var(--moyo-border, #e5e7eb);
}

.moyo-placement-stats__number {
	font-family: var(--moyo-font-body, 'Poppins', sans-serif) !important;
	font-size: 48px !important;
	font-weight: 700 !important;
	color: var(--moyo-heading, #1e293b) !important;
	line-height: 1 !important;
	margin-bottom: 10px !important;
}

.moyo-placement-stats .moyo-placement-stats__number span,
.moyo-placement-stats__item .moyo-placement-stats__number span,
section.moyo-placement-stats .moyo-placement-stats__number span {
	color: var(--moyo-accent-highlight, #0ea5e9) !important;
	font-weight: 400 !important;
	-webkit-text-fill-color: var(--moyo-accent-highlight, #0ea5e9) !important;
}

.moyo-placement-stats__label {
	font-family: var(--moyo-font-body, 'Poppins', sans-serif) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--moyo-muted, #64748b) !important;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

/* Scroll reveal for stats items */
.moyo-placement-stats__item.moyo-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
.moyo-placement-stats__item.moyo-reveal.is-visible { opacity: 1; transform: translateY(0); }
.moyo-placement-stats__item.moyo-reveal:nth-child(1) { transition-delay: 0s; }
.moyo-placement-stats__item.moyo-reveal:nth-child(2) { transition-delay: 0.1s; }
.moyo-placement-stats__item.moyo-reveal:nth-child(3) { transition-delay: 0.2s; }
.moyo-placement-stats__item.moyo-reveal:nth-child(4) { transition-delay: 0.3s; }


/* ===================================================
   3. PROCESS — How Placement Works (icon cards)
   =================================================== */
.moyo-placement-process {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(-50vw + 50%) !important;
	margin-right: 0 !important;
	padding: 96px 0;
	background: var(--moyo-card, #ffffff);
	box-sizing: border-box;
}

.moyo-placement-process__inner {
	max-width: var(--moyo-container-max, 1200px);
	margin: 0 auto;
	padding: 0 40px;
}

/* Section header — centered, with eyebrow */
.moyo-placement-process__header {
	text-align: center;
	margin-bottom: 56px;
}

.moyo-placement-process__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--moyo-font-body, 'Poppins', sans-serif) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--moyo-primary, #2563eb) !important;
	margin-bottom: 16px;
}

.moyo-placement-process__eyebrow::before,
.moyo-placement-process__eyebrow::after {
	content: '';
	width: 24px;
	height: 2px;
	background: var(--moyo-primary, #2563eb);
	border-radius: 1px;
}

.moyo-placement-process__title {
	font-family: var(--moyo-font-heading, 'Poppins', sans-serif) !important;
	font-size: 40px !important;
	font-weight: 700 !important;
	color: var(--moyo-heading, #1e293b) !important;
	line-height: 1.2 !important;
	margin-bottom: 12px !important;
}

.moyo-placement-process__subtitle {
	font-family: var(--moyo-font-body, 'Poppins', sans-serif) !important;
	font-size: 16px !important;
	color: var(--moyo-body, #475569) !important;
	line-height: 1.7 !important;
	max-width: 640px;
	margin: 0 auto;
}

/* Grid */
.moyo-placement-process__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
}

/* Card */
.moyo-placement-process__card {
	background: var(--moyo-card, #ffffff);
	border: 1px solid var(--moyo-border, #e5e7eb);
	border-radius: var(--moyo-radius-xl, 16px);
	padding: 36px 32px;
	transition: transform var(--moyo-transition, 0.2s ease), box-shadow var(--moyo-transition, 0.2s ease);
}

.moyo-placement-process__card:hover {
	transform: translateY(-4px);
	box-shadow: var(--moyo-shadow-md, 0 4px 12px rgba(0,0,0,0.08));
}

/* Icon circle */
.moyo-placement-process__icon {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: rgba(var(--moyo-primary-rgb, 37, 99, 235), 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

.moyo-placement-process__icon svg {
	width: 26px;
	height: 26px;
	stroke: var(--moyo-primary, #2563eb);
	fill: none;
}

.moyo-placement-process__card-title {
	font-family: var(--moyo-font-heading, 'Poppins', sans-serif) !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	color: var(--moyo-heading, #1e293b) !important;
	margin-bottom: 10px !important;
}

.moyo-placement-process__card-desc {
	font-family: var(--moyo-font-body, 'Poppins', sans-serif) !important;
	font-size: 14px !important;
	color: var(--moyo-body, #475569) !important;
	line-height: 1.7 !important;
}


/* ===================================================
   4. ALUMNI TESTIMONIALS — 2x2 grid
   =================================================== */
.moyo-placement-alumni {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(-50vw + 50%) !important;
	margin-right: 0 !important;
	padding: 96px 0;
	background: var(--moyo-bg, #f3f4f6);
	box-sizing: border-box;
}

.moyo-placement-alumni__inner {
	max-width: var(--moyo-container-max, 1200px);
	margin: 0 auto;
	padding: 0 40px;
}

/* Section header — centered, with eyebrow */
.moyo-placement-alumni__header {
	text-align: center;
	margin-bottom: 56px;
}

.moyo-placement-alumni__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--moyo-font-body, 'Poppins', sans-serif) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--moyo-primary, #2563eb) !important;
	margin-bottom: 16px;
}

.moyo-placement-alumni__eyebrow::before,
.moyo-placement-alumni__eyebrow::after {
	content: '';
	width: 24px;
	height: 2px;
	background: var(--moyo-primary, #2563eb);
	border-radius: 1px;
}

.moyo-placement-alumni__title {
	font-family: var(--moyo-font-heading, 'Poppins', sans-serif) !important;
	font-size: 40px !important;
	font-weight: 700 !important;
	color: var(--moyo-heading, #1e293b) !important;
	line-height: 1.2 !important;
	margin-bottom: 12px !important;
}

.moyo-placement-alumni__subtitle {
	font-family: var(--moyo-font-body, 'Poppins', sans-serif) !important;
	font-size: 16px !important;
	color: var(--moyo-body, #475569) !important;
	line-height: 1.7 !important;
	max-width: 640px;
	margin: 0 auto;
}

/* Grid */
.moyo-placement-alumni__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px;
}

/* Card */
.moyo-placement-alumni__card {
	background: var(--moyo-card, #ffffff);
	border: 1px solid var(--moyo-border, #e5e7eb);
	border-radius: var(--moyo-radius-xl, 16px);
	padding: 36px 32px;
	transition: transform var(--moyo-transition, 0.2s ease), box-shadow var(--moyo-transition, 0.2s ease);
}

.moyo-placement-alumni__card:hover {
	transform: translateY(-4px);
	box-shadow: var(--moyo-shadow-md, 0 4px 12px rgba(0,0,0,0.08));
}

/* Quote */
.moyo-placement-alumni__quote {
	font-family: var(--moyo-font-body, 'Poppins', sans-serif) !important;
	font-size: 15px !important;
	font-style: italic;
	color: var(--moyo-body, #475569) !important;
	line-height: 1.75 !important;
	margin-bottom: 28px;
}

/* Author row */
.moyo-placement-alumni__author {
	display: flex;
	align-items: center;
	gap: 14px;
}

.moyo-placement-alumni__avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--moyo-font-body, 'Poppins', sans-serif) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: var(--moyo-on-primary, #ffffff) !important;
	flex-shrink: 0;
}

/* Avatar colors */
.moyo-placement-alumni__avatar--amber   { background: #d97706; }
.moyo-placement-alumni__avatar--violet  { background: #7c3aed; }
.moyo-placement-alumni__avatar--emerald { background: #059669; }
.moyo-placement-alumni__avatar--red     { background: #dc2626; }
.moyo-placement-alumni__avatar--blue    { background: #2563eb; }
.moyo-placement-alumni__avatar--teal    { background: #0d9488; }

.moyo-placement-alumni__name {
	font-family: var(--moyo-font-body, 'Poppins', sans-serif) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--moyo-heading, #1e293b) !important;
	line-height: 1.3;
}

.moyo-placement-alumni__role {
	font-family: var(--moyo-font-body, 'Poppins', sans-serif) !important;
	font-size: 13px !important;
	color: var(--moyo-muted, #64748b) !important;
	font-weight: 400 !important;
}


/* ===================================================
   5. CTA — Dark navy call-to-action
   =================================================== */
.moyo-placement-cta {
	position: relative;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(-50vw + 50%) !important;
	margin-right: 0 !important;
	background: var(--moyo-hero-bg, #0c2340);
	padding: 80px 40px;
	text-align: center;
	overflow: hidden;
	box-sizing: border-box;
	/* Grid pattern overlay — matches hero */
	background-image:
		linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
	background-size: 60px 60px;
}

.moyo-placement-cta__inner {
	max-width: var(--moyo-container-max, 1200px);
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

.moyo-placement-cta__title {
	font-family: var(--moyo-font-heading, 'Poppins', sans-serif) !important;
	font-size: 36px !important;
	font-weight: 700 !important;
	color: var(--moyo-on-primary, #ffffff) !important;
	margin-bottom: 14px !important;
}

.moyo-placement-cta__subtitle {
	font-family: var(--moyo-font-body, 'Poppins', sans-serif) !important;
	font-size: 16px !important;
	color: rgba(255,255,255,0.7) !important;
	margin-bottom: 36px;
	max-width: 540px;
	margin-left: auto;
	margin-right: auto;
}

.moyo-placement-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--moyo-font-body, 'Poppins', sans-serif) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--moyo-hero-bg, #0c2340) !important;
	background: var(--moyo-on-primary, #ffffff);
	border: 2px solid var(--moyo-on-primary, #ffffff);
	padding: 14px 36px;
	border-radius: var(--moyo-radius, 4px);
	text-decoration: none;
	cursor: pointer;
	transition: all var(--moyo-transition, 0.2s ease);
}

.moyo-placement-cta__btn:hover {
	background: transparent;
	color: var(--moyo-on-primary, #ffffff) !important;
}

.moyo-placement-cta__btn svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	transition: transform var(--moyo-transition, 0.2s ease);
}

.moyo-placement-cta__btn:hover svg {
	transform: translateX(4px);
}


/* ===================================================
   RESPONSIVE — TABLET (960px)
   =================================================== */
@media (max-width: 960px) {
	/* Hero */
	.moyo-placement-hero { padding: 40px 24px 48px; }
	.moyo-placement-hero__title { font-size: 36px !important; }

	/* Stats */
	.moyo-placement-stats__inner {
		grid-template-columns: repeat(2, 1fr) !important;
		padding: 0 24px;
	}
	.moyo-placement-stats__item:nth-child(2)::after { display: none; }
	.moyo-placement-stats__number { font-size: 36px !important; }

	/* Process */
	.moyo-placement-process { padding: 72px 0; }
	.moyo-placement-process__inner { padding: 0 24px; }
	.moyo-placement-process__title { font-size: 32px !important; }
	.moyo-placement-process__grid { grid-template-columns: repeat(2, 1fr); }

	/* Alumni */
	.moyo-placement-alumni { padding: 72px 0; }
	.moyo-placement-alumni__inner { padding: 0 24px; }
	.moyo-placement-alumni__title { font-size: 32px !important; }

	/* CTA */
	.moyo-placement-cta { padding: 64px 24px; }
	.moyo-placement-cta__title { font-size: 30px !important; }
}


/* ===================================================
   RESPONSIVE — MOBILE (640px)
   =================================================== */
@media (max-width: 640px) {
	/* Hero */
	.moyo-placement-hero { padding: 32px 20px 40px; }
	.moyo-placement-hero__title { font-size: 28px !important; }
	.moyo-placement-hero__subtitle { font-size: 15px !important; }

	/* Stats */
	.moyo-placement-stats { padding: 48px 0; }
	.moyo-placement-stats__inner {
		grid-template-columns: repeat(2, 1fr) !important;
		padding: 0 20px;
	}
	.moyo-placement-stats__item { padding: 20px 12px; }
	.moyo-placement-stats__number { font-size: 32px !important; }
	.moyo-placement-stats__label { font-size: 11px !important; }

	/* Process */
	.moyo-placement-process { padding: 56px 0; }
	.moyo-placement-process__inner { padding: 0 20px; }
	.moyo-placement-process__title { font-size: 26px !important; }
	.moyo-placement-process__grid { grid-template-columns: 1fr; }
	.moyo-placement-process__card { padding: 28px 24px; }

	/* Alumni */
	.moyo-placement-alumni { padding: 56px 0; }
	.moyo-placement-alumni__inner { padding: 0 20px; }
	.moyo-placement-alumni__title { font-size: 26px !important; }
	.moyo-placement-alumni__grid { grid-template-columns: 1fr; }
	.moyo-placement-alumni__card { padding: 28px 24px; }

	/* CTA */
	.moyo-placement-cta { padding: 56px 20px; }
	.moyo-placement-cta__title { font-size: 26px !important; }
}