/* 
  CheckMatrix Chess Academy - Responsive Overrides
  Focuses on custom timeline flow changes, mobile menu layout adaptation, and sizing adjustments on smaller viewports.
*/

@media (max-width: 1024px) {
  .section-padding {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

@media (max-width: 768px) {
  :root {
    --section-pad: 4rem;
  }
  
  .section-padding {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  /* Timeline adaptation for mobile: Align everything to the left */
  .timeline-track {
    left: 20px;
    transform: none;
  }

  .timeline-step {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding-left: 50px !important;
    text-align: left !important;
  }

  .timeline-step:nth-child(even) {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding-left: 50px !important;
    text-align: left !important;
  }

  .timeline-step .step-point {
    left: 20px !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  .timeline-step .step-content {
    width: 100% !important;
    padding: 0 !important;
    margin-top: 0.5rem;
  }
  
  .timeline-step .step-empty {
    display: none !important;
  }

  /* Mobile stats adjustment */
  .stat-card h3 {
    font-size: 2.5rem;
  }
  
  /* Mobile header logic */
  .header-actions {
    display: none;
  }
  
  /* Testimonial card slider adjustments */
  .testimonial-quote {
    font-size: 1.125rem !important;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 2.25rem !important;
    line-height: 1.25;
  }
  
  h2 {
    font-size: 1.75rem !important;
  }

  .step-number {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.875rem !important;
  }

  .timeline-track {
    left: 16px;
  }

  .timeline-step {
    padding-left: 40px !important;
  }

  .timeline-step .step-point {
    left: 16px !important;
  }
}

/* Print Styles for high accessibility */
@media print {
  body {
    background: white;
    color: black;
  }
  
  .header-glass, footer, button, .btn-gold, .btn-royal, .faq-header svg, .contact-section {
    display: none !important;
  }
}