/* Blog detail/index enhancements — Table of Contents, right sidebar, tags,
   meta row, related articles, share buttons. Kept as its own file since the
   existing assets/frontend/css/frontend.css wasn't included in the codebase
   handoff, so these rules are additive rather than edits to an unseen file.
   Feel free to fold these into frontend.css later using the same tokens. */

.gr-blog-detail-grid,
.gr-blog-index-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 40px;
    align-items: start;
}

@media (max-width: 900px) {
    .gr-blog-detail-grid,
    .gr-blog-index-grid {
        grid-template-columns: 1fr;
    }
}

.gr-blog-detail__img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    margin-bottom: 16px;
}

.gr-blog-detail__category-badge {
    display: inline-block;
    background: #15803d;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    text-decoration: none;
    margin-bottom: 12px;
    margin-right: 8px;
}

.gr-badge--gold {
    display: inline-block;
    background: #d97706;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 12px;
}

.gr-blog-detail__excerpt {
    font-size: 17px;
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 16px;
}

.gr-blog-detail__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
    color: #6b7280;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    padding: 12px 0;
    margin-bottom: 24px;
}

.gr-blog-detail__content {
    line-height: 1.75;
    font-size: 16px;
}

.gr-blog-detail__content h2 {
    margin-top: 2em;
    scroll-margin-top: 90px;
}

.gr-blog-detail__content h3 {
    margin-top: 1.5em;
    scroll-margin-top: 90px;
}

.gr-blog-detail__content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 14px;
}

.gr-blog-detail__content table th,
.gr-blog-detail__content table td {
    border: 1px solid #e5e7eb;
    padding: 8px 12px;
    text-align: left;
}

.gr-blog-detail__content table th {
    background: #f0fdf4;
}

.gr-blog-detail__tags {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

.gr-blog-detail__tags h5 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-bottom: 10px;
}

.gr-tag-pill {
    display: inline-block;
    background: #f3f4f6;
    color: #374151;
    font-size: 13px;
    padding: 5px 12px;
    border-radius: 999px;
    text-decoration: none;
    margin: 0 8px 8px 0;
}

.gr-tag-pill:hover {
    background: #e5e7eb;
}

.gr-blog-detail__share {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.gr-btn--sm {
    padding: 6px 14px;
    font-size: 13px;
}

.gr-blog-related {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid #e5e7eb;
}

.gr-blog-related h3 {
    margin-bottom: 16px;
}

.gr-blog-detail__author-link {
    color: #15803d;
    font-weight: 600;
    text-decoration: none;
}

.gr-blog-detail__author-link:hover {
    text-decoration: underline;
}

.gr-author-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #15803d;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
    text-transform: uppercase;
}

.gr-author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gr-author-avatar--lg {
    width: 88px;
    height: 88px;
    font-size: 34px;
}

.gr-author-card {
    display: flex;
    gap: 16px;
    margin-top: 32px;
    padding: 20px;
    background: #fafaf9;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.gr-author-card__label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-bottom: 4px;
}

.gr-author-card__name {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: #111827;
    text-decoration: none;
    margin-bottom: 6px;
}

a.gr-author-card__name:hover {
    color: #15803d;
}

.gr-author-card__bio {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.5;
    margin-bottom: 8px;
}

.gr-author-card__link {
    font-size: 13px;
    color: #15803d;
    font-weight: 600;
    text-decoration: none;
}

.gr-author-card__link:hover {
    text-decoration: underline;
}

.gr-author-header {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e5e7eb;
}

.gr-author-header h1 {
    margin-bottom: 4px;
}

.gr-author-header__count {
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 10px;
}

.gr-author-header__bio {
    color: #374151;
    line-height: 1.6;
    max-width: 640px;
}

.gr-blog-sidebar__box {
    background: #fafaf9;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    position: sticky;
    top: 90px;
}

.gr-blog-sidebar__box h4 {
    font-size: 15px;
    margin-bottom: 12px;
    color: #15803d;
}

.gr-blog-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gr-blog-toc li {
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.4;
}

.gr-blog-toc__lvl3 {
    padding-left: 14px;
}

.gr-blog-toc a {
    color: #374151;
    text-decoration: none;
}

.gr-blog-toc a:hover {
    color: #15803d;
    text-decoration: underline;
}

.gr-blog-topics {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gr-blog-topics li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid #e5e7eb;
    font-size: 14px;
}

.gr-blog-topics li:last-child {
    border-bottom: none;
}

.gr-blog-topics a {
    color: #374151;
    text-decoration: none;
}

.gr-blog-topics a:hover {
    color: #15803d;
}

.gr-blog-topics__count {
    background: #e5e7eb;
    color: #6b7280;
    font-size: 12px;
    padding: 1px 8px;
    border-radius: 999px;
}