/* ==========================================
   RESPONSIVE DESIGN - Mobile First Approach
   ========================================== */

/* Extra Large Devices (1400px and up) */
@media (min-width: 1400px) {
  .container-max {
    max-width: 1320px;
    margin: 0 auto;
  }
}

/* Large Devices (1200px to 1399px) */
@media (min-width: 1200px) {
  .container-max {
    max-width: 1140px;
    margin: 0 auto;
  }
}

/* Medium Devices (992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .container-max {
    max-width: 960px;
    margin: 0 auto;
  }
  
  section {
    padding: 5rem 4vw;
  }
}

/* Tablets and Small Desktops (768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .container-max {
    max-width: 720px;
    margin: 0 auto;
  }
  
  section {
    padding: 4rem 4vw;
  }
  
  h1 {
    font-size: clamp(2rem, 4vw, 3.5rem) !important;
  }
  
  h2 {
    font-size: clamp(1.5rem, 3vw, 2.5rem) !important;
  }
  
  .form-row {
    grid-template-columns: 1fr !important;
  }
  
  .grid-2 {
    grid-template-columns: 1fr !important;
  }
  
  .grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .flex-row {
    flex-direction: row !important;
    gap: 1rem !important;
  }
}

/* Small Tablets (600px to 767px) */
@media (min-width: 600px) and (max-width: 767px) {
  .container-max {
    max-width: 540px;
    margin: 0 auto;
  }

  section {
    padding: 3rem 3vw;
  }

  h1 {
    font-size: clamp(1.5rem, 3.5vw, 2.5rem) !important;
  }

  h2 {
    font-size: clamp(1.2rem, 2.5vw, 2rem) !important;
  }

  .form-row,
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr !important;
  }

  .flex-row,
  .flex-wrap {
    flex-direction: column !important;
  }

  .nav-links {
    display: none !important;
  }

  .mobile-menu-toggle {
    display: flex !important;
  }
}

/* Show hamburger on tablets too (all pages) */
@media (min-width: 600px) and (max-width: 991px) {
  .mobile-menu-toggle {
    display: flex !important;
  }
  .nav-links:not(.mobile-open) {
    display: none !important;
  }
  /* Hide Get Started on tablet, keep Login */
  .nav-cta, #cta-btn { display: none !important; }

  /* Login/profile dropdowns on tablet: full-width panels below nav */
  .login-wrapper,
  #profile-section { position: static !important; }

  .login-dropdown,
  .profile-dropdown {
    position: fixed !important;
    top: 78px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    border-radius: 0 0 var(--r2) var(--r2) !important;
    z-index: 999 !important;
  }
}

