/* =========================================================
   theme-bw.css (FINAL / MINIMAL)
   UJCMS Clean B/W Glass Theme (niuniureputation-like)
   Scope: overrides only (Bootstrap friendly)
   Structure: Tokens -> Base -> Header -> Modules -> Footer -> Responsive
   ========================================================= */

/* =========================
   0) Tokens
   ========================= */
:root{
  --bw-bg: #f6f7f9;
  --bw-surface: rgba(255,255,255,.82);
  --bw-surface2: rgba(255,255,255,.72);
  --bw-text: #111;
  --bw-muted: rgba(17,17,17,.62);
  --bw-border: rgba(17,17,17,.10);
  --bw-shadow: 0 12px 30px rgba(0,0,0,.08);
  --bw-shadow-sm: 0 8px 18px rgba(0,0,0,.08);
  --bw-blur: 12px;
  --bw-radius: 16px;
  --bw-radius-sm: 12px;
  --bw-max: 1180px;

  /* legacy vars used by old css (keep compatible) */
  --main-color: var(--bw-text);
  --second-color: var(--bw-text);
  --text-color: var(--bw-muted);
  --white-color: #fff;
  --border-color: var(--bw-border);
}

/* =========================
   1) Base
   ========================= */
html,body{height:100%;}
body{
  color: var(--bw-text);
  background: linear-gradient(180deg, #ffffff 0%, var(--bw-bg) 70%, #ffffff 100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a{color:inherit;text-decoration:none;}
a:hover{color:#000;text-decoration:none;}
img{max-width:100%;height:auto;display:block;}
.container{max-width:var(--bw-max)!important;}

.skip-link{
  position:absolute;left:-999px;top:10px;z-index:9999;
  background:#111;color:#fff;padding:10px 12px;border-radius:999px;
}
.skip-link:focus{left:12px;}

/* lightweight glass card helper */
.card-glass{
  background: var(--bw-surface);
  border: 1px solid var(--bw-border);
  border-radius: var(--bw-radius);
  box-shadow: var(--bw-shadow);
  backdrop-filter: blur(var(--bw-blur));
  -webkit-backdrop-filter: blur(var(--bw-blur));
}
.badge-soft{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
  font-size:12px;font-weight:800;letter-spacing:.2px;
}

/* =========================
   2) Header / Nav (clean)
   ========================= */
.header-wrapper{
  background: rgba(255,255,255,.86)!important;
  border-bottom: 1px solid rgba(0,0,0,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.site-topbar{padding:10px 0 0;}
.site-topbar .text-muted{color:var(--bw-muted)!important;}

.navigation .main-head{padding:14px 0;}
.logo-area .logo{filter: grayscale(100%);opacity:.95;}

.category-menu{
  border-top:1px solid rgba(0,0,0,.06);
  background: transparent;
}
.category-list{
  display:flex;flex-wrap:wrap;gap:8px;
  margin:0;padding:10px 0;list-style:none;
}
.category-link{
  display:inline-flex;align-items:center;
  padding:9px 12px;border-radius:999px;
  font-weight:800;letter-spacing:.2px;
  color:var(--bw-text)!important;
  transition: background .15s ease, color .15s ease;
}
.category-link:hover{background:rgba(0,0,0,.05);}
.category-list li.active .category-link,
.category-link.active{background:#111;color:#fff!important;}

/* Search */
.search-form{
  display:flex;align-items:center;gap:10px;
  padding:6px 10px;border-radius:999px;
  background: rgba(0,0,0,.03);
  border:1px solid rgba(0,0,0,.08);
}
.search-form .search-input{
  border:0!important;outline:0!important;background:transparent;
  box-shadow:none!important;color:var(--bw-text);
}
.search-form .icon-btn{
  width:34px;height:34px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#111;color:#fff;cursor:pointer;
}

/* mobile menu fallback */
.mobile-menu{
  background: rgba(255,255,255,.96);
  border-right: 1px solid rgba(0,0,0,.10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.mobile-menu-link{font-weight:800;color:var(--bw-text)!important;}

/* =========================
   3) Section titles (SEO friendly hierarchy)
   ========================= */
.section-title{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;margin:0 0 14px;
}
.section-title h2{margin:0;font-size:22px;font-weight:950;letter-spacing:.3px;}
.section-title .hint{font-size:13px;color:var(--bw-muted);}

/* =========================
   4) Focus grid (2/3 main + 1/3 side, like reference)
   ========================= */
.focus-grid{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
  align-items: stretch;
}

/* main card */
.focus-main{
  border-radius: var(--bw-radius);
  overflow:hidden;
  background: var(--bw-surface);
  border:1px solid var(--bw-border);
  box-shadow: var(--bw-shadow);
  display:flex;
  flex-direction: column;
  min-height: 420px;
}
.focus-cover{position:relative;display:block;flex:0 0 auto;}
.focus-cover img{
  width:100%;
  height: 320px;
  object-fit: cover;
  filter: saturate(.95) contrast(1.05);
}
.focus-cover::after{
  content:"";position:absolute;inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.00) 45%, rgba(0,0,0,.40) 100%);
  pointer-events:none;
}
.focus-badge{
  position:absolute;left:14px;top:14px;
  padding:6px 10px;border-radius:999px;
  background: rgba(255,255,255,.88);
  border:1px solid rgba(0,0,0,.12);
  font-weight:900;font-size:12px;letter-spacing:.2px;
}
.focus-body{
  padding:16px 18px 18px;
  display:flex;flex-direction:column;gap:10px;
}
.focus-title{margin:0;font-size:20px;font-weight:950;line-height:1.25;}
.focus-meta{margin:0;color:var(--bw-muted);font-size:13px;}
.focus-excerpt{
  margin:0;color:var(--bw-muted);line-height:1.85;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* side list */
.focus-side{
  display:flex;flex-direction:column;gap:14px;
}
.focus-mini{
  border-radius: var(--bw-radius);
  overflow:hidden;
  background: var(--bw-surface);
  border:1px solid var(--bw-border);
  box-shadow: var(--bw-shadow-sm);
  display:flex;
  flex-direction: column;
  min-height: 203px;
}
.focus-mini-cover{position:relative;display:block;}
.focus-mini-cover img{width:100%;height: 122px;object-fit:cover;filter:saturate(.95) contrast(1.05);}
.focus-mini-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;}
.focus-mini-title{margin:0;font-size:15px;font-weight:900;line-height:1.35;}
.focus-mini-title a{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.focus-mini-meta{margin:0;color:var(--bw-muted);font-size:12.5px;}

/* =========================
   5) Card list used across pages
   ========================= */
.top-post-card,
.latest-post .top-post-card,
.world-news-list .top-post-card{
  border-radius: var(--bw-radius);
  border: 1px solid var(--bw-border);
  background: var(--bw-surface);
  box-shadow: var(--bw-shadow-sm);
  overflow:hidden;
}

/* image */
.post-img{position:relative;overflow:hidden;background:rgba(0,0,0,.03);}
.post-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.95) contrast(1.05);}

/* compact card */
.top-post-details{padding:12px 14px 14px;display:flex;flex-direction:column;gap:10px;}
.top-post-title{
  font-weight:950;letter-spacing:.15px;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.post-date{margin:0;color:var(--bw-muted)!important;font-size:13px;}

/* =========================
   6) Swiper (top-news-slider) - integrated / minimal
   ========================= */
.top-news-slider{padding: 8px 0 14px;}
.top-news-slider .swiper-wrapper{align-items:stretch;}
.top-news-slider .swiper-slide{height:auto;}
.top-news-slider .top-post-card{height:100%;}
.top-news-slider .top-post-card .post-img{height: 260px;}
.top-news-slider .top-post-card .top-post-details{
  margin-top:-46px;
  background: rgba(255,255,255,.88);
  border-top: 1px solid rgba(0,0,0,.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 0 0 var(--bw-radius) var(--bw-radius);
}

/* =========================
   7) Feature / Story blocks (keep clean)
   ========================= */
.feature-news-card,.story-card{
  border-radius: var(--bw-radius);
  border: 1px solid var(--bw-border);
  background: var(--bw-surface);
  box-shadow: var(--bw-shadow);
  overflow:hidden;
}
.feature-news-img{border-radius: var(--bw-radius-sm);overflow:hidden;border:1px solid rgba(0,0,0,.08);}
.feature-news-img img{width:100%;height:240px;object-fit:cover;}
.feature-card-inner{padding:16px 16px 18px;}
.feature-post-title{font-weight:950;line-height:1.35;margin:0 0 10px;display:block;}
.post-des{color:var(--bw-muted);line-height:1.85;margin:0 0 12px;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.comment-like-area{display:flex;gap:10px;flex-wrap:wrap;}
.comment-like-area .fav-link{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 10px;border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  font-size:12px;font-weight:800;
}

/* sidebar latest block */
.latest-post,.category-list-area{
  border-radius: var(--bw-radius);
  border: 1px solid var(--bw-border);
  background: var(--bw-surface);
  box-shadow: var(--bw-shadow);
  padding: 16px;
}
.latest-post .top-post-card{border-radius: var(--bw-radius-sm);background: rgba(255,255,255,.90);}
.latest-post .top-post-card{display:flex;align-items:stretch;}
.latest-post .post-img{width:34%;min-width:120px;border-right:1px solid rgba(0,0,0,.08);}
.latest-post .post-img img{height:110px;}
.latest-post .top-post-details{width:66%;}

/* category list */
.category-list-s{list-style:none;padding:0;margin:0;display:grid;gap:10px;}
.inner-category-link{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  font-weight:900;
}
.news-count{
  min-width:34px;text-align:center;
  padding:3px 10px;border-radius:999px;
  background:#111;color:#fff;font-size:12px;
}

/* =========================
   8) Footer (B/W)
   ========================= */
.footer-wrapper{
  margin-top: 38px;
  background: rgba(255,255,255,.86);
  border-top: 1px solid rgba(0,0,0,.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.footer-wrapper p{margin:0;color:var(--bw-muted);line-height:1.9;font-size:14px;word-break:break-word;}
.footer-wrapper a{color:var(--bw-text);border-bottom:1px solid transparent;}
.footer-wrapper a:hover{border-bottom-color:rgba(0,0,0,.28);}
.footer-wrapper .ml-2{margin-left:10px!important;}
.footer-wrapper .container > .row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.footer-wrapper .border-top{border-top:1px solid rgba(0,0,0,.10)!important;margin-top:18px;padding-top:14px;color:rgba(17,17,17,.55);}

/* =========================
   9) Responsive
   ========================= */
@media (max-width: 992px){
  .container{padding-left:14px;padding-right:14px;}
  .focus-cover img{height: 280px;}
  .feature-news-img img{height: 210px;}
  .top-news-slider .top-post-card .post-img{height: 240px;}
}
@media (max-width: 768px){
  .category-link{padding:8px 10px;font-size:13px;}
  .focus-grid{grid-template-columns: 1fr;gap:14px;}
  .focus-main{min-height:auto;}
  .focus-cover img{height: 220px;}
  .focus-mini-cover img{height: 150px;}
  .latest-post .post-img{width:38%;min-width:110px;}
  .latest-post .post-img img{height:96px;}
  .footer-wrapper p{text-align:center;}
  .footer-wrapper .ml-2{display:inline-block;margin:0 8px 6px!important;}
}
@media (max-width: 480px){
  .focus-cover img{height: 200px;}
  .top-news-slider .top-post-card .post-img{height: 210px;}
}