/* =====================================================================
   HJ Academy — blog listing and article.
   A new file: it adds to site.css and overrides nothing in it. Every
   colour comes from the tokens site.css already declares, so a change to
   the palette carries through here automatically.
   ===================================================================== */

/* ----------------------------------------------------------- hero */
.hero-blog{ padding-block: 68px 44px; }
.hero-blog .lead{ max-width: 46ch; }

/* ------------------------------------------------ featured article */
.blog-feature{
  display:grid; grid-template-columns: 1.15fr 1fr; gap:0;
  border:1px solid var(--line); border-radius:20px; overflow:hidden;
  background:#fff;
}
.blog-feature-media{ display:block; background:var(--blue-grey); min-height:280px; }
.blog-feature-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.blog-feature-body{ padding:34px 34px 32px; align-self:center; }
.blog-feature-body .h2{ margin:.2em 0 .4em; font-size:clamp(1.4rem, 2.4vw, 1.95rem); }
.blog-feature-body .h2 a{ color:inherit; text-decoration:none; }
.blog-feature-body .h2 a:hover{ color:var(--accent); }
.blog-feature-body .lead{ font-size:1.02rem; margin-bottom:22px; }

@media (max-width: 860px){
  .blog-feature{ grid-template-columns:1fr; }
  .blog-feature-media{ min-height:200px; aspect-ratio:16/9; }
  .blog-feature-body{ padding:26px 22px; }
}

/* --------------------------------------------------- filter block */
.blog-filters{
  display:grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap:14px 16px; align-items:center;
  margin-bottom:22px;
}
.filter-search{ position:relative; }
.filter-search input{
  width:100%; padding:14px 42px 14px 18px;
  border:1px solid var(--line-strong); border-radius:999px;
  font:inherit; font-size:1rem; background:#fff; color:var(--ink-deep);
}
.filter-search input:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--brand-tint);
}
.filter-clear{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border:0; border-radius:50%;
  background:var(--brand-tint); color:var(--accent-deep);
  font-size:1.1rem; line-height:1; cursor:pointer;
}
.filter-clear:hover{ background:var(--accent); color:#fff; }

.filter-sort select{
  padding:13px 16px; border:1px solid var(--line-strong); border-radius:999px;
  background:#fff; font:inherit; font-size:.95rem; color:var(--ink-deep); cursor:pointer;
}
.filter-sort select:focus{ outline:none; border-color:var(--accent); }

.filter-chips, .filter-tags{
  grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px; align-items:center;
}
.filter-tags{ padding-top:2px; }
.filter-tags-label{
  font-size:.78rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); margin-right:4px;
}

.chip, .tagchip{
  font:inherit; cursor:pointer;
  border:1px solid var(--line-strong); background:#fff; color:var(--ink-soft);
  border-radius:999px; transition:background .15s, color .15s, border-color .15s;
}
.chip{ padding:8px 16px; font-size:.9rem; }
.tagchip{ padding:6px 13px; font-size:.83rem; }
.chip:hover, .tagchip:hover{ border-color:var(--accent); color:var(--accent-deep); }
.chip.is-on, .tagchip.is-on{ background:var(--accent); border-color:var(--accent); color:#fff; }
.chip-n{ opacity:.6; font-size:.82em; margin-left:3px; }

@media (max-width: 640px){
  .blog-filters{ grid-template-columns:1fr; }
  .filter-sort select{ width:100%; }
}

.blog-count{
  font-size:.9rem; color:var(--muted); margin:0 0 20px;
}

/* ---------------------------------------------------- results grid */
.blog-results{ position:relative; min-height:160px; }
.blog-results[aria-busy="true"] .blog-grid{ opacity:.35; pointer-events:none; }

.blog-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:26px;
  transition:opacity .18s ease;
}
@media (max-width: 1024px){ .blog-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px){  .blog-grid{ grid-template-columns:1fr; gap:20px; } }

