/* ═══════════════════════════════════════
   CALCDESK — Blog Styles
═══════════════════════════════════════ */

/* Blog index hero */
.blog-hero { background: var(--ink); color: var(--paper); padding: var(--space-6) 0; border-bottom: 3px solid var(--accent); }
.blog-hero h1 { font-size: clamp(2rem,5vw,3rem); margin: 0 0 var(--space-2); }
.blog-hero p { opacity: .75; font-size: 1.1rem; max-width: 50ch; margin: 0; }

/* Blog index grid */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(320px,1fr)); gap: var(--space-4); margin: var(--space-5) 0; }
.blog-card { background: white; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s, border-color .15s; }
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--accent); text-decoration: none; }
.blog-card-body { padding: var(--space-3); flex: 1; display: flex; flex-direction: column; }
.blog-card-cat { font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); background: rgba(79,124,172,.1); padding: .2rem .6rem; border-radius: 3px; display: inline-block; margin-bottom: var(--space-2); }
.blog-card h2 { font-size: 1.05rem; margin: 0 0 var(--space-2); line-height: 1.3; }
.blog-card p { font-size: .9rem; color: var(--slate); margin: 0 0 var(--space-3); line-height: 1.6; flex: 1; }
.blog-card-meta { font-family: var(--font-mono); font-size: .75rem; color: var(--slate-light); display: flex; gap: var(--space-2); }
.blog-card-thumb { width: 100%; height: 160px; background: linear-gradient(135deg, var(--ink) 0%, #3D362F 100%); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.blog-card-thumb-icon { font-size: 3rem; opacity: .15; font-family: var(--font-mono); font-weight: 700; color: var(--paper); }
.blog-card-thumb-accent { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--accent); }
.blog-card-thumb.health { background: linear-gradient(135deg, #1a3a2a 0%, #2d5a3d 100%); }
.blog-card-thumb.health .blog-card-thumb-accent { background: var(--good); }
.blog-card-thumb.everyday { background: linear-gradient(135deg, #2a1a0a 0%, #5a3d1a 100%); }
.blog-card-thumb.everyday .blog-card-thumb-accent { background: var(--accent-warm); }

/* Category filter */
.blog-filter { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }
.blog-filter-btn { font-family: var(--font-mono); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .45rem 1rem; border-radius: var(--radius-sm); border: 1.5px solid var(--line); background: white; color: var(--slate); cursor: pointer; transition: all .15s; }
.blog-filter-btn:hover,.blog-filter-btn.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Article header */
.blog-article-header { background: var(--ink); color: var(--paper); padding: var(--space-6) 0 var(--space-5); margin-bottom: var(--space-5); }
.blog-article-header .breadcrumb a { color: rgba(247,244,237,.6); }
.blog-article-header .breadcrumb { color: rgba(247,244,237,.5); margin-bottom: var(--space-3); }
.blog-article-meta { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap; }
.blog-cat-badge { font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink); background: var(--accent); padding: .25rem .7rem; border-radius: 3px; font-weight: 700; }
.blog-meta-sep { opacity: .3; }
.blog-article-header h1 { font-size: clamp(1.8rem,4vw,2.8rem); margin: 0 0 var(--space-3); line-height: 1.1; max-width: 20ch; }
.blog-intro { font-size: 1.15rem; opacity: .8; max-width: 55ch; margin: 0; line-height: 1.7; }

/* Article body layout */
.blog-article-body { display: grid; grid-template-columns: 1fr 280px; gap: var(--space-5); align-items: start; padding-top: 0; }
@media(max-width:900px) { .blog-article-body { grid-template-columns: 1fr; } .blog-sidebar { display: none; } }

/* Article content typography */
.blog-content-col h2 { font-size: 1.4rem; color: var(--ink); margin-top: var(--space-5); margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 2px solid var(--line); }
.blog-content-col h3 { font-size: 1.1rem; color: var(--ink); margin-top: var(--space-4); margin-bottom: var(--space-2); }
.blog-content-col p { color: var(--slate); line-height: 1.8; font-size: 1rem; margin-bottom: var(--space-3); }
.blog-content-col ul,.blog-content-col ol { color: var(--slate); line-height: 1.8; font-size: 1rem; margin-bottom: var(--space-3); padding-left: 1.5rem; }
.blog-content-col li { margin-bottom: .5rem; }
.blog-content-col strong { color: var(--ink); }
.blog-content-col table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: var(--space-4) 0; }
.blog-content-col table th { background: var(--ink); color: var(--paper); padding: .7rem 1rem; text-align: left; font-family: var(--font-mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.blog-content-col table td { padding: .65rem 1rem; border-bottom: 1px solid var(--line); }
.blog-content-col table tr:last-child td { border-bottom: none; }
.blog-content-col table tr:nth-child(even) td { background: var(--paper-dim); }
.blog-content-col a { color: var(--accent); text-decoration: underline; }
.blog-content-col blockquote { border-left: 4px solid var(--accent); padding: var(--space-3) var(--space-4); background: rgba(79,124,172,.06); margin: var(--space-4) 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.blog-content-col blockquote p { color: var(--ink); font-style: italic; margin: 0; font-size: 1.05rem; }

/* Key takeaway box */
.key-takeaway { background: var(--paper-dim); border: 1px solid var(--line); border-left: 4px solid var(--accent-warm); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: var(--space-3) var(--space-4); margin: var(--space-4) 0; }
.key-takeaway-label { font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--accent-warm); font-weight: 700; margin-bottom: var(--space-1); }
.key-takeaway p { margin: 0; color: var(--ink); font-size: .95rem; }

/* CTA box */
.blog-cta-box { background: var(--ink); color: var(--paper); border-radius: var(--radius-md); padding: var(--space-4); margin: var(--space-5) 0; text-align: center; }
.blog-cta-label { font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; color: var(--accent); margin-bottom: var(--space-2); }
.blog-cta-box h3 { font-size: 1.3rem; margin: 0 0 var(--space-2); }
.blog-cta-box p { opacity: .7; margin: 0 0 var(--space-3); font-size: .9rem; }
.blog-cta-btn { display: inline-block; font-family: var(--font-mono); font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: var(--accent); color: var(--paper); padding: .75rem 2rem; border-radius: var(--radius-sm); text-decoration: none; transition: background .15s; }
.blog-cta-btn:hover { background: var(--accent-dark); text-decoration: none; }

/* Tags */
.blog-tags { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.blog-tag { font-family: var(--font-mono); font-size: .75rem; padding: .25rem .7rem; border: 1px solid var(--line); border-radius: 3px; color: var(--slate); background: var(--paper-dim); }

/* Sidebar */
.blog-sidebar { position: sticky; top: 76px; }
.blog-sidebar-widget { background: white; border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3); margin-top: var(--space-3); }
.blog-sidebar-widget h4 { font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); margin: 0 0 var(--space-2); }
.blog-sidebar-widget ul { list-style: none; padding: 0; margin: 0; }
.blog-sidebar-widget li { border-bottom: 1px solid var(--line); }
.blog-sidebar-widget li:last-child { border-bottom: none; }
.blog-sidebar-widget a { display: block; padding: .5rem 0; font-size: .88rem; color: var(--ink); text-decoration: none; transition: color .15s; }
.blog-sidebar-widget a:hover { color: var(--accent); }

/* Related posts */
.blog-related { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 2px solid var(--line); }
.blog-related h2 { font-size: 1.4rem; margin-bottom: var(--space-4); }
.related-posts-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: var(--space-3); }
.related-post-card { background: white; border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3); text-decoration: none; color: var(--ink); transition: transform .15s, box-shadow .15s, border-color .15s; display: block; }
.related-post-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--accent); text-decoration: none; }
.related-post-cat { font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); display: block; margin-bottom: var(--space-1); }
.related-post-card h4 { font-size: .95rem; margin: 0 0 var(--space-1); line-height: 1.3; }
.related-post-meta { font-family: var(--font-mono); font-size: .72rem; color: var(--slate-light); }

