/* NARRATIVA — base.css
   CSS Reset, antialiasing, box-sizing, smooth scrolling
   ================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
  height: 100%;
}

body {
  min-height: 100%;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
}

ul, ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset {
  border: none;
}

#app {
  min-height: 100vh;
  position: relative;
}

/* Hamburger: hidden by default, shown on mobile */
.nav-hamburger {
  display: none !important;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ivory, #f0ebe0);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}

/* Mobile overlay menu */
#mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 15, 26, 0.98);
  z-index: 9999;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#mobile-menu.open {
  display: flex !important;
}

.mobile-nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ivory, #f0ebe0);
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.mobile-nav-item:active,
.mobile-nav-item.active {
  color: var(--gold, #c9a84c);
  background: rgba(201,168,76,0.06);
}
.mobile-nav-icon {
  font-size: 20px;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  /* Show hamburger */
  .nav-hamburger {
    display: flex !important;
  }

  /* Hide desktop nav links */
  .nav-links,
  .nav-actions {
    display: none !important;
  }

  /* Tighten nav bar */
  .nav-bar,
  nav.nav-bar {
    padding: 0 12px;
    height: 52px;
    gap: 8px;
  }

  /* Platform bar scrollable on mobile */
  #platform-bar {
    padding: 6px 12px !important;
    gap: 8px !important;
  }

  /* Price ticker smaller */
  .ticker-item {
    font-size: 11px;
  }

  /* Dashboard grid: single column */
  .dashboard-grid,
  .dashboard-left,
  .dashboard-right,
  .dashboard-full {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* KPI cards: 2 columns */
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Live cameras: 1 column stack */
  .live-cameras-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .live-camera-cell {
    min-height: 200px !important;
  }

  /* Cards: reduce padding */
  .dash-card {
    padding: 14px !important;
    border-radius: 10px !important;
  }
  .dash-card-header {
    padding: 12px 14px !important;
  }

  /* WorldMonitor iframe: shorter on mobile */
  #wm-iframe {
    height: 60vh !important;
  }

  /* Map: shorter */
  #map {
    height: 260px !important;
  }

  /* Feed columns: stack */
  .feed-columns,
  .data-feed-columns {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .feed-col,
  .data-feed-col {
    width: 100% !important;
    min-width: unset !important;
  }

  /* Articles grid: 1 column */
  .articles-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* TikTok/Trending carousel cards: slightly smaller */
  .tiktok-card {
    width: 150px !important;
  }
  #tiktok-track .tiktok-card > div {
    width: 150px !important;
  }

  /* Events grid: 1 column */
  .events-grid {
    grid-template-columns: 1fr !important;
  }

  /* Section headings */
  .section-title,
  h2.section-title {
    font-size: 18px !important;
  }

  /* Modals/popups */
  .popup-overlay .popup-box {
    width: 92vw !important;
    max-width: 92vw !important;
    padding: 20px !important;
  }

  /* Premium page */
  .premium-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* View selector buttons */
  .view-btn {
    padding: 5px 10px !important;
    font-size: 11px !important;
  }

  /* Podcast player */
  .podcast-player {
    padding: 16px !important;
  }
  .podcast-controls {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  /* About page */
  .about-grid {
    grid-template-columns: 1fr !important;
  }

  /* Status/meta bar */
  .meta-bar,
  .status-bar {
    display: none !important;
  }

  /* Footer links: wrap */
  .footer-links {
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: center !important;
  }
}

@media (max-width: 480px) {
  /* KPI cards: 1 column on very small screens */
  .kpi-grid {
    grid-template-columns: 1fr !important;
  }

  /* Smaller base font */
  html {
    font-size: 14px;
  }

  /* Nav logo text hidden */
  .nav-logo-text {
    display: none !important;
  }

  /* Full-width buttons */
  .cta-btn,
  .btn-primary,
  .btn-gold {
    width: 100% !important;
    text-align: center !important;
  }
}

