/* /public_html/assets/news/news.css
   APR News / Tabs — YOUR ORIGINAL CSS + ONLY ADDED PATCHES (NOTHING REMOVED)
*/

/* =======================
   ORIGINAL (UNCHANGED)
   ======================= */
:root{
  --bg:#040512;
  --glass: rgba(20, 26, 56, .48);
  --glass2: rgba(20, 26, 56, .22);
  --stroke: rgba(255,255,255,.14);
  --text: rgba(255,255,255,.94);
  --muted: rgba(255,255,255,.72);
  --muted2: rgba(255,255,255,.55);
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --radius-xl: 22px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --maxw: 1100px;
  --gap: 14px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color: var(--text);
  background: var(--bg);
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

a{ color: inherit; }
code{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.bg-pop{
  position: fixed; inset:0; z-index:-3;
  background:
    radial-gradient(1100px 700px at 10% 18%, rgba(163, 66, 255, .38), transparent 62%),
    radial-gradient(1000px 700px at 86% 22%, rgba(0, 219, 255, .30), transparent 60%),
    radial-gradient(900px 650px at 55% 92%, rgba(255, 88, 203, .24), transparent 65%),
    radial-gradient(700px 480px at 30% 70%, rgba(80, 255, 196, .12), transparent 60%),
    linear-gradient(180deg, #030411, #060821 45%, #02030d);
  filter: saturate(1.2) contrast(1.06);
}

.bg-stars{
  position:fixed; inset:0; z-index:-2;
  background-image: radial-gradient(rgba(255,255,255,.22) 1px, transparent 1px);
  background-size: 92px 92px;
  opacity:.20;
  mix-blend-mode: screen;
}

.container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px 14px 70px;
}

.glass{
  background: linear-gradient(180deg, var(--glass), var(--glass2));
  border: 1px solid var(--stroke);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.glow-border{ position: relative; }
.glow-border:before{
  content:"";
  position:absolute; inset:-1px;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(161,75,255,.30), rgba(0,219,255,.24), rgba(255,110,199,.24));
  filter: blur(10px);
  opacity:.38;
  z-index:-1;
}

.topbar{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 12px;
  margin-bottom: 12px;
}

.brand{
  display:flex;
  gap:12px;
  align-items:center;
  min-width: 0;
}
.logo{
  width: 60px;
  height: 60px;
  border-radius: 14px;
  object-fit: cover;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.brand h1{
  font-size: 20px;
  margin: 0;
  letter-spacing:.2px;
}
.brand p{
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.nav{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:flex-end;
  font-size: 13px;
  color: var(--muted);
}
.nav a{
  text-decoration:none;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  font-weight: 800;
}
.nav a.primary{
  border-color: rgba(0,219,255,.42);
  background: rgba(0,219,255,.12);
}

.filters{
  padding: 12px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.chip{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  text-decoration:none;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}
.chip.active{
  background: rgba(0,219,255,.12);
  border-color: rgba(0,219,255,.38);
}

.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

.card{
  padding: 14px;
  transition: transform .12s ease, border-color .12s ease;
}
.card:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22);
}
.card-head{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap:10px;
  margin-bottom: 10px;
}
.card-link{ text-decoration:none; display:block; }

.badges{
  display:flex;
  gap:8px;
  flex-wrap: wrap;
}
.badge{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--muted);
  font-weight: 800;
}
.badge.pin{
  border-color: rgba(255,110,199,.38);
  background: rgba(255,110,199,.12);
  color: rgba(255,255,255,.88);
}

.sharebtn{
  appearance:none;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 900;
  cursor:pointer;
}
.sharebtn.big{ padding: 10px 14px; }
.sharebtn.busy{ opacity:.7; }

.thumb{
  width:100%;
  border-radius: var(--radius-lg);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  margin-bottom: 10px;
  display:block;
}
.thumb img{
  width:100%;
  height: 180px;
  object-fit: cover;
  display:block;
}

.card h2{
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.15;
}
.meta{
  display:flex;
  gap:10px;
  color: var(--muted2);
  font-size: 12px;
  margin-bottom: 10px;
}
.excerpt{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.readmore{
  margin-top: 12px;
  color: rgba(0,219,255,.92);
  font-weight: 900;
  font-size: 13px;
}

.article{
  padding: 16px;
}
.article-top{
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  gap:10px;
  flex-wrap: wrap;
}
.headline{
  font-size: 28px;
  line-height: 1.12;
  margin: 10px 0 10px;
}
.hero{
  margin: 12px 0 14px;
  border-radius: var(--radius-lg);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
}
.hero img, .hero video{
  width:100%;
  display:block;
}
.hero iframe{
  width:100%;
  height: 220px;
  border:0;
  display:block;
}

.body{
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,.90);
}
.body p{ margin: 0 0 12px; }
.body h2{ margin: 18px 0 10px; font-size: 20px; }
.body h3{ margin: 16px 0 10px; font-size: 18px; }
.body ul, .body ol{ margin: 0 0 12px 18px; }
.body blockquote{
  margin: 14px 0;
  padding: 12px 14px;
  border-left: 3px solid rgba(0,219,255,.45);
  background: rgba(0,0,0,.18);
  border-radius: 12px;
  color: var(--muted);
}

.footer-note{
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: 13px;
}

.empty{
  padding: 18px;
  margin-top: 14px;
  text-align:center;
}
.empty h2{ margin:0 0 8px; font-size: 18px; }
.empty p{ margin:0 0 14px; color: var(--muted); }

.btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: var(--text);
  text-decoration:none;
  font-weight: 900;
}

.panel{
  padding: 14px;
  margin-top: 14px;
}
.panel h2{
  margin:0 0 10px;
  font-size: 18px;
}
.embed{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(0,0,0,.18);
}
.embed iframe{
  width:100%;
  height: 420px;
  border:0;
  display:block;
}

/* Mobile first; enhance on wide screens */
@media (min-width: 820px){
  .grid{ grid-template-columns: 1fr 1fr; }
  .thumb img{ height: 170px; }
  .hero iframe{ height: 420px; }
  .headline{ font-size: 36px; }
  .embed iframe{ height: 560px; }
}

/* ---------- TOP HEADER + CORNER NAV ---------- */
.apr-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
}

