/* src/styles/blog.css — extiende main.css + category.css */

/* ---------- Article prose ---------- */
.article-prose { font-size: 1.05rem; line-height: 1.75; color: #1F2E24; }
.article-prose h2 { font-family: 'Fraunces', serif; font-size: 1.5rem; font-weight: 600; margin-top: 2.2rem; margin-bottom: .8rem; scroll-margin-top: 6rem; }
.article-prose h3 { font-family: 'Fraunces', serif; font-size: 1.2rem; font-weight: 600; margin-top: 1.6rem; margin-bottom: .6rem; scroll-margin-top: 6rem; }
.article-prose p { margin-bottom: 1.1rem; }
.article-prose ul, .article-prose ol { margin: 0 0 1.1rem 1.3rem; display: flex; flex-direction: column; gap: .4rem; }
.article-prose ul { list-style: disc; }
.article-prose ol { list-style: decimal; }
.article-prose blockquote {
  border-left: 3px solid #2F6B4F; background: #EEF4EF; padding: 1rem 1.25rem;
  border-radius: 0 .75rem .75rem 0; margin: 1.5rem 0; font-style: italic; color: #1F2E24;
}
.article-prose strong { font-weight: 700; }

/* ---------- Tables ---------- */
.blog-table { width: 100%; border-collapse: collapse; margin: 1.2rem 0 1.6rem; font-size: .9rem; }
.blog-table th, .blog-table td { padding: .6rem .8rem; border: 1px solid rgba(22,36,28,0.1); text-align: left; }
.blog-table th { background: #F5F6F1; font-weight: 700; }
.blog-table tr:nth-child(even) td { background: rgba(22,36,28,0.02); }

/* ---------- TOC ---------- */
.article-toc { background: #fff; border-radius: 1rem; padding: 1.25rem; box-shadow: 0 2px 10px rgba(22,36,28,0.06); }
.article-toc-title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #6B7268; margin-bottom: .7rem; }
.article-toc a { display: block; font-size: .875rem; color: #3A493F; padding: .3rem 0; }
.article-toc a:hover { color: #255840; }
.article-toc a.toc-h3 { padding-left: .9rem; font-size: .82rem; color: #6B7268; }

/* ---------- Meta / author box ---------- */
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; font-size: .82rem; color: #6B7268; }
.article-meta-sep { color: rgba(22,36,28,0.2); }
.author-box { display: flex; gap: 1rem; background: #EEF4EF; border-radius: 1rem; padding: 1.25rem; margin: 2rem 0; }
.author-avatar { width: 3rem; height: 3rem; border-radius: 999px; flex: none; background: #2F6B4F; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: 'Fraunces', serif; }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid rgba(22,36,28,0.08); padding: 1rem 0; }
.faq-item:last-child { border-bottom: none; }
.faq-q { font-weight: 700; font-size: .95rem; color: #16241C; }
.faq-a { font-size: .9rem; color: #3A493F; margin-top: .5rem; line-height: 1.6; }

/* ---------- Rating widget ---------- */
.rating-stars { display: inline-flex; gap: .2rem; }
.rating-stars button { font-size: 1.5rem; line-height: 1; color: rgba(22,36,28,0.2); transition: color .12s ease, transform .12s ease; }
.rating-stars button.active, .rating-stars button:hover { color: #F0A73C; transform: scale(1.1); }
.rating-stars[data-locked="true"] button { cursor: default; }

/* ---------- Share buttons ---------- */
.share-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem;
  border-radius: 999px; background: #F5F6F1; color: #3A493F; transition: background-color .15s ease;
}
.share-btn:hover { background: #EEF4EF; color: #255840; }

/* ---------- Blog cards ---------- */
.blog-card { background: #fff; border-radius: 1.1rem; overflow: hidden; box-shadow: 0 2px 10px rgba(22,36,28,0.06); transition: transform .18s ease, box-shadow .18s ease; }
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -8px rgba(22,36,28,0.18); }
.blog-card-media { height: 11rem; }
.blog-card-body { padding: 1.1rem; }
.blog-card-cat { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #2F6B4F; }
.blog-card-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.1rem; margin-top: .4rem; line-height: 1.35; }
.blog-card-excerpt { font-size: .85rem; color: #6B7268; margin-top: .5rem; line-height: 1.5; }

.sidebar-post { display: flex; gap: .75rem; align-items: flex-start; padding: .6rem 0; }
.sidebar-post-num { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.3rem; color: rgba(47,107,79,0.3); flex: none; width: 1.6rem; }