/* Date: 2026-05-14 | Author: Alok Mani | File: assets/css/blog.css | Purpose: Blog-specific styling layered on top of Bootstrap and site theme. */

/* Backward-compatible blog aliases. Do not use raw colours below this point. */
:root{--blog-fg:var(--text-primary,var(--text));--blog-secondary:var(--text-secondary,var(--text-muted));--blog-muted:var(--text-muted);--blog-faint:var(--text-faint,var(--text-muted));--blog-accent:var(--brand-primary,var(--yellow));--blog-accent-hover:var(--brand-primary-hover,var(--yellow-hover));--blog-bg:var(--surface-page,var(--white));--blog-card-bg:var(--surface-card,var(--white));--blog-soft-bg:var(--surface-muted,var(--grey));--blog-code-bg:var(--surface-subtle,var(--grey));--blog-border:var(--border-subtle,var(--border));--blog-border-strong:var(--border-strong,var(--border));--blog-radius:var(--radius-sm,12px);--blog-shadow:var(--shadow-sm,var(--shadow));--blog-font-base:var(--font-base,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);--blog-fs-sm:var(--fs-sm,.875rem);--blog-fs-base:var(--fs-base,1rem);--blog-fs-md:var(--fs-md,1.075rem);--blog-fs-lg:var(--fs-lg,1.25rem);--blog-fs-xl:var(--fs-xl,1.5rem);--blog-fs-2xl:var(--fs-2xl,1.875rem);--blog-fs-3xl:var(--fs-3xl,2.25rem);--blog-fs-4xl:var(--fs-4xl,3rem);--blog-lh-tight:var(--lh-tight,1.15);--blog-lh-heading:var(--lh-heading,1.25);--blog-lh-body:var(--lh-body,1.65);--blog-lh-reading:var(--lh-blog,1.75);--blog-fw-regular:var(--fw-regular,400);--blog-fw-medium:var(--fw-medium,500);--blog-fw-semibold:var(--fw-semibold,600);--blog-fw-bold:var(--fw-bold,700);--blog-fw-black:var(--fw-black,800);}

/* Article shell */
.blog-article{max-width:760px;color:var(--blog-fg);font-family:var(--blog-font-base);}
.blog-article header h1{font-size:clamp(var(--blog-fs-2xl),4vw,var(--blog-fs-4xl));line-height:var(--blog-lh-tight);font-weight:var(--blog-fw-black);color:var(--blog-fg);margin-bottom:.75rem;}
.blog-article time{font-variant-numeric:tabular-nums;color:var(--blog-muted);font-size:var(--blog-fs-sm);}

/* Article body typography */
.blog-body{font-size:var(--blog-fs-md);line-height:var(--blog-lh-reading);color:var(--blog-secondary);}
.blog-body h1,.blog-body h2,.blog-body h3,.blog-body h4,.blog-body h5,.blog-body h6{color:var(--blog-fg);line-height:var(--blog-lh-heading);}
.blog-body h1{font-size:clamp(var(--blog-fs-2xl),4vw,var(--blog-fs-4xl));font-weight:var(--blog-fw-black);margin:2.5rem 0 1rem;}
.blog-body h2{font-size:var(--blog-fs-2xl);font-weight:var(--blog-fw-bold);margin:2.25rem 0 .75rem;}
.blog-body h3{font-size:var(--blog-fs-xl);font-weight:var(--blog-fw-semibold);margin:1.75rem 0 .5rem;}
.blog-body h4{font-size:var(--blog-fs-lg);font-weight:var(--blog-fw-semibold);margin:1.5rem 0 .5rem;}
.blog-body p,.blog-body ul,.blog-body ol{margin-bottom:1.1rem;}
.blog-body p{color:var(--blog-secondary);}
.blog-body ul,.blog-body ol{color:var(--blog-secondary);padding-left:1.35rem;}
.blog-body li{margin-bottom:.35rem;}
.blog-body strong{color:var(--blog-fg);font-weight:var(--blog-fw-bold);}
.blog-body em{color:var(--blog-secondary);}
.blog-body hr{border:0;border-top:1px solid var(--blog-border);margin:2rem 0;}

/* Links */
.blog-body a{color:var(--blog-fg);text-decoration:underline;text-decoration-color:var(--blog-accent);text-underline-offset:3px;text-decoration-thickness:2px;}
.blog-body a:hover{color:var(--blog-fg);background:var(--blog-accent);}

/* Media */
.blog-body img{max-width:100%;height:auto;border-radius:var(--blog-radius);margin:1rem 0;}
.blog-body figure{margin:1.5rem 0;}
.blog-body figcaption{font-size:var(--blog-fs-sm);color:var(--blog-muted);text-align:center;margin-top:.35rem;line-height:var(--blog-lh-body);}

