/* =====================================================
   CUN Responsive
   Homepage: no horizontal swipe, vertical scroll fully enabled
   ===================================================== */

/* Base: allow vertical scroll always */
html {
  overflow-x: hidden;
  overflow-y: auto;
  height: auto;
}
body {
  overflow-x: hidden;
  overflow-y: auto;
  height: auto;
  min-height: 100%;
  position: static;
}

/* Tablet */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; text-align: center; }
  .hero .lead { margin-left: auto; margin-right: auto; }
  .hero-ctas { justify-content: center; }
  .hero-trust { justify-content: center; }
  .hero-visual { order: -1; margin-bottom: 0.5rem; }
  .hero-orb { width: min(320px, 80%); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .info-grid { grid-template-columns: 1fr 1fr; }
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .main-nav { display: none; }
  .menu-toggle { display: flex; }
}

/* Mobile */
@media (max-width: 768px) {
  :root { --header-height: 64px; }
  .container, .container-wide { padding: 0 1rem; }
  .hero { padding: 3rem 0 2.5rem; min-height: auto; }
  .hero h1 { font-size: clamp(1.85rem, 7vw, 2.5rem); }
  .hero .lead { font-size: 1.05rem; }
  .feature-grid { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .stats-strip { grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1.25rem; }
  .stat-value { font-size: 1.5rem; }
  .quick-actions { grid-template-columns: 1fr 1fr; }
  .programme-grid, .news-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .cta-banner { padding: 2.25rem 1.5rem; }
  .auth-card { padding: 1.75rem 1.35rem; }
  .portal-sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 100;
    transform: translateX(-105%);
  }
  .portal-sidebar.open { transform: translateX(0); }
  .portal-main {
    padding: 1.15rem 1rem 2rem;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ai-headline-row { flex-direction: column; }
  .ai-msg { max-width: 92%; }
  .section { padding: 2.75rem 0; }
  .header-actions .btn-sm { padding: 0.4rem 0.75rem; font-size: 0.8rem; }
}

@media (max-width: 480px) {
  .quick-actions { grid-template-columns: 1fr; }
  .stats-strip { grid-template-columns: 1fr; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .trusted-logos { gap: 1.25rem 1.5rem; }
}

@media (hover: none) {
  .feature-card:hover,
  .quick-action:hover,
  .programme-card:hover {
    transform: none;
  }
}

@supports (padding: max(0px)) {
  .site-header .container,
  .container,
  .container-wide {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
}

/* ========== HOMEPAGE: no horizontal drag, vertical scroll OK ========== */
body.page-home {
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  max-width: 100%;
  /* do NOT set height: 100% or overflow: hidden — that blocks scroll */
}
html:has(body.page-home) {
  overflow-x: hidden;
  overflow-y: auto;
}

/* Compact home header — menu only */
body.page-home .header-actions--home {
  display: flex;
  align-items: center;
}
body.page-home .menu-toggle {
  display: flex !important;
  width: 44px;
  height: 44px;
  font-size: 1.4rem;
  border-radius: 10px;
  background: rgba(14, 165, 233, 0.12);
  color: var(--primary-bright, #38bdf8);
  border: 1px solid rgba(14, 165, 233, 0.25);
}
body.page-home .menu-toggle:hover {
  background: rgba(14, 165, 233, 0.22);
}

@media (max-width: 1100px) {
  body.page-home .main-nav { display: none !important; }
  body.page-home .menu-toggle { display: flex !important; }
}

/* Stop wide media from causing horizontal scroll — only on media, not every element */
body.page-home img,
body.page-home video,
body.page-home iframe,
body.page-home svg {
  max-width: 100%;
  height: auto;
}

/* Mobile scroll override — must win */
@media (max-width: 900px) {
  html {
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    height: auto !important;
    max-height: none !important;
  }
  body,
  body.page-home {
    overflow-x: clip !important;
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
    position: static !important;
    touch-action: pan-y !important;
  }
  main, #main, .hero, .section, .site-footer {
    overflow: visible !important;
    max-height: none !important;
  }
}