/* ============================================
   Responsive Styles - learn.botgui.de LMS
   ============================================ */

/* Mobile First Approach - Base styles are mobile */

/* Tablet */
@media (min-width: 768px) {
  .container {
    padding: 0 var(--spacing-lg);
  }
  
  .grid-2-mobile {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid-3-mobile {
    grid-template-columns: repeat(3, 1fr);
  }
  
  h1 {
    font-size: 56px;
  }
  
  h2 {
    font-size: 42px;
  }
  
  .section {
    padding: var(--spacing-5xl) 0;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .grid-2-mobile,
  .grid-3-mobile {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .grid-4-mobile {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .navbar-nav {
    gap: var(--spacing-xl);
  }
  
  .course-card-image {
    height: 240px;
  }
}

/* Large Desktop */
@media (min-width: 1440px) {
  .container {
    padding: 0 var(--spacing-2xl);
  }
}

/* Mobile Specific */
@media (max-width: 767px) {
  /* Typography */
  h1 {
    font-size: 32px;
  }
  
  h2 {
    font-size: 28px;
  }
  
  h3 {
    font-size: 20px;
  }
  
  /* Spacing */
  .section {
    padding: var(--spacing-2xl) 0;
  }
  
  .section-lg {
    padding: var(--spacing-3xl) 0;
  }
  
  /* Grid */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
  
  /* Navigation */
  .navbar-container {
    padding: var(--spacing-md);
  }
  
  .navbar-nav {
    display: none; /* Will be replaced with hamburger menu */
  }
  
  /* Buttons */
  .btn {
    width: 100%;
    justify-content: center;
  }
  
  .btn-group {
    flex-direction: column;
  }
  
  /* Cards */
  .course-card {
    margin-bottom: var(--spacing-lg);
  }
  
  .course-card-image-wrapper {
    height: 180px;
  }
  
  /* Modal */
  .modal {
    max-width: 95%;
    margin: var(--spacing-md);
  }
  
  /* Footer */
  .footer-content {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
  
  /* Course Catalog Layout */
  .container > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  
  aside {
    order: 2;
    margin-top: var(--spacing-lg);
  }
  
  main {
    order: 1;
  }
}

/* Tablet Portrait */
@media (min-width: 768px) and (max-width: 1023px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .course-card-image {
    height: 220px;
  }
}

/* Print Styles */
@media print {
  .navbar,
  .footer,
  .btn,
  .modal {
    display: none;
  }
  
  body {
    background: white;
    color: black;
  }
  
  a {
    color: black;
    text-decoration: underline;
  }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Optimize for retina displays */
  img {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* Landscape Orientation */
@media (orientation: landscape) and (max-height: 500px) {
  .section {
    padding: var(--spacing-lg) 0;
  }
}

/* Dark Mode Support (Optional) */
@media (prefers-color-scheme: dark) {
  /* Can be implemented later if needed */
}

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