/* SI Blog Redesign v2.5.0 */

/* ─── ARCHIVE ─────────────────────────── */
.si-archive-wrap{background:#f8f7f5;min-height:60vh;padding:44px 0 80px;}
.si-archive-inner{max-width:980px;margin:0 auto;padding:0 28px;}

.si-blog-header{margin-bottom:28px;}
.si-blog-header h1{font-family:'IBM Plex Sans Thai',sans-serif;font-size:36px;font-weight:600;color:#111827;margin:0 0 8px;line-height:1.2;letter-spacing:-.3px;}
.si-blog-header p{font-family:'IBM Plex Sans Thai',sans-serif;font-size:16px;color:#6b7280;margin:0;line-height:1.65;}

/* Search */
.si-search-form{display:flex;gap:0;margin-bottom:32px;border:1px solid #d1d5db;border-radius:10px;overflow:visible;background:#fff;position:relative;}
.si-search-form input{flex:1;border:none;outline:none;padding:13px 18px;font-family:'IBM Plex Sans Thai',sans-serif;font-size:15px;color:#111827;background:transparent;}
.si-search-form input::placeholder{color:#9ca3af;}
.si-search-form button{padding:0 22px;background:#002554;color:#FFC600;border:none;cursor:pointer;font-family:'IBM Plex Sans Thai',sans-serif;font-size:14px;font-weight:500;border-radius:0 9px 9px 0;white-space:nowrap;}
.si-search-form button:hover{background:#001a3d;}

/* Realtime search dropdown */
.si-search-drop{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,.08);z-index:999;overflow:hidden;}
.si-drop-item{display:flex;align-items:center;padding:12px 16px;text-decoration:none;border-bottom:.5px solid #f3f4f6;}
.si-drop-item:last-child{border-bottom:none;}
.si-drop-item:hover{background:#f8f7f5;}
.si-drop-title{font-family:'IBM Plex Sans Thai',sans-serif;font-size:14px;font-weight:500;color:#111827;line-height:1.4;}
.si-drop-date{font-family:'IBM Plex Sans Thai',sans-serif;font-size:12px;color:#9ca3af;white-space:nowrap;flex-shrink:0;}
.si-drop-empty{font-family:'IBM Plex Sans Thai',sans-serif;font-size:14px;color:#9ca3af;padding:14px 16px;text-align:center;}

/* Topic toggle header */
.si-topic-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.si-topic-toggle{display:flex;gap:2px;background:#f3f4f6;border-radius:8px;padding:3px;}
.si-toggle-btn{font-family:'IBM Plex Sans Thai',sans-serif;font-size:12px;font-weight:500;color:#6b7280;border:none;background:transparent;padding:5px 14px;border-radius:6px;cursor:pointer;transition:all .15s;white-space:nowrap;}
.si-toggle-btn.active{background:#fff;color:#002554;box-shadow:0 1px 3px rgba(0,0,0,.1);}

/* Categories grid */
.si-topic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:10px;margin-bottom:36px;}
.si-topic-tile{border:.5px solid #e5e7eb;border-radius:12px;padding:16px 14px 12px;cursor:pointer;background:#fff;transition:border-color .15s;text-decoration:none;display:block;}
.si-topic-tile:hover{border-color:#9ca3af;}
.si-topic-bar{display:block;width:24px;height:3px;border-radius:99px;margin-bottom:10px;}
.si-topic-tile h3{font-family:'IBM Plex Sans Thai',sans-serif;font-size:14px;font-weight:500;color:#111827;margin:0 0 4px;line-height:1.35;}
.si-topic-tile span{font-family:'IBM Plex Sans Thai',sans-serif;font-size:12px;color:#9ca3af;}

/* Tags — 3-col grid with accent + hover fill */
.si-tag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-bottom:36px;}
.si-tag-tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:10px 10px 8px;border-radius:10px;border:.5px solid #e5e7eb;background:#fff;text-decoration:none;overflow:hidden;transition:all .2s;min-height:52px;}
.si-tag-tile::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent,#002554);transition:height .2s;}
.si-tag-tile:hover{background:#002554;border-color:#002554;box-shadow:0 4px 16px rgba(0,37,84,.15);}
.si-tag-tile:hover::before{height:3px;background:#FFC600;}
.si-tag-tile:hover .si-tag-name{color:#fff;}
.si-tag-tile:hover .si-tag-arrow{opacity:1;}
.si-tag-name{font-family:'IBM Plex Sans Thai',sans-serif;font-size:13px;font-weight:500;color:#111827;line-height:1.4;flex:1;}
.si-tag-arrow{font-size:11px;color:#FFC600;opacity:0;align-self:flex-end;transition:opacity .2s;}

/* Section label */
.si-sec-lbl{font-family:'IBM Plex Sans Thai',sans-serif;font-size:12px;font-weight:500;color:#9ca3af;text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px;display:flex;align-items:center;gap:10px;}
.si-sec-lbl::after{content:'';flex:1;height:.5px;background:#e5e7eb;}

/* Featured */
.si-feat-outer{margin-bottom:14px;border-radius:16px;overflow:hidden;display:flex;text-decoration:none;}
.si-feat-accent{width:5px;flex-shrink:0;background:#FFC600;}
.si-feat-inner{flex:1;background:#002554;padding:28px 32px;cursor:pointer;transition:background .15s;}
.si-feat-inner:hover{background:#001a3d;}
.si-badge{display:inline-block;font-family:'IBM Plex Sans Thai',sans-serif;font-size:11px;font-weight:500;padding:4px 10px;border-radius:99px;background:#FFC600;color:#002554;margin-bottom:14px;letter-spacing:.03em;}
.si-feat-inner h2{font-family:'IBM Plex Sans Thai',sans-serif;font-size:26px;font-weight:600;color:#fff;line-height:1.4;margin:0 0 12px;}
.si-feat-inner p{font-family:'IBM Plex Sans Thai',sans-serif;font-size:15px;color:rgba(255,255,255,.68);line-height:1.8;margin:0 0 18px;}
.si-feat-meta{display:flex;align-items:center;gap:10px;font-family:'IBM Plex Sans Thai',sans-serif;font-size:12px;color:rgba(255,255,255,.45);}
.si-dv{width:1px;height:12px;background:rgba(255,255,255,.25);}
.si-rt{color:#FFC600;font-weight:500;}

/* Card grid */
.si-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-bottom:24px;}
.si-card{display:flex;flex-direction:column;background:#fff;border:.5px solid #e5e7eb;border-radius:14px;overflow:hidden;text-decoration:none;transition:border-color .15s;}
.si-card:hover{border-color:#9ca3af;}
.si-card-top{height:4px;}
.si-card-body{flex:1;display:flex;flex-direction:column;gap:8px;padding:18px;}
.si-card-cat{font-family:'IBM Plex Sans Thai',sans-serif;font-size:11px;font-weight:500;padding:3px 9px;border-radius:99px;display:inline-block;width:fit-content;}
/* Category badges — brand palette only */
.cat-transform,.cat-ai,.cat-strategy,.cat-hr,.cat-invest{background:rgba(0,37,84,.08);color:#002554;}
.cat-leadership,.cat-change,.cat-mindset,.cat-crypto{background:rgba(255,198,0,.22);color:#7A5800;}
.si-card h3{font-family:'IBM Plex Sans Thai',sans-serif;font-size:16px;font-weight:500;color:#111827;line-height:1.55;margin:0;flex:1;}
.si-card-meta{font-family:'IBM Plex Sans Thai',sans-serif;font-size:12px;color:#9ca3af;border-top:.5px solid #f3f4f6;padding-top:9px;display:flex;justify-content:space-between;margin-top:auto;}

/* Numbered list */
.si-nlist{margin-bottom:24px;}
.si-ni{display:flex;gap:14px;align-items:flex-start;padding:13px 0;border-bottom:.5px solid #e5e7eb;text-decoration:none;}
.si-ni:last-child{border-bottom:none;}
.si-nnum{font-family:'Poppins',sans-serif;font-size:20px;font-weight:500;color:#FFC600;min-width:26px;line-height:1;margin-top:2px;}
.si-ni:hover .si-nnum{color:#002554;}
.si-ni h4{font-family:'IBM Plex Sans Thai',sans-serif;font-size:16px;font-weight:500;color:#111827;margin:0 0 4px;line-height:1.5;}
.si-ni span{font-family:'IBM Plex Sans Thai',sans-serif;font-size:12px;color:#9ca3af;}

/* More divider */
.si-more-divider{font-family:'IBM Plex Sans Thai',sans-serif;font-size:13px;color:#9ca3af;margin:8px 0 18px;display:flex;align-items:center;gap:12px;}
.si-more-divider::before,.si-more-divider::after{content:'';flex:1;height:.5px;background:#e5e7eb;}

/* Horizontal list */
.si-hlist{margin-bottom:18px;}
.si-hitem{display:flex;gap:14px;align-items:center;padding:13px 0;border-bottom:.5px solid #e5e7eb;text-decoration:none;}
.si-hitem:last-child{border-bottom:none;}
.si-hitem-left{flex:1;}
.si-hitem-left h4{font-family:'IBM Plex Sans Thai',sans-serif;font-size:15px;font-weight:500;color:#111827;line-height:1.5;margin:0 0 3px;}
.si-hitem-left span{font-family:'IBM Plex Sans Thai',sans-serif;font-size:12px;color:#9ca3af;}
.si-hitem-rt{font-family:'IBM Plex Sans Thai',sans-serif;font-size:12px;color:#9ca3af;white-space:nowrap;}

/* Load more */
.si-load-area{display:flex;align-items:center;justify-content:space-between;padding-top:4px;}
.si-load-hint{font-family:'IBM Plex Sans Thai',sans-serif;font-size:13px;color:#9ca3af;}
.si-load-btn{padding:11px 26px;border:1.5px solid #002554;border-radius:10px;background:transparent;color:#002554;font-family:'IBM Plex Sans Thai',sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:all .15s;}
.si-load-btn:hover{background:#002554;color:#FFC600;}
.si-load-btn:disabled{opacity:.4;cursor:not-allowed;}

/* ─── SINGLE ──────────────────────────── */
/* Same bg as archive for visual consistency */
.si-single-wrap{background:#f8f7f5;min-height:60vh;padding:36px 0 80px;}
.si-single-inner{max-width:760px;margin:0 auto;padding:0 28px;}
.si-article-card{background:#fff;border-radius:16px;padding:40px 44px;margin-bottom:32px;}

.si-breadcrumb{font-family:'IBM Plex Sans Thai',sans-serif;font-size:13px;color:#9ca3af;margin-bottom:18px;display:flex;gap:6px;align-items:center;}
.si-breadcrumb a{color:#9ca3af;text-decoration:none;}
.si-breadcrumb a:hover{color:#002554;}
.si-progress-bar{height:3px;background:#f3f4f6;border-radius:99px;margin-bottom:20px;overflow:hidden;}
.si-progress-fill{height:100%;width:0%;background:#FFC600;border-radius:99px;transition:width .1s;}
.si-art-badge{font-family:'IBM Plex Sans Thai',sans-serif;font-size:11px;font-weight:500;padding:4px 11px;border-radius:99px;display:inline-block;margin-bottom:14px;}
.si-art-title{font-family:'IBM Plex Sans Thai',sans-serif;font-size:30px;font-weight:600;color:#111827;line-height:1.35;margin:0 0 16px;}
.si-art-lead{font-family:'IBM Plex Sans Thai',sans-serif;font-size:17px;color:#4b5563;line-height:1.85;margin:0 0 22px;border-left:3px solid #FFC600;padding-left:16px;}
.si-art-meta{display:flex;gap:14px;font-family:'IBM Plex Sans Thai',sans-serif;font-size:13px;color:#9ca3af;align-items:center;padding-bottom:20px;border-bottom:.5px solid #f3f4f6;margin-bottom:28px;flex-wrap:wrap;}
.si-author{display:flex;align-items:center;gap:8px;}
.si-avatar{width:32px;height:32px;border-radius:50%;background:#002554;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;color:#FFC600;flex-shrink:0;}
.si-meta-dot{width:3px;height:3px;background:#d1d5db;border-radius:50%;}

.si-art-content{font-family:'IBM Plex Sans Thai',sans-serif;font-size:17px;line-height:1.9;color:#1f2937;margin-bottom:36px;}
.si-art-content h2{font-family:'IBM Plex Sans Thai',sans-serif;font-size:22px;font-weight:600;color:#111827;margin:36px 0 12px;line-height:1.35;}
.si-art-content h3{font-family:'IBM Plex Sans Thai',sans-serif;font-size:19px;font-weight:500;color:#111827;margin:28px 0 8px;line-height:1.4;}
.si-art-content p{margin:0 0 20px;}
.si-art-content blockquote{border-left:3px solid #FFC600;background:rgba(0,37,84,.04);padding:16px 20px;margin:28px 0;font-style:normal;border-radius:0 8px 8px 0;font-size:16px;line-height:1.85;}
.si-art-content strong{font-weight:600;}
.si-art-content a{color:#002554;text-decoration:underline;text-decoration-color:#FFC600;}
.si-art-content ul,.si-art-content ol{padding-left:24px;margin:0 0 20px;}
.si-art-content li{margin-bottom:8px;line-height:1.85;}

.si-tags{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 0;padding-top:20px;border-top:.5px solid #f3f4f6;}
.si-tag{font-family:'IBM Plex Sans Thai',sans-serif;font-size:12px;padding:5px 14px;border-radius:99px;border:.5px solid #d1d5db;color:#6b7280;text-decoration:none;}
.si-tag:hover{border-color:#002554;color:#002554;}

.si-cta-box{background:#002554;border-radius:16px;padding:28px 32px;margin-bottom:32px;}
.si-cta-box h3{font-family:'IBM Plex Sans Thai',sans-serif;font-size:20px;font-weight:600;color:#fff;margin:0 0 8px;}
.si-cta-box p{font-family:'IBM Plex Sans Thai',sans-serif;font-size:15px;color:rgba(255,255,255,.65);margin:0 0 20px;line-height:1.7;}
.si-cta-btn{display:inline-block;background:#FFC600;color:#002554;font-family:'IBM Plex Sans Thai',sans-serif;font-size:14px;font-weight:600;padding:12px 24px;border-radius:10px;border:none;cursor:pointer;text-decoration:none;}

.si-related-title{font-family:'IBM Plex Sans Thai',sans-serif;font-size:12px;font-weight:500;color:#9ca3af;text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px;}
.si-related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;}
.si-related-card{background:#fff;border:.5px solid #e5e7eb;border-radius:12px;padding:18px;text-decoration:none;}
.si-related-card:hover{border-color:#9ca3af;}
.si-related-card h4{font-family:'IBM Plex Sans Thai',sans-serif;font-size:14px;font-weight:500;color:#111827;line-height:1.5;margin:8px 0 6px;}
.si-related-card span{font-family:'IBM Plex Sans Thai',sans-serif;font-size:12px;color:#9ca3af;}

@media(max-width:640px){
  .si-archive-inner,.si-single-inner{padding:0 16px;}
  .si-blog-header h1{font-size:26px;}
  .si-feat-inner{padding:20px 18px;}
  .si-feat-inner h2{font-size:21px;}
  .si-article-card{padding:24px 20px;}
  .si-art-title{font-size:24px;}
  .si-art-lead{font-size:16px;}
  .si-art-content{font-size:16px;}
  .si-grid{grid-template-columns:1fr;}
  /* Categories: 2 cols on mobile */
  .si-topic-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
  .si-topic-tile{padding:14px 12px 10px;}
  /* Tags: 3 cols on mobile */
  .si-tag-grid{grid-template-columns:repeat(3,1fr);gap:6px;}
  .si-tag-tile{padding:12px 10px 9px;}
}
