/* Educircle Website V2 — Article reading layer (blog + event detail prose).
   Loaded AFTER pages.css so its restrained article headings win over the global
   display headings. Depends on tokens.css. Progressive: all motion is optional
   and gated on prefers-reduced-motion. */

/* ---- Reading column ---- */
.article-shell { max-width: 820px; margin-inline: auto; }
.article-col { max-width: 760px; }
/* Media (images/tables) may bleed a little wider than the text measure. */
.article__body > figure,
.article__body > .article-wide { max-width: 100%; }

/* ---- Breadcrumb ---- */
.article-crumbs { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; font-size: var(--fs-small); color: var(--c-on-dark-muted); }
.article-crumbs a { color: inherit; text-decoration: none; }
.article-crumbs a:hover { color: #fff; text-decoration: underline; }
.article-crumbs [aria-current="page"] { color: rgba(255,255,255,.62); max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.article-crumbs__sep { opacity: .5; }

/* ---- Article meta row (date · reading time · author) ---- */
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); color: var(--c-on-dark-muted); font-size: var(--fs-small); }
.article-meta__dot { opacity: .5; }
.article-topic { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-pill); padding: .2rem .6rem; font-size: 12px; font-weight: var(--fw-bold); background: rgba(111,208,255,.16); color: #6FD0FF; }

