/* Responsive Design - Mobile-first approach */

/* Base Mobile Styles (320px+) */
/* These styles apply to all screen sizes unless overridden */

/* Typography scaling */
html {
  font-size: 14px; /* Smaller base size for mobile */
}

.hero-title {
  font-size: 1.75rem;
  line-height: 1.1;
}

.hero-description {
  font-size: 1rem;
  margin-bottom: 2rem;
}

/* Touch-friendly interactions */
.btn,
.startup-card,
input,
select,
textarea {
  min-height: 44px; /* iOS/Android minimum touch target */
}

/* Mobile navigation */
.nav ul {
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
}

.nav ul li {
  width: 100%;
}

.nav a {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

.nav a:hover,
.nav a:focus {
  background-color: #f3f4f6;
}

/* Simplified hero layout */
.hero {
  padding: 2rem 0;
}

.hero-cta {
  flex-direction: column;
  gap: 0.75rem;
}

.hero-cta .btn {
  width: 100%;
  max-width: 280px;
}

/* Single column layouts */
.contact-content {
  grid-template-columns: 1fr;
  gap: 2rem;
}

.filters {
  grid-template-columns: 1fr;
  gap: 1rem;
}

.startups-grid {
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

/* Simplified startup cards */
.startup-card {
  padding: 1rem;
}

.startup-card-header {
  flex-direction: column;
  align-items: start;
  gap: 0.75rem;
}

.startup-logo {
  width: 50px;
  height: 50px;
  align-self: center;
}

.startup-details {
  flex-direction: column;
  align-items: start;
  gap: 0.5rem;
}

/* Form optimizations */
.search-input-group {
  flex-direction: column;
  gap: 0.5rem;
}

.search-input-group input {
  border-radius: 8px;
  border: 1px solid #d1d5db;
}

.search-btn {
  border-radius: 8px;
  width: 100%;
}

/* Modal adjustments */
.modal {
  padding: 1rem;
  align-items: flex-start;
  padding-top: 2rem;
}

.modal-content {
  width: 100%;
  max-height: 85vh;
}

.startup-header {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.startup-details-grid {
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.links-container {
  flex-direction: column;
  gap: 0.5rem;
}

/* Small Mobile (375px+) */
@media (min-width: 375px) {
  html {
    font-size: 15px;
  }

  .container {
    padding: 0 16px;
  }

  .hero-title {
    font-size: 2rem;
  }

  .startup-card {
    padding: 1.25rem;
  }

  .search-input-group {
    flex-direction: row;
  }

  .search-input-group input {
    border-radius: 8px 0 0 8px;
    border-right: none;
  }

  .search-btn {
    border-radius: 0 8px 8px 0;
    width: auto;
  }
}

/* Large Mobile (414px+) */
@media (min-width: 414px) {
  .hero-cta {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }

  .hero-cta .btn {
    width: auto;
    min-width: 140px;
  }

  .filters {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tablet Portrait (768px+) */
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }

  .container {
    padding: 0 20px;
  }

  /* Restore desktop header layout */
  .header-content {
    flex-direction: row;
    align-items: center;
  }

  .nav ul {
    flex-direction: row;
    gap: 2rem;
  }

  .nav a {
    padding: 0;
    background: none;
  }

  .nav a:hover,
  .nav a:focus {
    background: none;
    color: #2563eb;
  }

  /* Hero improvements */
  .hero {
    padding: 3rem 0;
  }

  .hero-title {
    font-size: 2.5rem;
  }

  .hero-description {
    font-size: 1.125rem;
  }

  /* Multi-column filters */
  .filters {
    grid-template-columns: repeat(3, 1fr) auto;
    align-items: end;
  }

  /* Two-column startup grid */
  .startups-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .startup-card {
    padding: 1.5rem;
  }

  .startup-card-header {
    flex-direction: row;
    align-items: start;
  }

  .startup-logo {
    width: 60px;
    height: 60px;
    align-self: flex-start;
  }

  .startup-details {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  /* Contact section */
  .contact-content {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }

  /* Modal improvements */
  .modal {
    padding: 2rem;
    align-items: center;
  }

  .startup-header {
    flex-direction: row;
    align-items: start;
    text-align: left;
  }

  .startup-details-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .links-container {
    flex-direction: row;
    gap: 1rem;
  }
}

/* Tablet Landscape / Small Desktop (1024px+) */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
  }

  .hero {
    padding: 4rem 0;
  }

  .hero-title {
    font-size: 3rem;
  }

  .hero-description {
    font-size: 1.25rem;
  }

  /* Three-column startup grid */
  .startups-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  /* Four-column filters */
  .filters {
    grid-template-columns: repeat(4, 1fr) auto;
  }

  /* Better modal spacing */
  .modal-content {
    max-width: 800px;
  }

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

/* Large Desktop (1280px+) */
@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }

  /* Four-column startup grid for large screens */
  .startups-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }

  .hero-title {
    font-size: 3.5rem;
  }

  /* Enhanced contact section */
  .contact-content {
    gap: 4rem;
  }
}

/* Extra Large Desktop (1440px+) */
@media (min-width: 1440px) {
  .container {
    max-width: 1440px;
  }

  .hero {
    padding: 5rem 0;
  }

  .startups-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2.5rem;
  }
}

/* Landscape orientation optimizations */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    padding: 1.5rem 0;
  }

  .hero-title {
    font-size: 1.5rem;
  }

  .hero-description {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
  }

  .modal {
    padding: 0.5rem;
    padding-top: 1rem;
  }

  .modal-content {
    max-height: 95vh;
  }
}

/* High-DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .startup-logo img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Touch device specific optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover effects on touch devices */
  .startup-card:hover {
    transform: none;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }

  .btn-primary:hover {
    transform: none;
    box-shadow: 0 4px 14px 0 rgba(37, 99, 235, 0.3);
  }

  /* Larger touch targets */
  .btn {
    min-height: 48px;
    padding: 0.875rem 1.5rem;
  }

  .modal-close {
    width: 44px;
    height: 44px;
    font-size: 1.75rem;
  }

  /* Enhanced touch feedback */
  .startup-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }

  .btn:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
  }
}

/* Keyboard navigation improvements */
@media (hover: hover) and (pointer: fine) {
  /* Desktop-specific hover effects */
  .startup-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
}

/* Focus styles for accessibility */
.startup-card:focus,
.btn:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* Print styles */
@media print {
  .header,
  .search-section,
  .contact-section,
  .footer,
  .modal {
    display: none !important;
  }

  .startups-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .startup-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #e5e7eb;
  }

  body {
    background: white;
    color: black;
  }
}

/* Reduced data mode (slow connections) */
@media (prefers-reduced-data: reduce) {
  .startup-logo img {
    display: none;
  }

  .logo-placeholder {
    display: block !important;
  }

  /* Disable animations on slow connections */
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}