/* ============================================================
news-details.css
Comprehensive, hardened styles for news-details page:
- Governance hero edge-to-edge
- Single hero image (first image)
- Merged Full Article card with cinematic slideshow and thumbnails
- Gold capsule captions, creative typography, responsive layout
- Zoom overlay with Prev/Next/Close controls
- Accessibility and defensive overrides to prevent accidental hiding
============================================================ */

/* -------------------------
  Root variables and fonts
------------------------- */
:root{
  --rg-blue-tint:#e6f0fa;
  --rg-white:#ffffff;
  --rg-dark-blue:#002b5c;
  --rg-muted:#6b7280;
  --rg-gold:#d4af37;
  --rg-shadow:0 8px 24px rgba(2,10,30,0.08);
  --rg-shadow-hover:0 12px 32px rgba(2,10,30,0.12);
  --rg-max-width:1200px;
  --rg-font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --rg-font-serif: "Merriweather", "Georgia", serif;
}

/* -------------------------
  Global page layout
------------------------- */
body.news-details-page {
  background: var(--rg-blue-tint);
  font-family: var(--rg-font-sans);
  color: var(--rg-dark-blue);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}

.rg-container {
  max-width: var(--rg-max-width);
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

/* Defensive: ensure main content visible */
main, .rg-main, .rg-page-wrapper {
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  height:auto !important;
  min-height:200px;
  position:relative;
  z-index:1;
}

/* -------------------------
  Governance hero — edge to edge
  Single image on right, text on left
------------------------- */
.rg-gov-hero {
  width:100%;
  box-sizing:border-box;
  background:linear-gradient(135deg,#002b5c,#0f4c81);
  color:#fff;
  padding:56px 0;
  overflow:visible;
}

.rg-gov-hero-inner {
  display:flex;
  align-items:center;
  gap:32px;
  flex-wrap:wrap;
  width:100%;
  margin:0 auto;
  padding:0 24px;
  max-width:var(--rg-max-width);
}

.rg-gov-hero-text {
  flex:1 1 520px;
  min-width:260px;
}

.rg-gov-hero-text h1 {
  font-family:var(--rg-font-serif);
  font-weight:900;
  font-size:44px;
  margin:0 0 10px;
  letter-spacing:-0.5px;
}

.rg-gov-hero-text p {
  margin:0 0 14px;
  font-size:16px;
  color:rgba(255,255,255,0.95);
  max-width:640px;
}

.rg-gov-hero-img {
  flex:0 0 420px;
  width:100%;
  max-width:420px;
  border-radius:18px;
  box-shadow:var(--rg-shadow);
  object-fit:cover;
  display:block;
}

/* Capsules */
.rg-pill-gold, .rg-pill-blue, .rg-pill-clear {
  display:inline-block;
  padding:6px 18px;
  border-radius:999px;
  font-weight:800;
  font-size:13px;
  margin-right:8px;
}

.rg-pill-gold { background:var(--rg-gold); color:var(--rg-dark-blue); }
.rg-pill-blue { background:#0f4c81; color:#fff; }
.rg-pill-clear { background:#fff; color:var(--rg-dark-blue); border:2px solid var(--rg-dark-blue); }

/* -------------------------
  Section headings and gold bar
------------------------- */
.rg-section-heading {
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:900;
  color:var(--rg-dark-blue);
  font-size:22px;
  margin:0;
}

.rg-thick-bar {
  color:var(--rg-gold);
  font-size:26px;
  font-weight:900;
}

.rg-section-goldline {
  height:3px;
  width:80px;
  background:var(--rg-gold);
  border-radius:999px;
  margin:10px 0 18px;
}

/* -------------------------
  Full Article merged card
  Layout: slideshow (left) + article (right)
------------------------- */
.rg-gov-box.rg-news-magazine.rg-merged-card {
  background:var(--rg-white);
  border-radius:18px;
  box-shadow:var(--rg-shadow);
  padding:22px;
  margin-top:18px;
  overflow:visible;
}

.rg-news-main-title { margin-bottom:14px; }

/* Title capsule inside card (smaller than section heading) */
.rg-news-title-pill {
  display:inline-block;
  padding:8px 20px;
  border-radius:999px;
  background:var(--rg-dark-blue);
  color:#fff;
  font-weight:900;
  font-size:18px;
  font-family:var(--rg-font-serif);
}

/* Flex inner layout */
.rg-news-magazine-inner {
  display:flex;
  gap:24px;
  align-items:flex-start;
  flex-wrap:wrap;
}

/* Slideshow container (left) */
.rg-news-slideshow {
  flex:3 1 0;
  min-width:320px;
}

.rg-news-slide-frame {
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background:#111;
  box-shadow:var(--rg-shadow-hover);
}

/* Main slide image */
#rg-news-slide-img {
  width:100%;
  height:360px;
  object-fit:cover;
  display:block;
  transition:transform .35s ease;
  cursor:zoom-in;
}

/* Gold caption inside image */
#rg-news-slide-caption {
  position:absolute;
  left:12px;
  bottom:12px;
  right:12px;
  background:rgba(212,175,55,0.92);
  color:var(--rg-dark-blue);
  padding:10px 14px;
  font-weight:800;
  font-size:15px;
  border-radius:12px;
  text-align:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.18);
}

/* Prev/Next buttons */
.rg-slide-btn {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,0.55);
  color:#fff;
  border:none;
  width:40px;
  height:40px;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:800;
  z-index:10;
}

.rg-slide-prev { left:12px; }
.rg-slide-next { right:12px; }

/* Dots centered */
.rg-slide-dots {
  position:absolute;
  bottom:14px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  z-index:11;
}

