/* ============================================
   RESPONSIVE STYLES
   Media Queries for Mobile, Tablet, Desktop
   ============================================ */

/* ===== BREAKPOINTS =====
   Small Mobile: 0-480px
   Large Mobile: 481px-767px
   Tablet: 768px-1024px
   Desktop: 1025px-1279px
   Wide: 1280px+
   ============================================ */

/* ===== TABLET BASE (768px+) ===== */
@media (min-width: 768px) {
  /* Container */
  .container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }

  /* Typography */
  h1 {
    font-size: var(--text-5xl);
  }

  h2 {
    font-size: var(--text-4xl);
  }

  h3 {
    font-size: var(--text-3xl);
  }

  /* Hero Section */
  .hero {
    padding: var(--space-24) 0;
  }

  .hero-title {
    font-size: var(--text-5xl);
  }

  .hero-description {
    font-size: var(--text-xl);
  }

  /* Sections */
  .section {
    padding-top: var(--space-14);
    padding-bottom: var(--space-14);
  }

  .section-lg {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
  }
}

/* ===== DESKTOP (1025px+) ===== */
@media (min-width: 1025px) {
  /* Container */
  .container {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }

  /* Typography */
  h1 {
    font-size: var(--text-6xl);
  }

  /* Navigation */
  .navbar-toggle {
    display: none;
  }

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

  .navbar-menu {
    display: flex !important;
    gap: var(--space-6);
    flex-direction: row;
    background-color: transparent;
    padding: 0;
  }

  .navbar > div:last-child {
    display: flex !important;
  }

  .navbar-item {
    border-bottom: none;
  }

  .navbar-link {
    padding: var(--space-2) var(--space-4);
  }

  .navbar-link:hover {
    background-color: var(--color-primary-50);
    border-radius: var(--radius-md);
  }

  [data-theme="dark"] .navbar-link:hover {
    background-color: var(--color-primary-900);
  }

  .navbar-cta {
    margin-left: var(--space-4);
  }

  /* Mobile Menu Hidden */
  .mobile-menu {
    display: none !important;
  }

  /* Hero Section */
  .hero {
    padding: var(--space-28) 0;
  }

  .hero-content {
    max-width: 800px;
  }

  .hero-actions {
    flex-direction: row;
    justify-content: center;
  }

  /* Grid Systems */
  .grid-2-col {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3-col {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-4-col {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Stats Grid */
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Footer */
  .footer-content {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }

  /* Sections */
  .section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }

  .section-lg {
    padding-top: var(--space-24);
    padding-bottom: var(--space-24);
  }

  .section-xl {
    padding-top: var(--space-32);
    padding-bottom: var(--space-32);
  }

  /* Cards - Better Hover Effects */
  .card:hover {
    transform: translateY(-6px);
  }

  /* Feature Grid */
  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Comparison Table - Show All Columns */
  .comparison-table {
    display: table;
  }

  /* Page Header */
  .page-header {
    padding: var(--space-20) 0;
  }

  .page-header-title {
    font-size: var(--text-5xl);
  }
}

/* ===== WIDE SCREENS (1280px+) ===== */
@media (min-width: 1280px) {
  /* Hero Section */
  .hero {
    padding: var(--space-32) 0;
  }

  .hero-content {
    max-width: 900px;
  }

  /* Grid Systems - Maintain Max Columns */
  .grid-2-col {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3-col {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-4-col {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Course Cards - Show 3 per row */
  .courses-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Larger Sections */
  .section-xl {
    padding-top: var(--space-32);
    padding-bottom: var(--space-32);
  }
}

/* ===== MOBILE-SPECIFIC STYLES (max-width: 767px) ===== */
@media (max-width: 767px) {
  /* Hide Desktop Elements */
  .desktop-only {
    display: none !important;
  }

  /* Full-Width Buttons */
  .btn {
    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;
  }

  /* Stack Everything */
  .flex-row {
    flex-direction: column;
  }

  /* Course Card Actions - Stack Vertically */
  .course-card-actions {
    grid-template-columns: 1fr;
  }

  /* Accordion - Smaller Padding */
  .accordion-header {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
  }

  .accordion-body {
    padding: var(--space-4);
  }

  /* Tabs - Smaller Padding */
  .tabs-link {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
  }

  /* Footer - Single Column */
  .footer-content {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  /* Reduce Section Padding */
  .section {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }

  .section-lg {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }

  .section-xl {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }

  /* Hero - Smaller Spacing */
  .hero {
    padding: var(--space-16) 0;
  }

  .hero-title {
    font-size: var(--text-3xl);
  }

  .hero-description {
    font-size: var(--text-base);
  }

  /* Page Header - Smaller */
  .page-header {
    padding: var(--space-12) 0;
  }

  .page-header-title {
    font-size: var(--text-3xl);
  }

  /* Breadcrumb - Smaller */
  .breadcrumb {
    font-size: var(--text-xs);
  }

  /* Stats - Smaller Text */
  .stat-value {
    font-size: var(--text-3xl);
  }

  /* Form Inputs - Larger Touch Targets */
  .form-input,
  .form-select,
  .form-textarea {
    padding: var(--space-4);
    font-size: var(--text-base);
  }

  /* Comparison Table - Horizontal Scroll */
  .comparison-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .comparison-table {
    min-width: 600px;
  }

  /* WhatsApp Float - Smaller on Mobile */
  .whatsapp-float {
    width: 50px;
    height: 50px;
    bottom: var(--space-4);
    right: var(--space-4);
  }

  .whatsapp-float svg {
    width: 28px;
    height: 28px;
  }

  /* Result Card Image - Smaller */
  .result-card-img {
    width: 100px;
    height: 100px;
  }

  .result-card-score {
    font-size: var(--text-3xl);
  }
}

/* ===== SMALL MOBILE (max-width: 480px) ===== */
@media (max-width: 480px) {
  .navbar {
    grid-template-columns: minmax(80px, auto) 1fr auto;
    gap: var(--mobile-space-sm);
  }

  .hero {
    padding: var(--mobile-space-lg) 0;
  }

  .hero-title {
    font-size: var(--mobile-text-2xl);
  }

  .hero-description {
    font-size: var(--mobile-text-sm);
  }

  .hero-actions {
    gap: var(--mobile-space-sm);
  }

  .section,
  .section-lg,
  .section-xl {
    padding-top: var(--mobile-space-lg);
    padding-bottom: var(--mobile-space-lg);
  }

  .card,
  .testimonial-card,
  .result-card {
    padding: var(--mobile-space-sm);
  }

  .page-header-title,
  .stat-value {
    font-size: var(--mobile-text-xl);
  }

  .btn {
    font-size: var(--mobile-text-base);
  }
}

/* ===== TABLET-SPECIFIC STYLES (768px-1024px) ===== */
@media (min-width: 768px) and (max-width: 1024px) {
  .mobile-only {
    display: none !important;
  }

  .hero {
    padding: var(--space-20) 0;
  }

  .hero-title {
    font-size: clamp(var(--text-3xl), 4vw, var(--text-4xl));
  }

  .hero-description {
    font-size: var(--text-lg);
  }

  .section,
  .section-lg,
  .section-xl {
    padding-top: var(--space-14);
    padding-bottom: var(--space-14);
  }

  /* Force stacked layouts on tablets */
  .grid-2-col,
  .grid-3-col,
  .grid-4-col,
  .courses-grid,
  .featured-courses-grid,
  .testimonials-grid,
  .results-grid,
  .blog-grid,
  .resources-grid,
  .offerings-grid,
  .features-grid,
  .team-grid,
  .faq-grid,
  .footer-content,
  .footer-grid,
  .stats-grid {
    grid-template-columns: 1fr !important;
  }

  .offerings-grid-compact {
    display: flex;
    flex-direction: column;
    gap: var(--mobile-space-md);
  }

  .course-card-actions,
  .course-actions {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    gap: var(--mobile-space-sm) !important;
  }
}

/* ===== PRINT STYLES ===== */
@media print {
  /* Hide Navigation */
  .header,
  .mobile-menu,
  .navbar-toggle,
  .whatsapp-float,
  .dark-mode-toggle {
    display: none !important;
  }

  /* Show All Content */
  .accordion-content {
    max-height: none !important;
    display: block !important;
  }

  /* Remove Shadows */
  * {
    box-shadow: none !important;
  }

  /* Black Text on White Background */
  body {
    background-color: #ffffff !important;
    color: #000000 !important;
  }

  /* Remove Page Breaks Inside Cards */
  .card,
  .accordion-item {
    page-break-inside: avoid;
  }

  /* Links - Show URLs */
  a[href]::after {
    content: " (" attr(href) ")";
  }

  /* Remove Link Colors */
  a {
    color: #000000 !important;
    text-decoration: underline !important;
  }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::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) {
  .btn {
    border-width: 3px;
  }

  .card {
    border-width: 2px;
  }

  .form-input:focus,
  .form-select:focus,
  .form-textarea:focus {
    outline-width: 3px;
  }
}

/* ===== LANDSCAPE MOBILE (HORIZONTAL) ===== */
@media (max-height: 500px) and (orientation: landscape) {
  /* Reduce Vertical Padding */
  .hero {
    padding: var(--space-8) 0;
  }

  .section {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }

  /* Smaller Headers */
  .header {
    height: 60px;
  }

  .mobile-menu {
    top: 60px;
  }
}

/* ============================================
   UNIVERSAL GRID SYSTEM - MOBILE ONLY
   Applies to common grid wrappers on small screens
   ============================================ */

@media (max-width: 767px) {
  /* Force key grids to stack vertically */
  .grid,
  .grid-2-col,
  .grid-3-col,
  .grid-4-col,
  .courses-grid,
  .featured-courses-grid,
  .testimonials-grid,
  .results-grid,
  .blog-grid,
  .resources-grid,
  .offerings-grid,
  .offerings-grid-compact,
  .features-grid,
  .team-grid,
  .faq-grid,
  .stats-grid,
  .hero-slide-grid,
  .course-detail-grid,
  .about-grid,
  .growth-grid,
  .instructor-grid,
  .kwickprep-story-grid,
  .footer-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--mobile-space-md) !important;
  }

  /* Course Cards - Mobile Optimized */
  .course-card,
  [class*="course-card"] {
    width: 100%;
    max-width: 100%;
  }

  .course-image {
    aspect-ratio: 4/3;
    max-height: 250px;
  }

  .course-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .course-card-content {
    padding: var(--mobile-space-md);
  }

  .course-title {
    font-size: var(--mobile-text-lg);
    line-height: var(--leading-tight);
  }

  .course-description {
    font-size: var(--mobile-text-sm);
    line-height: var(--leading-normal);
  }

  .course-actions,
  .course-card-actions {
    flex-direction: column !important;
    gap: var(--mobile-space-sm) !important;
  }

  .course-actions > *,
  .course-card-actions > * {
    width: 100% !important;
  }

  /* Testimonial Cards */
  .testimonial-card {
    padding: var(--mobile-space-md);
  }

  .testimonial-image {
    width: 60px;
    height: 60px;
  }

  /* Blog Cards */
  .blog-card-image {
    aspect-ratio: 16/9;
    max-height: 200px;
  }

  /* Result Cards */
  .result-card {
    padding: var(--mobile-space-md);
  }

  /* Feature Cards */
  .feature-icon {
    width: 48px;
    height: 48px;
  }
}