/* =========================================
   CLINIC RHAC - News Detail (Clean + FIXED)
   File: public/css/news-show.css
   Notes:
   - Removed "force everything black" that killed green title
   - Keeps body text black, BUT allows Word inline colors for title
   - Fix Khmer clipping (line-height 115%, Khmer OS Battambang)
   ========================================= */

:root{
  --text:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;
  --card:#ffffff;
  --brand1:#0fa56e;
  --brand2:#0ea5e9;
  --shadow:0 18px 55px rgba(2,6,23,.12);
  --shadow-soft:0 10px 30px rgba(2,6,23,.08);
}

/* =============== Page spacing =============== */
.news-detail{ padding:18px 0 40px; }

/* =============== Top back link =============== */
.news-topbar{ margin:8px 0 14px; }

.back-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#0b5fae;
  font-weight:900;
  text-decoration:none;
  background:rgba(14,165,233,.08);
  border:1px solid rgba(14,165,233,.18);
  padding:10px 14px;
  border-radius:999px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.back-link:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(14,165,233,.16);
}

/* =============== Layout grid =============== */
.news-detail .news-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
@media (min-width:992px){
  .news-detail .news-grid{
    grid-template-columns:minmax(0,1fr) 360px;
    gap:18px;
    align-items:start;
  }
}

/* =========================================
   HERO (Poster-style + Clear image)
   ========================================= */
.news-detail .article-hero{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  border:2px solid rgba(15,165,110,.25);
  box-shadow:0 24px 70px rgba(2,6,23,.12);
  background:
    radial-gradient(900px 320px at 25% 0%, rgba(255,138,183,.40), rgba(255,255,255,0) 60%),
    radial-gradient(900px 320px at 30% 100%, rgba(15,165,110,.30), rgba(255,255,255,0) 62%),
    linear-gradient(180deg,#fff 0%,#fff 70%,#fff 100%);
  width:100%;
  max-width:100%;
  margin:0 0 1.4rem 0;
  padding:0;
  min-height:0;
}

.news-detail .article-hero img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain; /* show full banner */
  background:transparent;
  filter:brightness(1.08) contrast(1.06) saturate(1.05);
  max-height:none;
}

/* fade only at bottom */
.news-detail .hero-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(to bottom,
    rgba(0,0,0,0) 70%,
    rgba(0,0,0,.10) 82%,
    rgba(0,0,0,.28) 100%);
}

/* hero text */
.news-detail .hero-content{
  position:absolute;
  left:22px;
  right:22px;
  bottom:8px;
  z-index:3;
  color:#fff;
}

.news-detail .hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:#0b3b2a;
  font-weight:900;
  font-size:.92rem;
  border:1px solid rgba(15,165,110,.22);
  box-shadow:0 14px 28px rgba(2,6,23,.18);
  margin-bottom:8px;
}

.news-detail .hero-title{
  margin:0 0 8px 0;
  font-family:"Moul","Moul Light","Moul Pali","Moulpali",serif;
  font-weight:400;
  line-height:1.55;             /* ✅ Khmer room */
  padding-top:.12em;            /* ✅ avoid clipping */
  padding-bottom:.16em;
  font-size:clamp(1.25rem, 1rem + .8vw, 1.75rem);
  text-shadow:0 10px 20px rgba(0,0,0,.30);
  overflow:visible;
}

.news-detail .hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
  font-weight:900;
  font-size:.92rem;
  color:rgba(255,255,255,.92);
}
.news-detail .meta-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

/* Mobile hero tuning */
@media (max-width:767.98px){
  .news-detail .hero-content{ left:14px; right:14px; bottom:6px; }
}

/* Mobile/Tablet hero: keep text low + small panel */
@media (max-width:991.98px){
  .news-detail .hero-overlay{
    background:linear-gradient(to bottom,
      rgba(0,0,0,0) 80%,
      rgba(0,0,0,.10) 90%,
      rgba(0,0,0,.26) 100%) !important;
  }

  .news-detail .hero-content{
    left:12px !important;
    right:12px !important;
    bottom:6px !important;
    max-width:66% !important;
    background:rgba(0,0,0,.22) !important;
    backdrop-filter:blur(2px) !important;
    border:1px solid rgba(255,255,255,.20) !important;
    border-radius:14px !important;
    padding:8px 10px 8px !important;
  }

  .news-detail .hero-badge{
    font-size:12px !important;
    padding:5px 10px !important;
    margin-bottom:6px !important;
  }

  .news-detail .hero-title{
    font-size:1.15rem !important;
    margin:0 0 6px 0 !important;
  }

  .news-detail .hero-meta{
    font-size:12px !important;
    gap:6px 10px !important;
  }
}