.blog-card{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  overflow:hidden; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.blog-card:hover{
  transform:translateY(-3px); border-color:var(--brand-soft);
  box-shadow:0 14px 34px rgba(14,21,18,.08);
}

.blog-card-media{
  position:relative; display:block; aspect-ratio:16/9;
  background:var(--blue-grey); overflow:hidden;
}
.blog-card-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.blog-card-blank{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:3rem; font-weight:300; color:var(--brand-soft);
  background:linear-gradient(135deg, var(--brand-wash), var(--blue-grey));
}
.blog-card-cat{
  position:absolute; left:12px; bottom:12px;
  background:rgba(255,255,255,.94); color:var(--accent-deep);
  font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px;
}

.blog-card-body{ padding:20px 20px 22px; display:flex; flex-direction:column; flex:1; }
.blog-card-meta{
  font-size:.78rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); margin:0 0 8px;
}
.blog-card-body h3{ font-size:1.12rem; line-height:1.35; margin:0 0 10px; font-weight:600; }
.blog-card-body h3 a{ color:var(--ink-deep); text-decoration:none; }
.blog-card-body h3 a:hover{ color:var(--accent); }
.blog-card-summary{ font-size:.94rem; color:var(--ink-soft); margin:0 0 14px; }

.blog-card-tags{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:0 0 16px; }
.blog-card-tags a{
  font-size:.76rem; color:var(--muted); text-decoration:none;
  border:1px solid var(--line); border-radius:999px; padding:3px 9px;
}
.blog-card-tags a:hover{ border-color:var(--accent); color:var(--accent-deep); }
.blog-card-body .link-more{ margin-top:auto; }

/* ------------------------------------------------ empty + loading */
.blog-empty{
  text-align:center; padding:54px 20px; color:var(--muted);
  border:1px dashed var(--line-strong); border-radius:16px; background:#fff;
}
.blog-empty p{ margin:0 0 16px; font-size:1.05rem; }

.blog-loading{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(255,255,255,.55);
}
.spinner{
  width:34px; height:34px; border-radius:50%;
  border:3px solid var(--brand-tint); border-top-color:var(--accent);
  animation:hj-spin .7s linear infinite;
}
@keyframes hj-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .spinner{ animation-duration:2s; } }

/* --------------------------------------------------- pagination */
.blog-pager{
  display:flex; align-items:center; justify-content:center; gap:10px;
  flex-wrap:wrap; margin-top:34px;
}
.pager-nums{ display:flex; gap:6px; align-items:center; }
.pager-num, .pager-step{
  min-width:40px; padding:9px 14px; text-align:center;
  border:1px solid var(--line-strong); border-radius:999px;
  color:var(--ink-soft); text-decoration:none; font-size:.92rem; background:#fff;
}
.pager-num:hover, .pager-step:hover{ border-color:var(--accent); color:var(--accent-deep); }
.pager-num.is-current{ background:var(--accent); border-color:var(--accent); color:#fff; }
.pager-step.is-off{ opacity:.4; }
.pager-gap{ color:var(--muted); padding:0 2px; }

/* =====================================================================
   THE ARTICLE
   ===================================================================== */
.preview-flag{
  background:var(--ink-deep); color:#fff; text-align:center;
  padding:10px 16px; font-size:.9rem;
}

.article-head{ padding-top:34px; }
.article-head.has-banner{ padding-top:0; }
.article-banner{ width:100%; max-height:460px; overflow:hidden; background:var(--blue-grey); }
.article-banner img{ width:100%; height:100%; object-fit:cover; display:block; }

.article-head-inner{ padding:34px 0 8px; max-width:760px; }
.article-head-inner .h1{ font-size:clamp(1.8rem, 4vw, 2.7rem); line-height:1.18; margin:.2em 0 .35em; }
.article-head-inner .lead{ font-size:1.12rem; }

.article-meta{
  font-size:.86rem; color:var(--muted);
  display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0;
}

.article-layout{
  display:grid; grid-template-columns: minmax(0,1fr) 300px; gap:56px; align-items:start;
}
@media (max-width: 960px){
  .article-layout{ grid-template-columns:1fr; gap:34px; }
}
.article-main{ max-width:720px; }

/* --------------------------------------------------- takeaways box */
.takeaways{
  background:var(--brand-wash); border:1px solid var(--brand-tint);
  border-left:4px solid var(--accent);
  border-radius:0 14px 14px 0; padding:22px 26px; margin:0 0 32px;
}
.takeaways h2{
  font-size:.8rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--accent-deep); margin:0 0 12px;
}
.takeaways ul{ margin:0; padding-left:20px; }
.takeaways li{ margin-bottom:8px; color:var(--ink-deep); }
.takeaways li:last-child{ margin-bottom:0; }