/* ════ NARRATIVA MOBILE FINAL OVERRIDE ════ */
/* These rules come last to override everything */

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: 1px solid rgba(201,168,76,0.4);
  border-radius: 8px;
  cursor: pointer;
  padding: 9px 11px;
  margin-left: auto;
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ivory, #f5f0e8);
  border-radius: 2px;
}
.nav-logo-text { display: none; }

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .footer-brand { text-align: center !important; }
  .footer-brand img { display: block !important; margin: 0 auto 14px !important; }
  .footer-brand p { text-align: center !important; }
  footer > div > div:last-child {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  
  /* Newsletter mobile */
  .newsletter-section form, #newsletter-form {
    flex-direction: column !important;
  }
  .newsletter-input, #newsletter-form input[type="email"] {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .newsletter-btn, #newsletter-form button {
    width: 100% !important;
  }

  /* Global Situation grid mobile */
  #global-situation-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Live cameras mobile */
  .live-cameras-grid { height: 380px !important; }
  
  /* GIP tabs scroll on mobile */
  #wm-tabs { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
}

@media (max-width: 480px) {
  .live-cameras-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(4, 180px) !important;
    height: auto !important;
  }
}

/* ════ NARRATIVA MOBILE FINAL v4 ════ */
html, body { overflow-x: hidden !important; max-width: 100vw !important; }

#main-nav { position: sticky !important; top: 0 !important; z-index: 1000 !important; background: var(--bg-secondary) !important; }
#price-ticker, #urgjent-bar { position: static !important; }

/* ════════════════════════════════════════════
   NARRATIVA — ALL RESPONSIVE STYLES (FINAL)
════════════════════════════════════════════ */

/* Page visibility — CRITICAL */
.page { display: none !important; }
.page.active { display: block !important; }

/* Sticky header only */
#main-nav { position: sticky !important; top: 0 !important; z-index: 1000 !important; background: var(--bg-secondary) !important; }
#price-ticker, #urgjent-bar { position: static !important; }

/* Camera pulse animation */
@keyframes cam-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

/* Desktop section size limits */
#map { height: 320px !important; max-height: 320px !important; display: block !important; }
#news-feed-list { max-height: 440px; overflow-y: auto; scrollbar-width: thin; }
#news-feed-list::-webkit-scrollbar { width: 3px; }
#news-feed-list::-webkit-scrollbar-thumb { background: rgba(201,168,76,.3); border-radius: 2px; }
#intel-brief { font-size: 13px !important; line-height: 1.55 !important; max-height: 150px; overflow-y: auto; }
.ekonomia-kpi-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
.gip-pane { height: 480px !important; overflow: hidden !important; }
.gip-pane iframe { height: 480px !important; display: block !important; }
#global-situation-grid { max-height: 480px; overflow-y: auto; scrollbar-width: thin; }
.data-feed-items { max-height: 360px; overflow-y: auto; scrollbar-width: thin; }

/* Live cameras desktop */
.live-cameras-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; grid-template-rows: 215px 215px !important; gap: 4px !important; }
.live-cameras-grid > div, .live-camera-cell { min-height: 215px !important; position: relative !important; overflow: hidden !important; }

/* Hamburger hidden on desktop */
.nav-hamburger { display: none !important; }

