/* ==========================================================================
   OUR FUTURE — Blog / editorial layer
   Loaded only on blog.html and blog-post.html. Extends the design system with
   content-specific components: post cards, category filter, long-form prose,
   sticky table of contents, reading progress, author byline, share, related.
   Inherits all tokens; logical properties keep it RTL-safe.
   ========================================================================== */

/* ----- Reading progress bar (article) ----------------------------------- */
.reading-progress {
  position: fixed; inset-block-start: 0; inset-inline-start: 0; z-index: calc(var(--z-header) + 1);
  height: 3px; width: 0%; background: var(--grad-brand);
  transition: width 80ms linear;
}

/* ----- Category filter -------------------------------------------------- */
.cat-filter { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; }
.chip {
  padding: 0.5rem 1rem; border-radius: var(--r-pill);
  border: 1px solid var(--color-border); background: var(--surface);
  font-size: var(--fs-sm); font-weight: var(--weight-semibold); color: var(--ink-600);
  transition: color var(--dur-2), background-color var(--dur-2), border-color var(--dur-2), transform var(--dur-2) var(--ease-out);
}
.chip:hover { border-color: var(--brand-300); color: var(--brand-700); transform: translateY(-1px); }
.chip[aria-pressed="true"] { background: var(--brand-600); color: #fff; border-color: var(--brand-600); }

/* ----- Post cards ------------------------------------------------------- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6) var(--s-5); }
@media (max-width: 900px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .post-grid { grid-template-columns: 1fr; } }

.post-card { display: flex; flex-direction: column; height: 100%; }
.post-card a.post-card__link { display: flex; flex-direction: column; height: 100%; }
.post-card__thumb {
  aspect-ratio: 16 / 10; border-radius: var(--r-lg); overflow: hidden; position: relative;
  border: 1px solid var(--color-border); margin-bottom: var(--s-4);
  display: grid; place-items: center; transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3);
}
.post-card__link:hover .post-card__thumb { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.post-card__thumb svg { width: 38%; height: 38%; color: #fff; opacity: 0.92; }
/* themed gradient covers per category */
.thumb--guide   { background: var(--grad-brand-deep); }
.thumb--product { background: linear-gradient(150deg, var(--brand-700), var(--teal-400)); }
.thumb--growth  { background: var(--grad-warm); }
.thumb--nelc    { background: linear-gradient(150deg, #1d4ed8, var(--teal-400)); }
.thumb--story   { background: linear-gradient(150deg, var(--violet-400), var(--brand-500)); }

.post-card__cat { font-size: var(--fs-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--brand-600); }
.post-card__title { margin-top: var(--s-2); font-size: 1.2rem; font-weight: var(--weight-bold); line-height: var(--lh-snug); color: var(--color-heading); letter-spacing: var(--tracking-snug); transition: color var(--dur-2); }
.post-card__link:hover .post-card__title { color: var(--brand-700); }
.post-card__excerpt { margin-top: var(--s-3); color: var(--color-text-soft); font-size: var(--fs-sm); flex: 1; }

/* ----- Byline ----------------------------------------------------------- */
.byline { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); }
.byline .avatar { width: 34px; height: 34px; }
.byline__meta { font-size: var(--fs-xs); color: var(--color-text-muted); line-height: 1.4; }
.byline__meta b { color: var(--color-heading); font-weight: var(--weight-semibold); display: block; font-size: var(--fs-sm); }
.byline__dot { color: var(--ink-200); }

/* ----- Featured post ---------------------------------------------------- */
.featured {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: center; background: var(--surface); border: 1px solid var(--color-border);
  border-radius: var(--r-2xl); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); box-shadow: var(--shadow-md);
  overflow: hidden;
}
@media (max-width: 860px) { .featured { grid-template-columns: 1fr; } }
.featured__media { aspect-ratio: 16/11; border-radius: var(--r-xl); background: var(--grad-brand-deep); position: relative; overflow: hidden; display: grid; place-items: center; }
.featured__media .deco-orb { position: absolute; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.22), transparent 70%); inset-block-start: -80px; inset-inline-end: -60px; }
.featured__media svg { width: 30%; height: 30%; color: #fff; position: relative; }
.featured__title { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); font-weight: var(--weight-extra); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); margin-top: var(--s-3); }
.featured__excerpt { margin-top: var(--s-4); color: var(--color-text-soft); font-size: 1.02rem; }

/* ----- Article layout (post + sticky TOC) ------------------------------- */
.article-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 240px;
  gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start;
  max-width: 1080px; margin-inline: auto;
}
@media (max-width: 920px) { .article-layout { grid-template-columns: 1fr; } .toc { display: none; } }

.toc { position: sticky; inset-block-start: calc(var(--header-h) + 1.5rem); }
.toc__label { font-size: var(--fs-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--s-3); }
.toc__list { display: grid; gap: 0.15rem; border-inline-start: 2px solid var(--color-border); }
.toc__list a {
  display: block; padding: 0.4rem var(--s-4); margin-inline-start: -2px;
  border-inline-start: 2px solid transparent; font-size: var(--fs-sm); color: var(--color-text-muted);
  transition: color var(--dur-2), border-color var(--dur-2);
}
.toc__list a:hover { color: var(--brand-700); }
.toc__list a.is-active { color: var(--brand-700); border-inline-start-color: var(--brand-500); font-weight: var(--weight-semibold); }

