/* Blog views: index (home.php), archives (archive.php), single post (single.php).
   New-design styles scoped under .blg so its generic class names (.section,
   .btn, .b-card…) can't collide with main.css or other pages' scoped sheets.
   Token block, primitives, and section conventions match educators.css /
   testimonials.css (Inter + Source Serif 4, light/mist/dark sections). The
   global site header/footer (main.css) supply the chrome. */

.blg {
	--blue-50:  #EEF0FB; --blue-100: #D9DEF7; --blue-200: #B7BFF0; --blue-300: #8C97E6;
	--blue-400: #6470DB; --blue-500: #3543D0; --blue-600: #2C37B0; --blue-700: #232C8F;
	--blue-800: #1A216C; --blue-900: #111650;
	--teal: #43E8D8; --gold: #FDC801;
	--grey-50:  #F7F8FA; --grey-100: #EEF0F3; --grey-200: #DDE1E7; --grey-300: #C3C9D2;
	--grey-400: #9AA2AE; --grey-500: #6B7280; --grey-600: #4B5260; --grey-700: #353B47;
	--grey-800: #222730; --grey-900: #11141A;
	--surface-base: #0B0F1E; --surface-1: #111730; --surface-2: #1A2142;
	--border-dark: #2A3358; --text-dark-1: #F2F4FB; --text-dark-2: #A9B1C6; --muted-dark: #8891AA;
	--r-sm: 4px; --r: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 24px;
	--shadow-sm: 0 1px 2px 0 rgb(17 20 26 / 0.05);
	--shadow: 0 4px 12px -2px rgb(17 20 26 / 0.08);
	--shadow-lg: 0 12px 24px -6px rgb(17 20 26 / 0.12);
	--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--display: 'Source Serif 4', ui-serif, Georgia, serif;

	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.5;
	color: var(--grey-900);
	background: #fff;
}
.blg a { color: var(--blue-500); text-decoration: underline; }
.blg a:hover { color: var(--blue-600); }
.blg img, .blg svg { max-width: 100%; }

/* Reset the theme's global display-face headings back to the sans face; the
   serif display headings re-assert var(--display) below. */
.blg h1, .blg h2, .blg h3, .blg h4 { font-family: var(--sans); line-height: 1.2; margin: 0; text-wrap: balance; }

.blg .wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.blg .wrap.narrow { max-width: 780px; }
.blg .section { padding: 64px 0; }
@media (min-width: 768px) { .blg .section { padding: 80px 0; } }

.blg .eyebrow {
	display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
	text-transform: uppercase; margin-bottom: 14px;
}
.blg .eyebrow.on-light { color: var(--blue-500); }

.blg .light { background: #fff; }
.blg .mist { background: var(--grey-50); }
.blg .dark { background: var(--surface-base); color: var(--text-dark-1); }

/* ---------- Hero (light, centered) ---------- */
.blg .page-hero { padding: 72px 0 56px; position: relative; overflow: hidden; text-align: center; }
@media (min-width: 1024px) { .blg .page-hero { padding: 88px 0 64px; } }
.blg .page-hero::before {
	content: ""; position: absolute; top: -300px; left: 50%; transform: translateX(-50%);
	width: 720px; height: 720px;
	background: radial-gradient(circle, rgba(67,232,216,0.18) 0%, rgba(67,232,216,0) 65%);
	pointer-events: none;
}
.blg .page-hero .wrap { position: relative; }
.blg .page-hero h1 {
	font-family: var(--display); font-optical-sizing: auto; font-variation-settings: "opsz" 60;
	font-weight: 600; font-size: clamp(34px, 4.4vw, 52px); letter-spacing: -0.02em; line-height: 1.08;
	color: var(--ink); margin: 0 auto 18px; max-width: 860px;
}
.blg .hero-sub { font-size: 18px; line-height: 29px; color: var(--grey-600); max-width: 640px; margin: 0 auto; }

/* ---------- Post grid ---------- */
.blg .b-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 700px) { .blg .b-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .blg .b-grid { grid-template-columns: repeat(3, 1fr); } }

.blg .b-card {
	background: #fff; border: 1px solid var(--grey-200); border-radius: var(--r-xl);
	overflow: hidden; display: flex; flex-direction: column;
	transition: box-shadow 200ms var(--ease), transform 200ms var(--ease);
}
.blg .b-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.blg .b-thumb { display: block; aspect-ratio: 16 / 9; background: var(--blue-50); }
.blg .b-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blg .b-thumb-ph {
	width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
	background: linear-gradient(140deg, var(--blue-900) 0%, var(--blue-500) 70%, #2a63c7 140%);
	color: var(--gold); font-size: 34px;
}
.blg .b-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; gap: 10px; }
.blg .b-date { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-500); margin: 0; }
.blg .b-title { font-size: 19px; font-weight: 700; line-height: 1.3; margin: 0; }
.blg .b-title a { color: var(--grey-900); text-decoration: none; }
.blg .b-title a:hover { color: var(--blue-600); }
.blg .b-excerpt { font-size: 15px; line-height: 24px; color: var(--grey-600); margin: 0; flex: 1; }
.blg .b-more { font-size: 14px; font-weight: 600; color: var(--blue-500); }

