/**
 * Responsive Styles
 * Media queries for different screen sizes
 * Mobile-first approach with breakpoints for tablet, desktop, and large screens
 */

/* ==================== TABLET (max-width: 1024px) ==================== */

@media (max-width: 1024px) {
  
  /* Hero Section */
  .hero-container {
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
  }
  
  .hero-title {
    font-size: var(--font-size-4xl);
  }
  
  .hero-description {
    font-size: var(--font-size-lg);
  }
  
  .hero-image {
    order: -1;
  }
  
  .hero-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-md);
  }
  
  /* Topics Grid */
  .topics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Units Grid */
  .units-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .trial-grid {
    grid-template-columns: 1fr;
  }
  
  /* Training Sections */
  .training-detail-grid {
    grid-template-columns: 1fr;
  }
  
  .training-modules-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .training-resources-container {
    flex-direction: column;
  }

  /* Workplace Edition */
  .workplace-hero__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .workplace-hero__content {
    margin-left: 0;
    align-items: center;
  }

  .workplace-hero__media {
    justify-content: center;
    order: -1;
  }

  .workplace-demo__grid {
    grid-template-columns: 1fr;
  }

  .workplace-demo__media {
    order: -1;
  }

  .module-card-grid,
  .feature-icon-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Solutions Sections */
  .solutions-benefits-grid,
  .solutions-grid {
    grid-template-columns: 1fr;
  }
  
  .solutions-feature-list {
    margin-top: var(--spacing-2xl);
  }
  
  /* Footer */
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .footer-brand {
    grid-column: span 2;
  }
}

/* ==================== MOBILE (max-width: 768px) ==================== */

@media (max-width: 768px) {
  
  /* Container */
  .container {
    padding: 0 var(--spacing-md);
  }
  
  /* Navigation */
  .navbar {
    padding: var(--spacing-md);
  }
  
  .navbar-menu {
    display: none;
  }
  
  .navbar-actions {
    display: none;
  }
  
  .mobile-menu-toggle {
    display: flex;
  }
  
  /* Hero Section */
  .hero-section {
    padding: var(--spacing-3xl) 0;
  }
  
  .hero-title {
    font-size: var(--font-size-3xl);
  }
  
  .hero-description {
    font-size: var(--font-size-base);
  }
  
  .hero-form {
    padding: var(--spacing-2xl);
  }
  
  .hero-cta-group {
    flex-direction: column;
    align-items: stretch;
  }
  
  .hero-metrics {
    grid-template-columns: 1fr;
  }
  
  /* Topics Section */
  .topics-section {
    padding: var(--spacing-3xl) 0;
  }
  
  .topics-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
  
  /* Units Section */
  .units-section {
    padding: var(--spacing-3xl) 0;
  }
  
  .units-grid {
    gap: var(--spacing-xl);
    grid-template-columns: 1fr;
  }
  
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  /* Workplace Edition */
  .workplace-hero {
    padding: var(--spacing-3xl) 0;
  }

  .workplace-hero__content {
    align-items: center;
    text-align: center;
  }

  .workplace-hero__cta {
    width: 100%;
    justify-content: center;
  }

  .module-card-grid,
  .feature-icon-grid {
    grid-template-columns: 1fr;
  }

  .confidence-band {
    margin: var(--spacing-4xl) 0;
  }
  
  .trial-grid {
    grid-template-columns: 1fr;
  }
  
  .trial-field-wide {
    grid-column: span 1;
  }
  
  .unit-content {
    padding: var(--spacing-lg);
  }
  
  /* Section Titles */
  .section-title {
    font-size: var(--font-size-2xl);
  }
  
  .section-subtitle {
    font-size: var(--font-size-base);
  }
  
  /* Why It Matters Section */
  .why-matters-section {
    padding: var(--spacing-3xl) 0;
  }
  
  .why-matters-text {
    font-size: var(--font-size-base);
  }
  
  /* FAQ Section */
  .faq-section {
    padding: var(--spacing-3xl) 0;
  }
  
  .faq-question {
    font-size: var(--font-size-base);
  }
  
  .faq-answer {
    font-size: var(--font-size-sm);
  }
  
  /* CTA Section */
  .cta-section {
    padding: var(--spacing-3xl) 0;
  }
  
  .cta-title {
    font-size: var(--font-size-2xl);
  }
  
  .cta-subtitle {
    font-size: var(--font-size-base);
  }
  
  /* Training */
  .training-modules-grid,
  .training-topics-grid {
    grid-template-columns: 1fr;
  }
  
  .training-resource-list li {
    width: 100%;
  }
  
  .trust-stats {
    grid-template-columns: 1fr;
  }
  
  /* Footer */
  .site-footer {
    padding: var(--spacing-3xl) 0 var(--spacing-xl);
  }
  
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }
  
  .footer-brand {
    grid-column: span 1;
  }
  
  /* Buttons */
  .btn {
    width: 100%;
    justify-content: center;
  }
  
  .btn-large {
    padding: 0.875rem 1.5rem;
    font-size: var(--font-size-base);
  }
}

/* ==================== SMALL MOBILE (max-width: 480px) ==================== */

@media (max-width: 480px) {
  
  /* Further reduce spacing on very small screens */
  .hero-section,
  .topics-section,
  .units-section,
  .why-matters-section,
  .faq-section,
  .cta-section {
    padding: var(--spacing-2xl) 0;
  }
  
  .container {
    padding: 0 var(--spacing-sm);
  }
  
  .hero-title {
    font-size: var(--font-size-2xl);
  }
  
  .section-title {
    font-size: var(--font-size-xl);
  }
}

/* ==================== LARGE DESKTOP (min-width: 1536px) ==================== */

@media (min-width: 1536px) {
  
  .container {
    max-width: var(--container-width-2xl);
  }
  
  .hero-title {
    font-size: 4.5rem;
  }
  
  .section-title {
    font-size: var(--font-size-5xl);
  }
}

/* ==================== PRINT STYLES ==================== */

@media print {
  
  /* Hide navigation and footer when printing */
  .site-header,
  .site-footer,
  .navbar,
  .cta-section {
    display: none;
  }
  
  /* Optimize layout for printing */
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }
  
  a {
    text-decoration: underline;
  }
  
  /* Show link URLs when printing */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
  
  /* Prevent page breaks inside elements */
  .card,
  .unit-card,
  .topic-card {
    page-break-inside: avoid;
  }
  
  /* Add page breaks before major sections */
  section {
    page-break-before: auto;
  }
}

/* ==================== ACCESSIBILITY - REDUCED MOTION ==================== */

@media (prefers-reduced-motion: reduce) {
  
  /* Remove all animations and transitions for users who prefer reduced motion */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==================== HIGH CONTRAST MODE ==================== */

@media (prefers-contrast: high) {
  
  /* Increase contrast for better visibility */
  .btn-primary {
    background-color: #0000FF;
    border: 2px solid #000;
  }
  
  .navbar-link,
  .footer-links a {
    text-decoration: underline;
  }
  
  .card,
  .unit-card,
  .topic-card {
    border: 2px solid var(--color-gray-900);
  }
}

/* ==================== DARK MODE (Future Enhancement) ==================== */

@media (prefers-color-scheme: dark) {
  
  /* 
   * Dark mode styles can be added here in the future
   * Currently keeping the design consistent with the brand
   */
}