/* ── TABLET / MOBILE (≤ 900px) ── */
@media screen and (max-width: 900px) {
  html, body { overflow-x: hidden !important; }

  /* NAV: logo center, burger right */
  #main-nav {
    display: grid !important;
    grid-template-columns: 44px 1fr 44px !important;
    align-items: center !important;
    padding: 8px 14px !important;
    gap: 0 !important;
  }
  .nav-logo, .nav-logo-link, a.nav-logo-link {
    grid-column: 2 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-decoration: none !important;
  }
  .nav-logo img { height: 36px !important; }
  .nav-logo-badge, .nav-logo-text { display: none !important; }
  .nav-hamburger {
    display: flex !important;
    grid-column: 3 !important;
    flex-direction: column !important;
    gap: 5px !important;
    justify-self: end !important;
    background: transparent !important;
    border: 1px solid rgba(201,168,76,.4) !important;
    border-radius: 6px !important;
    padding: 7px 9px !important;
    cursor: pointer !important;
    width: 36px !important;
    height: 36px !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  .nav-hamburger span { display: block !important; width: 18px !important; height: 2px !important; background: var(--ivory) !important; border-radius: 2px !important; }
  .nav-links, .nav-search, .nav-actions, #lang-toggle, #theme-toggle, .btn-subscribe { display: none !important; }

  /* Price ticker on mobile */
  #price-ticker { display: flex !important; overflow-x: auto !important; scrollbar-width: none !important; padding: 5px 12px !important; font-size: 10px !important; }
  #price-ticker::-webkit-scrollbar { display: none !important; }
  .ticker-item { flex-shrink: 0 !important; padding: 0 10px !important; }

  /* Urgjent bar */
  #urgjent-bar { height: 30px !important; }
  #urgjent-label { padding: 0 10px !important; font-size: 9px !important; }
  #urgjent-scroll { font-size: 10px !important; }

  /* Dashboard: stack columns */
  .dashboard-layout { display: flex !important; flex-direction: column !important; width: 100% !important; }
  .dashboard-left, .dashboard-right, .dashboard-full { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; }

  /* Cards: full width with 8px margins */
  .dash-card { margin: 0 8px !important; width: calc(100% - 16px) !important; box-sizing: border-box !important; overflow: hidden !important; }

  /* Live TV */
  #live-video-player, #live-video-player iframe { width: 100% !important; max-width: 100% !important; }

  /* Cameras: 2 col */
  .live-cameras-grid { grid-template-columns: 1fr 1fr !important; grid-template-rows: 160px 160px !important; }
  .live-cameras-grid > div, .live-camera-cell { min-height: 160px !important; height: 160px !important; }

  /* Map */
  #map { height: 240px !important; max-height: 240px !important; }

  /* KPI */
  .ekonomia-kpi-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

  /* Data feeds */
  .data-feed-grid { grid-template-columns: 1fr !important; }

  /* Strategic panels */
  .strategic-grid { grid-template-columns: 1fr 1fr !important; }

  /* GIP */
  #gip-tabs { overflow-x: auto !important; white-space: nowrap !important; scrollbar-width: none !important; }
  .gip-pane { height: 360px !important; }
  .gip-pane iframe { height: 360px !important; }

  /* Global situation */
  #global-situation-grid { grid-template-columns: 1fr !important; max-height: 360px !important; }

  /* Reddit */
  #reddit-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

  /* Trending */
  .tiktok-card { width: 150px !important; }

  /* Articles */
  #articles-grid { grid-template-columns: 1fr !important; padding: 12px !important; }
  .category-tabs { overflow-x: auto !important; flex-wrap: nowrap !important; scrollbar-width: none !important; }

  /* Events */
  #page-ngjarje > div { padding-left: 16px !important; padding-right: 16px !important; }

  /* About */
  #page-rreth > div { padding-left: 16px !important; padding-right: 16px !important; }
  #page-rreth [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Pricing */
  #pricing-grid { grid-template-columns: 1fr !important; padding: 16px !important; gap: 12px !important; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .footer-brand, .footer-brand p { text-align: center !important; }
  .footer-brand img { display: block !important; margin: 0 auto 14px !important; }
  footer [style*="justify-content:space-between"] { flex-direction: column !important; align-items: center !important; text-align: center !important; }

  /* Forms */
  form { flex-direction: column !important; }
  form input[type="email"], form button[type="submit"] { width: 100% !important; box-sizing: border-box !important; }

  /* Text */
  body { font-size: 15px !important; }

  /* Pages padding */
  #page-abonohu > div:first-child { padding: 24px 16px !important; }
  #page-abonohu h1 { font-size: 26px !important; }
}