/* Number highlight */
.stat-highlight { display: inline-block; font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--accent); line-height: 1; }

/* Blog index featured */
.blog-featured { background: white; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; margin-bottom: var(--space-5); text-decoration: none; color: var(--ink); transition: box-shadow .15s; }
.blog-featured:hover { box-shadow: var(--shadow-lift); text-decoration: none; }
@media(max-width:700px) { .blog-featured { grid-template-columns: 1fr; } }
.blog-featured-thumb { background: linear-gradient(135deg, var(--ink) 0%, #3D362F 100%); min-height: 260px; display: flex; align-items: center; justify-content: center; position: relative; }
.blog-featured-thumb-text { font-family: var(--font-mono); font-size: 4rem; font-weight: 700; color: rgba(79,124,172,.25); }
.blog-featured-body { padding: var(--space-5); display: flex; flex-direction: column; justify-content: center; }
.blog-featured-body .blog-card-cat { margin-bottom: var(--space-3); }
.blog-featured-body h2 { font-size: 1.5rem; margin: 0 0 var(--space-3); }
.blog-featured-body p { color: var(--slate); line-height: 1.7; margin: 0 0 var(--space-3); }
.blog-featured-body .blog-card-meta { margin-top: auto; }

/* TABLE OF CONTENTS */
.toc-box{background:var(--paper-dim);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:0 var(--radius-md) var(--radius-md) 0;padding:var(--space-3) var(--space-4);margin:var(--space-4) 0}
.toc-box-label{font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--accent);font-weight:700;margin-bottom:var(--space-2)}
.toc-box ol{margin:0;padding-left:1.2rem;counter-reset:none}
.toc-box li{margin-bottom:.35rem;font-size:.92rem}
.toc-box a{color:var(--ink);text-decoration:none;transition:color .15s}
.toc-box a:hover{color:var(--accent)}

/* AUTHOR BOX */
.author-box{display:flex;align-items:flex-start;gap:var(--space-3);background:white;border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-3);margin:var(--space-5) 0 0}
.author-avatar{width:52px;height:52px;border-radius:50%;background:var(--ink);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--font-mono);font-weight:700;font-size:1.1rem;color:var(--accent)}
.author-info h4{font-size:.95rem;margin:0 0 .25rem;font-family:var(--font-display)}
.author-info p{font-size:.85rem;color:var(--slate);margin:0;line-height:1.6}
.author-label{font-family:var(--font-mono);font-size:.65rem;text-transform:uppercase;letter-spacing:.12em;color:var(--slate-light);display:block;margin-bottom:.2rem}

/* LAST UPDATED badge on calc pages */
.last-updated{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:.72rem;color:var(--slate-light);margin-top:var(--space-2)}
.last-updated-dot{width:6px;height:6px;border-radius:50%;background:var(--good);flex-shrink:0}

/* SHARE BOX */
.share-box{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) 0;margin:var(--space-3) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.share-label{font-family:var(--font-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--slate-light);margin-right:auto}
.share-btn{font-family:var(--font-mono);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:.4rem .9rem;border-radius:var(--radius-sm);border:1.5px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;text-decoration:none;transition:all .15s;display:inline-block}
.share-btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);text-decoration:none}