@media (max-width:420px){
  .news-detail .hero-content{ max-width:72% !important; }
  .news-detail .hero-title{ font-size:1.05rem !important; }
}

/* =========================================
   ARTICLE CARD (Body)
   ========================================= */
.news-detail .article-card{
  margin-top:14px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* ✅ Default body is black, but we DO NOT use * selector (so titles can be green) */
.news-detail .article-body{
  padding:18px 18px 12px;
  background:#fff;
  color:#111827;
  font-family:"Battambang","Noto Sans Khmer","Siemreap",system-ui,sans-serif;
  font-size:1.15rem;
  line-height:2.05;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
  overflow:visible;
}

/* keep media nice */
.news-detail .article-body img{
  max-width:100%;
  height:auto;
  border-radius:14px;
}

/* headings inside body */
.news-detail .article-body h1,
.news-detail .article-body h2,
.news-detail .article-body h3,
.news-detail .article-body h4{
  font-family:"Moul","Battambang","Noto Sans Khmer",system-ui,sans-serif;
  font-weight:900;
  line-height:1.7;
  margin-top:1.2rem;
  margin-bottom:.55rem;
  color:var(--brand1);
}

/* paragraphs/lists default black */
.news-detail .article-body :where(p,li,div){
  color:#111827;
}

/* Lists */
.news-detail .article-body ul,
.news-detail .article-body ol{
  margin:.6rem 0 1rem;
  padding-left:1.6rem;
}
.news-detail .article-body li{ margin:.35rem 0; }

/* footer share row */
.news-detail .article-footer{
  padding:12px 18px 18px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.news-detail .share-row{
  display:flex;
  align-items:center;
  gap:10px;
}
.news-detail .share-label{
  color:var(--muted);
  font-weight:900;
}
.news-detail .share-btn{
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  border:1px solid rgba(14,165,233,.18);
  background:rgba(14,165,233,.08);
  color:#0b5fae;
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
.news-detail .share-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(14,165,233,.16);
}

/* Mobile body */
@media (max-width:767.98px){
  .news-detail .article-body{
    padding:14px 14px 10px;
    font-size:1.08rem;
    line-height:2.0;
  }
}

/* =========================================
   WORD/CKEditor pasted HTML FIX
   ========================================= */

/* Remove MS Word tight line-height and bad font */
.news-detail .article-body span[style*="Khmer OS Battambang"],
.news-detail .article-body span[style*="line-height: 115%"],
.news-detail .article-body p[style*="line-height: 115%"]{
  font-family:"Noto Sans Khmer","Battambang","Siemreap",system-ui,sans-serif !important;
  line-height:1.85 !important;            /* ✅ avoid Khmer clipping */
  display:inline-block !important;         /* ✅ prevent paint clipping */
  padding-top:.12em !important;
  padding-bottom:.14em !important;
  overflow:visible !important;
}

/* ✅ KEEP GREEN TITLE: centered Word title lines */
.news-detail .article-body p[style*="text-align: center"] span{
  color:var(--brand1) !important;
}

/* Bold */
.news-detail .article-body strong,
.news-detail .article-body b{
  font-weight:800 !important;
  font-synthesis:weight;
}

/* =========================================
   SIDEBAR
   ========================================= */
.news-detail .aside-col{
  display:flex;
  flex-direction:column;
  gap:14px;
}
@media (min-width:992px){
  .news-detail .aside-col{
    position:sticky;
    top:88px;
  }
}

.news-detail .aside-card{
  background:radial-gradient(circle at top left,#ecfdf3 0,#f9fafb 42%,#eff6ff 100%);
  border-radius:20px;
  padding:1.1rem 1rem 1.2rem;
  border:1px solid #e2e8f0;
  box-shadow:0 18px 45px rgba(15,23,42,.12), 0 4px 10px rgba(15,23,42,.05);
  position:relative;
  overflow:hidden;
}
.news-detail .aside-card::before{
  content:"";
  position:absolute;
  inset-inline:18px;
  top:0;
  height:4px;
  border-radius:0 0 999px 999px;
  background:linear-gradient(90deg,#16a34a,#0ea5e9);
  opacity:.9;
}
.news-detail .aside-title{
  font-family:"Battambang","Noto Sans Khmer",system-ui,sans-serif;
  font-weight:1000;
  font-size:1.25rem;
  margin:.9rem 0 .75rem;
  color:var(--text);
}

.news-detail .aside-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.news-detail .aside-item{
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:10px;
  align-items:center;
  padding:10px;
  border-radius:14px;
  text-decoration:none;
  color:inherit;
  background:rgba(255,255,255,.85);
  border:1px solid transparent;
  transition:background .15s ease, box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.news-detail .aside-item:hover{
  background:#fff;
  border-color:rgba(14,165,233,.20);
  box-shadow:0 14px 32px rgba(37,99,235,.14);
  transform:translateY(-2px);
}
.news-detail .aside-item .thumb{
  width:72px;
  height:56px;
  border-radius:12px;
  object-fit:cover;
  display:block;
}
.news-detail .aside-item .title{
  font-family:"Battambang","Noto Sans Khmer",system-ui,sans-serif;
  font-weight:900;
  font-size:1.02rem;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.news-detail .aside-item .date{
  margin-top:6px;
  color:var(--muted);
  font-weight:800;
  font-size:.92rem;
  display:flex;
  gap:8px;
  align-items:center;
}

/* Quick links */
.news-detail .quick-links{
  list-style:none;
  padding:6px 0 0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.news-detail .quick-links li a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:999px;
  text-decoration:none;
  font-family:"Battambang","Noto Sans Khmer",system-ui,sans-serif;
  font-size:1.02rem;
  font-weight:900;
  color:var(--text);
  background:rgba(241,245,249,.95);
  border:1px solid rgba(2,6,23,.06);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.news-detail .quick-links li a:hover{
  background:linear-gradient(90deg,#16a34a,#0ea5e9);
  color:#fff;
  box-shadow:0 14px 32px rgba(22,163,74,.25);
  transform:translateY(-1px);
}
.news-detail .quick-links li a i{
  width:34px;
  height:34px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#dcfce7;
  color:#16a34a;
}
.news-detail .quick-links li a:hover i{
  background:rgba(255,255,255,.18);
  color:#fff;
}

/* Mobile sidebar tweaks */
@media (max-width:767.98px){
  .news-detail .aside-card{ border-radius:18px; padding:1.05rem 1rem 1.2rem; }
  .news-detail .aside-title{ font-size:1.15rem; }
  .news-detail .quick-links li a{ font-size:.98rem; padding:10px 12px; }
}

/* =========================================
   No-image hero (show page)
   ========================================= */
.news-detail .noimg-hero{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:18px;
  padding:18px 18px 16px;
  box-shadow:0 18px 45px rgba(15,23,42,.10);
  margin-bottom:14px;
}

.news-detail .noimg-badge{
  display:inline-flex;
  align-items:center;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(15,165,110,.10);
  border:1px solid rgba(15,165,110,.22);
  color:#0b3b2a;
  font-weight:900;
  margin-bottom:10px;
}

/* ✅ Solid green Khmer-safe title + no clipping */
.news-detail .noimg-title{
  font-family:"Moul","Battambang","Noto Sans Khmer",serif;
  font-weight:400;
  color:var(--brand1);
  font-size:clamp(1.2rem, 1rem + 1.0vw, 2.0rem);
  line-height:1.85;
  padding-top:.18em;
  padding-bottom:.22em;
  display:inline-block;
  overflow:visible;
  margin:0 0 10px 0;
  text-shadow:0 6px 18px rgba(15,165,110,.18);
}

.news-detail .noimg-meta{
  display:flex;
  align-items:center;
  gap:10px;
  color:#64748b;
  font-weight:800;
  font-size:1rem;
}
/* =========================================
   Reduce line-height for CENTER GREEN TITLES
   ========================================= */

/* Title center (green) - reduce gap between lines */
.news-detail .article-body p[style*="text-align: center"]{
  margin: 0 !important;
}

.news-detail .article-body p[style*="text-align: center"] span{
  line-height: 1.35 !important;      /* ✅ smaller gap */
  padding-top: .06em !important;     /* still prevent Khmer clipping */
  padding-bottom: .08em !important;
  display: inline-block !important;
}

/* Extra: if title has <b> */
.news-detail .article-body p[style*="text-align: center"] b,
.news-detail .article-body p[style*="text-align: center"] strong{
  line-height: 1.35 !important;
}
/* =========================================
   GLOBAL LINE-HEIGHT REDUCTION
   ========================================= */

.news-detail .article-body{
  line-height: 1.75 !important;   /* ✅ smaller */
}

/* Paragraph & list spacing */
.news-detail .article-body p,
.news-detail .article-body li{
  line-height: 1.75 !important;
  margin-bottom: .6rem !important;
}

/* Headings slightly tighter */
.news-detail .article-body h1,
.news-detail .article-body h2,
.news-detail .article-body h3{
  line-height: 1.6 !important;
}
/* =========================================
   REDUCE TOP SPACE ABOVE TITLE
   ========================================= */

/* Reduce overall page top padding */
.news-detail{
  padding-top: 6px !important;   /* was 18px */
}

/* Remove extra margin from first element */
.news-detail .article-body > :first-child{
  margin-top: 0 !important;
}

/* If using no-image hero */
.news-detail .noimg-hero{
  margin-top: 0 !important;
  padding-top: 10px !important;  /* smaller */
}

/* If title comes directly inside article-card */
.news-detail .article-card{
  margin-top: 6px !important;    /* was 14px */
}
/* =========================================
   CLEAN KHMER TYPOGRAPHY RESET (FINAL FIX)
   ========================================= */

/* 1️⃣ Reset Word inline span behavior */
.news-detail .article-body span{
  display: inline !important;      /* remove inline-block */
  padding: 0 !important;
  margin: 0 !important;
}

/* 2️⃣ Remove weird spacing around punctuation */
.news-detail .article-body{
  line-height: 1.75 !important;   /* clean readable */
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
}

/* 3️⃣ Fix question mark & punctuation alignment */
.news-detail .article-body p,
.news-detail .article-body li{
  line-height: 1.7 !important;
  margin-bottom: .6rem !important;
}

/* 4️⃣ Prevent extra bottom gap from bold text */
.news-detail .article-body b,
.news-detail .article-body strong{
  display: inline !important;
  font-weight: 700 !important;
}

/* 5️⃣ Fix headings */
.news-detail .article-body h1,
.news-detail .article-body h2,
.news-detail .article-body h3{
  line-height: 1.5 !important;
  margin-top: 1rem !important;
  margin-bottom: .6rem !important;
}

/* 6️⃣ Remove Word extra spacing */
.news-detail .article-body p{
  margin-top: 0 !important;
}

/* 7️⃣ Clean bullet alignment */
.news-detail .article-body ul,
.news-detail .article-body ol{
  padding-left: 1.4rem !important;
  margin-top: .5rem !important;
}
/* =====================================================
   FINAL MOBILE + TABLET CLEAN FIX (KHMER)
   Put at VERY END of news-show.css
   ===================================================== */

/* --------- Global clean typography (all devices) --------- */
.news-detail .article-body{
  line-height: 1.72 !important;
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
}

/* Word pasted spans often break punctuation -> reset */
.news-detail .article-body span,
.news-detail .article-body b,
.news-detail .article-body strong{
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Prevent first paragraph from creating big top gap */
.news-detail .article-body > :first-child{
  margin-top: 0 !important;
}

/* Lists look cleaner */
.news-detail .article-body ul,
.news-detail .article-body ol{
  padding-left: 1.35rem !important;
  margin: .55rem 0 .9rem !important;
}
.news-detail .article-body li{
  margin: .35rem 0 !important;
}

/* Headings inside body */
.news-detail .article-body h1,
.news-detail .article-body h2,
.news-detail .article-body h3{
  line-height: 1.55 !important;
  margin: 1rem 0 .55rem !important;
}

/* Center title from Word: keep green + tighter line spacing */
.news-detail .article-body p[style*="text-align: center"]{
  margin: .25rem 0 !important;
}
.news-detail .article-body p[style*="text-align: center"] span{
  color: #0fa56e !important;
  line-height: 1.32 !important;
  display: inline-block !important;
  padding-top: .06em !important;
  padding-bottom: .08em !important;
  overflow: visible !important;
}

/* --------- Mobile + Tablet specific --------- */
@media (max-width: 991.98px){

  /* Reduce page top spacing on small screens */
  .news-detail{
    padding-top: 4px !important;
    padding-bottom: 28px !important;
  }

  /* Reduce extra spacing above card */
  .news-detail .article-card{
    margin-top: 8px !important;
    border-radius: 16px !important;
  }

  /* Make content comfortable on phone/tablet */
  .news-detail .article-body{
    padding: 14px 14px 12px !important;
    font-size: 1.05rem !important;  /* readable */
    line-height: 1.68 !important;   /* tighter */
  }

  .news-detail .article-body p,
  .news-detail .article-body li{
    font-size: 1.05rem !important;
    line-height: 1.68 !important;
    margin-bottom: .55rem !important;
  }

  /* Bullet indentation better on mobile */
  .news-detail .article-body ul,
  .news-detail .article-body ol{
    padding-left: 1.2rem !important;
  }

  /* Prevent punctuation drop caused by inline-block spans */
  .news-detail .article-body span{
    display: inline !important;
  }
}

/* Extra small phones */
@media (max-width: 420px){
  .news-detail .article-body{
    font-size: 1.02rem !important;
    line-height: 1.65 !important;
  }

  .news-detail .article-body p,
  .news-detail .article-body li{
    font-size: 1.02rem !important;
    line-height: 1.65 !important;
  }

  /* Titles a bit smaller */
  .news-detail .article-body p[style*="text-align: center"] span{
    font-size: 1.35rem !important;  /* if Word makes huge */
    line-height: 1.28 !important;
  }
}
/* =====================================================
   FINAL BASELINE FIX (Khmer letters not dropping)
   Put at VERY END of news-show.css
   ===================================================== */

/* 1) Absolutely forbid inline-block spans inside article */
.news-detail .article-body span,
.news-detail .article-body b,
.news-detail .article-body strong,
.news-detail .article-body em,
.news-detail .article-body i{
  display: inline !important;
  vertical-align: baseline !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: inherit !important;
}

/* 2) Remove any accidental letter/word spacing that makes Khmer look broken */
.news-detail .article-body{
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
  font-kerning: normal !important;
}

/* 3) Make punctuation stick to line correctly */
.news-detail .article-body p{
  white-space: normal !important;
}

/* 4) If Word pasted spans have huge font-size -> normalize */
.news-detail .article-body span[style*="font-size"]{
  font-size: inherit !important;
}

/* 5) Fix (HPV) or Latin words: keep same baseline */
.news-detail .article-body :where(span, b, strong){
  font-variant-ligatures: none;
}

/* 6) Tight but readable line-height for Khmer body */
.news-detail .article-body{
  line-height: 1.68 !important;
}
.news-detail .article-body p,
.news-detail .article-body li{
  line-height: 1.68 !important;
  margin-bottom: .55rem !important;
}
/* =========================================
   Allow Word large title to stay large
   ========================================= */

.news-detail .article-body span[style*="font-size: 25"],
.news-detail .article-body span[style*="font-size: 26"],
.news-detail .article-body span[style*="font-size: 24"]{
    font-size: 2rem !important;   /* big but clean */
    line-height: 1.6 !important;
    font-weight: 800 !important;
    display: inline-block;
}

/* Prevent Word tiny spacing */
.news-detail .article-body span[style*="Khmer OS Battambang"]{
    font-family: "Battambang","Noto Sans Khmer",sans-serif !important;
}
/* =========================================
   WORD TITLE FONT-SIZE FIX (22pt+)
   Put at VERY END of news-show.css
   ========================================= */

/* 1) Stop shrinking Word spans globally (IMPORTANT) */
.news-detail .article-body span{
  font-size: inherit !important;     /* don't force 1.15rem */
}

/* 2) Make Word big headings stay big (22pt, 24pt, 25pt, 26pt...) */
.news-detail .article-body span[style*="font-size: 22.0pt"],
.news-detail .article-body span[style*="font-size: 23.0pt"],
.news-detail .article-body span[style*="font-size: 24.0pt"],
.news-detail .article-body span[style*="font-size: 25.0pt"],
.news-detail .article-body span[style*="font-size: 26.0pt"],
.news-detail .article-body span[style*="font-size: 27.0pt"]{
  font-size: clamp(1.55rem, 1.1rem + 1.2vw, 2.05rem) !important;
  line-height: 1.55 !important;
  font-weight: 800 !important;
  display: inline-block !important;
  padding: .06em 0 .10em !important;
  overflow: visible !important;
}

/* 3) If the big title contains a nested <span> (subtitle), make it smaller */
.news-detail .article-body span[style*="font-size: 22.0pt"] span,
.news-detail .article-body span[style*="font-size: 23.0pt"] span,
.news-detail .article-body span[style*="font-size: 24.0pt"] span,
.news-detail .article-body span[style*="font-size: 25.0pt"] span,
.news-detail .article-body span[style*="font-size: 26.0pt"] span{
  font-size: 0.72em !important;
  font-weight: 700 !important;
  color: inherit !important;
  display: inline !important;
}

/* 4) Remove Word garbage tag o:p */
.news-detail .article-body o\:p{ display:none !important; }

/* 5) Replace Khmer OS font with web Khmer font (stable & beautiful) */
.news-detail .article-body span[style*="Khmer OS Battambang"]{
  font-family: "Battambang","Noto Sans Khmer",system-ui,sans-serif !important;
}