/* ---- Hero image ---- */
.article-hero-img { margin-top: var(--sp-6); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md); aspect-ratio: 16 / 9; background: var(--c-surface-3); }
.article-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Reading progress bar (fixed, thin) ---- */
.reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: calc(var(--z-header) + 1); background: transparent; pointer-events: none; }
.reading-progress__bar { height: 100%; width: 0; transform-origin: 0 50%; background: linear-gradient(90deg, var(--c-primary), #6FD0FF); transition: width .12s linear; }

/* ==========================================================================
   PROSE — restrained, readable article typography.
   NOTE: deliberately smaller than the landing display headings. Loaded after
   pages.css so these win over `.article__body h2/h3`.
   ========================================================================== */
.prose-article { color: var(--c-ink); font-size: 1.0625rem; line-height: 1.75; overflow-wrap: break-word; word-break: break-word; }
@media (min-width: 768px) { .prose-article { font-size: 1.125rem; } }

.prose-article > * + * { margin-top: 1.15em; }
.prose-article p { line-height: 1.75; }

/* Headings: clamp to a calm article scale, never landing-hero size. */
.prose-article h2 { font-size: clamp(1.375rem, 1rem + 1.7vw, 1.75rem); line-height: 1.25; font-weight: var(--fw-bold); color: var(--c-navy); letter-spacing: var(--ls-tight); margin-top: 2em; scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }
.prose-article h3 { font-size: clamp(1.2rem, 1rem + 1vw, 1.4rem); line-height: 1.3; font-weight: var(--fw-bold); color: var(--c-navy); margin-top: 1.6em; scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }
.prose-article h4 { font-size: 1.075rem; font-weight: var(--fw-bold); color: var(--c-navy); margin-top: 1.4em; }
.prose-article h5, .prose-article h6 { font-size: 1rem; font-weight: var(--fw-bold); color: var(--c-navy); margin-top: 1.2em; text-transform: none; }
.prose-article h2 + *, .prose-article h3 + * { margin-top: .6em; }

/* Lists */
.prose-article ul, .prose-article ol { padding-left: 1.4em; }
.prose-article li { margin-top: .5em; line-height: 1.7; }
.prose-article li > ul, .prose-article li > ol { margin-top: .5em; }
.prose-article ul { list-style: disc; }
.prose-article ol { list-style: decimal; }
.prose-article ul ul { list-style: circle; }

/* Inline */
.prose-article strong, .prose-article b { font-weight: var(--fw-bold); color: var(--c-navy); }
.prose-article a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; font-weight: var(--fw-semibold); }
.prose-article a:hover { text-decoration-thickness: 2px; }

/* Blockquote */
.prose-article blockquote { margin-left: 0; margin-right: 0; padding: var(--sp-3) var(--sp-5); border-left: 3px solid var(--c-primary); background: var(--c-surface-2, var(--c-surface-3)); border-radius: 0 var(--r-md) var(--r-md) 0; color: var(--c-ink); font-style: italic; }
.prose-article blockquote p { margin-top: .5em; }
.prose-article blockquote p:first-child { margin-top: 0; }

/* Images + captions */
.prose-article img { max-width: 100%; height: auto; border-radius: var(--r-md); margin-inline: auto; }
.prose-article figure { margin-top: 1.5em; }
.prose-article figure img { display: block; }
.prose-article figcaption { margin-top: .5em; font-size: var(--fs-small); color: var(--c-muted); text-align: center; }

/* Tables — scroll horizontally on small screens, never break layout */
.prose-article .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 1.2em; border: 1px solid var(--c-line); border-radius: var(--r-md); }
.prose-article table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.prose-article :where(table) { display: table; }
.prose-article th, .prose-article td { padding: .6rem .8rem; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.prose-article thead th { background: var(--c-surface-3); color: var(--c-navy); font-weight: var(--fw-bold); white-space: nowrap; }
.prose-article tbody tr:last-child td { border-bottom: 0; }

/* Horizontal rule, code */
.prose-article hr { border: 0; border-top: 1px solid var(--c-line); margin-block: 2em; }
.prose-article code { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .9em; background: var(--c-surface-3); padding: .12em .4em; border-radius: 6px; }
.prose-article pre { margin-top: 1.2em; padding: var(--sp-4); background: #0C1B3A; color: #E6EEF8; border-radius: var(--r-md); overflow-x: auto; font-size: .9rem; line-height: 1.6; }
.prose-article pre code { background: none; padding: 0; color: inherit; }

/* Prevent long unbroken URLs from blowing out the layout */
.prose-article a, .prose-article p, .prose-article li { overflow-wrap: anywhere; }

/* ---- Table of contents ---- */
.article-toc { position: sticky; top: calc(var(--header-h) + var(--sp-5)); align-self: start; border-left: 2px solid var(--c-line); padding-left: var(--sp-4); }
.article-toc__label { font-size: 12px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted); }
.article-toc__list { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); list-style: none; padding: 0; }
.article-toc__list a { color: var(--c-muted); text-decoration: none; font-size: var(--fs-small); line-height: 1.4; display: block; padding: 2px 0; border-left: 2px solid transparent; margin-left: -1px; padding-left: var(--sp-3); transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.article-toc__list a:hover { color: var(--c-navy); }
.article-toc__list a.is-active { color: var(--c-primary); border-left-color: var(--c-primary); font-weight: var(--fw-semibold); }
.article-toc__list .lvl-3 { padding-left: var(--sp-5); font-size: 13px; }

/* ---- Two-column article layout (content + TOC) on wide screens ---- */
/* Only split into two columns when the TOC is actually present (JS populated it
   and there were enough sections). No-JS / short articles stay single-column
   with no empty gutter. */
.article-layout { display: grid; gap: var(--sp-7); }
@media (min-width: 1080px) {
  .article-layout--toc:has(.article-toc:not([hidden])) { grid-template-columns: minmax(0, 1fr) 220px; align-items: start; }
}
@media (max-width: 1079px) { .article-toc { display: none; } }

/* ---- End-of-article CTA card ---- */
.article-endcta { margin-top: var(--sp-8); padding: var(--sp-6); border-radius: var(--r-lg); background: var(--grad-navy); color: var(--c-on-dark); }
.article-endcta h2 { color: #fff; font-size: var(--fs-h4); font-weight: var(--fw-bold); }
.article-endcta p { color: var(--c-on-dark-muted); margin-top: var(--sp-2); }
.article-endcta .hero__actions { margin-top: var(--sp-4); }

/* ---- Section reveal (opt-in, JS adds .reveal; visible by default for no-JS) ---- */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .reading-progress__bar { transition: none; }
  .js .reveal, .js .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .article-hero-img img { transition: none; }
}