.rg-dot {
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,255,255,0.75);
  cursor:pointer;
  transition:all .18s ease;
}

.rg-dot.active { background:var(--rg-dark-blue); transform:scale(1.05); }

/* Thumbnail strip under slideshow */
.rg-thumb-strip {
  margin-top:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.rg-thumb {
  width:88px;
  height:64px;
  border-radius:10px;
  overflow:hidden;
  border:2px solid transparent;
  cursor:pointer;
  flex:0 0 auto;
  box-shadow:0 6px 18px rgba(2,10,30,0.06);
}

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

.rg-thumb.active { border-color:var(--rg-gold); transform:translateY(-4px); }

/* Article side (right) */
.rg-news-article {
  flex:2 1 0;
  min-width:260px;
}

/* Meta block */
.rg-news-meta-block { margin-bottom:12px; }

/* Summary in blue */
.rg-meta-summary {
  color:#0f4c81;
  font-size:15px;
  line-height:1.6;
  margin-bottom:8px;
  font-weight:700;
}

/* Published date tiny grey */
.rg-meta-date {
  font-size:12px;
  color:var(--rg-muted);
  margin-bottom:6px;
}

/* Publisher prefixed by "by" */
.rg-meta-publisher {
  font-size:14px;
  color:#4b5563;
  font-weight:600;
  margin-bottom:8px;
}

/* Body text: professional serif for readability */
.rg-news-body {
  font-family:var(--rg-font-serif);
  font-size:15px;
  color:var(--rg-dark-blue);
  line-height:1.85;
  text-align:left;
  margin-top:6px;
}

/* -------------------------
  More Images grid
------------------------- */
.rg-gov-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:22px;
  margin-top:18px;
}

.rg-gov-card {
  background:var(--rg-white);
  border-radius:18px;
  padding:14px;
  box-shadow:var(--rg-shadow);
  text-align:center;
}

.rg-gov-img-card {
  width:100%;
  height:240px;
  object-fit:cover;
  border-radius:14px;
  margin-bottom:12px;
}

/* Gold capsule caption under image */
.rg-gov-card h3 {
  display:inline-block;
  background:var(--rg-gold);
  color:var(--rg-dark-blue);
  padding:6px 12px;
  border-radius:999px;
  font-weight:800;
  font-size:14px;
  margin:0;
}

/* -------------------------
  Zoom overlay (global)
------------------------- */
.rg-img-overlay {
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.75);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:4000;
  padding:20px;
}

.rg-img-full-wrapper {
  position:relative;
  max-width:92%;
  max-height:88%;
}

.rg-img-full {
  width:100%;
  height:auto;
  max-height:85vh;
  object-fit:contain;
  border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,0.45);
}

/* Overlay controls */
.rg-img-full-controls {
  position:absolute;
  top:12px;
  right:12px;
  display:flex;
  gap:8px;
}

.rg-zoom-btn {
  background:rgba(0,0,0,0.7);
  color:#fff;
  border:none;
  width:40px;
  height:40px;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:800;
}

/* Prev/Next inside overlay */
#rg-zoom-prev, #rg-zoom-next {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,0.6);
  color:#fff;
  border:none;
  width:44px;
  height:44px;
  border-radius:50%;
  cursor:pointer;
  z-index:4010;
}

#rg-zoom-prev { left:12px; }
#rg-zoom-next { right:12px; }

/* -------------------------
  Gallery button (gold capsule)
------------------------- */
.rg-btn.rg-btn-gold.rg-gallery-btn {
  display:inline-block;
  margin:18px 0 0;
  padding:10px 20px;
  border-radius:999px;
  background:var(--rg-gold);
  color:var(--rg-dark-blue);
  font-weight:800;
  text-decoration:none;
  box-shadow:0 8px 24px rgba(212,175,55,0.12);
}

/* -------------------------
  Accessibility & focus states
------------------------- */
.rg-slide-btn:focus, .rg-zoom-btn:focus, .rg-thumb:focus, .rg-dot:focus, .rg-btn:focus {
  outline:3px solid rgba(13,110,253,0.12);
  outline-offset:3px;
}

/* -------------------------
  Responsive adjustments
------------------------- */
@media (max-width:1024px) {
  #rg-news-slide-img { height:320px; }
  .rg-gov-hero-img { max-width:360px; }
}

@media (max-width:768px) {
  .rg-gov-hero-inner { flex-direction:column; text-align:center; padding:0 18px; }
  .rg-news-magazine-inner { flex-direction:column-reverse; }
  .rg-news-slideshow, .rg-news-article { width:100%; }
  #rg-news-slide-img { height:260px; }
  .rg-thumb { width:64px; height:48px; }
  .rg-gov-img-card { height:200px; }
  .rg-news-title-pill { font-size:16px; padding:6px 16px; }
}

/* -------------------------
  Defensive overrides for known conflicts
------------------------- */
/* Hide any site-wide overlays that may be accidentally visible */
.site-overlay, .global-overlay, .rg-img-overlay[aria-hidden="true"] {
  display:none !important;
  pointer-events:none !important;
}

/* Ensure header does not cover content */
header, .site-header, .rg-header {
  position:relative;
  z-index:1100;
}

/* Ensure page wrapper sits above header overlays */
.rg-page-wrapper { z-index:1200; position:relative; }

/* -------------------------
  Typography creative touches
------------------------- */
.rg-news-title-pill { letter-spacing:-0.2px; }
.rg-news-body em, .rg-news-body i { font-style:italic; color:var(--rg-muted); }
.rg-news-body strong { color:var(--rg-dark-blue); font-weight:800; }

/* End of file */