/* =========================================================
   HONEYFIL — BLOG STYLESHEET
   ========================================================= */

.reading-progress { position: fixed; top: 0; left: 0; height: 4px; width: 0%; background: var(--gold-grad); z-index: 1001; transition: width .1s linear; }

.breadcrumbs { padding: 20px 0 0; font-size: 14.5px; color: #6b6b6b; }
.breadcrumbs a { color: var(--gold-ink); font-weight: 600; }
.breadcrumbs span[aria-hidden] { margin: 0 8px; color: #b8b8b8; }
.breadcrumbs .current { color: var(--ink); }

.article-hero { padding: 32px 0 40px; }
.article-hero .article-tag { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-ink); background: var(--tint); padding: 6px 14px; border-radius: 999px; margin-bottom: 16px; }
.article-hero h1 { font-size: clamp(30px, 4.4vw, 46px); margin-bottom: 18px; }
.article-meta { display: flex; flex-wrap: wrap; gap: 18px; font-size: 15px; color: #555; margin-bottom: 28px; }
.article-hero img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-light); max-height: 420px; object-fit: cover; }

.article-layout { display: grid; grid-template-columns: 240px 1fr; gap: 56px; align-items: start; padding: 20px 0 60px; }
.toc-wrap { position: sticky; top: 96px; background: var(--off-white); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 22px; }
.toc-wrap h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); margin-bottom: 14px; }
.toc-wrap ol { display: flex; flex-direction: column; gap: 10px; counter-reset: toc; }
.toc-wrap li { font-size: 15px; }
.toc-wrap a { color: #444; font-weight: 500; }
.toc-wrap a:hover, .toc-wrap a.active { color: var(--gold-ink); }

.article-body h2 { margin-top: 44px; scroll-margin-top: 100px; }
.article-body h3 { margin-top: 30px; scroll-margin-top: 100px; }
.article-body p { font-size: 18px; line-height: 1.75; }
.article-body ul, .article-body ol { margin: 0 0 24px; padding-left: 24px; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { font-size: 18px; line-height: 1.75; margin-bottom: 10px; }
.article-body blockquote { border-left: 4px solid var(--gold); background: var(--off-white); padding: 20px 24px; border-radius: 0 var(--radius) var(--radius) 0; font-size: 18px; margin: 28px 0; }
.article-body strong { font-weight: 700; }

.inline-cta { background: var(--dark-grad); border-radius: var(--radius); padding: 40px 32px; text-align: center; margin: 44px 0; position: relative; overflow: hidden; }
.inline-cta img { max-width: 170px; margin: 0 auto 20px; border-radius: var(--radius); }
.inline-cta h3 { color: #fff; margin-bottom: 10px; }
.inline-cta p { color: rgba(255,255,255,.8); margin-bottom: 24px; font-size: 17px; }

.article-faq { margin-top: 48px; }
.article-faq h2 { margin-bottom: 20px; }

.prev-next { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--border-light); }
.prev-next a { display: block; padding: 20px; border: 1px solid var(--border-light); border-radius: var(--radius); font-size: 15px; }
.prev-next .dir-label { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--gold-ink); font-weight: 700; margin-bottom: 6px; }
.prev-next .next-post { text-align: right; }
.prev-next a:hover { border-color: var(--gold); }

.author-box { display: flex; gap: 16px; align-items: center; background: var(--off-white); border-radius: var(--radius); padding: 22px; margin-top: 40px; border: 1px solid var(--border-light); }
.author-box .avatar-badge { width: 52px; height: 52px; font-size: 20px; border-radius: 50%; background: var(--tint); color: var(--gold-ink); display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.author-box p { margin: 0; font-size: 15px; }
.author-box strong { display: block; font-size: 16.5px; margin-bottom: 2px; }

@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; }
  .toc-wrap { position: static; margin-bottom: 8px; }
  .prev-next { grid-template-columns: 1fr; }
  .prev-next .next-post { text-align: left; }
}

.blog-listing-hero { background: var(--dark-grad); padding: 64px 0 48px; text-align: center; position: relative; overflow: hidden; }
.blog-listing-hero::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 60px, rgba(255,217,2,.03) 60px 62px), repeating-linear-gradient(-115deg, transparent 0 60px, rgba(255,217,2,.03) 60px 62px); pointer-events: none; }
.blog-listing-hero .container { position: relative; z-index: 1; }
.blog-listing-hero h1 { color: #fff; margin-bottom: 14px; }
.blog-listing-hero .lead { color: rgba(255,255,255,.8); max-width: 600px; margin: 0 auto; }
.blog-listing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 56px 0 80px; }
@media (max-width: 900px) { .blog-listing-grid { grid-template-columns: 1fr; } }


/* mobile-grid-overrides:managed */
@media (max-width:640px){
  .article-layout{grid-template-columns:1fr!important}
}