/* Mobile tweaks */
@media (max-width: 768px) {
  .model-container {
    aspect-ratio: auto;
    height: 55vh;
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .model-container {
    aspect-ratio: auto;
    height: 50vh;
    width: 100%;
    max-width: 100%;
  }

  .demo-page {
    padding: 0.5rem;
  }
}

/* Mobile text size adjustment */
@media (max-width: 768px) {
  .text-overlay > div {
    font-size: 0.85em;
  }
  
  .model-container {
    height: 55vh;
    width: 90%;
  }
}

@media (max-width: 480px) {
  .text-overlay > div {
    font-size: 0.8em;
  }
  
  .model-container {
    height: 50vh;
    width: 95%;
  }
  
  .demo-page {
    padding: 0.5rem;
  }
}

@media (max-width: 480px) {
  .info-card {
    padding: 1rem;
    font-size: 0.9rem;
  }

  .info-card h5 {
    font-size: 1rem;
  }
}

/* Mobile Responsive */
@media (max-width: 991.98px) {
  .navbar {
    height: auto;
    min-height: 80px;
    padding: 1rem 0;
  }
  
  .fish-selector {
    width: auto;
    margin-top: 0;
    margin-left: auto;
  }
  
  .fish-selector-btn {
    width: 85px;
    height: 60px;
    justify-content: center;
    min-width: 85px;
  }
  
  .fish-dropdown {
    right: 0;
    left: auto;
    min-width: 200px;
  }
}

@media (min-width: 768px) {
  .card-slider {
    /* Keep mobile scrolling behavior */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    
    /* Better padding for desktop - less extreme than mobile calculation */
    padding-left: 2rem;
    padding-right: 2rem;
    
    /* Start from left instead of center for better flow */
    justify-content: flex-start;
  }

  .info-card {
    /* Fixed width for consistency */
    flex-basis: 280px;
    min-width: 280px;
  }
}

@media (max-width: 768px) {
  .info-card {
    min-width: 220px;
  }
}