/* responsive.css - Media queries — Apple style layout */

/* Tablet and up: 2 columns for company cards */
@media (min-width: 768px) {
  .companies__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop */
@media (min-width: 1025px) {
  .companies__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .hero {
    min-height: 85vh;
    padding: 60px 20px;
  }

  .hero__title {
    font-size: clamp(48px, 14vw, 72px);
  }

  .section {
    padding: clamp(80px, 12vw, 120px) 20px;
  }

  .feature-card {
    padding: 40px 24px;
  }

  .feature-card__acronym {
    font-size: clamp(40px, 12vw, 64px);
  }

  .card {
    padding: 28px 24px;
    border-radius: 16px;
  }

  .card__acronym {
    font-size: clamp(28px, 8vw, 40px);
  }

  .section__heading {
    font-size: clamp(32px, 8vw, 48px);
  }
}

/* Small mobile */
@media (max-width: 380px) {
  .hero__title {
    font-size: 42px;
  }

  .feature-card__title {
    font-size: 28px;
  }

  .card {
    padding: 24px 20px;
  }
}

/* Prevent horizontal scroll at minimum viewport */
@media (max-width: 320px) {
  html {
    overflow-x: hidden;
  }

  .section {
    padding-inline: 12px;
  }

  .card {
    padding: 20px 16px;
  }
}

/* Fallback for browsers without CSS Grid support */
@supports not (display: grid) {
  .companies__grid {
    display: flex;
    flex-wrap: wrap;
    margin: calc(var(--spacing-card-gap) * -0.5);
  }

  .companies__grid .card {
    flex: 1 1 300px;
    margin: calc(var(--spacing-card-gap) * 0.5);
  }
}