/* ==========================================================================
   EDU — shared module-page styles
   --------------------------------------------------------------------------
   Loaded by:  fee-management.php (and every future /solutions/{module}/
               template).
   Loaded on:  nothing else. Registration lives inside those templates.

   There is no WordPress Page or template for /solutions/ itself — module
   pages are a custom post type (`edu_module`, admin label "Solutions")
   namespaced under that rewrite slug, with has_archive:false, so a bare
   /solutions/ request 404s natively. Nothing in this file exists to support
   an index page.

   Scope rules for this file:
     - never declare font-family: shared components must inherit the site's
       Plus Jakarta Sans from the theme's html/body rule
     - never style bare elements (html, body, *, a, button, img, svg)
     - never touch the global header, footer, .container, .logo or .button
     - only ever reuse existing theme tokens (--header-height, --Blue, --fsNN)

   Loaded after main.css and style.css via declared dependencies, so
   equal-specificity rules resolve here without !important.

   STAGE 6: Explore EDU Modules is a genuinely new component and is styled
   below. Testimonials and the module FAQ reuse existing site design
   systems verbatim (.comm-section/.cli-sec/.review-* from main.css; .faq-
   sec/.faq-wrap/.faq-item/.faq-btn-icon/.faq-a from style.css) — no new
   rules are added for either here, per the "only add shared CSS for a
   genuine gap" rule; there is no gap for either, so there is no block
   below for them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section transition — Connected ERP (dark, inside .edu-fm) into the shared
   sections (light, site-styled). .erp-track already returns to a white
   background around its rounded blue stage, and .comm-section already
   carries var(--spc90) vertical padding; this only widens the very first
   shared section's top gap slightly so the join reads as deliberate rather
   than accidental, without a decorative bridge element.
   -------------------------------------------------------------------------- */
.edu-fm-page > .cli-sec,
.edu-fm-page > .edu-em-section,
.edu-fm-page > .faq-sec {
	padding-top: calc(var(--spc90) * 1.6);
}

/* --------------------------------------------------------------------------
   Explore EDU Modules — product navigation, not a blog/news card grid.
   Plus Jakarta Sans (inherited, never declared) and existing site tokens
   only. .edu-em-* is used deliberately in place of .tab / .tabs-wrapper /
   .tab-content, which assets/js/common.js binds globally on every page.
   -------------------------------------------------------------------------- */
.edu-em-head {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.edu-em-kicker {
	font-size: var(--fs16);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--Blue);
	margin: 0 0 10px;
}
.edu-em-intro {
	font-size: var(--fs18);
	line-height: 1.6;
	color: #5f5f5f;
	margin: 14px 0 0;
}
.edu-em-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 48px;
}
.edu-em-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 32px;
	border-radius: 20px;
	border: 1px solid #e6e6e6;
	background: #fff;
	color: var(--Black);
	text-decoration: none;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.edu-em-card:hover,
.edu-em-card:focus-visible {
	border-color: var(--Blue);
	box-shadow: 0 16px 32px rgba(2, 75, 183, 0.12);
	transform: translateY(-4px);
}
.edu-em-card:focus-visible {
	outline: 2px solid var(--Blue);
	outline-offset: 3px;
}
.edu-em-icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: rgba(2, 75, 183, 0.08);
	color: var(--Blue);
}
.edu-em-icon svg {
	width: 24px;
	height: 24px;
}
.edu-em-title {
	font-size: var(--fs22);
	font-weight: 700;
	line-height: 1.3;
}
.edu-em-excerpt {
	font-size: var(--fs16);
	line-height: 1.6;
	color: #5f5f5f;
}
.edu-em-arrow {
	margin-top: auto;
	padding-top: 6px;
	color: var(--Blue);
}
.edu-em-arrow svg {
	width: 20px;
	height: 20px;
	transition: transform 0.25s ease;
}
.edu-em-card:hover .edu-em-arrow svg,
.edu-em-card:focus-visible .edu-em-arrow svg {
	transform: translateX(4px);
}
@media (max-width: 1024px) {
	.edu-em-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 640px) {
	.edu-em-grid {
		grid-template-columns: 1fr;
	}
	.edu-em-card {
		padding: 26px;
	}
}