/* ── GIP pane height limit ── */
[id^="wm-pane-"] { height: 440px !important; overflow: hidden !important; }
[id^="wm-pane-"] iframe { height: 440px !important; width: 100% !important; border: none !important; display: block !important; }

/* ── Footer brand: logo stacks above text ── */
.footer-brand { display: flex !important; flex-direction: column !important; align-items: flex-start !important; }
.footer-brand a { display: block !important; }

/* ── Mobile section overflow protection ── */
@media screen and (max-width: 900px) {
  .live-tv-section, .live-cameras-section { max-width: 100vw !important; overflow: hidden !important; }
  .live-tv-container, .live-cameras-container { max-width: 100% !important; overflow: hidden !important; }
  .live-video-wrapper, #live-video-player { max-width: 100% !important; overflow: hidden !important; }
  .live-video-wrapper iframe, #live-video-player iframe { width: 100% !important; max-width: 100% !important; }
  .dashboard-full { max-width: 100vw !important; overflow-x: hidden !important; }
  #wm-tabs { overflow-x: auto !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; }
  .footer-brand { align-items: center !important; }
  .footer-brand a { margin: 0 auto 14px !important; }
}

/* ── SMALL PHONES (≤ 480px) ── */
@media screen and (max-width: 480px) {
  .live-cameras-grid { grid-template-columns: 1fr !important; grid-template-rows: repeat(4, 155px) !important; }
  .live-cameras-grid > div, .live-camera-cell { min-height: 155px !important; height: 155px !important; }
  #reddit-grid { grid-template-columns: 1fr !important; }
  .strategic-grid { grid-template-columns: 1fr !important; }
  .ekonomia-kpi-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ════ MOBILE CARD SIZE & VIDEO FILL FIXES ════ */

@media screen and (max-width: 900px) {

  /* All dashboard cards: more breathing room */
  .dash-card {
    margin: 0 6px 12px !important;
    width: calc(100% - 12px) !important;
  }
  
  /* Live TV section: taller on mobile, video fills box */
  .live-tv-wrapper, #live-video-player,
  .live-video-container, .video-container {
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 56.25% !important; /* 16:9 */
    position: relative !important;
    overflow: hidden !important;
  }
  .live-tv-wrapper iframe,
  #live-video-player iframe,
  .live-video-container iframe,
  .video-container iframe {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    display: block !important;
  }
  
  /* Live TV section extra height */
  .live-tv-section .dash-card,
  [class*="live-tv"] .dash-card {
    min-height: 240px !important;
  }
  
  /* Live cameras grid: taller cells on mobile */
  #live-cameras-grid.live-cameras-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 175px 175px !important;
    gap: 2px !important;
  }
  .live-camera-cell {
    min-height: 175px !important;
  }
  
  /* GIP panel: taller */
  [id^="wm-pane-"] { height: 400px !important; }
  [id^="wm-pane-"] iframe { height: 400px !important; }
  
  /* Global situation: reasonable height */
  #global-situation-grid { max-height: 420px !important; }
  
  /* Map: taller on mobile */
  #map { height: 280px !important; min-height: 280px !important; max-height: 280px !important; }
  
  /* News: taller */
  #news-feed-list { max-height: 460px !important; }
  
  /* Strategic analysis: enough room */
  #intel-gauge { max-height: 320px !important; }
  #intel-brief { max-height: 180px !important; }
  
  /* KPI grid: taller cards */
  .ekonomia-kpi-card { min-height: 90px !important; }
  
  /* Camera filter tabs on mobile */
  #cam-filter-tabs { overflow-x: auto !important; scrollbar-width: none !important; }
  #cam-filter-tabs::-webkit-scrollbar { display: none !important; }
  
  /* Section headers: consistent padding */
  .dash-card-header, .card-header { padding: 12px 14px !important; }
  
  /* Make iframe inside live TV truly fill its container */
  .transmetime-live iframe,
  .live-broadcast iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 200px !important;
    display: block !important;
  }
}