/* Mobile Devices (480px to 599px) */
@media (max-width: 599px) {
  * {
    margin: 0;
    padding: 0;
  }
  
  section {
    padding: 2.5rem 3vw;
  }
  
  .container-max {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
  }
  
  h1 {
    font-size: clamp(1.2rem, 5vw, 2rem) !important;
    line-height: 1.2 !important;
  }
  
  h2 {
    font-size: clamp(1rem, 4vw, 1.5rem) !important;
    line-height: 1.2 !important;
  }
  
  h3 {
    font-size: clamp(0.9rem, 3vw, 1.1rem) !important;
  }
  
  p {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }
  
  /* Navigation — compact 58px height, no wrap, no overflow clipping */
  nav {
    height: 58px !important;
    padding: 0 0.75rem !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .nav-links {
    display: none !important;
  }

  .mobile-menu-toggle {
    display: flex !important;
  }

  .nav-links.mobile-open {
    top: 58px !important;
  }

  .breadcrumb-bar {
    top: 58px !important;
  }
  
  .hero-stats {
    gap: 1.5rem !important;
    padding-top: 1.5rem !important;
  }

  .stat-number {
    font-size: 1.5rem !important;
  }

  .stat-label {
    font-size: 0.65rem !important;
  }
  
  /* Hero: hide visual animation entirely on mobile, show text content only */
  .hero-visual {
    display: none !important;
  }

  .hero {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    padding: 2.5rem 1rem 2rem !important;
    overflow: hidden !important;
  }

  .hero-content {
    order: 1 !important;
  }

  /* Hero heading: slightly larger to stand out on mobile */
  .hero-content h1 {
    font-size: clamp(2rem, 7vw, 2.8rem) !important;
    line-height: 1.15 !important;
  }

  .hero-actions {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .hero-actions a,
  .hero-actions button {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Highlight key CTA buttons on mobile */
  .hero-actions .btn-grad {
    font-size: 1rem !important;
    padding: 0.95rem 1.5rem !important;
    box-shadow: 0 8px 32px rgba(124,92,252,0.5) !important;
  }

  /* Profile dropdown: full-width panel below nav on mobile */
  #profile-section { position: static !important; }

  .profile-dropdown {
    position: fixed !important;
    top: 58px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    border-radius: 0 0 var(--r2) var(--r2) !important;
    border-left: none !important;
    border-right: none !important;
    z-index: 999 !important;
  }

  .profile-dropdown.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }

  .pd-item {
    padding: 1rem 1.25rem !important;
    min-height: 56px !important;
  }
  
  /* Forms */
  .form-row,
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 0.8rem !important;
  }
  
  .form-group {
    margin-bottom: 0.8rem !important;
  }
  
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 0.7rem 0.9rem !important;
    font-size: 0.9rem !important;
  }
  
  .form-container {
    padding: 1.2rem !important;
    border-radius: var(--r2) !important;
  }
  
  .form-container h2 {
    font-size: 1.3rem !important;
  }
  
  .form-actions {
    flex-direction: column !important;
    gap: 0.8rem !important;
  }
  
  .btn-submit,
  .btn-reset,
  .btn-cancel {
    width: 100% !important;
    padding: 0.8rem 1rem !important;
    font-size: 0.9rem !important;
  }
  
  /* Layout */
  .flex-row,
  .flex-wrap,
  .flex-center {
    flex-direction: column !important;
    gap: 0.8rem !important;
  }
  
  .flex-between {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  
  /* Tables */
  table {
    font-size: 0.8rem !important;
  }
  
  th, td {
    padding: 0.6rem !important;
  }
  
  /* Cards */
  .card {
    padding: 1rem !important;
    margin-bottom: 1rem !important;
  }
  
  .card-header {
    font-size: 0.95rem !important;
  }
  
  /* Buttons */
  .btn-grad,
  .btn-outline {
    padding: 0.8rem 1.5rem !important;
    font-size: 0.85rem !important;
    width: 100% !important;
  }
  
  /* Modal */
  .modal-box {
    max-width: 95% !important;
    padding: 1.5rem !important;
    border-radius: var(--r2) !important;
  }
  
  .modal-box h3 {
    font-size: 1.3rem !important;
  }
  
  /* List */
  ul, ol {
    margin-left: 1.2rem !important;
  }
  
  li {
    margin-bottom: 0.5rem !important;
  }
  
  /* Display utils */
  .hide-mobile {
    display: none !important;
  }
  
  .show-mobile {
    display: block !important;
  }
  
  /* Spacing utils */
  .mb-lg {
    margin-bottom: 1rem !important;
  }
  
  .mt-lg {
    margin-top: 1rem !important;
  }
  
  .px-md {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  .py-md {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
}

/* Extra Small Devices (Below 480px) */
@media (max-width: 479px) {
  section {
    padding: 2rem 2vw;
  }
  
  h1 {
    font-size: clamp(1rem, 5vw, 1.5rem) !important;
  }
  
  h2 {
    font-size: clamp(0.9rem, 4vw, 1.3rem) !important;
  }
  
  h3 {
    font-size: 0.95rem !important;
  }
  
  p {
    font-size: 0.85rem !important;
  }
  
  .logo-icon {
    width: 28px !important;
    height: 28px !important;
  }
  
  .form-group label {
    font-size: 0.75rem !important;
  }
  
  .form-container {
    padding: 1rem !important;
  }
  
  .form-row {
    gap: 0.6rem !important;
  }
  
  .step-indicator {
    width: 40px !important;
    height: 40px !important;
    font-size: 0.8rem !important;
  }
}

/* Landscape Orientation - Tablets */
@media (max-height: 600px) and (orientation: landscape) {
  section {
    padding: 2rem 4vw;
  }
  
  nav {
    height: 56px !important;
  }
  
  .form-container {
    padding: 1.2rem !important;
  }
  
  h1, h2, h3 {
    margin-bottom: 0.5rem !important;
  }
}

/* High DPI Screens (Retina) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Meetings & Recordings section responsive */
@media (max-width: 768px) {
  #sec-events > div > div {
    grid-template-columns: 1fr !important;
  }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
  button, a, .clickable {
    min-height: 44px;
    min-width: 44px;
  }
  
  button:active, a:active {
    background-color: var(--v5);
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}

/* Light Mode Support */
@media (prefers-color-scheme: light) {
  :root[data-theme="light"] {
    color-scheme: light;
  }
}

/* ── Nav links mobile open — always override display:none ── */
.nav-links.mobile-open {
  display: flex !important;
}

/* ── Nav Button Centering (All Screens) ── */
.nav-signin,
#login-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}
.nav-cta,
#cta-btn {
  /* display is controlled by JS (showLoggedInUI/showLoggedOutUI) — do NOT force it here */
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

/* Ensure nav-actions never wraps sign-in button off-screen */
.nav-actions {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex-shrink: 0 !important;
}

/* ── Footer Grid Responsive (index.html) ── */
@media (max-width: 991px) {
  .footer-grid-main {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
  }
}

@media (max-width: 599px) {
  .footer-grid-main {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  footer {
    padding: 3rem 1.2rem 2rem !important;
  }
  footer > div:last-child {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 1rem !important;
  }
}

/* ── Breadcrumb responsive ── */
@media (max-width: 599px) {
  .breadcrumb-bar {
    font-size: 0.78rem !important;
    padding: 0.4rem 1rem !important;
  }
  .bc-item, .bc-page { font-size: 0.78rem !important; }
  .bc-current { font-size: 0.82rem !important; }
}

/* ── Courses Filter Bar Responsive ── */
@media (max-width: 991px) {
  .filter-topbar {
    gap: 0.5rem !important;
    padding: 0.75rem 1rem !important;
    position: static !important; /* avoid sticky overlap on small screens */
  }
  .filter-search-wrap {
    min-width: 150px !important;
  }
  .filter-select {
    min-width: 120px !important;
    font-size: 0.82rem !important;
  }
  .filter-divider { display: none !important; }
  .courses-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  .filter-topbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.6rem !important;
  }
  .filter-search-wrap { min-width: 100% !important; }
  .filter-select { min-width: 100% !important; width: 100% !important; }
  .filter-reset { width: 100% !important; text-align: center !important; }
  .courses-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 599px) {
  /* ── Mobile nav: tight layout for 360px screens ── */
  nav {
    padding: 0 0.75rem !important;
    height: 58px !important;
    gap: 0 !important;
  }

  /* Logo: constrain width so actions don't overflow */
  .nav-logo {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 115px) !important; /* reserve space for login + hamburger */
    font-size: 1.05rem !important;
    gap: 0.4rem !important;
  }
  .nav-logo-text {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 130px !important;
  }
  .logo-icon {
    width: 30px !important;
    height: 30px !important;
    flex-shrink: 0 !important;
  }

  /* Nav actions: compact, no wrapping */
  .nav-actions {
    flex-shrink: 0 !important;
    gap: 0.3rem !important;
  }

  /* Hide desktop-only elements */
  .nav-cta, #cta-btn { display: none !important; }
  .login-icon { display: none !important; }       /* hide user icon in login btn */
  .chevron-icon { display: none !important; }     /* no chevron on mobile */

  /* Login button: compact pill */
  .nav-signin, #login-btn {
    padding: 0.38rem 0.7rem !important;
    font-size: 0.8rem !important;
    gap: 0.2rem !important;
    min-width: auto !important;
  }

  /* Hamburger: compact */
  .mobile-menu-toggle {
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0 !important;
  }

  /* Login dropdown on mobile: full-width panel below nav */
  .login-wrapper { position: static !important; }

  .login-dropdown {
    position: fixed !important;
    top: 58px !important;       /* directly below nav */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    border-radius: 0 0 var(--r2) var(--r2) !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid var(--border) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.3) !important;
    z-index: 999 !important;
    transform: translateY(-4px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
  }

  .login-dropdown.active {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: all !important;
    visibility: visible !important;
  }

  /* Dropdown items: bigger touch targets on mobile */
  .ld-item {
    padding: 1rem 1.25rem !important;
    font-size: 0.92rem !important;
    gap: 0.85rem !important;
    min-height: 52px !important;
  }
  /* Courses footer grid collapse */
  .courses-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
  }
}

@media (max-width: 479px) {
  .courses-footer-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Print Styles */
@media print {
  nav, footer, .no-print {
    display: none !important;
  }
  
  body {
    background: white;
    color: black;
  }
  
  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  a {
    text-decoration: underline;
  }
  
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }
  
  p {
    page-break-inside: avoid;
  }
  
  table {
    border-collapse: collapse;
    width: 100%;
  }
  
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
  }
}

/* Helper Classes */
.show-mobile {
  display: none;
}

@media (max-width: 767px) {
  .hide-mobile {
    display: none !important;
  }
  
  .show-mobile {
    display: block !important;
  }
}

.hide-tablet {
  display: block;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .hide-tablet {
    display: none !important;
  }
}

.hide-desktop {
  display: block;
}

@media (min-width: 1025px) {
  .hide-desktop {
    display: none !important;
  }
}