.blg .b-empty { text-align: center; padding: 24px 0; }
.blg .b-empty h2 { font-size: 24px; font-weight: 700; color: var(--grey-900); margin: 0 0 10px; }
.blg .b-empty p { color: var(--grey-600); margin: 0; }

/* ---------- Pagination (core paginate_links markup) ---------- */
.blg .pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.blg .pager .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 42px; height: 42px; padding: 0 12px;
	border: 1px solid var(--grey-200); border-radius: var(--r-lg);
	background: #fff; color: var(--grey-900); font-weight: 600; font-size: 15px; text-decoration: none;
	font-variant-numeric: tabular-nums;
}
.blg .pager .page-numbers.current { background: var(--blue-500); border-color: var(--blue-500); color: #fff; }
.blg .pager .page-numbers.dots { border-color: transparent; background: transparent; }
.blg .pager a.page-numbers:hover { border-color: var(--blue-400); color: var(--blue-600); }
.blg .pager a.page-numbers:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--grey-50), 0 0 0 4px var(--blue-500); }

/* ---------- Single post ---------- */
.blg .article-head { padding: 64px 0 8px; text-align: center; }
@media (min-width: 1024px) { .blg .article-head { padding: 80px 0 8px; } }
.blg .article-meta { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-500); margin: 0 0 16px; display: flex; justify-content: center; gap: 10px; }
.blg .article-meta a { color: var(--blue-500); text-decoration: none; }
.blg .article-meta a:hover { text-decoration: underline; }
.blg .article-head h1 {
	font-family: var(--display); font-optical-sizing: auto; font-variation-settings: "opsz" 60;
	font-weight: 600; font-size: clamp(30px, 4vw, 46px); letter-spacing: -0.02em; line-height: 1.12;
	color: var(--ink); margin: 0 auto;
}
.blg .article-section { padding: 36px 0 72px; }
.blg .article-figure { margin: 0 0 32px; }
.blg .article-figure img { border-radius: var(--r-xl); width: 100%; height: auto; }

.blg .article-body { font-size: 17px; line-height: 28px; color: var(--grey-700); }
.blg .article-body p { margin: 0 0 1.25em; }
.blg .article-body h2 { font-size: 26px; font-weight: 700; color: var(--grey-900); margin: 1.6em 0 0.6em; }
.blg .article-body h3 { font-size: 21px; font-weight: 700; color: var(--grey-900); margin: 1.4em 0 0.5em; }
.blg .article-body ul, .blg .article-body ol { margin: 0 0 1.25em; padding-left: 1.4em; }
.blg .article-body li { margin-bottom: 0.4em; }
.blg .article-body img { border-radius: var(--r-lg); margin: 0.5em 0 1em; }
.blg .article-body blockquote {
	border-left: 3px solid var(--blue-300); margin: 0 0 1.25em; padding: 0.2em 0 0.2em 1.2em;
	color: var(--grey-600); font-style: italic;
}
.blg .article-body strong { color: var(--grey-900); }
.blg .article-back { margin: 40px 0 0; font-size: 15px; font-weight: 600; }
.blg .article-back a { text-decoration: none; }
.blg .article-back a:hover { text-decoration: underline; }

/* ---------- Buttons + final CTA (dark) ---------- */
.blg .btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	height: 50px; padding: 0 28px; border-radius: var(--r-lg); border: 1px solid transparent;
	font-size: 16px; font-weight: 600; white-space: nowrap; text-decoration: none;
	transition: background 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease);
}
.blg .btn-primary { background: var(--blue-500); color: #fff; box-shadow: 0 10px 24px -8px rgba(53,67,208,.45); }
.blg .btn-primary:hover { background: var(--blue-600); color: #fff; }
.blg .btn-primary:active { background: var(--blue-700); }
.blg .btn-lg { height: 56px; padding: 0 34px; font-size: 17px; }
.blg .btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--teal); }

.blg .cta { text-align: center; }
.blg .cta-inner { max-width: 760px; margin: 0 auto; }
.blg .cta h2 {
	font-family: var(--display); font-optical-sizing: auto; font-variation-settings: "opsz" 48;
	font-weight: 600; font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -0.015em; line-height: 1.12;
	color: var(--text-dark-1); margin: 0 0 16px;
}
.blg .cta p.lede { font-size: 18px; line-height: 28px; color: var(--text-dark-2); margin: 0 auto 30px; max-width: 620px; }