@media screen and (max-width: 480px) {
  #live-cameras-grid.live-cameras-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(4, 190px) !important;
  }
  .live-camera-cell { min-height: 190px !important; }
}

/* ════ LIVE TV 16:9 FIX ════ */

.live-video-wrapper {
  position: relative !important;
  width: 100% !important;
  height: 420px !important;
  min-height: 420px !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
  border-radius: 0 0 8px 8px !important;
}

#live-video-player {
  width: 100% !important;
  height: 420px !important;
  min-height: 420px !important;
}

#live-video-player iframe {
  width: 100% !important;
  height: 100% !important;
  min-height: 420px !important;
  border: none !important;
  display: block !important;
}

.live-video-wrapper > div {
  width: 100% !important;
}

/* ════ URGJENT BAR ANIMATION FIX ════ */

#urgjent-scroll {
  will-change: transform !important;
  white-space: nowrap !important;
  display: inline-block !important;
  animation: urgjent-scroll 50s linear infinite !important;
}

#urgjent-bar {
  overflow: hidden !important;
}

@media (hover: hover) {
  #urgjent-bar:hover #urgjent-scroll {
    animation-play-state: paused !important;
  }
}

@media screen and (max-width: 900px) {
  #urgjent-scroll {
    animation-play-state: running !important;
    font-size: 11px !important;
  }
  #urgjent-label {
    padding: 0 10px !important;
    font-size: 9px !important;
    letter-spacing: 1px !important;
  }
  
  /* Live TV full 16:9 on mobile */
  .live-video-wrapper,
  #live-video-wrapper {
    height: 56.25vw !important;
    min-height: 180px !important;
    padding-bottom: 0 !important;
  }
  #live-video-player {
    height: 56.25vw !important;
    min-height: 180px !important;
  }
  .live-video-wrapper iframe,
  #live-video-wrapper iframe,
  #live-video-player iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 180px !important;
    border: none !important;
    display: block !important;
  }
}

/* ════ LIVE TV — MOBILE ONLY ════ */
@media screen and (max-width: 900px) {
  /* Any iframe that is the primary content of a dash-card on mobile */
  .dash-card > div > iframe,
  .dash-card > iframe {
    display: block !important;
    width: 100% !important;
    min-height: 200px !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    border: none !important;
  }
}

/* ════ MOBILE FULL-WIDTH CARD FIX ════ */
@media screen and (max-width: 900px) {
  html, body { overflow-x: hidden !important; }
  .dashboard-layout { display: flex !important; flex-direction: column !important; }
  .dashboard-full, .dashboard-left, .dashboard-right {
    width: 100% !important; max-width: 100% !important;
    min-width: 0 !important; box-sizing: border-box !important; padding: 0 !important;
  }
  .dash-card {
    width: 100% !important; max-width: 100% !important;
    margin: 0 0 8px 0 !important; border-radius: 0 !important;
    box-sizing: border-box !important; overflow: hidden !important;
  }
  .live-cameras-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 175px 175px !important; width: 100% !important;
  }
  .live-camera-cell { height: 175px !important; }
  [id^="wm-pane-"], .gip-pane { height: 360px !important; }
  #global-situation-grid { grid-template-columns: 1fr !important; }
  #map { height: 260px !important; max-height: 260px !important; }
  #news-feed-list { max-height: 380px !important; }
  .ekonomia-kpi-grid { grid-template-columns: 1fr 1fr !important; }
  #live-cameras-grid { width: 100% !important; }
}
@media screen and (max-width: 480px) {
  .live-cameras-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(4, 165px) !important;
  }
  .live-camera-cell { height: 165px !important; }
}

/* ════════════════════════════════════════════════════════════
   MOBILE WIDTH — DEFINITIVE FIX
   Forces all cards/sections to full width on small screens
   ════════════════════════════════════════════════════════════ */
