/* Blog cards (home page and /blog/) and article layout */
.bl-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,44px)}
.bl-head h2{margin:10px 0 10px}
.bl-head p{color:var(--muted);max-width:56ch}
.bl-all{display:inline-flex;align-items:center;gap:8px;color:var(--blue-hi);font:700 1rem var(--body);white-space:nowrap}
.bl-all:hover{text-decoration:underline;text-underline-offset:4px}
.bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.bl-card{display:flex;flex-direction:column;border-radius:20px;background:#fff;border:1px solid #e4e9e7;overflow:hidden;box-shadow:0 1px 2px rgba(15,28,43,.03),0 18px 40px -26px rgba(15,28,43,.25);transition:transform .35s var(--ease),box-shadow .35s,border-color .3s}
.bl-card:hover{transform:translateY(-8px);border-color:rgba(7,148,99,.45);box-shadow:0 30px 60px -30px rgba(7,148,99,.4)}
.bl-cover{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;height:150px;padding:18px 20px;color:#42e6a4;background:radial-gradient(420px circle at 85% -10%,rgba(66,230,164,.32),transparent 55%),linear-gradient(135deg,#07131a,#0d2a31);overflow:hidden}
.bl-cover::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:34px 34px;pointer-events:none}
.bl-cover .i{position:relative;z-index:1;width:54px;height:54px;padding:12px;border-radius:14px;background:rgba(66,230,164,.14);transition:transform .45s var(--ease)}
.bl-card:hover .bl-cover .i{transform:scale(1.1) rotate(-6deg)}
.bl-cover span{position:relative;z-index:1;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font:700 .7rem/1.3 var(--body);letter-spacing:.09em;text-transform:uppercase}
.bl-body{display:flex;flex-direction:column;flex:1;padding:20px 22px 24px}
.bl-meta{color:var(--muted);font-size:.82rem}
.bl-body h3{margin:8px 0 10px;font-size:1.18rem;line-height:1.3;letter-spacing:-.015em}
.bl-body h3 a{color:var(--text)}
.bl-body h3 a:hover{color:var(--blue-hi)}
.bl-body>p:not(.bl-meta){color:var(--muted);font-size:.95rem;line-height:1.6}
.bl-more{margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:8px;color:var(--blue-hi);font:700 .92rem var(--body)}
.bl-more .i{transition:transform .25s}
.bl-card:hover .bl-more .i{transform:translateX(5px)}
@media (max-width:980px){.bl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.bl-grid{grid-template-columns:minmax(0,1fr)}.bl-cover{height:120px}}

.bl-article{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(28px,5vw,64px);align-items:start}
.bl-prose{max-width:none}
.bl-prose h2{font-size:clamp(1.25rem,2vw,1.5rem)}
.bl-end{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px;padding-top:28px;border-top:1px solid var(--line)}
.bl-end .btn{text-decoration:none}
.legal .bl-end a.btn--primary{color:#06141a}
.legal .bl-end a.btn--line{color:var(--text)}
.bl-side{position:sticky;top:110px;padding:24px;border-radius:18px;border:1px solid var(--line);background:var(--bg2)}
.bl-side h2{font-size:1.05rem;margin:0 0 14px}
.bl-side ul{margin:0;padding:0;list-style:none}
.bl-side li+li{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.bl-side a{display:block;color:var(--text);font:650 .95rem/1.4 var(--display)}
.bl-side a:hover{color:var(--blue-hi)}
.bl-side small{display:block;margin-bottom:4px;color:var(--blue-hi);font:700 .68rem var(--body);letter-spacing:.09em;text-transform:uppercase}
@media (max-width:900px){.bl-article{grid-template-columns:minmax(0,1fr)}.bl-side{position:static}}

/* Blog photos: assets/img/blog/{post-slug}.webp (or .jpg / .png) */
.bl-cover .bl-img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.bl-cover{height:auto;aspect-ratio:16/9}
.bl-cover:has(.bl-img)::after{background:linear-gradient(180deg,transparent 45%,rgba(7,19,26,.7));background-size:auto}
.bl-cover:has(.bl-img) span{background:rgba(7,19,26,.72);backdrop-filter:blur(4px);margin-left:auto}
.bl-card:hover .bl-img{transform:scale(1.06)}
.bl-hero{margin:0 0 26px;border-radius:18px;overflow:hidden;border:1px solid var(--line)}
.bl-hero .bl-img{display:block;width:100%;height:auto;max-height:440px;object-fit:cover}
.bl-cover:has(.bl-img) span{display:none}