/* ==================================================
   EthicaX — News UI (Unified) v2.0
   - Supports:
     1) [ethicax_news_index] listing (.ethicax-news …)
     2) Single fallback template (_single-fallback-render.php) (.ex-news-* …)
   - Mobile-first, premium, scoped, theme-safe
   ================================================== */

/* ---------- Design tokens (safe) ---------- */
:root{
  --ex-bg:#ffffff;
  --ex-ink:#0f172a;
  --ex-muted:#475569;
  --ex-line:#e2e8f0;
  --ex-card:#ffffff;
  --ex-soft:#f8fafc;
  --ex-brand:#2563eb;
  --ex-brand2:#0ea5e9;
  --ex-radius:18px;
  --ex-shadow:0 12px 30px rgba(2,6,23,.08);
  --ex-shadow2:0 6px 16px rgba(2,6,23,.08);
  --ex-max:960px;
}

/* ==================================================
   A) NEWS LISTING (Shortcode) — .ethicax-news
   ================================================== */

.ethicax-news{
  width: min(100% - 28px, var(--ex-max));
  margin: 0 auto;
  padding: 22px 0 44px;
  color: var(--ex-ink);
}

.ethicax-news .news-head{
  background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(14,165,233,.10));
  border: 1px solid var(--ex-line);
  border-radius: var(--ex-radius);
  padding: 18px 16px;
  box-shadow: var(--ex-shadow2);
  margin: 10px 0 18px;
}

.ethicax-news .news-title{
  margin: 10px 0 6px;
  font-size: clamp(24px, 6vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.ethicax-news .news-subtitle{
  margin: 0;
  color: var(--ex-muted);
  font-size: 14px;
  line-height: 1.45;
}

.ethicax-news .news-subtitle a{
  color: var(--ex-brand);
  text-decoration: none;
}
.ethicax-news .news-subtitle a:hover{ text-decoration: underline; }

.ethicax-news .news-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 760px){
  .ethicax-news .news-grid{
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

@media (min-width: 1100px){
  .ethicax-news .news-grid{
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.ethicax-news .news-card{
  border: 1px solid var(--ex-line);
  border-radius: var(--ex-radius);
  overflow: hidden;
  background: var(--ex-card);
  box-shadow: var(--ex-shadow2);
  transition: transform .15s ease, box-shadow .15s ease;
}

.ethicax-news .news-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--ex-shadow);
}

.ethicax-news .news-thumb{
  display:block;
  width:100%;
  aspect-ratio: 16 / 9;
  background: var(--ex-soft);
  border-bottom: 1px solid var(--ex-line);
}

.ethicax-news .news-thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.ethicax-news .news-body{
  padding: 16px;
}

.ethicax-news .news-meta{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  align-items:center;
  font-size: 13px;
  color: var(--ex-muted);
  margin-bottom: 10px;
}

.ethicax-news .news-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(37,99,235,.18);
  background: rgba(37,99,235,.08);
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 600;
}

.ethicax-news .news-h2{
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.ethicax-news .news-h2 a{
  color: var(--ex-ink);
  text-decoration: none;
}
.ethicax-news .news-h2 a:hover{ color: var(--ex-brand); }

.ethicax-news .news-excerpt{
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ex-muted);
}

.ethicax-news .news-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(15,23,42,.08);
}

.ethicax-news .news-readmore{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  text-decoration:none;
  font-weight: 700;
  font-size: 14px;
  color: var(--ex-brand);
}
.ethicax-news .news-readmore:hover{ text-decoration: underline; }

.ethicax-news .news-time{
  font-size: 12px;
  color: var(--ex-muted);
}

/* Pagination */
.ethicax-news .news-pager{
  display:flex;
  justify-content:center;
  gap: 8px;
  margin: 18px 0 0;
  flex-wrap: wrap;
}
.ethicax-news .news-pager a,
.ethicax-news .news-pager span{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.14);
  text-decoration:none;
  font-size: 13px;
  color: var(--ex-ink);
  background:#fff;
}
.ethicax-news .news-pager a:hover{
  border-color: rgba(37,99,235,.35);
  box-shadow: var(--ex-shadow2);
}
.ethicax-news .news-pager span.current{
  font-weight: 800;
  background: rgba(15,23,42,.06);
}

