/* ═══════════ blog ═══════════ */
.bl-hero{width:min(880px,calc(100% - 48px));margin:64px auto 0;text-align:center;display:flex;flex-direction:column;gap:14px}
.bl-hero h1{font-weight:900;font-size:clamp(34px,5vw,52px);line-height:1.15;letter-spacing:-1px;color:var(--gray-900)}
.bl-hero p{font-weight:500;font-size:18px;line-height:1.6;color:var(--gray-600)}

.bl-wrap{width:min(1240px,calc(100% - 48px));margin:56px auto 0}
.bl-featured{margin-bottom:40px}
.bl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}

/* cards */
.bl-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--stroke);border-radius:20px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--shadow-md);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.bl-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-xl)}
.bl-thumb{position:relative;aspect-ratio:16/10;display:flex;align-items:flex-end;padding:18px;overflow:hidden}
.bl-thumb::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 80% 10%,rgba(255,255,255,.28),transparent 60%);pointer-events:none}
.bl-cat{position:relative;z-index:1;display:inline-block;background:rgba(255,255,255,.92);color:var(--navy);font-weight:600;font-size:12px;line-height:1;letter-spacing:.02em;text-transform:uppercase;padding:7px 12px;border-radius:20px;box-shadow:var(--shadow-xs)}
.bl-cardbody{display:flex;flex-direction:column;gap:10px;padding:22px 22px 24px}
.bl-cardbody h3{font-weight:700;font-size:21px;line-height:1.3;color:var(--gray-900);letter-spacing:-.3px}
.bl-ex{font-weight:500;font-size:15px;line-height:1.6;color:var(--gray-600);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bl-meta{margin-top:auto;display:flex;align-items:center;gap:8px;font-weight:500;font-size:13px;color:var(--gray-500)}
.bl-meta.light{color:rgba(255,255,255,.85)}
.bl-dot{opacity:.6}

/* featured card = horizontal */
.bl-card-feat{flex-direction:row;align-items:stretch}
.bl-card-feat .bl-thumb{width:52%;aspect-ratio:auto;min-height:300px}
.bl-card-feat .bl-cardbody{width:48%;justify-content:center;gap:14px;padding:44px}
.bl-card-feat h3{font-size:30px;letter-spacing:-.6px}
.bl-card-feat .bl-ex{font-size:17px;-webkit-line-clamp:4}

/* cover variants */
.bl-navy{background:linear-gradient(150deg,#03045e,#0077b6)}
.bl-cyan{background:linear-gradient(150deg,#90e0ef,#48cae4 60%,#0096c7)}
.bl-gradient{background:linear-gradient(120deg,#48cae4 0%,#00b4d8 32%,#0077b6 78%,#023e8a 110%)}
/* uploaded cover image */
.bl-thumb.bl-img{background-size:cover;background-position:center;background-repeat:no-repeat}
.bl-thumb.bl-img::after{background:linear-gradient(180deg,rgba(3,4,30,0) 35%,rgba(3,4,30,.45))}
.bl-art-hero.bl-img{background-size:cover;background-position:center;background-repeat:no-repeat}
.bl-art-hero.bl-img::after{background:linear-gradient(180deg,rgba(3,4,30,.45),rgba(3,4,30,.7))}

/* article */
.bl-article{width:100%;margin:0 auto}
.bl-art-hero{position:relative;overflow:hidden;padding:120px 24px 72px}
.bl-art-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 120% at 85% 0,rgba(255,255,255,.22),transparent 55%);pointer-events:none}
.bl-art-head{position:relative;z-index:1;width:min(820px,calc(100% - 48px));margin:0 auto;display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.bl-art-head h1{font-weight:900;font-size:clamp(30px,4.6vw,48px);line-height:1.18;letter-spacing:-1px;color:#fff}
.bl-back{color:rgba(255,255,255,.9);font-weight:600;font-size:15px;transition:opacity .2s var(--ease)}
.bl-back:hover{opacity:.7}
.bl-art-hero .bl-cat{background:rgba(255,255,255,.92)}

.bl-art-body{width:min(720px,calc(100% - 48px));margin:56px auto 0;font-weight:400;font-size:18px;line-height:1.75;color:var(--gray-800)}
.bl-art-body h2{font-weight:700;font-size:28px;line-height:1.3;letter-spacing:-.5px;color:var(--gray-900);margin:40px 0 14px}
.bl-art-body h3{font-weight:700;font-size:22px;line-height:1.35;color:var(--gray-900);margin:32px 0 10px}
.bl-art-body p{margin:0 0 20px}
.bl-art-body ul,.bl-art-body ol{margin:0 0 20px;padding-left:24px}
.bl-art-body li{margin:0 0 10px}
.bl-art-body strong{color:var(--gray-900);font-weight:700}
.bl-art-body a{color:var(--blue);text-decoration:underline}
.bl-art-body blockquote{margin:28px 0;padding:18px 26px;border-left:4px solid var(--bright);background:var(--cyan-light);border-radius:0 12px 12px 0;font-weight:600;font-size:19px;line-height:1.5;color:var(--navy)}
.bl-art-body code{background:var(--gray-100);border-radius:4px;padding:2px 6px;font-size:.9em}
.bl-art-body table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:16px}
.bl-art-body th,.bl-art-body td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--stroke);vertical-align:top}
.bl-art-body th{font-weight:700;color:var(--gray-900);background:var(--gray-50)}
.bl-art-body table tr:last-child td{border-bottom:none}
.bl-art-body img{border-radius:12px;margin:8px 0 24px}

.bl-art-foot{width:min(720px,calc(100% - 48px));margin:56px auto 96px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:32px;border-top:1px solid var(--stroke)}

/* responsive */
@media (max-width:1024px){
  .bl-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .bl-grid{grid-template-columns:1fr}
  .bl-card-feat{flex-direction:column}
  .bl-card-feat .bl-thumb,.bl-card-feat .bl-cardbody{width:100%}
  .bl-card-feat .bl-thumb{aspect-ratio:16/10;min-height:0}
  .bl-card-feat .bl-cardbody{padding:26px}
  .bl-art-hero{padding:96px 20px 56px}
}