/* CRM360 — blog pages (index, posts, topics, authors) and the related-articles block. */

.wrap{max-width:1240px;margin:0 auto;padding:0 20px}
.wrap-narrow{max-width:760px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}
.blog-main{background:#FFFFFF}

/* ---- Breadcrumbs, eyebrow, tags ---- */
.crumbs{font-size:13px;color:#64748B;display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.crumbs a{color:#64748B}
.crumbs [aria-current]{color:#1E293B;font-weight:600}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#0B6FA4;display:flex;align-items:center;gap:10px;margin-bottom:18px}
.eyebrow span{width:18px;height:2px;background:currentColor}
.post-tags{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tag,.card-tag{display:inline-flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;text-decoration:none;color:#0B6FA4;border:1px solid #BAE6FD;background:#F0F9FF;border-radius:4px;padding:4px 9px}
.tag:hover{border-color:#0B6FA4;color:#0B6FA4}
.tag-titan{color:#047F80;border-color:#99F6E4;background:#E6FAFA}
.tag-titan:hover{border-color:#047F80;color:#047F80}

/* ---- Blog index / topic / author hero ---- */
.blog-hero{padding:clamp(40px,6vw,80px) 0 clamp(32px,5vw,56px);border-bottom:1px solid #E2E8F0;background:#F8FAFC}
.blog-hero h1{font-size:clamp(34px,5vw,58px);line-height:1.05;letter-spacing:-0.03em;font-weight:800;max-width:900px;text-wrap:balance;margin-bottom:18px}
.blog-intro{font-size:clamp(17px,1.5vw,19px);color:#334155;max-width:680px;margin-bottom:24px;text-wrap:pretty}
.blog-list{padding-top:clamp(36px,5vw,64px);padding-bottom:clamp(56px,8vw,104px)}
.blog-list > h2{font-size:clamp(24px,3vw,32px);font-weight:800;letter-spacing:-0.02em;margin-bottom:24px}
.empty{font-size:18px;color:#334155;max-width:680px}
.pager{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:40px;padding-top:20px;border-top:1px solid #E2E8F0;font-size:15px;font-weight:600}
.pager span{color:#64748B;font-weight:500}

/* ---- Cards ---- */
.card-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:20px}
.card{display:flex}
.card-link{flex:1;display:flex;flex-direction:column;gap:10px;padding:24px;background:#FFFFFF;border:1px solid #DCE3EB;border-top:3px solid #00A1E0;border-radius:8px;text-decoration:none;color:#1E293B;transition:border-color .15s,box-shadow .15s}
.card-link:hover{color:#1E293B;border-color:#94A3B8;box-shadow:0 12px 28px -18px rgba(15,23,42,0.35)}
.card-tag{align-self:flex-start}
.card:has(.tag-titan) .card-link{border-top-color:#00D2D3}
.card-title{font-size:20px;font-weight:800;line-height:1.25;letter-spacing:-0.01em;text-wrap:balance}
.card-desc{font-size:15px;color:#475569;line-height:1.6}
.card-meta{margin-top:auto;padding-top:8px;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;color:#64748B}

/* ---- Post ---- */
.post-head{padding:clamp(36px,5vw,72px) 0 clamp(24px,4vw,40px);background:#F8FAFC;border-bottom:1px solid #E2E8F0}
.post-head h1{font-size:clamp(32px,4.6vw,52px);line-height:1.08;letter-spacing:-0.03em;font-weight:800;text-wrap:balance;margin-bottom:18px}
.post-lead{font-size:clamp(18px,1.6vw,20px);line-height:1.6;color:#334155;margin-bottom:22px;text-wrap:pretty}
.post-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:#64748B}
.post-meta span + span::before{content:"·";margin-right:18px;margin-left:-12px;color:#CBD5E1}
.post-hero{margin-top:32px}
.post-hero img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid #E2E8F0}
.draft-flag{display:inline-block;margin-bottom:16px;padding:6px 12px;border:1.5px dashed #B45309;border-radius:6px;background:#FFFBEB;color:#92400E;font-size:13px;font-weight:700}

/* ---- Article typography ---- */
.prose{padding-top:clamp(28px,4vw,44px);font-size:18px;line-height:1.75;color:#1E293B}
.prose > * + *{margin-top:1.15em}
.prose h2{font-size:clamp(25px,2.8vw,32px);line-height:1.2;letter-spacing:-0.02em;font-weight:800;margin-top:2em}
.prose h3{font-size:clamp(20px,2.1vw,23px);line-height:1.3;font-weight:800;margin-top:1.7em}
.prose h2 + *,.prose h3 + *{margin-top:0.6em}
.prose p,.prose li{color:#334155}
.prose strong{color:#1E293B}
.prose a{color:#0B6FA4;font-weight:600;text-underline-offset:3px}
.prose ul,.prose ol{padding-left:1.4em}
.prose li + li{margin-top:0.45em}
.prose li::marker{color:#0B6FA4;font-weight:700}
.prose blockquote{margin-left:0;margin-right:0;padding:16px 20px;border-left:4px solid #00A1E0;background:#F0F9FF;border-radius:0 6px 6px 0;color:#1E293B}
.prose blockquote p{color:#1E293B}
.prose code{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:0.86em;background:#F1F5F9;border:1px solid #E2E8F0;border-radius:4px;padding:1px 6px}
.prose pre{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:14px;line-height:1.6;background:#0F172A;color:#E2E8F0;border-radius:8px;padding:18px 20px;overflow-x:auto}
.prose pre code{background:none;border:0;padding:0;font-size:inherit;color:inherit}
.prose img{display:block;max-width:100%;height:auto;border-radius:8px;border:1px solid #E2E8F0}
.prose figure figcaption{margin-top:8px;font-size:14px;color:#64748B}
.prose hr{border:0;border-top:1px solid #E2E8F0;margin:2.4em 0}
.prose table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5;display:block;overflow-x:auto}
.prose th,.prose td{text-align:left;padding:10px 14px;border-bottom:1px solid #E2E8F0;vertical-align:top}
.prose th{background:#1E293B;color:#E2E8F0;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;letter-spacing:0.06em;text-transform:uppercase;font-weight:500}
.prose td{color:#334155}

/* ---- End-of-post CTA, author box, related ---- */
.post-cta{margin-top:clamp(40px,6vw,64px)}
.post-cta > *{margin:0}
.post-cta{display:flex;flex-direction:column;gap:12px;padding:28px clamp(20px,4vw,36px) 32px;background:#F8FAFC;border:1px solid #DCE3EB;border-top:4px solid #00A1E0;border-radius:8px;max-width:720px}
.post-cta.cta-titan{border-top-color:#00D2D3}
.post-cta h2{font-size:clamp(22px,2.4vw,26px);font-weight:800;letter-spacing:-0.015em;line-height:1.2}
.post-cta p{color:#334155;font-size:16px}
.btn{align-self:flex-start;margin-top:6px;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 22px;background:#1E293B;color:#FFFFFF;text-decoration:none;font-weight:700;font-size:15px;border-radius:6px}
.btn:hover{color:#FFFFFF}
.author-box{margin-top:28px;display:flex;gap:18px;align-items:flex-start;padding-top:24px;border-top:1px solid #E2E8F0;font-size:15px;color:#475569}
.author-box img{border-radius:50%;flex:none;object-fit:cover}
.author-name{font-weight:700;color:#1E293B;margin-bottom:4px}
.author-photo{border-radius:50%;object-fit:cover;margin-bottom:18px}
.credentials{margin:0 0 18px;padding-left:1.2em;color:#334155}
.author-links{display:flex;flex-wrap:wrap;gap:8px 18px;font-weight:600}
.related{padding:clamp(48px,7vw,88px) 20px;max-width:1240px;margin:0 auto}
.related > h2,.related-head h2{font-size:clamp(24px,3vw,34px);font-weight:800;letter-spacing:-0.02em;margin-bottom:24px}
.related-band{max-width:none;background:#F8FAFC;border-top:1px solid #E2E8F0;padding-left:0;padding-right:0}
.related-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.related-all{font-weight:700;text-decoration:none}

/* ---- Simple content pages (privacy policy) ---- */
.page-body{padding-bottom:clamp(56px,8vw,96px)}
.page-body h2{scroll-margin-top:88px}