/* Blog — listing (blog.php) and article pages (blog-post.php). Uses the colours and buttons from site.css. */
.bl-sec{padding:8px 0 72px}
.bl-empty{text-align:center;color:var(--mk-ink2);padding:40px 0}

/* topic filter */
.bl-filter{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 34px}
.bl-chip{font:inherit;font-weight:600;font-size:14.5px;padding:9px 18px;border-radius:999px;border:1px solid var(--sk-line);background:#fff;color:var(--mk-ink);cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}
.bl-chip:hover{border-color:var(--sk);transform:translateY(-1px)}
.bl-chip.is-on{background:var(--mk-ink);color:#fff;border-color:var(--mk-ink)}
.bl-chip:focus-visible,.bl-share a:focus-visible,.bl-share button:focus-visible{outline:3px solid var(--sk-mid);outline-offset:2px}
[hidden].bl-card,[hidden].bl-feature{display:none!important}

/* category label + meta line */
.bl-cat{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sk-dark);background:var(--sk-soft);padding:5px 12px;border-radius:999px;margin-bottom:12px}
.bl-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:var(--mk-ink2)}
.bl-meta-c{justify-content:center}

/* featured (newest) article */
.bl-feature{display:grid;grid-template-columns:1.05fr 1fr;gap:0;background:#fff;border:1px solid var(--mk-border);border-radius:26px;overflow:hidden;box-shadow:0 24px 60px -34px rgba(10,37,64,.35);margin-bottom:34px}
.bl-feature-cover{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--sk-soft),#fff6ec);padding:28px}
.bl-feature-cover img{width:100%;height:auto;max-width:520px;display:block;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.bl-feature:hover .bl-feature-cover img{transform:scale(1.04) rotate(-.6deg)}
.bl-feature-body{padding:38px 40px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.bl-feature-body h2{font-size:30px;line-height:1.2;letter-spacing:-.02em;margin:0 0 12px}
.bl-feature-body h2 a{color:inherit}
.bl-feature-body p{font-size:17px;color:var(--mk-ink2);margin:0 0 16px}
.bl-feature-body .bl-meta{margin-bottom:22px}
.bl-feature-body h2 a:hover{color:var(--sk-dark)}

/* card grid */
.bl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.bl-card{background:#fff;border:1px solid var(--mk-border);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s}
.bl-card:hover{transform:translateY(-5px);box-shadow:0 26px 50px -30px rgba(10,37,64,.4)}
.bl-card-cover{display:block;background:linear-gradient(135deg,var(--sk-soft),#fff6ec);padding:18px 22px 10px}
.bl-card-cover img{width:100%;height:auto;display:block}
.bl-card-body{padding:20px 24px 24px;display:flex;flex-direction:column;flex:1}
.bl-card-body h3{font-size:20px;line-height:1.3;letter-spacing:-.01em;margin:0 0 10px}
.bl-card-body h3 a{color:inherit}
.bl-card-body h3 a:hover{color:var(--sk-dark)}
.bl-card-body p{font-size:15.5px;color:var(--mk-ink2);margin:0 0 16px;flex:1}
.bl-card-body .bl-meta{margin-top:auto}
/* the whole card is clickable (the heading link stretches over it) */
.bl-card,.bl-feature{position:relative}
.bl-card h3 a::after,.bl-feature h2 a::after{content:'';position:absolute;inset:0;z-index:1}
.bl-feature .mkt-btn-primary{position:relative;z-index:2}

/* article page */
.bl-hero{padding-bottom:36px}
.bl-hero h1{font-size:40px;line-height:1.15;max-width:760px;margin:0 auto 14px}
.bl-hero .bl-lead{font-size:18px;max-width:640px;margin:0 auto 18px}
.bl-crumb{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;font-size:14px;color:var(--mk-ink3);margin-bottom:18px}
.bl-crumb a{color:var(--mk-ink2)}
.bl-crumb a:hover{color:var(--sk-dark)}
.bl-article-sec{padding:10px 0 56px}
.bl-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start;max-width:1100px}
.bl-cover{margin:0 0 30px;background:linear-gradient(135deg,var(--sk-soft),#fff6ec);border-radius:22px;padding:22px 30px;border:1px solid var(--mk-border)}
.bl-cover img{width:100%;max-width:560px;height:auto;display:block;margin:0 auto}
.bl-prose{font-size:18px;line-height:1.82;color:#1d3349}
.bl-prose>*:first-child{margin-top:0}
.bl-prose h2{font-size:28px;line-height:1.25;letter-spacing:-.02em;margin:44px 0 14px;scroll-margin-top:100px}
.bl-prose h3{font-size:21px;margin:30px 0 10px}
.bl-prose p{margin:0 0 20px}
.bl-prose ul,.bl-prose ol{margin:0 0 24px;padding-left:1.4em}
.bl-prose li{margin-bottom:9px;padding-left:4px}
.bl-prose li::marker{color:var(--sk);font-weight:700}
.bl-prose a{color:var(--sk-dark);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--sk-mid)}
.bl-prose a:hover{color:var(--mk-ink);text-decoration-color:var(--sk)}
.bl-prose strong{color:var(--mk-ink)}
.bl-prose blockquote{margin:28px 0;padding:18px 24px;border-left:4px solid var(--sk);background:var(--mk-bg-alt);border-radius:0 16px 16px 0;font-size:19px}
.bl-prose img{max-width:100%;height:auto;border-radius:16px}

/* share row */
.bl-share{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:40px;padding-top:24px;border-top:1px solid var(--mk-border)}
.bl-share strong{margin-right:6px;font-size:15px}
.bl-share a,.bl-share button{width:42px;height:42px;border-radius:50%;border:1px solid var(--sk-line);background:#fff;color:var(--mk-ink);display:inline-flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.bl-share a:hover,.bl-share button:hover{background:var(--mk-ink);color:#fff;transform:translateY(-2px)}
.bl-share button.done{background:#10b981;color:#fff;border-color:#10b981}

/* side column */
.bl-side{position:sticky;top:104px;display:flex;flex-direction:column;gap:20px}
.bl-toc{background:var(--mk-bg-alt);border:1px solid var(--mk-border);border-radius:20px;padding:22px 22px 18px}
.bl-toc h2{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--sk-dark);margin:0 0 12px}
.bl-toc ol{list-style:none;margin:0;padding:0;counter-reset:t}
.bl-toc li{counter-increment:t;margin:0 0 9px;display:flex;gap:10px;font-size:14.5px;line-height:1.4}
.bl-toc li::before{content:counter(t);flex:0 0 22px;height:22px;border-radius:50%;background:#fff;border:1px solid var(--sk-line);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--sk-dark)}
.bl-toc a{color:var(--mk-ink2)}
.bl-toc a:hover{color:var(--mk-ink)}
.bl-side-cta{background:linear-gradient(135deg,#0a2540,#0b4a7d 70%,#0ea5e9 140%);border-radius:20px;padding:24px;color:#fff}
.bl-side-cta h2{font-size:20px;color:#fff;margin:0 0 8px}
.bl-side-cta p{color:rgba(255,255,255,.8);font-size:15px;margin:0 0 16px}
.bl-side-cta .mkt-btn-primary{background:#fff;color:var(--mk-ink)}
.bl-side-cta .mkt-btn-primary:hover{background:var(--sk-soft)}

.bl-related{padding:30px 0 64px;background:var(--mk-bg-alt)}
.bl-related h2{font-size:28px;margin:34px 0 22px}

@media (max-width:991.98px){
  .bl-layout{grid-template-columns:1fr;gap:34px}
  .bl-side{position:static}
  .bl-grid{grid-template-columns:repeat(2,1fr)}
  .bl-feature{grid-template-columns:1fr}
  .bl-feature-body{padding:28px 26px 30px}
}
@media (max-width:767.98px){
  .bl-grid{grid-template-columns:1fr}
  .bl-hero h1{font-size:29px}
  .bl-hero .bl-lead{font-size:16.5px}
  .bl-prose{font-size:17px}
  .bl-prose h2{font-size:24px;margin-top:36px}
  .bl-feature-body h2{font-size:25px}
  .bl-cover{padding:14px 16px}
}
@media (prefers-reduced-motion:reduce){.bl-card,.bl-feature-cover img{transition:none}.bl-card:hover{transform:none}}

/* pictures uploaded in the admin panel (photo covers fill their frame; the built-in illustrations sit inside it) */
.bl-card-cover.is-photo,.bl-feature-cover.is-photo{padding:0;background:#e8f1fb}
.bl-photo{width:100%;height:100%;aspect-ratio:1200/630;object-fit:cover;display:block}
.bl-feature-cover.is-photo{align-items:stretch}
.bl-feature-cover.is-photo .bl-photo{max-width:none;height:100%;min-height:260px}
.bl-feature:hover .bl-feature-cover .bl-photo{transform:scale(1.03)}
.bl-cover.is-photo{padding:0;background:#e8f1fb;overflow:hidden}
.bl-cover.is-photo .bl-photo{max-width:none;border-radius:0}
.bl-more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-weight:700;font-size:15px;color:var(--sk-dark);position:relative;z-index:2}
.bl-more i{transition:transform .25s}
.bl-card:hover .bl-more i,.bl-more:hover i{transform:translateX(4px)}
.bl-more:hover{color:var(--mk-ink)}
@media (min-width:1200px){.bl-grid.bl-grid-4{grid-template-columns:repeat(4,1fr);gap:22px}.bl-grid-4 .bl-card-body{padding:18px 20px 22px}.bl-grid-4 .bl-card-body h3{font-size:18px}}
@media (min-width:768px) and (max-width:1199.98px){.bl-grid.bl-grid-4{grid-template-columns:repeat(2,1fr)}}