/* ============================================================
   PLATFORM FEATURES — [moyo_home_platform]
   File: masterstudy-child/inc/pages/home/platform.css
   Light gray section: centered header, 6 feature cards in 3×2 grid.
   All colors from CSS variables (moyo-brand.css).
   ============================================================ */

/* ── SECTION WRAPPER — light gray for visual separation ── */
.moyo-platform {
	position: relative;
	background: var(--moyo-footer-bg, #f9fafb) !important;
	padding: 104px 0 112px;
	overflow: hidden;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(-50vw + 50%) !important;
	box-sizing: border-box;
}
/* Subtle top accent line */
.moyo-platform::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 120px;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--moyo-primary, #2563eb), transparent);
	border-radius: 0 0 3px 3px;
	opacity: 0.35;
}

/* ── INNER CONTAINER ── */
.moyo-platform__inner {
	max-width: var(--moyo-container-max, 1200px);
	margin: 0 auto;
	padding: 0 40px;
}

/* ── HEADER — centered above the grid ── */
.moyo-platform__header {
	text-align: center;
	margin-bottom: 56px;
}
.moyo-platform__eyebrow {
	display: inline-block;
	font-family: var(--moyo-font-body, 'Poppins', sans-serif) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--moyo-primary, #2563eb) !important;
	background: rgba(var(--moyo-primary-rgb, 37, 99, 235), 0.06);
	border: 1px solid rgba(var(--moyo-primary-rgb, 37, 99, 235), 0.15);
	padding: 6px 18px;
	border-radius: 100px;
	margin-bottom: 20px;
}
.moyo-platform__title {
	font-family: var(--moyo-font-heading, 'DM Serif Display', serif) !important;
	font-size: 44px !important;
	font-weight: 400 !important;
	line-height: 1.15 !important;
	color: var(--moyo-heading, #0f172a) !important;
	margin: 0 0 16px 0 !important;
	letter-spacing: -0.3px;
}
.moyo-platform__subtitle {
	font-family: var(--moyo-font-body, 'Poppins', sans-serif);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.75;
	color: var(--moyo-muted, #64748b) !important;
	margin: 0 auto;
	max-width: 560px;
}

/* ── 3-COLUMN CARD GRID ── */
.moyo-platform__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

/* ── INDIVIDUAL CARD ── */
.moyo-platform__card {
	background: var(--moyo-card, #ffffff) !important;
	border: 1px solid var(--moyo-border, #e2e8f0);
	border-radius: var(--moyo-radius-lg, 8px);
	padding: 32px 28px;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
	position: relative;
	overflow: hidden;
}
/* Hover — lift + primary glow */
.moyo-platform__card:hover {
	transform: translateY(-4px);
	border-color: rgba(var(--moyo-primary-rgb, 37, 99, 235), 0.25);
	box-shadow: 0 8px 28px rgba(var(--moyo-primary-rgb, 37, 99, 235), 0.08);
}

/* ── ICON BADGE ── */
.moyo-platform__icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	transition: transform 0.3s ease;
}
.moyo-platform__card:hover .moyo-platform__icon {
	transform: scale(1.1);
}
.moyo-platform__icon svg {
	width: 24px;
	height: 24px;
	stroke-width: 2;
}

/* Icon color variants — using CSS variables where available */
.moyo-platform__icon--blue {
	background: var(--moyo-info-bg, #eff6ff);
	color: var(--moyo-primary, #2563eb);
}
.moyo-platform__icon--green {
	background: var(--moyo-success-bg, #f0fdf4);
	color: var(--moyo-success, #22c55e);
}
.moyo-platform__icon--amber {
	background: var(--moyo-warning-bg, #fef3c7);
	color: var(--moyo-warning-text, #92400e);
}
.moyo-platform__icon--red {
	background: var(--moyo-error-bg, #fef2f2);
	color: var(--moyo-error, #ef4444);
}
.moyo-platform__icon--pink {
	background: #fdf2f8;
	color: #ec4899;
}
.moyo-platform__icon--purple {
	background: #faf5ff;
	color: #a855f7;
}

/* ── CARD TEXT ── */
.moyo-platform__card-title {
	font-family: var(--moyo-font-body, 'Poppins', sans-serif) !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	color: var(--moyo-heading, #0f172a) !important;
	margin: 0 0 8px 0 !important;
	line-height: 1.3 !important;
}
.moyo-platform__card-desc {
	font-family: var(--moyo-font-body, 'Poppins', sans-serif);
	font-size: 15px;
	font-weight: 400;
	color: var(--moyo-muted, #64748b) !important;
	margin: 0;
	line-height: 1.65;
}

/* ── STAGGERED ENTRANCE ── */
.moyo-platform__card:nth-child(1) { transition-delay: 0s; }
.moyo-platform__card:nth-child(2) { transition-delay: 0.08s; }
.moyo-platform__card:nth-child(3) { transition-delay: 0.16s; }
.moyo-platform__card:nth-child(4) { transition-delay: 0.24s; }
.moyo-platform__card:nth-child(5) { transition-delay: 0.32s; }
.moyo-platform__card:nth-child(6) { transition-delay: 0.40s; }

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
	.moyo-platform__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.moyo-platform__title { font-size: 36px !important; }
}
@media (max-width: 640px) {
	.moyo-platform { padding: 64px 0 72px; }
	.moyo-platform__inner { padding: 0 20px; }
	.moyo-platform__header { margin-bottom: 40px; }
	.moyo-platform__grid { grid-template-columns: 1fr; }
	.moyo-platform__title { font-size: 30px !important; }
	.moyo-platform__card { padding: 24px 20px; }
}