/* ==================================================
   B) SINGLE NEWS (Fallback Template) — .ex-news-*
   ================================================== */

.ex-news-wrap{ background:var(--ex-bg); color:var(--ex-ink); }

.ex-news-container{
  width: min(100% - 28px, var(--ex-max));
  margin: 0 auto;
}

.ex-news-hero{
  background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(14,165,233,.10));
  border-bottom: 1px solid var(--ex-line);
  padding: 26px 0 18px;
}

.ex-news-breadcrumb{
  font-size: 14px;
  color: var(--ex-muted);
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.ex-news-breadcrumb a{ color: var(--ex-brand); text-decoration:none; }
.ex-news-breadcrumb a:hover{ text-decoration:underline; }

.ex-news-title{
  font-size: clamp(26px, 6vw, 44px);
  line-height: 1.12;
  margin: 14px 0 10px;
  letter-spacing: -0.02em;
}

.ex-news-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  font-size: 14px;
  color: var(--ex-muted);
}

.ex-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(37,99,235,.08);
  color: #1d4ed8;
  border: 1px solid rgba(37,99,235,.15);
  font-weight: 600;
}

.ex-news-main{
  padding: 22px 0 44px;
}

.ex-news-card{
  background: var(--ex-card);
  border: 1px solid var(--ex-line);
  border-radius: var(--ex-radius);
  box-shadow: var(--ex-shadow2);
  overflow:hidden;
}

.ex-news-body{
  padding: 18px 18px 16px;
}

.ex-news-content{
  font-size: 17px;
  line-height: 1.8;
  color: var(--ex-ink);
}

.ex-news-content p{ margin: 0 0 14px; }

.ex-news-content h2,
.ex-news-content h3{
  margin: 22px 0 10px;
  letter-spacing: -0.01em;
}

.ex-news-content a{ color: var(--ex-brand); text-decoration:none; }
.ex-news-content a:hover{ text-decoration:underline; }

.ex-news-content img{
  max-width:100%;
  height:auto;
  border-radius: 14px;
  border: 1px solid var(--ex-line);
  box-shadow: var(--ex-shadow2);
  margin: 14px 0;
}

/* Buttons: premium + mobile wrap */
.ex-news-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding: 14px 18px 18px;
  border-top: 1px solid var(--ex-line);
  background: var(--ex-soft);
}

.ex-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--ex-line);
  background:#fff;
  color: var(--ex-ink);
  text-decoration:none;
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
}

.ex-btn:hover{ box-shadow: var(--ex-shadow2); border-color: rgba(37,99,235,.25); }

.ex-btn-primary{
  background: var(--ex-brand);
  border-color: rgba(37,99,235,.5);
  color:#fff;
}
.ex-btn-primary:hover{ filter: brightness(.98); }

@media (max-width: 420px){
  .ex-btn{ width: 100%; } /* full-width buttons on small phones */
}

/* Related cards */
.ex-related-title{
  font-size: 16px;
  font-weight: 800;
  margin: 18px 0 10px;
  color: var(--ex-ink);
}

.ex-news-related{
  margin-top: 10px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 760px){
  .ex-news-related{ grid-template-columns: 1fr 1fr; }
}

.ex-related-item{
  border: 1px solid var(--ex-line);
  border-radius: 14px;
  background:#fff;
  padding: 14px;
  box-shadow: var(--ex-shadow2);
}

.ex-related-item a{ text-decoration:none; color: var(--ex-ink); }
.ex-related-item a:hover{ color: var(--ex-brand); }

.ex-related-meta{
  color: var(--ex-muted);
  font-size: 13px;
  margin-top: 6px;
}