/* =========================================================
   BLOG  —  blog list (/blogs) and blog details (/blog/{slug})
   Not in the Figma design: built from its tokens and parts (wave hero, Course Detail card frame,
   info_pages.css breadcrumb / rich text). Loaded after common.css and info_pages.css.
   ========================================================= */

/* ---------- Hero search (real GET form) ---------- */
.blog_page_search{display:flex;align-items:center;background:#fff;border:1px solid #c9d6e8;border-radius:30px;padding:4px 4px 4px 16px;max-width:520px;margin-top:22px;box-shadow:0 6px 20px rgba(4,21,44,.06)}
.blog_page_search i{color:#6b7280;font-size:16px}
.blog_page_search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:var(--fs-label);padding:8px 10px;color:var(--dark)}
.blog_page_search button{border:0;background:var(--primary);color:#fff;border-radius:24px;font-size:var(--fs-label);font-weight:600;padding:8px 22px}
.blog_page_search button:hover{background:var(--primary-dark)}

/* ---------- Category chips ---------- */
.blog_page_cats{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 10px;margin-bottom:18px;scrollbar-width:thin}
.blog_page_cat{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #c6cedb;border-radius:30px;padding:5px 14px 5px 5px;font-size:var(--fs-label);font-weight:500;color:var(--dark);transition:.2s}
.blog_page_cat:hover{border-color:var(--primary);color:var(--primary)}
.blog_page_cat.active{background:var(--primary);border-color:var(--primary);color:#fff}
.blog_page_cat img,.blog_page_cat .blog_page_cat_icon{width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0}
.blog_page_cat .blog_page_cat_icon{display:grid;place-items:center;background:var(--light-blue);color:var(--primary);font-size:14px}
.blog_page_cat.active .blog_page_cat_icon{background:rgba(255,255,255,.2);color:#fff}
.blog_page_cat small{font-size:11px;opacity:.75}

.blog_page_result{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12.5px;color:#6b7280;margin:0 0 16px}
.blog_page_result a{color:var(--primary);font-weight:500}

/* ---------- Blog cards ---------- */
.blog_page_grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.blog_page_card{display:flex;flex-direction:column;background:#fff;border:1px solid #c6cedb;border-radius:8px;overflow:hidden;box-shadow:2px 3px 3px rgba(4,21,44,.4);transition:transform .2s,box-shadow .2s;height:100%}
.blog_page_card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(7,111,230,.15)}
.blog_page_card_img{position:relative;display:block;aspect-ratio:16/10;background:var(--light-blue);overflow:hidden}
.blog_page_card_img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.blog_page_card:hover .blog_page_card_img img{transform:scale(1.05)}
.blog_page_card_noimg{width:100%;height:100%;display:grid;place-items:center;font-size:46px;color:#b8c7dc}
.blog_page_card_badge{position:absolute;left:12px;top:12px;background:#fff;color:var(--primary);font-size:11px;font-weight:600;border-radius:20px;padding:4px 12px;box-shadow:0 2px 8px rgba(4,21,44,.15)}
.blog_page_card_body{display:flex;flex-direction:column;flex:1;padding:16px 18px 18px}
.blog_page_meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11.5px;color:#6b7280;margin-bottom:8px}
.blog_page_meta i{color:var(--primary);margin-right:3px}
.blog_page_card h3{font-size:var(--fs-card-title);font-weight:600;line-height:1.4;margin:0 0 8px}
.blog_page_card h3 a{color:var(--dark)}
.blog_page_card h3 a:hover{color:var(--primary)}
.blog_page_card p{font-size:12.5px;line-height:1.6;color:#4b5563;margin:0 0 14px}
.blog_page_more{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-label);font-weight:600;color:var(--primary)}
.blog_page_more:hover{gap:10px;color:var(--primary-dark)}
.blog_page_empty{text-align:center;padding:50px 16px;background:#fff;border:1px dashed #c6cedb;border-radius:8px;color:#6b7280}
.blog_page_empty i{display:block;font-size:44px;color:#b8c7dc;margin-bottom:10px}
.blog_page_empty h6{color:var(--dark);font-weight:600}
.blog_page_pager{margin-top:28px}

/* ---------- Details ---------- */
.blog_detail_meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:6px;font-size:12.5px;color:#374151}
.blog_detail_meta i{color:var(--primary);margin-right:4px}
.blog_detail_meta img{width:30px;height:30px;border-radius:50%;object-fit:cover;margin-right:6px}
.blog_detail_banner{display:block;width:100%;max-height:460px;object-fit:cover;border-radius:6px 6px 0 0}
.blog_detail_section_title{display:flex;align-items:center;gap:8px;font-size:var(--fs-card-title);font-weight:600;color:var(--dark);margin:26px 0 12px}
.blog_detail_section_title i{color:var(--primary)}

.blog_detail_gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.blog_detail_gallery button{position:relative;border:0;padding:0;border-radius:6px;overflow:hidden;aspect-ratio:4/3;background:var(--light-blue);cursor:zoom-in}
.blog_detail_gallery img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.blog_detail_gallery button:hover img{transform:scale(1.07)}
.blog_detail_gallery button::after{content:"\F52A";font-family:"bootstrap-icons";position:absolute;inset:0;display:grid;place-items:center;font-size:22px;color:#fff;background:rgba(4,21,44,.35);opacity:0;transition:opacity .25s}
.blog_detail_gallery button:hover::after{opacity:1}

.blog_detail_tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;padding-top:16px;border-top:1px solid #e3e8f0}
.blog_detail_tags span{font-size:12px;background:var(--light-blue);color:var(--primary);border-radius:20px;padding:4px 12px}

/* lightbox */
.blog_lightbox .modal-content{background:transparent;border:0}
.blog_lightbox .carousel-item img{max-height:82vh;width:auto;max-width:100%;margin:0 auto;display:block;border-radius:6px}
.blog_lightbox .btn-close{position:absolute;top:-38px;right:0;z-index:2;filter:invert(1);opacity:1}
.blog_lightbox .carousel-control-prev,.blog_lightbox .carousel-control-next{width:44px;height:44px;top:50%;transform:translateY(-50%);background:rgba(4,21,44,.55);border-radius:50%;opacity:1}
.blog_lightbox .carousel-control-prev{left:6px}
.blog_lightbox .carousel-control-next{right:6px}
.blog_lightbox_count{text-align:center;color:#fff;font-size:13px;margin-top:10px}

/* sidebar */
.blog_side{display:flex;flex-direction:column;gap:16px;position:sticky;top:90px}
.blog_side_box{background:#fff;border:1px solid #c6cedb;border-radius:6px;padding:16px;box-shadow:2px 3px 3px rgba(4,21,44,.4)}
.blog_side_box h6{font-size:var(--fs-small);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#6b7280;margin:0 0 12px}
.blog_side_box .blog_page_search{margin:0;box-shadow:none;padding-left:12px}
.blog_side_box .blog_page_search button{padding:7px 14px}
.blog_side_cats a{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:6px;font-size:var(--fs-label);color:var(--dark)}
.blog_side_cats a:hover,.blog_side_cats a.active{background:var(--light-blue);color:var(--primary)}
.blog_side_cats img,.blog_side_cats .blog_page_cat_icon{width:32px;height:32px;border-radius:6px;object-fit:cover;flex-shrink:0;display:grid;place-items:center;background:var(--light-blue);color:var(--primary)}
.blog_side_cats span{flex:1;min-width:0}
.blog_side_cats small{font-size:11px;background:var(--light-blue);color:var(--primary);border-radius:20px;padding:2px 9px}
.blog_side_recent a{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid #f0f3f8;color:var(--dark)}
.blog_side_recent a:last-child{border-bottom:0;padding-bottom:0}
.blog_side_recent img,.blog_side_recent .blog_side_noimg{width:64px;height:50px;border-radius:6px;object-fit:cover;flex-shrink:0;background:var(--light-blue);display:grid;place-items:center;color:#b8c7dc}
.blog_side_recent strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;font-weight:600;line-height:1.4}
.blog_side_recent a:hover strong{color:var(--primary)}
.blog_side_recent small{font-size:11px;color:#6b7280}

.blog_related{margin-top:34px}
.blog_related .blog_page_grid{grid-template-columns:repeat(3,minmax(0,1fr))}

/* layout with sidebar */
.blog_detail_grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}

/* ---------- Responsive ---------- */
@media (max-width:1199px){
  .blog_page_grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:991px){
  .blog_detail_grid{grid-template-columns:1fr}
  .blog_side{position:static}
  .blog_related .blog_page_grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:576px){
  .blog_page_grid,.blog_related .blog_page_grid{grid-template-columns:1fr;gap:16px}
  .blog_detail_gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .blog_page_search button{padding:8px 14px}
  .blog_detail_banner{max-height:240px}
}

/* ---------- Likes ---------- */
.blog_like_btn{display:inline-flex;align-items:center;gap:6px;border:1px solid #c9d6e8;background:#fff;color:var(--dark);border-radius:30px;padding:6px 14px;font-size:var(--fs-label);font-weight:500;transition:.2s;width:auto!important;height:auto!important}
.blog_like_btn i{color:#EF4444;font-size:15px}
.blog_like_btn b{font-weight:600;color:#6b7280}
.blog_like_btn:hover{border-color:#EF4444;color:var(--dark)}
.blog_like_btn.liked{background:#FEECEC;border-color:#EF4444}
.blog_like_btn.liked b{color:#EF4444}
.blog_like_btn:disabled{opacity:.7}
.blog_comment_jump i{color:var(--primary)}
.blog_comment_jump:hover{border-color:var(--primary)}
.blog_share_sep{width:1px;height:22px;background:#e3e8f0;margin:0 4px}
/* the share line's round icon style must not apply to these two buttons */
.info_page_share a.blog_like_btn,.info_page_share a.blog_like_btn:hover{background:#fff;color:var(--dark);border-radius:30px;display:inline-flex}

/* card counts */
.blog_page_meta .blog_page_stat i{color:#EF4444}
.blog_page_meta .blog_page_stat_c i{color:var(--primary)}

/* ---------- Comments ---------- */
.blog_comments{margin-bottom:16px}
.blog_comment_new{display:flex;gap:12px;margin-bottom:22px}
.blog_comment_avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1px solid #e3e8f0}
.blog_comment_form{flex:1;min-width:0;margin-top:8px}
.blog_comment_new .blog_comment_form{margin-top:0}
.blog_comment_form textarea{width:100%;border:1px solid #c9d6e8;border-radius:8px;padding:10px 12px;font-size:var(--fs-label);color:var(--dark);resize:vertical;outline:0;font-family:inherit}
.blog_comment_form textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(7,111,230,.12)}
.blog_comment_form_btns{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.blog_comment_login{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--light-blue);border-radius:8px;padding:12px 16px;margin-bottom:22px;font-size:var(--fs-label);color:#374151}
.blog_comment_login i{color:var(--primary);font-size:18px}
.blog_comment_login .btn{margin-left:auto}
.blog_comment{display:flex;gap:12px;padding:16px 0;border-top:1px solid #f0f3f8;scroll-margin-top:100px}
.blog_comment:target>.blog_comment_main>.blog_comment_text{background:#FFF9DB}
.blog_comment_main{flex:1;min-width:0}
.blog_comment_head{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-bottom:4px}
.blog_comment_head strong{font-size:var(--fs-label);font-weight:600;color:var(--dark)}
.blog_comment_head small{font-size:11.5px;color:#6b7280}
.blog_comment_badge{font-size:10.5px;font-weight:600;color:var(--primary);background:var(--light-blue);border-radius:20px;padding:2px 8px}
.blog_comment_text{font-size:var(--fs-label);line-height:1.65;color:#374151;margin:0 0 6px;overflow-wrap:anywhere;border-radius:6px;transition:background .6s}
.blog_comment_actions{display:flex;flex-wrap:wrap;gap:14px}
.blog_comment_link{border:0;background:none;padding:0;font-size:12px;font-weight:500;color:#6b7280}
.blog_comment_link:hover{color:var(--primary)}
.blog_comment_link.text-danger:hover{color:#b91c1c!important}
.blog_comment_replies{margin-top:6px}
.blog_comment_reply{padding:12px 0 0;border-top:0}
.blog_comment_reply .blog_comment_avatar{width:34px;height:34px}
.blog_comment_empty{text-align:center;color:#6b7280;font-size:var(--fs-label);margin:6px 0 0;padding:18px 0;border-top:1px solid #f0f3f8}
.blog_comment_empty i{display:block;font-size:32px;color:#b8c7dc;margin-bottom:6px}

@media (max-width:576px){
  .blog_comment_new .blog_comment_avatar{display:none}
  .blog_comment_avatar{width:36px;height:36px}
  .blog_comment_reply .blog_comment_avatar{width:30px;height:30px}
  .blog_comment_replies{margin-left:-10px}
  .blog_share_sep{display:none}
}

/* thumbnail shown in place of a missing banner: natural size, centred */
.blog_detail_banner.blog_detail_banner_small{width:auto;max-width:calc(100% - 44px);max-height:340px;margin:22px auto 0;border-radius:8px;border:1px solid #e3e8f0}

/* ---------- Page width ----------
   same as the other pages: left edge = LMS logo, right edge = "Get Started" button */
@media (min-width:992px){
  .blog_page_wide .container{
    max-width:none;
    padding-left:max(1.5rem,calc(50% - 680px));
    padding-right:max(1.5rem,calc(50% - 728px));
  }
  .blog_detail_grid{grid-template-columns:minmax(0,1fr) 320px;gap:32px}
  .blog_page_wide .info_page_hero_inner{justify-content:space-between}
  .blog_page_wide .info_page_art{margin-right:40px}
}
@media (min-width:1400px){
  .blog_page_grid{gap:26px}
}

/* Comment button opens the comments card */
.blog_comment_jump{cursor:pointer}
.blog_comment_jump.active{background:var(--light-blue);border-color:var(--primary)}
.blog_comment_jump.active b{color:var(--primary)}
.blog_comments{animation:blog_comments_in .25s ease}
@keyframes blog_comments_in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Follow us: footer social links in their brand colours */
.blog_detail_share .blog_follow_facebook{color:#1877f2}
.blog_detail_share .blog_follow_instagram{color:#e1306c}
.blog_detail_share .blog_follow_youtube{color:#ff0000}
.blog_detail_share .blog_follow_linkedin{color:#0a66c2}
.blog_detail_share a[class^=blog_follow_]:hover{color:#fff;transform:translateY(-2px)}
.blog_detail_share .blog_follow_facebook:hover{background:#1877f2}
.blog_detail_share .blog_follow_instagram:hover{background:linear-gradient(45deg,#f9a825,#e1306c,#833ab4)}
.blog_detail_share .blog_follow_youtube:hover{background:#ff0000}
.blog_detail_share .blog_follow_linkedin:hover{background:#0a66c2}
.blog_detail_share a[class^=blog_follow_]{transition:transform .2s,background .2s,color .2s}