@import url('https://cdnjs.cloudflare.com/ajax/libs/boxicons/2.1.4/css/boxicons.min.css');
/* ============================================================
   BLOG LISTING + DETAIL — extends homepage .blogcard design.
   innerbanner, mainsectionheading, mb-100 from style.css.
   ============================================================ */
:root{ --nv:#022b63; --cream:#efede7; --amber:#f9a825; --ink:#111827; --muted:#5b6472; --line:#e7e4dc; --soft:#f7f6f2; --radius:16px; }

/* ---------- toolbar: search + tabs + view toggle ---------- */
.blog-toolbar{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between; margin-bottom:34px; }
.blog-search{ position:relative; flex:1 1 280px; max-width:360px; }
.blog-search input{ width:100%; border:1px solid var(--line); border-radius:12px; padding:13px 44px 13px 18px; font-family:'DMSans-Regular'; font-size:14.5px; color:var(--ink); background:#fff; transition:.3s; }
.blog-search input:focus{ outline:none; border-color:var(--nv); box-shadow:0 0 0 3px rgba(2,43,99,.08); }
.blog-search i{ position:absolute; right:16px; top:50%; transform:translateY(-50%); color:var(--nv); font-size:20px; }

.blog-view{ display:flex; gap:8px; }
.blog-viewbtn{ width:44px; height:44px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--muted); display:inline-flex; align-items:center; justify-content:center; font-size:22px; cursor:pointer; transition:.3s; }
.blog-viewbtn.active{ background:var(--nv); color:#fff; border-color:var(--nv); }

/* tabs */
.blog-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:34px; }
.blog-tab{ border:1px solid var(--line); background:#fff; color:var(--ink); padding:10px 22px; border-radius:40px; cursor:pointer; font-family:'DMSans-Medium'; font-size:14px; transition:.3s; }
.blog-tab:hover{ border-color:var(--nv); }
.blog-tab.active{ background:var(--nv); color:#fff; border-color:var(--nv); }

/* ---------- grid (card view) ---------- */
.blog-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }

/* the card reuses homepage .blogcard look; add hover + border */
.blog-grid .blogcard,
.blog-list .blogcard{ border:1px solid var(--line); box-shadow:0 10px 30px rgba(2,43,99,.04); cursor:pointer; }
.blogcard:hover{ transform:translateY(-5px); box-shadow:0 22px 46px rgba(2,43,99,.10); }
.blogcard:hover .latestblogimg img{ transform:scale(1.06); }
.blogcard a.blogcardlink{ position:absolute; inset:0; z-index:3; }

/* ---------- list view ---------- */
.blog-list{ display:none; flex-direction:column; gap:20px; }
.blog-list .blogcard{ padding:22px 26px; }
.blog-list .latestblogimg{ height:190px; }
.blog-list .latestblogheading h2{ font-size:22px; }

/* toggled state */
body.blogview-list .blog-grid{ display:none; }
body.blogview-list .blog-list{ display:flex; }

/* empty state */
.blog-empty{ text-align:center; padding:60px 20px; color:var(--muted); display:none; }
.blog-empty i{ font-size:46px; color:#c3cbd8; margin-bottom:14px; display:block; }

/* category chip on card */
.blogcard .latestblogheading h4{ color:var(--nv); }

/* ---------- BLOG DETAIL ---------- */
.blogd-wrap{ max-width:820px; margin:0 auto; }
.blogd-meta{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; color:var(--muted); font-size:14px; margin-bottom:24px; }
.blogd-meta .cat{ background:var(--cream); color:var(--nv); padding:5px 14px; border-radius:30px; font-family:'DMSans-Medium'; font-size:13px; }
.blogd-meta span{ display:inline-flex; align-items:center; gap:7px; }
.blogd-meta i{ color:var(--nv); font-size:17px; }
.blogd-hero{ width:100%; height:420px; border-radius:18px; overflow:hidden; margin-bottom:40px; background:linear-gradient(135deg,#f7f6f2,#efede7); border:1px solid var(--line); }
.blogd-hero img{ width:100%; height:100%; object-fit:cover; }
.blogd-body{ color:#374151; font-size:16.5px; line-height:1.85; }
.blogd-body h1{ font-family:"PlusJakartaSans-Medium"; font-size:32px; color:var(--ink); margin:42px 0 18px; line-height:1.3; }
.blogd-body h2{ font-family:"PlusJakartaSans-Medium"; font-size:26px; color:var(--ink); margin:36px 0 16px; line-height:1.35; }
.blogd-body h3{ font-family:'DMSans-SemiBold'; font-size:20px; color:var(--ink); margin:28px 0 12px; line-height:1.4; }
.blogd-body p{ margin-bottom:20px; }
.blogd-body ul, .blogd-body ol{ margin:0 0 22px 24px; }
.blogd-body ul{ list-style-type:disc; }
.blogd-body ol{ list-style-type:decimal; }
.blogd-body li{ margin-bottom:10px; line-height:1.75; }
.blogd-body li ul, .blogd-body li ol{ margin:8px 0 8px 20px; }
.blogd-body a{ color:var(--nv,#022b63); text-decoration:underline; font-weight:600; transition:color .2s; }
.blogd-body a:hover{ color:#2563eb; }
.blogd-body a.text-blue-600{ color:#2563eb; }
.blogd-body a.text-blue-600:hover{ color:#1d4ed8; }
.blogd-body blockquote{ border-left:4px solid var(--amber); background:var(--soft); padding:20px 26px; border-radius:0 12px 12px 0; margin:28px 0; color:var(--ink); font-size:17px; font-style:italic; }
.blogd-body pre{ background:#0f172a; color:#f8fafc; padding:18px 24px; border-radius:12px; overflow-x:auto; margin:26px 0; font-family:monospace; font-size:14.5px; line-height:1.65; }
.blogd-body code{ background:#f1f5f9; color:#e11d48; padding:3px 7px; border-radius:5px; font-size:14px; font-family:monospace; }
.blogd-body pre code{ background:transparent; color:inherit; padding:0; font-size:inherit; }
.blogd-body mark{ background-color:#fef08a; padding:2px 6px; border-radius:4px; color:inherit; }
.blogd-body hr{ border:0; height:1px; background:var(--line,#e7e4dc); margin:36px 0; }
.blogd-body s{ text-decoration:line-through; }
.blogd-body u{ text-decoration:underline; }
.blogd-body img{ max-width:100%; height:auto; border-radius:12px; margin:24px auto; }
.blogd-body [style*="text-align: center"], .blogd-body .has-text-align-center{ text-align:center; }
.blogd-body [style*="text-align: right"], .blogd-body .has-text-align-right{ text-align:right; }
.blogd-body [style*="text-align: justify"], .blogd-body .has-text-align-justify{ text-align:justify; }
.blogd-share{ display:flex; gap:12px; align-items:center; margin-top:40px; padding-top:28px; border-top:1px solid var(--line); }
.blogd-share span{ font-family:'DMSans-Medium'; color:var(--ink); }
.blogd-share a{ width:42px; height:42px; border-radius:10px; background:var(--cream); color:var(--nv); display:inline-flex; align-items:center; justify-content:center; font-size:20px; transition:.3s; }
.blogd-share a:hover{ background:var(--nv); color:#fff; }

/* author box */
.blogd-author{ display:flex; gap:18px; align-items:center; background:var(--soft); border:1px solid var(--line); border-radius:16px; padding:26px 28px; margin-top:34px; }
.blogd-author img{ width:64px; height:64px; border-radius:50%; object-fit:cover; }
.blogd-author h5{ font-family:'DMSans-SemiBold'; font-size:17px; color:var(--ink); margin:0 0 4px; }
.blogd-author p{ color:var(--muted); font-size:14px; margin:0; line-height:1.6; }

/* related */
.blogd-related{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }

@media(max-width:991px){
  .blog-grid,.blogd-related{ grid-template-columns:1fr; }
  .blog-list .blogcard{ flex-direction:column-reverse; }
  .blog-list .latestblogimg{ max-width:100%; height:220px; }
  .blogd-hero{ height:280px; }
}


.blog-list .latestblogflex {
    width: 100%;
}
.blog-list .blogcard{
  justify-content: start;
}