/* ============================================================
   BLOG REDESIGN STYLES
   Depends on CSS custom properties already defined in
   assets-redesign/redesignmain.css (--navy, --orange, --radius-md,
   --shadow-sm, etc). Load this file AFTER redesignmain.css.
   ============================================================ */

/* ---------- Shared: blog card grid (used on list + category pages) ---------- */
.blog-list-section{padding:56px 0 70px}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.blog-card{background:#fff;border:1px solid rgba(11,29,53,.08);border-radius:var(--radius-md,20px);overflow:hidden;box-shadow:0 8px 24px rgba(11,29,53,.05);transition:transform .3s ease,box-shadow .3s ease;display:flex;flex-direction:column;color:inherit;text-decoration:none}
.blog-card:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(11,29,53,.12);color:inherit}
.blog-card-img{width:100%;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,var(--navy,#0b1d35),var(--navy-light,#1a3260))}
.blog-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.blog-card:hover .blog-card-img img{transform:scale(1.06)}
.blog-card-body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.blog-card-title{font-size:17px;font-weight:700;color:var(--navy,#0b1d35);line-height:1.4;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-card-desc{font-size:13.5px;color:var(--text-mid,#4a5568);line-height:1.7;flex:1;margin-bottom:16px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-card-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--orange,#e8621a);margin-top:auto}
.blog-card:hover .blog-card-link i{transform:translateX(3px)}
.blog-card-link i{transition:transform .2s ease}

.blog-empty{text-align:center;padding:60px 20px;font-size:15.5px;color:var(--text-mid,#4a5568)}

/* ---------- Pagination ---------- */
.blog-pagination{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:48px;flex-wrap:wrap}
.bp-link{min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;padding:0 12px;border-radius:8px;border:1px solid var(--border,#e2e8f0);font-size:14px;font-weight:600;background:#fff;color:var(--text-mid,#4a5568);transition:.2s;text-decoration:none}
.bp-link:hover{border-color:var(--orange,#e8621a);color:var(--orange,#e8621a)}
.bp-link.active{background:var(--orange,#e8621a);border-color:var(--orange,#e8621a);color:#fff}

/* ---------- Blog detail page ---------- */
.blog-detail-section{padding:48px 0 70px}
.blog-detail-layout{display:grid;grid-template-columns:1fr 320px;gap:36px;align-items:start}
.blog-detail-main{background:#fff;border:1px solid rgba(11,29,53,.08);border-radius:var(--radius-md,20px);padding:32px 34px;box-shadow:0 10px 30px rgba(11,29,53,.05)}
.blog-hero-img{border-radius:16px;overflow:hidden;margin-bottom:28px}
.blog-hero-img img{width:100%;height:auto;display:block}
.blog-video-wrap{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;margin-bottom:28px;background:var(--navy,#0b1d35)}
.blog-video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.blog-back-link{margin-top:28px;display:inline-flex;align-items:center;gap:8px}

@media (max-width:991px){
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .blog-detail-layout{grid-template-columns:1fr}
  .blog-detail-main{padding:26px 22px}
}
@media (max-width:600px){
  .blog-grid{grid-template-columns:1fr}
  .blog-list-section{padding:40px 0 50px}
}

/* ================================
   BLOG ARTICLE TYPOGRAPHY
   These rules style whatever comes out of the CMS's rich-text editor.
   Content shape varies post to post (some split captions into their
   own <p>, some don't) so nothing here assumes a fixed structure —
   that's what broke earlier. Everything below just makes normal
   paragraphs, images, lists and tables read well, on their own terms.
================================ */

.blog-detail-main{
    font-size:17px;
    line-height:1.9;
    color:#374151;
}

.blog-detail-main p{
    margin:0 0 24px;
    line-height:1.9;
    color:#374151;
}

/* A paragraph that contains ONLY an image (the common "hero image
   pasted into the editor" case) gets centered — this only matches
   when the image is the sole content of the paragraph, so it can't
   mis-fire on paragraphs that mix an image with running text. */
.blog-detail-main p:has(> img:only-child){
    text-align:center;
}

.blog-detail-main h1,
.blog-detail-main h2,
.blog-detail-main h3,
.blog-detail-main h4,
.blog-detail-main h5,
.blog-detail-main h6{
    color:var(--navy,#0b1d35);
    font-weight:700;
    line-height:1.3;
    margin:40px 0 18px;
}

.blog-detail-main h2{ font-size:30px; }
.blog-detail-main h3{ font-size:24px; }

.blog-detail-main ul{
    list-style:disc;
    margin:0 0 24px 0;
    padding-left:24px;
}

.blog-detail-main ol{
    list-style:decimal;
    margin:0 0 24px 0;
    padding-left:24px;
}

.blog-detail-main li{
    margin-bottom:10px;
    padding-left:4px;
}

.blog-detail-main li::marker{
    color:var(--orange,#e8621a);
    font-weight:700;
}

.blog-detail-main strong{ font-weight:700; }
.blog-detail-main em{ font-style:italic; }
.blog-detail-main a{ text-decoration:none; color:var(--orange,#e8621a); }
.blog-detail-main a:hover{ text-decoration:underline; }

.blog-detail-main img{
    display:initial;
    max-width:100%;
    height:auto;
    border-radius:14px;
    margin:10px;
    vertical-align:top;
}
.blog-detail-main table{
    width:100%;
    border-collapse:collapse;
    margin:30px 0;
    overflow-x:auto;
    display:block;
}
.blog-detail-main table td,
.blog-detail-main table th{
    border:1px solid #e5e7eb;
    padding:12px;
}

.blog-detail-main iframe{
    width:100%;
    max-width:100%;
    aspect-ratio:16/9;
    border:none;
    border-radius:14px;
    margin:30px 0;
}

/* Word/CKEditor paste artifacts — neutralize their inline spacing
   quirks without trying to reinterpret their layout intent. */
.blog-detail-main .MsoNormal{
    margin:0 0 24px !important;
    line-height:1.9 !important;
}

.blog-article-title{
    font-size:34px;
    font-weight:700;
    color:var(--navy,#0b1d35);
    margin-bottom:8px;
}

.blog-date{
    color:#777;
    margin-bottom:30px;
    font-size:15px;
}

@media (max-width:768px){
  .blog-detail-main{ font-size:16px; padding:22px; }
  .blog-detail-main h2{ font-size:24px; }
  .blog-detail-main h3{ font-size:20px; }
  .blog-detail-main img{ margin:14px auto; }
}