.cornernav{display:flex; gap:10px; flex-wrap:wrap;}
.cornerbtn{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.18);
  text-decoration:none;
  font-weight:800;
}

/* Bigger logo */
.brand-logo{
  width:54px;
  height:54px;
  border-radius:14px;
  object-fit:cover;
}

/* ---------- MAIN NAV BAR (THE ONE YOU WANT) ---------- */
.mainbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding:12px 16px 4px;
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(10px);
  background:rgba(10,12,24,.35);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.pill{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.18);
  text-decoration:none;
  font-weight:800;
}
.pill.active{
  border-color: rgba(0,255,255,.35);
  box-shadow: 0 0 0 2px rgba(0,255,255,.10) inset;
}

/* ---------- WEATHER PAGE EMBEDS / FORECAST SIZING ---------- */
.apr-wrap{max-width:1100px;margin:0 auto;padding:16px;}
.panel{background:rgba(20,26,44,.42);border:1px solid rgba(255,255,255,.14);border-radius:18px;box-shadow:0 12px 40px rgba(0,0,0,.45);overflow:hidden;margin:14px 0;}
.panel-h{padding:14px 14px 8px;font-weight:900;font-size:18px}
.panel-b{padding:0 14px 14px}

.embed{width:100%;aspect-ratio:16/9;border:0;border-radius:14px;overflow:hidden;background:rgba(0,0,0,.25)}
.embed.tall{aspect-ratio:16/12;}
.embed iframe{width:100%;height:100%;border:0}

.forecast{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width: 860px){ .forecast{grid-template-columns:1fr 1fr;} }

.frow{display:flex;gap:12px;align-items:center;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:12px}
.ficon{width:44px;height:44px;border-radius:10px;flex:0 0 44px;background:rgba(255,255,255,.08);overflow:hidden}
.ficon img{width:100%;height:100%;object-fit:cover}
.fname{font-weight:900}
.ftemp{margin-left:auto;font-weight:900}
.fshort{opacity:.85;font-size:14px;margin-top:2px}
.warn{padding:12px;border-radius:14px;background:rgba(255,80,80,.12);border:1px solid rgba(255,80,80,.25)}
.muted{opacity:.8}

.pillbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.18);
  text-decoration:none;
  font-weight:800;
}

/* =========================================================
   ✅ FIX: EMPTY STATE + SUBMIT A TIP BUTTON (all sections)
   ========================================================= */
.empty{
  /* center the empty card like your screenshot #1 */
  display:flex;
  justify-content:center;
  align-items:center;
  min-height: 52vh;
  padding: 18px 14px;
  margin-top: 0;
  text-align:center;
}

.empty-card{
  max-width: 520px;
  width: 100%;
  padding: 22px 18px;
  background: linear-gradient(180deg, var(--glass), var(--glass2));
  border: 1px solid var(--stroke);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.empty-title{
  font-size: 20px;
  font-weight: 900;
  margin: 0 0 6px;
}

.empty-sub{
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 14px;
}

/* This is the “Submit a Tip” button */
a.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(0, 255, 170, .45);
  background: rgba(0, 255, 170, .16);
  color: rgba(255,255,255,.95);
  text-decoration:none;       /* kills underline */
  font-weight: 900;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}