@media screen and (max-width: 900px) {

  /* Dashboard layout: single column */
  .dashboard-layout,
  .dashboard-grid,
  .dashboard-left,
  .dashboard-right,
  .dashboard-full {
    display: block !important;
    width: 100% !important;
    grid-template-columns: 1fr !important;
    float: none !important;
  }

  /* Every card: full width */
  .dash-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Cameras: 2 columns on tablet */
  #live-cameras-grid,
  .live-cameras-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 175px 175px !important;
    display: grid !important;
    width: 100% !important;
  }
  .live-camera-cell { height: 175px !important; }

  /* Map */
  #map { height: 260px !important; min-height: 260px !important; }
  #wm-map-iframe,
  #wm-iframe { height: 350px !important; }

  /* Strategic panels grid */
  .strategic-panels-grid,
  #panels-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Berthama grid */
  #berthama-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Climate grid */
  #climate-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Instability: remove height cap on mobile */
  #instability-list { max-height: none !important; }

  /* Berthama header */
  #berthama-section > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  #berthama-filter-tabs {
    width: 100% !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  /* Live TV iframe */
  .live-tv-iframe-wrapper iframe,
  .live-tv-section iframe {
    width: 100% !important;
    min-height: 210px !important;
    aspect-ratio: 16/9 !important;
  }

  /* Nav text hidden on mobile */
  .nav-logo-text,
  .logo-text-span,
  .nav-logo-badge {
    display: none !important;
  }
}

@media screen and (max-width: 480px) {
  /* Cameras: single column on small phones */
  #live-cameras-grid,
  .live-cameras-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(4, 200px) !important;
  }
  .live-camera-cell { height: 200px !important; }

  /* Berthama: single column */
  #berthama-grid { grid-template-columns: 1fr !important; }

  /* Climate: 2 columns */
  #climate-grid { grid-template-columns: 1fr 1fr !important; }

  /* Strategic panels: single column */
  .strategic-panels-grid,
  #panels-grid { grid-template-columns: 1fr !important; }
}

/* ════ INSTABILITY INDEX — COMPACT ROWS ════ */
.instability-row:last-child {
  border-bottom: none !important;
}
.instability-detail {
  animation: fadeIn 0.18s ease;
}

/* ════ URGJENT TICKER — MOBILE ANIMATION FIX ════ */
#urgjent-scroll {
  display: inline-block !important;
  white-space: nowrap !important;
  will-change: transform !important;
  animation: urgjent-scroll 45s linear infinite !important;
  animation-play-state: running !important;
}

#urgjent-bar {
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
}

@media (hover: none) {
  #urgjent-scroll {
    animation-play-state: running !important;
  }
}

@media (hover: hover) {
  #urgjent-bar:hover #urgjent-scroll {
    animation-play-state: paused !important;
  }
}

/* ════════════════════════════════════════════════════════════
   MOBILE CARD FIXES — Strategic Panels + Predictions
   ════════════════════════════════════════════════════════════ */

/* Strategic panels grid: 2 columns on tablet, 1 on phone */
#strategic-panels-grid,
.strategic-grid {
  width: 100% !important;
  box-sizing: border-box !important;
}

[id^="panel-"] {
  width: 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

#predictions-container > div {
  width: 100% !important;
  box-sizing: border-box !important;
}

@media screen and (max-width: 900px) {
  #strategic-panels-grid,
  .strategic-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  [id^="panel-"] {
    padding: 12px !important;
  }

  [id^="panel-"] .strategic-items > div {
    padding: 6px 0 !important;
    font-size: 11px !important;
  }

  #predictions-container > div {
    padding: 11px 12px !important;
    margin-bottom: 6px !important;
  }
}

@media screen and (max-width: 480px) {
  #strategic-panels-grid,
  .strategic-grid {
    grid-template-columns: 1fr !important;
  }

  [id^="panel-"] {
    padding: 10px !important;
  }
}