/*
 * RAINBOW VOGG GLOBAL LTD
 * Responsive System — Mobile-First Breakpoints
 * sm: 640px | md: 768px | lg: 1024px | xl: 1280px | 2xl: 1400px
 */

/* ── LARGE DESKTOP ── */
@media (max-width: 1400px) {
  .footer-top { grid-template-columns: 260px 1fr; gap: 60px; }
}

/* ── DESKTOP ── */
@media (max-width: 1280px) {
  .sectors-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-links-grid { grid-template-columns: repeat(2, 1fr); }
  .dec-rail { width: 200px; }
  :root { --sidebar-width: 200px; }
}

/* ── LAPTOP ── */
@media (max-width: 1024px) {
  h1 { font-size: clamp(1.8rem, 5vw, 3rem); }
  h2 { font-size: clamp(1.4rem, 3.5vw, 2.2rem); }

  .nav-links { gap: 16px; }
  .nav-link { font-size: 0.82rem; }

  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }

  .footer-top { grid-template-columns: 1fr; gap: 40px; }

  /* DEC: collapse sidebar to icon-only */
  .dec-rail { width: 60px; }
  .dec-rail-item span:not(.item-icon):not(.dec-rail-badge) { display: none; }
  .dec-rail-footer { display: none; }
  .dec-rail-badge { position: absolute; top: 8px; right: 8px; }
  .dec-rail-item { padding: 14px; justify-content: center; }
  :root { --sidebar-width: 60px; }

  /* VOGG Platform sections */
  .vogg-feature-inner { grid-template-columns: 1fr; gap: 40px; }
  .invest-inner { grid-template-columns: 1fr; gap: 40px; }
}

/* ── TABLET ── */
@media (max-width: 768px) {
  :root { --section-pad: clamp(48px, 7vw, 80px); }

  /* Nav: show toggle, hide links */
  .nav-links { display: none; }
  .nav-toggle { display: flex; }

  /* Hero */
  .hero-stats { flex-wrap: wrap; gap: 20px; }
  .hero-stat-divider { display: none; }
  .hero-eyebrow-text { font-size: 0.62rem; }

  /* Grids */
  .grid-3 { grid-template-columns: 1fr; }
  .sectors-grid { grid-template-columns: 1fr; }
  .footer-links-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }

  /* DEC: full mobile layout */
  .dec-layout { flex-direction: column; }
  .dec-rail {
    width: 100%; height: auto; position: static;
    flex-direction: row; overflow-x: auto; overflow-y: hidden;
    border-right: none; border-bottom: 1px solid var(--border);
    padding: 8px;
  }
  .dec-rail-item { flex-direction: column; gap: 3px; padding: 8px 12px; border-left: none; border-bottom: 3px solid transparent; font-size: 0.65rem; }
  .dec-rail-item.active { border-bottom-color: var(--cyan); border-left-color: transparent; }
  .dec-rail-item span:not(.item-icon):not(.dec-rail-badge) { display: block; font-size: 0.62rem; }
  .dec-rail-footer { display: none; }
  :root { --sidebar-width: 0px; }

  /* Cards */
  .article-card.featured-article { padding: 20px; }
  .podcast-ep-box { width: 56px; height: 56px; }

  /* Newsletter */
  .newsletter-inner { flex-direction: column; text-align: center; }
  .newsletter-form { flex-direction: column; width: 100%; max-width: 400px; }
  .newsletter-form input { width: 100%; }

  /* Chatbot */
  .chatbot-widget { width: calc(100vw - 32px); right: 16px; bottom: 80px; }
  .chatbot-trigger { bottom: 16px; right: 16px; }

  /* Footer */
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
}

/* ── MOBILE ── */
@media (max-width: 640px) {
  :root { --section-pad: clamp(40px, 6vw, 64px); }

  h1 { font-size: clamp(1.6rem, 7vw, 2.4rem); }
  h2 { font-size: clamp(1.3rem, 5vw, 1.8rem); }

  /* Logo: slightly smaller on mobile so it doesn't crowd the nav-toggle button */
  .nav-logo-img { height: 34px; }
  .nav-logo-sub { display: none; } /* "Digital Experience Center" subtitle hidden on small screens */
  .splash-logo { width: 88px; }

  .btn-lg { padding: 12px 24px; font-size: 0.9rem; }
  .page-hero-actions { flex-direction: column; }
  .page-hero-actions .btn { width: 100%; justify-content: center; }

  .photo-grid { grid-template-columns: repeat(2, 1fr); }
  .photo-thumb { height: 130px; }

  .ir-kpis-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-links-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-logo-img { height: 40px; }
  .dec-masthead-row { flex-direction: column; }
  .dec-stats-row { width: 100%; }
  .dec-stat-box { flex: 1; }

  /* Modal full-screen on mobile */
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal { max-width: 100%; border-radius: var(--r-xl) var(--r-xl) 0 0; }

  /* Article full */
  .article-row { flex-direction: column; align-items: flex-start; }

  /* Search */
  .search-overlay { padding: 16px; }
  .search-box-large { max-width: 100%; }

  /* Ticker */
  .ticker-track { animation-duration: 30s; }
}

/* ── PRINT ── */
@media print {
  .site-nav, .site-footer, .chatbot-trigger, .chatbot-widget,
  .search-overlay, .toast-container, .btn:not(.btn-print) { display: none !important; }
  body { background: white; color: black; }
  a { color: black; }
}

/* ── FOCUS VISIBLE (Accessibility) ── */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── HIGH CONTRAST MODE ── */
@media (forced-colors: active) {
  .btn-primary, .btn-gold { background: ButtonFace; color: ButtonText; border: 2px solid ButtonText; }
  .card { border: 2px solid ButtonText; }
}

/* ── DARK SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--obsidian); }
::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ── SELECTION ── */
::selection { background: rgba(0,212,255,0.25); color: var(--white); }