a.cta:hover{
  border-color: rgba(0, 255, 170, .70);
  background: rgba(0, 255, 170, .22);
  transform: translateY(-1px);
}

a.cta:active{
  transform: translateY(0);
}

/* =======================
   ADDED (NO REMOVALS)
   ======================= */

/* =========================================================
   ✅ PWA / PHONE UPGRADE (safe areas + app feel)
   ========================================================= */

/* iPhone safe areas (notch + home bar) */
.apr-wrap,
.container{
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
  padding-bottom: max(70px, env(safe-area-inset-bottom));
}

/* smoother sticky behavior in iOS/PWA */
.mainbar{
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Small phone polish */
@media (max-width: 420px){
  .card{ padding: 12px; }
  .headline{ font-size: 30px; }
  .nav a, .pill{ padding: 9px 12px; }
}

/* =========================================================
   ✅ APR NEWS PATCH (KEEP YOUR ORIGINAL CSS ABOVE)
   Fixes: hero image oversized / overflow, better article feel
   ========================================================= */

/* 0) Safety: any image inside container cannot exceed width */
.container img{ max-width:100%; height:auto; }

/* 1) HERO: hard contain + fixed height + show FULL image */
.hero{
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background: rgba(0,0,0,.28);
  box-shadow: 0 16px 50px rgba(0,0,0,.45);
}

/* Force the hero media to stay INSIDE the hero block */
.hero img,
.hero video{
  width: 100% !important;
  max-width: 100% !important;
  height: 360px !important;
  max-height: 360px !important;
  object-fit: contain !important;   /* ✅ shows the entire image */
  display:block !important;
  margin: 0 !important;
  background: rgba(0,0,0,.35) !important; /* letterbox look */
}

/* keep iframe consistent */
.hero iframe{
  width:100% !important;
  height: 360px !important;
  max-height: 360px !important;
  border:0 !important;
  display:block !important;
}

/* Mobile clamp */
@media (max-width: 820px){
  .hero img,
  .hero video{
    height: 240px !important;
    max-height: 240px !important;
  }
  .hero iframe{
    height: 240px !important;
    max-height: 240px !important;
  }
}

/* 2) Article body: "real article" feel (doesn't stretch edge-to-edge) */
.body{
  max-width: 78ch;
  margin-left: auto;
  margin-right: auto;
}

/* 3) Inline images inside article body never blow up */
.body img,
.body video{
  max-width:100% !important;
  height:auto !important;
  display:block;
  margin: 14px auto;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}

/* 4) Prevent giant logo takeover */
.brand img,
.apr-top img{
  width: 60px;
  height: 60px;
  object-fit: cover;
}

/* =========================================================
   NEWS INDEX – ARTICLE CARD VISUAL UPGRADE
   Adds border + separation WITHOUT changing layout
   ========================================================= */

/* Each article preview card */
.card{
  background: linear-gradient(
    180deg,
    rgba(20,26,56,.55),
    rgba(20,26,56,.35)
  );
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-xl);
  box-shadow: 0 14px 45px rgba(0,0,0,.45);
  padding: 18px;
}

/* Hover = subtle lift */
.card:hover{
  border-color: rgba(0,219,255,.45);
  box-shadow: 0 18px 60px rgba(0,0,0,.65);
  transform: translateY(-2px);
}

/* Category label spacing */
.card .badge{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}

/* Read more link pop */
.readmore{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,219,255,.14);
  border: 1px solid rgba(0,219,255,.35);
}

.readmore:hover{
  background: rgba(0,219,255,.22);
  text-decoration:none;
}

/* =========================================================
   BACKGROUND UPGRADE – DEPTH, GLOW, & GALAXY FEEL
   ========================================================= */

/* Stronger nebula glow */
.bg-pop{
  background:
    radial-gradient(1200px 800px at 8% 12%, rgba(140, 90, 255, .45), transparent 60%),
    radial-gradient(1000px 700px at 88% 18%, rgba(0, 219, 255, .35), transparent 60%),
    radial-gradient(900px 700px at 50% 90%, rgba(255, 88, 203, .28), transparent 65%),
    radial-gradient(700px 500px at 30% 70%, rgba(80, 255, 196, .18), transparent 60%),
    linear-gradient(180deg, #02030d, #050620 45%, #02030d);
  filter: saturate(1.3) contrast(1.1);
}

/* Starfield enhancement */
.bg-stars{
  opacity: .28;
  background-size: 80px 80px;
}

/* Add subtle vignette so edges fade nicely */
body::after{
  content:"";
  position: fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at center,
      transparent 55%,
      rgba(0,0,0,.35) 100%);
}

/* Extra safety: prevent any random img from overflowing blocks */
.article-body img,
.news-article img,
.news-body img,
.post-body img,
main img{
  max-width: 100% !important;
  height: auto !important;
}