/* ------------------------------------------------- article content */
.article-content{ font-size:1.06rem; line-height:1.78; }
.article-content h2{
  font-size:1.5rem; line-height:1.3; margin:2em 0 .6em; font-weight:600; color:var(--ink-deep);
}
.article-content h3{ font-size:1.2rem; margin:1.7em 0 .5em; font-weight:600; }
.article-content h4{ font-size:1.05rem; margin:1.5em 0 .4em; font-weight:600; }
.article-content p{ margin:0 0 1.15em; }
.article-content ul, .article-content ol{ margin:0 0 1.3em; padding-left:26px; }
.article-content li{ margin-bottom:.55em; }
.article-content li::marker{ color:var(--accent); }
.article-content a{ color:var(--accent-deep); text-decoration:underline; text-underline-offset:3px; }
.article-content a:hover{ color:var(--accent-dark); }
.article-content strong{ font-weight:600; color:var(--ink-deep); }
.article-content blockquote{
  margin:1.8em 0; padding:4px 0 4px 24px;
  border-left:3px solid var(--brand-soft);
  font-size:1.1rem; color:var(--ink-soft); font-style:italic;
}
.article-content blockquote p:last-child{ margin-bottom:0; }
.article-content code{
  background:var(--brand-wash); border:1px solid var(--brand-tint);
  border-radius:5px; padding:1px 6px; font-size:.9em;
}
.article-content hr{ border:0; border-top:1px solid var(--line); margin:2.4em 0; }

/* ------------------------------------------------------- tags etc */
.article-tags{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:36px 0 0; }
.article-tags a{
  font-size:.85rem; color:var(--ink-soft); text-decoration:none;
  border:1px solid var(--line-strong); border-radius:999px; padding:6px 14px;
}
.article-tags a:hover{ border-color:var(--accent); color:var(--accent-deep); }

.article-faqs{ margin-top:48px; }
.article-faqs .faq-list details{
  border-bottom:1px solid var(--line); padding:4px 0;
}
.article-faqs summary{
  cursor:pointer; padding:16px 0; font-weight:500; color:var(--ink-deep);
  list-style:none; position:relative; padding-right:32px;
}
.article-faqs summary::-webkit-details-marker{ display:none; }
.article-faqs summary::after{
  content:'+'; position:absolute; right:4px; top:50%; transform:translateY(-50%);
  color:var(--accent); font-size:1.3rem; line-height:1;
}
.article-faqs details[open] summary::after{ content:'–'; }
.article-faqs .faq-answer{ padding:0 0 18px; color:var(--ink-soft); }
.article-faqs .faq-answer p{ margin:0; }

.article-share{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  margin-top:44px; padding-top:24px; border-top:1px solid var(--line);
  font-size:.9rem;
}
.article-share span{ color:var(--muted); }
.article-share a, .copy-link{
  color:var(--accent-deep); text-decoration:none;
  border:1px solid var(--line-strong); border-radius:999px; padding:7px 15px;
  background:#fff; font:inherit; font-size:.88rem; cursor:pointer;
}
.article-share a:hover, .copy-link:hover{ border-color:var(--accent); background:var(--brand-wash); }
.copy-link.is-done{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* ---------------------------------------------------------- aside */
.article-aside{ position:sticky; top:96px; display:grid; gap:20px; }
@media (max-width: 960px){ .article-aside{ position:static; } }
.article-aside .aside-block{
  background:var(--brand-wash); border:1px solid var(--brand-tint);
  border-radius:16px; padding:24px;
}
.article-aside .h4{ margin:0 0 10px; font-size:1.05rem; }
.article-aside p{ font-size:.94rem; color:var(--ink-soft); margin:0 0 16px; }

.blog-loading[hidden]{
  display:none;
}