/* Blog module styles — index/archive cards, single post, pagination. */

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 1rem 0 2rem;
}

.blog-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow .15s ease, transform .15s ease;
}
.blog-card:hover {
    box-shadow: 0 6px 24px rgba(20, 23, 28, .08);
    transform: translateY(-2px);
}
.blog-card-img img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.blog-card-body { padding: 1rem 1.1rem 1.2rem; }
.blog-card-body h2 { font-size: 1.15rem; line-height: 1.35; margin: .4rem 0 .5rem; }
.blog-card-body h2 a { color: #14171c; text-decoration: none; }
.blog-card-body h2 a:hover { color: var(--primary); }
.blog-card-body p { color: #51596b; font-size: .95rem; margin: 0 0 .6rem; }

.blog-meta { color: #8a93a6; font-size: .85rem; }
/* Meta links (category, author) take the theme accent (global default) but read as
   clean inline links, underlining only on hover. */
.blog-meta a { text-decoration: none; }
.blog-meta a:hover { text-decoration: underline; }
.blog-post-meta { margin-bottom: 1rem; }

.blog-chip {
    display: inline-block;
    background: var(--primary-tint);
    color: var(--primary);
    font-size: .78rem;
    font-weight: 600;
    padding: .2rem .6rem;
    border-radius: 999px;
    text-decoration: none;
    margin-right: .35rem;
}
.blog-chip:hover { background: var(--primary-tint); }

.blog-readmore { color: var(--primary); font-weight: 600; text-decoration: none; font-size: .9rem; }
.blog-readmore:hover { text-decoration: underline; }

.blog-hero {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 630; /* reserve the box before load → no CLS */
    max-height: 420px;
    object-fit: cover;
    border-radius: 12px;
    margin: 0 0 1.5rem;
}

.blog-body { line-height: 1.75; color: #2b303a; font-size: 1.02rem; }
.blog-body h2, .blog-body h3 { margin-top: 1.8rem; }
.blog-body img { max-width: 100%; height: auto; border-radius: 8px; }
.blog-body p { margin: 0 0 1.1rem; }
/* The global `* { padding: 0 }` reset zeroes list padding, so markers fell outside
   the content box (bullets/numbers overflowed to the left). Restore indent + spacing. */
.blog-body ul,
.blog-body ol { margin: 0 0 1.25rem; padding-left: 1.5rem; }
.blog-body li { margin-bottom: 0.5rem; }
.blog-body li > ul,
.blog-body li > ol { margin: 0.4rem 0 0.4rem; }
/* In-article links follow the active theme accent (not the UA default blue),
   underlined so they stay obviously clickable on any canvas. */
.blog-body a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.blog-body a:hover { color: var(--primary-dark); }
/* In-content tables (comparison grids etc.). Theme-aware: borders and the header
   tint are mixed from the active accent so the table sits on any canvas (incl. the
   warm-paper themes) instead of a cool-grey island. Rounded via separate borders. */
.blog-body table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 1.75rem 0;
    font-size: 0.97rem;
    border: 1px solid color-mix(in srgb, var(--primary) 22%, #d7dce3);
    border-radius: 10px;
    overflow: hidden;
}
/* Phones: the table scrolls inside itself rather than widening the page. */
@media (max-width: 768px) {
    .blog-body table { display: block; max-width: 100%; overflow-x: auto; }
}
.blog-body th,
.blog-body td {
    padding: 0.7rem 0.95rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 14%, #e6e8ec);
}
.blog-body th:not(:last-child),
.blog-body td:not(:last-child) {
    border-right: 1px solid color-mix(in srgb, var(--primary) 11%, #edf0f4);
}
.blog-body thead th {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary-dark);
    font-weight: 600;
    border-bottom: 2px solid color-mix(in srgb, var(--primary) 28%, #e6e8ec);
}
.blog-body tbody tr:nth-child(even) { background: color-mix(in srgb, var(--primary) 4%, transparent); }
.blog-body tbody tr:last-child td { border-bottom: none; }

.blog-tags { margin: 1.8rem 0 0; }
.blog-back { margin-top: 2rem; }
.blog-back a, .blog-tags a { text-decoration: none; }
.blog-back a { color: var(--primary); }
.blog-back a:hover { color: var(--primary-dark); text-decoration: underline; }

/* Category landing page intro (hero image + description) */
.blog-category-intro { margin: 0 0 2rem; }
.blog-category-desc {
    color: #4a5160;
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 760px;
    margin: 0;
}

.blog-empty { color: #8a93a6; padding: 2rem 0; }

/* Featured "pillar" card at the top of a hub (category) landing */
.blog-featured {
    display: flex;
    gap: 1.5rem;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 12px;
    overflow: hidden;
    margin: 0 0 2rem;
    transition: box-shadow .15s ease;
}
.blog-featured:hover { box-shadow: 0 6px 24px rgba(20, 23, 28, .08); }
.blog-featured-img { flex: 0 0 44%; display: block; }
.blog-featured-img img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.blog-featured-body { padding: 1.4rem 1.6rem; display: flex; flex-direction: column; }
.blog-featured-tag {
    align-self: flex-start;
    background: var(--primary);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .2rem .6rem;
    border-radius: 999px;
    margin-bottom: .6rem;
}
.blog-featured-body h2 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 .5rem; }
.blog-featured-body h2 a { color: #14171c; text-decoration: none; }
.blog-featured-body h2 a:hover { color: var(--primary); }
.blog-featured-body p { color: #51596b; margin: 0 0 .8rem; }
@media (max-width: 640px) {
    .blog-featured { flex-direction: column; gap: 0; }
    .blog-featured-img { flex-basis: auto; }
}

/* "More in {Category}" hub↔spoke related block on a single post */
.blog-related {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e6e8ec;
}
.blog-related h2 { font-size: 1.25rem; margin: 0 0 .5rem; }
.blog-hub-more { font-size: 1.15rem; margin: 0 0 .25rem; color: #2b303a; }

.blog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 1.5rem 0;
}
.blog-pagination a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    padding: .4rem .8rem;
    border: 1px solid #e6e8ec;
    border-radius: 8px;
}
.blog-pagination a:hover { background: #f4f6fb; }
.blog-page-info { color: #8a93a6; font-size: .9rem; }

/* Heading anchors: offset jump-to scroll so it clears the sticky header. */
.blog-body h2, .blog-body h3 { scroll-margin-top: calc(var(--header-h) + 1rem); }

/* Table of contents — shown on long guides (>=3 H2s). Structural navigation
   that also powers Google passage links + AI passage extraction. */
.blog-toc {
    background: #f7f9fc;
    border: 1px solid #e6e8ec;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin: 0 0 1.75rem;
}
.blog-toc-title {
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8a93a6;
    margin: 0 0 .5rem;
}
.blog-toc ul { list-style: none; margin: 0; padding: 0; }
.blog-toc li { margin: .3rem 0; }
.blog-toc li.blog-toc-sub { margin-left: 1rem; }
.blog-toc a { color: var(--primary); text-decoration: none; font-size: .95rem; }
.blog-toc a:hover { text-decoration: underline; }

/* Author E-E-A-T block on /blog/author/{id}. */
.blog-author-bio {
    background: #f7f9fc;
    border: 1px solid #e6e8ec;
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin: 0 0 1.75rem;
    color: #2b303a;
    line-height: 1.65;
}
.blog-author-bio p { margin: 0 0 .5rem; }
.blog-author-socials a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    margin-right: .75rem;
    font-size: .95rem;
}
.blog-author-socials a:hover { text-decoration: underline; }

/* ============================================================
   Content-hub category page (pillar hero + library + rail)
   ============================================================ */
.blog-hub-lede{ color:#51596b; font-size:1.05rem; line-height:1.55; max-width:640px; margin:.25rem 0 1.6rem; }

.blog-hub-grid{ display:grid; grid-template-columns:1fr 320px; gap:2rem; align-items:start; }
.blog-hub-main{ min-width:0; }

.blog-hub-lib-title{ font-size:1.2rem; font-weight:800; color:#14171c; margin:2.2rem 0 .2rem; }
.blog-hub-lib-sub{ color:#8a93a6; font-size:.88rem; margin:0 0 1.1rem; }

.blog-hub-lib{ list-style:none; margin:0; padding:0; border-top:1px solid #e6e8ec; }
.blog-hub-lib li{ display:grid; grid-template-columns:44px 1fr; gap:.9rem; align-items:start;
                  padding:1.05rem .4rem; border-bottom:1px solid #e6e8ec; transition:background .12s ease; }
.blog-hub-lib li:hover{ background:#fafbff; }
.blog-hub-num{ font-size:1.35rem; font-weight:800; color:#c7cede; line-height:1.15; text-align:center; }
.blog-hub-lib li:hover .blog-hub-num{ color:var(--primary); }
.blog-hub-libbody h3{ font-size:1.06rem; margin:.05rem 0 .25rem; line-height:1.3; }
.blog-hub-libbody h3 a{ color:#14171c; text-decoration:none; }
.blog-hub-libbody h3 a:hover{ color:var(--primary); }
.blog-hub-libbody p{ margin:0 0 .35rem; color:#51596b; font-size:.92rem; line-height:1.5; }
.blog-hub-libmeta{ color:#8a93a6; font-size:.78rem; }

.blog-hub-rail{ position:sticky; top:calc(var(--header-h) + 1rem); display:flex; flex-direction:column; gap:1.25rem; }
.blog-hub-card{ background:#fff; border:1px solid #e6e8ec; border-radius:12px; padding:1.1rem 1.2rem; }
.blog-hub-card h4{ margin:0 0 .8rem; font-size:.75rem; font-weight:800; letter-spacing:.1em;
                   text-transform:uppercase; color:#8a93a6; }

.blog-hub-jump{ list-style:none; margin:0; padding:0; }
.blog-hub-jump a{ display:flex; gap:.55rem; align-items:baseline; text-decoration:none; color:#51596b;
                  font-size:.92rem; padding:.32rem 0; line-height:1.35; }
.blog-hub-jump a:hover{ color:var(--primary); }
.blog-hub-dot{ color:#c7cede; font-size:1rem; line-height:1; }
.blog-hub-jump a.blog-hub-cur{ color:var(--primary); font-weight:700; }
.blog-hub-jump a.blog-hub-cur .blog-hub-dot{ color:var(--primary); }

.blog-hub-tools{ list-style:none; margin:0; padding:0; }
.blog-hub-tools li{ margin:.35rem 0; }
.blog-hub-tools a{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:#2b303a;
                   font-size:.92rem; font-weight:600; background:var(--primary-tint); border-radius:9px; padding:.55rem .7rem; }
.blog-hub-tools a:hover{ background:var(--primary-tint); color:var(--primary); }
.blog-hub-ic{ width:22px; height:22px; flex:0 0 22px; border-radius:6px; background:var(--primary);
              color:#fff; font-size:.72rem; font-weight:800; display:flex; align-items:center; justify-content:center; }

@media (max-width:900px){
    .blog-hub-grid{ grid-template-columns:1fr; gap:1.5rem; }
    .blog-hub-rail{ position:static; }
}