/* Blog page (scoped to .bl) */
body .bl{ --n:#0a2c63; --n2:#104289; --g:#2f8f22; --gold:#f5b800; --b:#1a6fd6; --r:#e0505f;
  font-family:"DM Sans",system-ui,sans-serif; color:#33445f; }
body .bl *{ box-sizing:border-box; }
body .bl .bl-sec{ padding:72px 0; }
body .bl .container{ padding-left:16px; padding-right:16px; }
body .bl .bl-feat{ background:linear-gradient(180deg,#f4f9ff,#e9f2ff); padding-bottom:64px; }
body .bl .bl-list{ background:linear-gradient(180deg,#fffaf0,#fdf1dc); }

/* featured */
body .bl .bl-hero{ display:grid; grid-template-columns:1.1fr 1fr; background:#fff; border-radius:28px; overflow:hidden; border:1px solid #dbe6f6; box-shadow:0 20px 44px rgba(10,44,99,.12); }
body .bl .bl-hero-img{ position:relative; display:block; min-height:340px; }
body .bl .bl-hero-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s; }
body .bl .bl-hero:hover .bl-hero-img img{ transform:scale(1.04); }
body .bl .bl-flag{ position:absolute; left:18px; top:18px; display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px; background:var(--gold); color:var(--n); font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; box-shadow:0 8px 18px rgba(0,0,0,.2); }
body .bl .bl-hero-body{ padding:40px 40px 36px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; position:relative; }
body .bl .bl-hero-body::before{ content:""; position:absolute; left:0; right:0; top:0; height:6px; background:linear-gradient(90deg,var(--g) 0 25%,var(--gold) 25% 50%,var(--b) 50% 75%,var(--r) 75%); }
body .bl .bl-cat2{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; background:#e7f4e3; color:var(--g); font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px; }
body .bl .bl-hero h2{ font:800 clamp(24px,2.6vw,32px)/1.22 "DM Sans",sans-serif; margin:0 0 14px; text-transform:none; }
body .bl .bl-hero h2 a{ color:var(--n); text-decoration:none; }
body .bl .bl-hero h2 a:hover{ color:var(--g); }
body .bl .bl-hero p{ font-size:16px; line-height:1.75; color:#4a5a73; margin:0 0 18px; text-align:left; }
body .bl .bl-btn{ display:inline-flex; align-items:center; gap:10px; margin-top:20px; padding:13px 26px; border-radius:999px; font:700 15.5px "DM Sans",sans-serif; color:#fff; background:linear-gradient(100deg,#2f8f22,#12a39a); text-decoration:none; box-shadow:0 12px 24px rgba(47,143,34,.28); transition:transform .2s; }
body .bl .bl-btn:hover{ transform:translateY(-3px); color:#fff; }
body .bl .bl-meta{ display:flex; flex-wrap:wrap; gap:8px 18px; font-size:13.5px; color:#74839c; margin:0; }
body .bl .bl-meta .fa{ color:var(--b); margin-right:6px; }

/* filter */
body .bl .bl-filter{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0 0 36px; }
body .bl .bl-filter button{ padding:10px 22px; border-radius:999px; border:1.5px solid #e6d7b5; background:#fff; color:var(--n); font:700 14.5px "DM Sans",sans-serif; cursor:pointer; transition:all .2s; }
body .bl .bl-filter button:hover{ border-color:var(--g); color:var(--g); }
body .bl .bl-filter button.on{ background:linear-gradient(100deg,#0a2c63,#104289); border-color:transparent; color:#fff; box-shadow:0 10px 20px rgba(10,44,99,.25); }

/* cards */
body .bl .bl-card{ --c:var(--g); height:100%; display:flex; flex-direction:column; background:#fff; border-radius:22px; overflow:hidden; border:1px solid #f0e3c4; box-shadow:0 10px 26px rgba(10,44,99,.07); transition:transform .25s,box-shadow .25s; }
body .bl .bl-card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px rgba(10,44,99,.14); }
body .bl .bl-card.c-r{ --c:#e0505f; } body .bl .bl-card.c-b{ --c:#1a6fd6; } body .bl .bl-card.c-g{ --c:#2f8f22; } body .bl .bl-card.c-y{ --c:#d98a00; }
body .bl .bl-img{ position:relative; display:block; aspect-ratio:16/10; overflow:hidden; border-bottom:5px solid var(--c); }
body .bl .bl-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s; }
body .bl .bl-card:hover .bl-img img{ transform:scale(1.07); }
body .bl .bl-cat{ position:absolute; left:14px; top:14px; display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px; background:var(--c); color:#fff; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; box-shadow:0 8px 16px rgba(0,0,0,.2); }
body .bl .bl-body{ display:flex; flex-direction:column; flex:1; padding:22px 24px 24px; }
body .bl .bl-card h3{ font:700 19px/1.35 "DM Sans",sans-serif; margin:12px 0 10px; text-transform:none; }
body .bl .bl-card h3 a{ color:var(--n); text-decoration:none; }
body .bl .bl-card h3 a:hover{ color:var(--c); }
body .bl .bl-card p{ margin:0 0 16px; font-size:15.5px; line-height:1.65; color:#51627d; text-align:left; }
body .bl .bl-more{ margin-top:auto; display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:15px; color:var(--c); text-decoration:none; }
body .bl .bl-more .fa{ transition:transform .2s; } body .bl .bl-more:hover .fa{ transform:translateX(5px); }


@media (max-width:991px){ body .bl .bl-hero{ grid-template-columns:1fr; } body .bl .bl-hero-img{ min-height:0; aspect-ratio:16/9; } body .bl .bl-hero-body{ padding:30px 26px; } }
@media (max-width:767px){
  body .bl .bl-sec{ padding:48px 0; }
}

/* article page + empty state (articles come from Admin > Blog Posts) */
body .bl .bl-art-sec{ background:linear-gradient(180deg,#f4f9ff,#fff); padding-top:48px; }
body .bl .bl-art{ max-width:820px; margin:0 auto; padding:40px 44px 34px; border-radius:26px; background:#fff; border:1px solid #dbe6f6; box-shadow:0 22px 52px rgba(10,44,99,.10); }
body .bl .bl-back{ display:inline-flex; align-items:center; gap:8px; margin:0 0 22px; font-size:15px; font-weight:700; color:var(--g); text-decoration:none; }
body .bl .bl-back:hover{ color:var(--n); }
body .bl .bl-art-head h2{ margin:14px 0 14px; font:800 clamp(26px,4vw,38px)/1.2 "DM Sans",sans-serif; color:var(--n); text-transform:none; }
body .bl .bl-art-img{ margin:24px 0 8px; border-radius:20px; overflow:hidden; background:#eaf1fc; }
body .bl .bl-art-img img{ display:block; width:100%; height:auto; max-height:460px; object-fit:cover; }
body .bl .bl-art-body{ margin-top:24px; font-size:17.5px; line-height:1.85; color:#33445f; }
body .bl .bl-art-body p{ margin:0 0 18px; }
body .bl .bl-art-body h3{ margin:30px 0 12px; font:800 24px/1.3 "DM Sans",sans-serif; color:var(--n); text-transform:none; }
body .bl .bl-art-body ul{ margin:0 0 20px; padding-left:22px; }
body .bl .bl-art-body li{ margin:0 0 8px; }
body .bl .bl-art-foot{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:30px; padding-top:22px; border-top:1px solid #e2eaf5; }
body .bl .bl-art-foot span{ font-weight:700; color:var(--n); margin-right:4px; }
body .bl .bl-share{ display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px; font-size:14.5px; font-weight:700; color:#fff; text-decoration:none; }
body .bl .bl-share.wa{ background:#17753f; } body .bl .bl-share.fb{ background:#1a5cb8; }
body .bl .bl-share:hover{ filter:brightness(.92); color:#fff; }
body .bl .bl-related{ max-width:1140px; margin:56px auto 0; }
body .bl .bl-related h3{ margin:0 0 22px; font:800 28px/1.2 "DM Sans",sans-serif; color:var(--n); text-align:center; text-transform:none; }
body .bl .bl-empty{ max-width:560px; margin:10px auto; padding:44px 30px; text-align:center; border-radius:24px; background:#fff; border:1px solid #dbe6f6; box-shadow:0 18px 44px rgba(10,44,99,.08); }
body .bl .bl-empty > i{ display:flex; align-items:center; justify-content:center; width:72px; height:72px; margin:0 auto 18px; border-radius:50%; background:#e6f4e3; color:#2a8420; font-size:30px; }
body .bl .bl-empty h3{ margin:0 0 10px; font:800 26px/1.25 "DM Sans",sans-serif; color:var(--n); text-transform:none; }
body .bl .bl-empty p{ margin:0 0 20px; font-size:16.5px; line-height:1.65; color:#51627d; }
@media (max-width:575px){
  body .bl .bl-art{ padding:26px 18px 24px; border-radius:20px; }
  body .bl .bl-art-body{ font-size:16.5px; }
  body .bl .bl-art-body h3{ font-size:21px; }
}