/* Quote */
.blog-body blockquote{border-left:4px solid var(--blog-accent);padding:.25rem 0 .25rem 1rem;color:var(--blog-secondary);margin:1.25rem 0;}
.blog-body blockquote p{color:var(--blog-secondary);margin-bottom:.75rem;}
.blog-body blockquote p:last-child{margin-bottom:0;}

/* Code */
.blog-body code{background:var(--blog-code-bg);padding:.15em .4em;border-radius:4px;font-size:.92em;color:var(--blog-fg);}
.blog-body pre{background:var(--blog-code-bg);border:1px solid var(--blog-border);border-radius:var(--blog-radius);padding:1rem;overflow-x:auto;margin:1.25rem 0;color:var(--blog-fg);}
.blog-body pre code{background:transparent;padding:0;color:inherit;}

/* Tables */
.blog-body table{width:100%;border-collapse:collapse;margin:1.25rem 0;font-size:var(--blog-fs-base);color:var(--blog-secondary);}
.blog-body th,.blog-body td{border:1px solid var(--blog-border);padding:.5rem .75rem;text-align:left;vertical-align:top;}
.blog-body th{background:var(--blog-code-bg);color:var(--blog-fg);font-weight:var(--blog-fw-bold);}
.blog-body tr:nth-child(even) td{background:var(--blog-soft-bg);}

/* Blog cards */
.blog-card{transition:transform .15s ease,box-shadow .15s ease;color:var(--blog-fg);background:var(--blog-card-bg);}
.blog-card:hover{transform:translateY(-2px);box-shadow:var(--blog-shadow)!important;}
.blog-card .card-title{color:var(--blog-fg);margin-bottom:0;font-weight:var(--blog-fw-bold);}
.blog-card .blog-card-img{width:100%;height:200px;object-fit:cover;object-position:center;}
.blog-card .card-body{gap:.5rem;}
.blog-card .card-text{margin-bottom:0;color:var(--blog-secondary);}

/* Related posts */
.related-posts .card{color:var(--blog-fg);border:1px solid var(--blog-border);background:var(--blog-card-bg);transition:background .15s ease,border-color .15s ease;}
.related-posts .card:hover{background:var(--blog-soft-bg);border-color:var(--blog-border-strong);}
.related-posts .card-title{color:var(--blog-fg);}
.related-posts .card-text{color:var(--blog-secondary);}

/* Pagination */
.pagination .page-link{color:var(--blog-fg);border-color:var(--blog-border);background:var(--blog-card-bg);}
.pagination .page-link:hover{color:var(--blog-fg);background:var(--blog-soft-bg);border-color:var(--blog-border);}
.pagination .page-item.active .page-link{background:var(--blog-accent);border-color:var(--blog-accent);color:var(--blog-fg);}
.pagination .page-item.disabled .page-link{color:var(--blog-faint);background:var(--blog-soft-bg);border-color:var(--blog-border);}

/* Featured blog */
.blog-featured{background:var(--blog-card-bg);}
.blog-featured-media{position:relative;overflow:hidden;min-height:280px;background:var(--blog-soft-bg);}
.blog-featured-media .blog-featured-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* Industry pills */
.industry-pills .btn{border:1px solid var(--blog-border);background:var(--blog-card-bg);color:var(--blog-fg);}
.industry-pills .btn:hover{background:var(--blog-soft-bg);color:var(--blog-fg);border-color:var(--blog-border-strong);}
.industry-pills .btn.active{background:var(--blog-accent);border-color:var(--blog-accent);color:var(--blog-fg);font-weight:var(--blog-fw-semibold);}

/* Blog filters */
.blog-filters .form-select,.blog-filters .form-control{border-color:var(--blog-border);background-color:var(--blog-card-bg);color:var(--blog-fg);}
.blog-filters .form-select:focus,.blog-filters .form-control:focus{border-color:var(--blog-accent);box-shadow:none;}
.blog-filters .input-group-text{border-color:var(--blog-border);background:var(--blog-code-bg);color:var(--blog-muted);}

/* Popular topics */
.popular-topics .badge{border:1px solid var(--blog-border);cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease;color:var(--blog-fg);}
.popular-topics .badge:hover{background:var(--blog-accent)!important;color:var(--blog-fg);border-color:var(--blog-accent);}

/* Responsive */
@media(max-width:767.98px){.blog-article{max-width:100%;}.blog-body{font-size:var(--blog-fs-base);line-height:var(--blog-lh-body);}.blog-body h2{font-size:var(--blog-fs-xl);}.blog-body h3{font-size:var(--blog-fs-lg);}.blog-body table{font-size:var(--blog-fs-sm);}.blog-featured-media{min-height:200px;}}