/* ===== RESPONSIVE DESIGN ===== */
/* Mobile First Approach */

/* Extra Small devices (phones, 576px and down) */
@media (max-width: 575.98px) {
  /* Typography adjustments for mobile */
  h1 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 1.83rem;
  }
  
  h3 {
    font-size: 1.59rem;
  }
  
  .lead {
    font-size: 1.17rem;
  }
  
  /* Hero section mobile adjustments */
  #hero {
    min-height: 80vh;
    padding: 2rem 0;
  }
  
  /* Disable animations on mobile for better performance */
  .card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
  }
  
  .btn:hover {
    transform: none;
  }
  
  .fa-3x:hover {
    transform: none;
  }
  
  #gallery img:hover {
    transform: none;
  }
  
  /* Card adjustments */
  .card-img-top {
    height: 180px;
  }
  
  /* Spacing adjustments */
  section {
    padding: 3rem 0;
  }
  
  .py-5 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  
  /* Team section mobile */
  .col-lg-2-4 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 2rem;
  }
  
  /* Form adjustments */
  .form-control {
    padding: 0.75rem;
  }
  
  /* Button adjustments */
  .btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1.34rem;
  }
  
  /* Navbar adjustments */
  .navbar-brand {
    font-size: 1.24rem;
  }
  
  /* Footer adjustments */
  #footer {
    text-align: center;
  }
  
  #footer .col-lg-4 {
    margin-bottom: 2rem;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .col-lg-2-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  
  .card-img-top {
    height: 190px;
  }
  
  #hero {
    min-height: 85vh;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .col-lg-2-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  
  .card-img-top {
    height: 200px;
  }
  
  #hero {
    min-height: 90vh;
  }
  
  /* Tablet-specific adjustments */
  h1 {
    font-size: 2.70rem;
  }
  
  h2 {
    font-size: 2rem;
  }
}

/* Large devices (desktops, 995px and up) */
@media (min-width: 993px) and (max-width: 1199.98px) {
  .col-lg-2-4 {
    flex: 0 0 20%;
    max-width: 20%;
  }
  
  .card-img-top {
    height: 220px;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .container {
    max-width: 1200px;
  }
  
  .card-img-top {
    height: 240px;
  }
  
  /* Enhanced hover effects for larger screens */
  .card:hover {
    transform: translateY(-8px);
  }
  
  .btn:hover {
    transform: translateY(-3px);
  }
}

/* ===== LANDSCAPE ORIENTATION ===== */
@media (orientation: landscape) and (max-height: 500px) {
  #hero {
    min-height: 100vh;
    padding: 1rem 0;
  }
  
  #hero h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  
  #hero .lead {
    font-size: 1rem;
    margin-bottom: 1.78rem;
  }
}

/* ===== HIGH DPI DISPLAYS ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .card {
    box-shadow: 0 7px 4px rgba(0, 0, 0, 0.1);
  }
  
  .btn {
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  }
}

/* ===== TOUCH DEVICE OPTIMIZATIONS ===== */
@media (pointer: coarse) {
  /* Larger touch targets */
  .btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.5rem;
  }
  
  .nav-link {
    padding: 1rem;
  }
  
  .form-control {
    min-height: 44px;
    padding: 0.75rem;
  }
  
  /* Remove hover effects on touch devices */
  .card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
  }
  
  .btn:hover {
    transform: none;
  }
  
  .fa-3x:hover {
    transform: none;
  }
}

/* ===== CONTAINER QUERIES (Future-proofing) ===== */
/* Note: Container queries have limited support, using media queries as fallback */

/* ===== GRID SYSTEM EXTENSIONS ===== */
/* Custom 5-column grid for team section */
@media (min-width: 992px) {
  .row-cols-lg-5 > * {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .row-cols-lg-5 > * {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
}

@media (max-width: 767.98px) {
  .row-cols-lg-5 > * {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 2rem;
  }
}

/* ===== ACCESSIBILITY RESPONSIVE ===== */
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  /* Ensure no animations on small screens with reduced motion preference */
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ===== PRINT RESPONSIVE ===== */
@media print {
  .container {
    max-width: none;
    width: 100%;
  }
  
  .row {
    display: block;
  }
  
  .col-lg-4,
  .col-lg-6,
  .col-lg-8,
  .col-lg-12,
  .col-md-4,
  .col-md-6,
  .col-md-8,
  .col-md-12 {
    width: 100%;
    float: none;
    display: block;
  }
  
  .d-print-none {
    display: none !important;
  }
  
  .d-print-block {
    display: block !important;
  }
}

/* ===== DARK MODE SUPPORT ===== */

/* ===== REDUCED DATA MODE ===== */
@media (prefers-reduced-data: reduce) {
  /* Disable background images and complex effects */
  #hero::before {
    display: none;
  }
  
  .card-img-top {
    display: none;
  }
  
  /* Use system fonts to reduce data usage */
  body {
    font-family: system-ui, -apple-system, sans-serif;
    overflow-x: hidden;
}
}

/* ===== FORCED COLORS MODE ===== */
@media (forced-colors: active) {
  .btn {
    forced-color-adjust: none;
    border: 2px solid ButtonText;
  }
  
  .card {
    forced-color-adjust: none;
    border: 1px solid CanvasText;
  }
  
  .form-control {
    forced-color-adjust: none;
    border: 2px solid FieldText;
  }
}