/* inc/blog.css — public /blog styles (index + article page).
   Loaded after the sitewide header/footer; brand colors hardcoded to match
   preload.php ($color1 #00335E, $color2 #146FA4, $color3 #E8F4FF). */

/* ---------------- shared ---------------- */
.kb-full{ width:100%; }
.kb-container{ max-width:1160px; margin:0 auto; padding-left:16px; padding-right:16px; }

/* ---------------- index ---------------- */
.kb-index-head{ padding:36px 16px 8px; }
.kb-index-head h1{ font-size:30px; font-weight:800; color:#00335E; margin:0; }
.kb-index-head p{ color:#5a6b7a; margin:8px 0 0; font-size:15px; }

.kb-section{ padding:26px 0 8px; }
.kb-section-hd{ display:flex; align-items:center; gap:12px; margin:0 0 18px; }
.kb-section-hd h2{ font-size:22px; font-weight:800; color:#00335E; margin:0; white-space:nowrap; }
.kb-section-hd .kb-rule{ flex:1; height:1px; background:#e2e8ef; }

.kb-grid{ display:grid; grid-template-columns:1fr; gap:20px; }
@media(min-width:768px){ .kb-grid{ grid-template-columns:1fr 1fr; gap:24px 28px; } }

.kb-card{ display:flex; gap:16px; align-items:flex-start; border-bottom:0; }
.kb-card, .kb-card:hover{ text-decoration:none !important; border:0 !important; }
.kb-card-thumb{ flex:0 0 128px; width:128px; height:96px; object-fit:cover; border-radius:8px;
  background:#e8f4ff; border:1px solid #dbe7f1; }
.kb-card-body{ min-width:0; }
.kb-card-title{ color:#00335E; font-weight:700; font-size:16px; line-height:1.35; margin:2px 0 6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.kb-card:hover .kb-card-title{ color:#146FA4; }
.kb-card-excerpt{ color:#54616e; font-size:13.5px; line-height:1.5; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.kb-card-date{ color:#8a97a4; font-size:12px; margin:6px 0 0; }

/* ---------------- article hero ---------------- */
.kb-hero{ position:relative; background-size:cover; background-position:center; background-color:#00335E;
  display:flex; min-height:300px; }
.kb-hero::before{ content:""; position:absolute; inset:0; }
.kb-hero--light::before{ background:linear-gradient(to top, rgba(0,15,30,.82), rgba(0,15,30,.30) 55%, rgba(0,15,30,.10)); }
.kb-hero--dark::before{ background:linear-gradient(to top, rgba(255,255,255,.90), rgba(255,255,255,.45) 55%, rgba(255,255,255,.20)); }
@media(min-width:768px){ .kb-hero{ min-height:420px; } }
.kb-hero-inner{ position:relative; z-index:1; width:100%; max-width:1160px; margin:0 auto; padding:26px 16px 26px;
  display:flex; flex-direction:column; }
.kb-hero-btm{ margin-top:auto; }   /* pins title/byline to the bottom; breadcrumb stays at the top */
.kb-title{ font-size:26px; line-height:1.2; font-weight:800; margin:0; }
@media(min-width:768px){ .kb-title{ font-size:40px; } }
.kb-byline{ font-size:14px; margin-top:12px; }
.kb-crumbs{ font-size:13px; }
.kb-crumbs .sep{ margin:0 7px; opacity:.6; }

.kb-hero--light .kb-title, .kb-hero--light .kb-byline, .kb-hero--light .kb-crumbs,
.kb-hero--light .kb-crumbs a, .kb-hero--light .kb-byline a{ color:#fff; }
.kb-hero--light .kb-crumbs a, .kb-hero--light .kb-byline a{ border-bottom:1px solid rgba(255,255,255,.5); }
.kb-hero--dark .kb-title, .kb-hero--dark .kb-byline, .kb-hero--dark .kb-crumbs,
.kb-hero--dark .kb-crumbs a, .kb-hero--dark .kb-byline a{ color:#00335E; }
.kb-hero--dark .kb-crumbs a, .kb-hero--dark .kb-byline a{ border-bottom:1px solid rgba(0,51,94,.4); }
.kb-crumbs a, .kb-byline a{ text-decoration:none; }

/* ---------------- article body layout ---------------- */
.kb-wrap{ max-width:1160px; margin:0 auto; padding:34px 16px; display:grid; grid-template-columns:1fr; gap:36px; }
@media(min-width:992px){ .kb-wrap{ grid-template-columns:minmax(0,1fr) 320px; gap:48px; } }

.kb-article-body{ font-size:17px; line-height:1.75; color:#26313b; }
.kb-article-body p{ margin:0 0 1.15em; }
.kb-article-body h2{ font-size:24px; font-weight:800; color:#00335E; margin:1.8em 0 .55em; line-height:1.25; }
.kb-article-body h3{ font-size:19px; font-weight:700; color:#0d4a77; margin:1.5em 0 .5em; }
.kb-article-body ul, .kb-article-body ol{ margin:0 0 1.15em 1.4em; }
.kb-article-body li{ margin:.35em 0; }
.kb-article-body a{ color:#146FA4; border-bottom:1px solid #cfe0ee; }
.kb-article-body a:hover{ color:#00335E; border-color:#146FA4; }
.kb-article-body img{ max-width:100%; height:auto; border-radius:8px; margin:1em 0; }
.kb-article-body > p:first-of-type::first-letter{ float:left; font-size:3.3em; line-height:.78;
  font-weight:800; color:#00335E; padding:6px 12px 0 0; }

/* utility row (share/print) */
.kb-util{ display:flex; gap:8px; margin:0 0 20px; }
.kb-util button{ border:1px solid #d7e0e8; background:#fff; color:#54616e; font-size:13px;
  padding:5px 12px; border-radius:20px; cursor:pointer; }
.kb-util button:hover{ border-color:#146FA4; color:#146FA4; }

/* author box */
.kb-author{ display:flex; gap:16px; align-items:flex-start; margin-top:40px; padding-top:26px; border-top:1px solid #e6ecf1; }
.kb-author .pic{ flex:0 0 60px; width:60px; height:60px; border-radius:50%; object-fit:cover;
  background:#00335E; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:20px; }
.kb-author .nm{ font-weight:700; color:#00335E; }
.kb-author .role{ color:#8a97a4; font-weight:400; }
.kb-author .bio{ color:#54616e; font-size:14px; line-height:1.6; margin-top:4px; }

/* sidebar */
.kb-side .kb-cta{ background:#00335E; color:#fff; border-radius:12px; padding:22px; text-align:center; }
.kb-side .kb-cta .eg{ text-transform:uppercase; letter-spacing:.08em; font-size:11px; color:#9dc2e0; }
.kb-side .kb-cta .t{ font-size:19px; font-weight:800; margin:6px 0 8px; line-height:1.3; }
.kb-side .kb-cta .d{ font-size:13.5px; color:#cfe0ee; line-height:1.55; margin-bottom:16px; }
.kb-side .kb-cta .b{ display:block; background:#F5C400; color:#00335E; font-weight:700; border:0;
  padding:11px 14px; border-radius:8px; text-decoration:none; }
.kb-side .kb-cta .b:hover{ background:#ffd633; }
@media(min-width:992px){ .kb-side{ position:sticky; top:88px; align-self:start; } }

.kb-rel{ margin-top:26px; }
.kb-rel .h{ font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:#8a97a4; margin-bottom:12px; }
.kb-rel a{ display:block; padding:11px 0; border-bottom:1px solid #eef2f5; text-decoration:none; }
.kb-rel a:hover .rt{ color:#146FA4; }
.kb-rel .rt{ color:#00335E; font-weight:600; font-size:14.5px; line-height:1.35; }
.kb-rel .rd{ color:#9aa6b2; font-size:12px; margin-top:3px; }

/* bottom breadcrumb */
.kb-crumbs-btm{ max-width:1160px; margin:0 auto; padding:8px 16px 40px; font-size:13px; color:#8a97a4; }
.kb-crumbs-btm a{ color:#146FA4; text-decoration:none; }
.kb-crumbs-btm .sep{ margin:0 7px; opacity:.6; }