/* ==========================================================================
   MemoHoney — blog.css
   ========================================================================== */

/* --- Reading progress -------------------------------------------------- */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:90;background:transparent;pointer-events:none}
.progress__bar{height:100%;width:0;background:linear-gradient(90deg,var(--gold-soft),var(--gold-deep));transition:width .08s linear}

/* --- Post header ------------------------------------------------------- */
.post-hero{background:linear-gradient(180deg,var(--cream),#fff);border-bottom:1px solid var(--line);padding-block:clamp(34px,4.5vw,58px)}
.post-hero .container{max-width:840px}
.post__tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);background:var(--gold-wash);border-radius:999px;padding:.35rem .9rem;margin-bottom:1rem}
.post__meta{display:flex;flex-wrap:wrap;gap:1.2rem;font-size:.86rem;color:var(--muted-2);margin-top:1.1rem}
.post__meta span{display:inline-flex;align-items:center;gap:.45em}
.post__meta span::before{content:"";width:8px;height:9px;background:var(--gold);clip-path:var(--hex);flex:none}

/* --- Post layout ------------------------------------------------------- */
.post-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:clamp(28px,4vw,58px);align-items:start;padding-block:clamp(34px,4.5vw,60px)}
.post-body{max-width:70ch;font-size:1.075rem;line-height:1.78}
.post-body > figure{margin:0 0 2.2rem}
.post-body h2{margin-top:2.5em;scroll-margin-top:100px;font-size:clamp(1.45rem,1.2rem + .85vw,1.95rem)}
.post-body h2:first-of-type{margin-top:1.4em}
.post-body h3{margin-top:1.9em;scroll-margin-top:100px}
.post-body ul,.post-body ol{margin:0 0 1.3em;display:grid;gap:.55rem}
.post-body li{color:var(--navy)}
.post-body img{border-radius:var(--radius)}

/* --- Sidebar / TOC ----------------------------------------------------- */
.post-aside{position:sticky;top:96px;display:grid;gap:1.4rem}
.toc{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:1.35rem 1.4rem}
.toc h2{font-family:var(--font-body);font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:.9rem}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:.15rem;counter-reset:toc}
.toc a{
  display:block;padding:.42rem .5rem .42rem 1.6rem;position:relative;border-radius:8px;
  font-size:.895rem;line-height:1.4;color:var(--navy);
}
.toc a::before{content:"";position:absolute;left:.35rem;top:.82em;width:8px;height:9px;background:var(--gold-soft);clip-path:var(--hex);transition:background .18s}
.toc a:hover{background:#fff;text-decoration:none;color:var(--ink)}
.toc a.is-active{background:#fff;color:var(--gold-deep);font-weight:600;box-shadow:var(--shadow-sm)}
.toc a.is-active::before{background:var(--gold-deep)}

.aside-cta{background:var(--navy);border-radius:var(--radius);padding:1.5rem;text-align:center;color:#C7CDD6}
.aside-cta img{width:120px;margin:0 auto .9rem;border-radius:10px}
.aside-cta h2{color:#fff;font-size:1.15rem;margin-bottom:.5rem}
.aside-cta p{font-size:.87rem;margin-bottom:1.1rem;color:#A9B2BE}
.aside-cta .btn{width:100%}

/* --- Inline CTA block -------------------------------------------------- */
.post-cta{
  display:grid;grid-template-columns:190px 1fr;gap:1.6rem;align-items:center;
  background:linear-gradient(135deg,var(--cream-2),var(--cream));border:1px solid var(--gold-soft);
  border-radius:var(--radius-lg);padding:clamp(20px,2.6vw,32px);margin:2.6rem 0;
}
.post-cta img{width:100%;border-radius:var(--radius)}
.post-cta h2{margin-top:0!important;font-size:1.35rem;margin-bottom:.5rem}
.post-cta p{font-size:.95rem;color:var(--muted);margin-bottom:1.1rem}

/* --- Post FAQ ---------------------------------------------------------- */
.post-faq{margin-top:2.6rem;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(20px,2.6vw,32px)}
.post-faq h2{margin-top:0!important;font-size:1.45rem}
.post-faq .faq{border-top-color:var(--gold-soft)}
.post-faq .faq__item{border-bottom-color:var(--gold-soft)}
.post-faq .faq__q{font-size:1rem}

/* --- Prev / next ------------------------------------------------------- */
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.6rem;padding-top:2rem;border-top:1px solid var(--line)}
.post-nav a{
  display:block;border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.3rem;
  background:#fff;transition:border-color .2s,transform .2s;
}
.post-nav a:hover{border-color:var(--gold);transform:translateY(-2px);text-decoration:none}
.post-nav small{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);font-weight:700;margin-bottom:.4rem}
.post-nav b{font-family:var(--font-display);font-size:1rem;color:var(--ink);font-weight:600;line-height:1.35}
.post-nav .next{text-align:right}

/* --- Article cards ----------------------------------------------------- */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px)}
.post-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--gold-soft)}
.post-card__media{background:var(--cream);border-bottom:1px solid var(--line)}
.post-card__media img{width:100%;aspect-ratio:16/10;object-fit:cover}
.post-card__body{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1}
.post-card__body small{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-deep);font-weight:700}
.post-card h3{margin:.6rem 0 .5rem;font-size:1.1rem;line-height:1.34}
.post-card h3 a{color:var(--ink)}
.post-card h3 a:hover{color:var(--gold-deep);text-decoration:none}
.post-card p{font-size:.93rem;color:var(--muted);margin:0 0 1.1rem}
.post-card__more{margin-top:auto;font-size:.88rem;font-weight:600;color:var(--green)}
.post-card--wide{grid-column:span 3;flex-direction:row}
.post-card--wide .post-card__media{flex:0 0 44%;border-bottom:0;border-right:1px solid var(--line)}
.post-card--wide .post-card__media img{height:100%;aspect-ratio:auto;min-height:250px}
.post-card--wide .post-card__body{padding:clamp(22px,2.8vw,38px)}
.post-card--wide h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem);font-family:var(--font-display)}