/* Public blog pages (index, category, post) */
.blog-wrap { max-width: 1160px; margin: 0 auto; padding: 0 1rem; }
.blog-hero { padding: 10rem 0 3rem; text-align: center; }
.blog-hero h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 700; letter-spacing: -.02em; margin: 0 0 .75rem; }
.blog-hero p { color: var(--color-muted-foreground, #94a3b8); max-width: 42rem; margin: 0 auto; }
.blog-layout { padding-bottom: 5rem; }
.blog-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.blog-cats { width: 100%; max-width: 300px; }
@media (max-width: 575px) { .blog-cats { max-width: none; } }
.blog-search { margin-left: auto; width: 100%; max-width: 300px; }
@media (max-width: 575px) { .blog-search { max-width: none; margin-left: 0; } }
.blog-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
.blog-card { background: var(--color-card, #111); border: 1px solid var(--color-border, #2a2a2a); border-radius: 1rem; overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, border-color .2s; }
.blog-card:hover { transform: translateY(-3px); border-color: var(--color-primary, #F94184); }
.blog-card img, .blog-card .blog-noimg { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: var(--color-muted, #1f1f1f); }
.blog-card-body { padding: 1.25rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.blog-card h2, .blog-card h3 { font-size: 1.15rem; font-weight: 600; line-height: 1.35; margin: 0; }
.blog-card h2 a, .blog-card h3 a { color: inherit; text-decoration: none; }
.blog-card:hover h2 a, .blog-card:hover h3 a, .blog-card:focus-within h2 a, .blog-card:focus-within h3 a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.blog-card h2 a::after, .blog-card h3 a::after { content: ""; position: absolute; inset: 0; }
.blog-card { position: relative; }
.blog-meta { font-size: .8rem; color: var(--color-muted-foreground, #94a3b8); display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
.blog-excerpt { color: var(--color-muted-foreground, #94a3b8); font-size: .95rem; line-height: 1.6; margin: 0; }
.blog-card-cat { display: inline-block; font-size: .75rem; padding: .2rem .65rem; border-radius: 999px; border: 1px solid var(--color-border, #2a2a2a); }
.blog-chip { display: inline-block; font-size: .75rem; padding: .2rem .65rem; border-radius: 999px; border: 1px solid var(--color-border, #2a2a2a); color: inherit; text-decoration: none; position: relative; z-index: 1; }
.blog-chip:hover, .blog-chip.active { background: var(--color-primary, #F94184); border-color: var(--color-primary, #F94184); color: #fff; }
.blog-input { width: 100%; padding: .65rem .85rem; border-radius: .6rem; border: 1px solid var(--color-border, #2a2a2a); background: var(--color-input-background, transparent); color: inherit; font: inherit; }
.blog-input:focus-visible { outline: 2px solid var(--color-primary, #F94184); outline-offset: 1px; }
.blog-btn { display: inline-block; padding: .65rem 1.4rem; border: 0; border-radius: .6rem; background: var(--color-primary, #F94184); color: #fff; font-weight: 600; cursor: pointer; }
.blog-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.blog-pagination { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.blog-pagination a, .blog-pagination span { padding: .4rem .8rem; border: 1px solid var(--color-border, #2a2a2a); border-radius: .5rem; color: inherit; text-decoration: none; font-size: .9rem; }
.blog-pagination span[aria-current] { background: var(--color-primary, #F94184); border-color: var(--color-primary, #F94184); color: #fff; }
.blog-pagination .disabled { opacity: .4; }
/* article */
.blog-article { max-width: 760px; margin: 0 auto; padding: 0 1rem 4rem; }
.blog-article header { text-align: center; padding: 10rem 0 2rem; }
.blog-article h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.15; font-weight: 700; letter-spacing: -.02em; margin: .75rem 0 1rem; }
.blog-cover { width: 100%; height: auto; border-radius: 1rem; margin-bottom: 2rem; aspect-ratio: 1200/630; object-fit: cover; }
.blog-content { font-size: 1.075rem; line-height: 1.8; overflow-wrap: anywhere; }
.blog-content > * + * { margin-top: 1.1rem; }
.blog-content h2 { font-size: 1.7rem; margin-top: 2.2rem; font-weight: 700; }
.blog-content h3 { font-size: 1.35rem; margin-top: 1.8rem; font-weight: 600; }
.blog-content a { color: var(--color-primary, #F94184); text-decoration: underline; }
.blog-content ul, .blog-content ol { padding-left: 1.5rem; }
.blog-content ul { list-style: disc; } .blog-content ol { list-style: decimal; }
.blog-content blockquote { border-left: 4px solid var(--color-primary, #F94184); padding-left: 1rem; font-style: italic; color: var(--color-muted-foreground, #94a3b8); }
.blog-content img { max-width: 100%; height: auto; border-radius: .75rem; }
.blog-content pre { overflow-x: auto; padding: 1rem; border-radius: .6rem; background: var(--color-muted, #1f1f1f); }
.blog-content table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.blog-content th, .blog-content td { border: 1px solid var(--color-border, #2a2a2a); padding: .5rem .75rem; }
.blog-comments { margin-top: 2rem; border-top: 1px solid var(--color-border, #2a2a2a); padding-top: 2rem; } /* same 2rem above and below the line */
.blog-comment { padding: 1rem 0; border-bottom: 1px solid var(--color-border, #2a2a2a); }
.blog-comment .replies { margin: 1rem 0 0 1.25rem; padding-left: 1rem; border-left: 2px solid var(--color-border, #2a2a2a); }
.blog-comment p { margin: .35rem 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.blog-alert { padding: .8rem 1rem; border-radius: .6rem; border: 1px solid var(--color-primary, #F94184); margin-bottom: 1rem; }
.blog-error { color: #f87171; font-size: .85rem; }
.blog-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.blog-preview { background: #b45309; color: #fff; text-align: center; padding: .5rem; font-size: .9rem; position: relative; z-index: 5; }
.blog-count { display: inline-block; min-width: 1.4em; margin-left: .25rem; padding: 0 .35em; border-radius: 999px; background: rgba(128, 128, 128, .25); font-size: .7rem; line-height: 1.5; text-align: center; }
.blog-chip.active .blog-count, .blog-chip:hover .blog-count { background: rgba(255, 255, 255, .3); }

/* category <select>: same radius, font and height as the search field */
.blog-cats select,
.blog-search input {
    border-radius: var(--radius-2xl, 1rem);
    font-size: var(--text-base, 1rem);
    font-weight: 400;
    line-height: 1.5;
}
.blog-cats select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.1rem;
}

/* blog cards built on the media gallery card markup */
.blog-card-title { font-size: 1.15rem; font-weight: 600; line-height: 1.35; margin: 0; }
.blog-card-title a { color: inherit; text-decoration: none; }
.blog-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.blog-card:hover .blog-card-title a, .blog-card:focus-within .blog-card-title a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ── single post page ─────────────────────────────────────────── */
.blog-post-grid { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) {
    .blog-post-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .blog-post-grid > article { grid-column: span 8; }
    .blog-post-grid > .blog-post-sidebar { grid-column: span 4; }
}
.blog-post-sidebar { display: none; }
@media (min-width: 992px) {
    /* the sidebar fills the row so the sticky table of contents can travel down it */
    .blog-post-sidebar { display: block; align-self: stretch; }
    .blog-post-sidebar .blog-toc-desktop { position: sticky; top: 7rem; max-height: calc(100vh - 9rem); overflow-y: auto; }
}
/* .section is overflow:hidden, which breaks position:sticky; clip crops the same way without a scroll container */
#blog-post { overflow: clip; }
.blog-post-sidebar .blog-box + .blog-box { margin-top: 1.5rem; }
.blog-box { background: var(--color-card, #111); border: 1px solid var(--color-border, #2a2a2a); border-radius: 1rem; padding: 1.25rem; margin-bottom: 1.5rem; }
.blog-box h2 { font-size: 1rem; font-weight: 600; margin: 0 0 .85rem; line-height: 1.4; }
.blog-toc-mobile { display: block; }
@media (min-width: 992px) { .blog-toc-mobile { display: none; } }
.blog-toc-mobile summary { cursor: pointer; font-weight: 600; }
.blog-toc-list { list-style: disc; margin: .75rem 0 0; padding: 0 0 0 1.1rem; display: grid; gap: .45rem; font-size: .92rem; }
.blog-toc-list li::marker { color: var(--color-primary, #F94184); }
.blog-toc-l3 { margin-left: 1rem; list-style-type: circle; }
.blog-toc-list a { color: inherit; text-decoration: none; opacity: .8; }
.blog-toc-list a:hover, .blog-toc-list a.active { color: var(--color-primary, #F94184); opacity: 1; }
.blog-toc-list a.active { font-weight: 600; }
.blog-side-list { list-style: disc; margin: 0; padding: 0 0 0 1.1rem; display: grid; gap: .5rem; }
.blog-side-list li::marker { color: var(--color-primary, #F94184); }
.blog-side-list a { display: inline-flex; align-items: center; gap: .5rem; color: inherit; text-decoration: none; } /* count sits right next to the name */
.blog-side-list a:hover, .blog-side-list a.active { color: var(--color-primary, #F94184); }
.blog-share { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--color-border, #2a2a2a); } /* same 2rem above and below the line */
.blog-share button.blog-chip { background: transparent; cursor: pointer; font: inherit; font-size: .75rem; }
.blog-share button.blog-chip:hover, .blog-share button.blog-chip:focus-visible { background: var(--color-primary, #F94184); border-color: var(--color-primary, #F94184); color: #fff; }
.blog-content h2, .blog-content h3 { scroll-margin-top: 7rem; line-height: 1.3; letter-spacing: 0; }
.blog-comment-card { background: var(--color-card, #111); border: 1px solid var(--color-border, #2a2a2a); border-radius: 1rem; padding: 1.25rem; margin-bottom: 1rem; }
.blog-comment-card > p, .blog-comment-reply > p { margin: .75rem 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.blog-comment-reply { margin: 1rem 0 0 1rem; padding: 1rem; border-left: 3px solid var(--color-primary, #F94184); background: rgba(128, 128, 128, .08); border-radius: .75rem; }
.blog-comment-head { display: flex; align-items: center; gap: .75rem; }
.blog-avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--color-primary, #F94184); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.blog-alert-error { padding: .8rem 1rem; border-radius: .75rem; border: 1px solid #f87171; color: #f87171; margin-bottom: 1rem; }
.blog-related { margin-top: 5rem; }

/* related posts: compact list in the sidebar (desktop), card grid at the bottom (mobile/tablet) */
.blog-related-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.blog-related-list a { display: flex; gap: .75rem; align-items: center; color: inherit; text-decoration: none; }
.blog-related-list img, .blog-related-noimg { width: 84px; height: 60px; border-radius: .6rem; object-fit: cover; flex: none; background: var(--color-muted, #1f1f1f); display: block; }
.blog-related-list strong { display: block; font-size: .9rem; line-height: 1.35; font-weight: 600; }
.blog-related-list small { display: block; margin-top: .2rem; opacity: .7; font-size: .75rem; }
.blog-related-list a:hover strong { color: var(--color-primary, #F94184); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (min-width: 992px) { .blog-related-bottom { display: none; } }

/* authors */
.blog-author-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.blog-author-link:hover { color: var(--color-primary, #F94184); }
.blog-author-photo-lg { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin: 0 auto 1.25rem; display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.blog-author-box { display: flex; gap: 1.25rem; align-items: flex-start; margin-top: 2.5rem; padding: 1.5rem; background: var(--color-card, #111); border: 1px solid var(--color-border, #2a2a2a); border-radius: 1rem; }
.blog-author-photo { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; flex: none; font-size: 1.75rem; display: inline-flex; align-items: center; justify-content: center; }
.blog-author-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; opacity: .7; margin: 0; }
.blog-author-name { font-size: 1.25rem; font-weight: 700; margin: .1rem 0 0; line-height: 1.3; }
.blog-author-name a { color: inherit; text-decoration: none; }
.blog-author-name a:hover { color: var(--color-primary, #F94184); }
.blog-author-role { margin: .1rem 0 0; font-size: .9rem; opacity: .8; }
.blog-author-bio { margin: .75rem 0 0; font-size: .95rem; line-height: 1.6; }
.blog-author-links { margin: .85rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.blog-social-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--color-border, #2a2a2a); color: inherit; text-decoration: none; transition: background .2s, border-color .2s, color .2s; }
.blog-social-icon svg { width: 1.05rem; height: 1.05rem; }
.blog-social-icon:hover, .blog-social-icon:focus-visible { background: var(--color-primary, #F94184); border-color: var(--color-primary, #F94184); color: #fff; }
@media (max-width: 575px) { .blog-author-box { flex-direction: column; } }

/* byline avatar in the post header */
.blog-byline { display: inline-flex; align-items: center; gap: .5rem; }
.blog-byline-img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; }
.blog-byline-icon { display: inline-flex; align-items: center; justify-content: center; background: rgba(128, 128, 128, .25); color: inherit; }

/* author page (same look as the leader details page) */
@keyframes float-dot { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.photo-wrap img { transition: transform .7s cubic-bezier(.4, 0, .2, 1); }
.photo-wrap:hover img { transform: scale(1.05); }
.stat-card { transition: border-color .3s, background .3s; }
.stat-card:hover { border-color: rgba(249, 65, 132, .3); background: rgba(249, 65, 132, .03); }
.skill-tag { transition: border-color .2s, color .2s, background .2s; text-decoration: none; }
.skill-tag:hover { border-color: rgba(249, 65, 132, .5); color: rgba(249, 65, 132, .9); background: rgba(249, 65, 132, .04); }
.description p { margin-bottom: 1.25rem; line-height: 1.85; }
.blog-portrait-initial { width: 100%; height: 100%; border-radius: 0; font-size: 5rem; display: flex; align-items: center; justify-content: center; }
.blog-bio-initial { display: flex; align-items: center; justify-content: center; font-size: 8rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--color-primary, #F94184), #3D1460); }
#read-bio { overflow: clip; } /* .section is overflow:hidden, which would stop the sticky photo card from sticking */