/* ----- Long-form prose -------------------------------------------------- */
.article { max-width: 720px; }
.article > * + * { margin-block-start: var(--s-5); }
.article h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.95rem); margin-block-start: var(--s-8); scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.article h3 { font-size: 1.3rem; margin-block-start: var(--s-6); }
.article p { color: var(--ink-600); font-size: 1.075rem; line-height: var(--lh-relaxed); }
.article a:not(.btn) { color: var(--brand-700); font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--brand-500) 45%, transparent); transition: text-decoration-color var(--dur-2); }
.article a:not(.btn):hover { text-decoration-color: var(--brand-600); }
.article ul, .article ol { padding-inline-start: var(--s-6); display: grid; gap: var(--s-3); color: var(--ink-600); font-size: 1.075rem; }
.article ul { list-style: none; }
.article ul li { position: relative; }
.article ul li::before { content: ""; position: absolute; inset-inline-start: calc(-1 * var(--s-5)); inset-block-start: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-400); }
.article ol { list-style: decimal; }
.article ol li::marker { color: var(--brand-600); font-weight: var(--weight-bold); }
.article figure { margin-block: var(--s-6); }
.article figure img, .article .figure-visual { width: 100%; border-radius: var(--r-lg); border: 1px solid var(--color-border); }
.article figcaption { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--color-text-muted); text-align: center; }
.article hr { border: none; border-top: 1px solid var(--color-border); margin-block: var(--s-7); }

.pullquote {
  margin-block: var(--s-7); padding-inline-start: var(--s-5);
  border-inline-start: 4px solid var(--brand-500);
  font-family: var(--font-display); font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
  line-height: var(--lh-snug); font-weight: var(--weight-semibold); color: var(--color-heading); letter-spacing: var(--tracking-snug);
}
.figure-visual { aspect-ratio: 16/8; background: linear-gradient(150deg, var(--brand-50), var(--surface)); display: grid; place-items: center; }
.figure-visual svg { width: 30%; height: 50%; color: var(--brand-400); }

/* code */
.article :not(pre) > code { font-family: var(--font-mono); font-size: 0.88em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 0.12em 0.4em; color: var(--brand-700); }
.article pre { background: var(--brand-950); color: #d2f7e7; border-radius: var(--r-md); padding: var(--s-5); overflow-x: auto; font-family: var(--font-mono); font-size: 0.9rem; line-height: 1.6; }

/* ----- Article header --------------------------------------------------- */
.article-head { max-width: 760px; margin-inline: auto; text-align: center; }
.article-head .post-card__cat { font-size: var(--fs-sm); }
.article-head h1 { margin-top: var(--s-3); }
.article-head .lead { margin-top: var(--s-4); }
.article-head .byline { justify-content: center; margin-top: var(--s-5); }
.article-cover { max-width: 1080px; margin: var(--s-7) auto 0; aspect-ratio: 21/9; border-radius: var(--r-2xl); background: var(--grad-brand-deep); position: relative; overflow: hidden; display: grid; place-items: center; box-shadow: var(--shadow-lg); }
.article-cover .deco-orb { position: absolute; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.22), transparent 70%); inset-block-end: -120px; inset-inline-start: -80px; }
.article-cover svg { width: 12%; color: #fff; opacity: .9; position: relative; }

/* ----- Author bio + share + tags ---------------------------------------- */
.author-card { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-6); background: var(--bg-subtle); border: 1px solid var(--color-border); border-radius: var(--r-xl); margin-block-start: var(--s-8); }
.author-card .avatar { width: 64px; height: 64px; flex: none; }
.author-card h3 { font-size: 1.1rem; }
.author-card .role { font-size: var(--fs-sm); color: var(--brand-600); font-weight: var(--weight-semibold); }
.author-card p { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--color-text-soft); }

.share { display: flex; align-items: center; gap: var(--s-3); margin-block-start: var(--s-6); padding-block-start: var(--s-5); border-block-start: 1px solid var(--color-border); }
.share span { font-size: var(--fs-sm); font-weight: var(--weight-semibold); color: var(--color-text-muted); }
.share a, .share button { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--color-border); color: var(--ink-500); transition: color var(--dur-2), border-color var(--dur-2), background-color var(--dur-2); }
.share a:hover, .share button:hover { color: var(--brand-700); border-color: var(--brand-300); background: var(--brand-50); }
.share svg { width: 17px; height: 17px; }

.tag-list { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-start: var(--s-5); }
.tag-list a { font-size: var(--fs-xs); font-weight: var(--weight-semibold); color: var(--ink-500); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0.3rem 0.8rem; transition: color var(--dur-2), border-color var(--dur-2); }
.tag-list a:hover { color: var(--brand-700); border-color: var(--brand-300); }