/**
 * Narrow Desktop Responsive Fixes
 * Target: 800px - 1200px viewport width
 * Use case: Split-screen browsing, smaller monitors, browser sidebars
 */

/* ============================================================================
   GLOBAL CONTAINER ALIGNMENT FIX
   Ensure all hero containers match navigation alignment
   ============================================================================ */

.about-hero-container,
.mission-hero-container {
  padding-left: 48px !important;
  padding-right: 48px !important;
}

@media (min-width: 768px) {
  .about-hero-container,
  .mission-hero-container {
    padding-left: 64px !important;
    padding-right: 64px !important;
  }
}

@media (min-width: 1024px) {
  .about-hero-container,
  .mission-hero-container {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
}

/* ============================================================================
   NARROW DESKTOP BREAKPOINTS
   - 800px-1024px: Very narrow desktop / large tablet landscape
   - 1024px-1200px: Narrow desktop / small laptop
   ============================================================================ */

/* === VERY NARROW DESKTOP: 800px - 1023px === */
@media (min-width: 800px) and (max-width: 1023px) {
  
  /* Hero Section */
  .hero-title {
    font-size: 2.5rem !important;
    line-height: 1.15 !important;
  }
  
  .hero-subtitle {
    font-size: 1.1rem !important;
  }
  
  /* Reduce container padding */
  .container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  
  /* Map Section - Scale down */
  .map-section-container {
    padding: 2rem 1.5rem !important;
  }
  
  .map-section-title {
    font-size: 1.75rem !important;
  }
  
  .map-card {
    height: 450px !important;
  }
  
  /* Route Cards */
  .route-cards-grid {
    gap: 1rem !important;
  }
  
  .route-card {
    padding: 1.25rem !important;
  }
  
  .route-card-title {
    font-size: 1.25rem !important;
  }
  
  /* Gallery Section */
  .gallery-title {
    font-size: 2rem !important;
  }
  
  /* Contact Form */
  .contact-section-title {
    font-size: 2rem !important;
  }
  
  /* Footer */
  .footer-grid {
    gap: 2rem !important;
  }
  
  /* About Page Team Cards */
  .team-compact-card {
    padding: 1rem !important;
  }
  
  .team-compact-name {
    font-size: 1rem !important;
  }
  
  /* Mission Page */
  .mission-hero-title {
    font-size: 2.5rem !important;
  }
}

/* === NARROW DESKTOP: 1024px - 1199px === */
@media (min-width: 1024px) and (max-width: 1199px) {
  
  /* Hero Section - Slightly reduced */
  .hero-title {
    font-size: 3rem !important;
    max-width: 700px !important;
  }
  
  .hero-subtitle {
    font-size: 1.25rem !important;
  }
  
  /* Container - Moderate padding */
  .container {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  
  /* Map Section */
  .map-section-title {
    font-size: 2rem !important;
  }
  
  .map-card {
    height: 500px !important;
  }
  
  /* Route Cards - 2 columns */
  .route-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* Gallery */
  .gallery-title {
    font-size: 2.25rem !important;
  }
  
  .gallery-description {
    font-size: 1rem !important;
  }
  
  /* About Page */
  .about-hero-title {
    font-size: 2.75rem !important;
  }
  
  .team-grid {
    gap: 1.5rem !important;
  }
  
  /* Mission Page */
  .mission-hero-title {
    font-size: 3rem !important;
  }
  
  /* InfoCenter Panel */
  .info-center-panel {
    width: 380px !important;
  }
}

/* === SMALL DESKTOP: 1200px - 1399px === */
@media (min-width: 1200px) and (max-width: 1399px) {
  
  /* Hero - Slight reduction */
  .hero-title {
    font-size: 3.5rem !important;
  }
  
  .hero-subtitle {
    font-size: 1.375rem !important;
  }
  
  /* Route Cards - 3 columns */
  .route-cards-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ============================================================================
   COMPONENT-SPECIFIC NARROW RESPONSIVE FIXES
   ============================================================================ */

/* === Navigation - Narrow Desktop === */
@media (max-width: 1200px) {
  .nav-links {
    gap: 1.5rem !important;
  }
  
  .nav-link {
    font-size: 0.875rem !important;
  }
}

/* === Section Headers - Uniform Scaling === */
@media (max-width: 1200px) {
  [class*="section-title"],
  [class*="hero-title"] {
    letter-spacing: -0.02em !important;
  }
}

/* === Footer Grid - Stack Earlier === */
@media (max-width: 1100px) {
  .footer-main-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  
  .footer-links-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* === About Page Team Grid - Responsive === */
@media (max-width: 1100px) {
  .team-compact-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* === Contact Form - Stack on Narrow === */
@media (max-width: 1024px) {
  .contact-grid {
    grid-template-columns: 1fr !important;
  }
}

/* === Isometric Section - Scale Icons === */
@media (max-width: 1200px) {
  .isometric-grid {
    gap: 1.5rem !important;
  }
  
  .isometric-card {
    padding: 1.25rem !important;
  }
}

/* === Gallery Cinematic - Responsive Images === */
@media (max-width: 1200px) {
  .gallery-image-container {
    height: 60vh !important;
    min-height: 400px !important;
  }
}

/* ============================================================================
   TYPOGRAPHY SCALING - FLUID APPROACH
   ============================================================================ */

@media (max-width: 1400px) {
  :root {
    --heading-scale: 0.9;
    --body-scale: 0.95;
  }
}

@media (max-width: 1200px) {
  :root {
    --heading-scale: 0.85;
    --body-scale: 0.92;
  }
}

@media (max-width: 1024px) {
  :root {
    --heading-scale: 0.8;
    --body-scale: 0.9;
  }
}