/* ============================================================
   RESPONSIVE — Media Queries
   Scholarship Gate
   ============================================================ */

/* Large tablet: below 1024px */
@media (max-width: 1024px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }

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

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

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

  .nav__links {
    gap: var(--space-2);
  }
}

/* Tablet: below 768px */
@media (max-width: 768px) {
  :root {
    --container-padding: 1.25rem;
    --space-7: 4rem;
    --space-8: 5rem;
  }

  .nav__links {
    display: none;
  }

  .nav__lang {
    display: none;
  }

  .nav__mobile-toggle {
    display: flex;
  }

  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

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

  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .footer__description {
    max-width: none;
  }

  .footer__bottom {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }

  html[dir="rtl"] .footer__bottom {
    flex-direction: column;
  }

  .hero {
    min-height: 90vh;
  }

  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
  }

  html[dir="rtl"] .hero__actions {
    align-items: flex-end;
    flex-direction: column;
  }

  .cta-banner__actions {
    flex-direction: column;
    align-items: center;
  }

  html[dir="rtl"] .cta-banner__actions {
    flex-direction: column;
  }

  .why-item {
    flex-direction: column;
    gap: var(--space-2);
  }

  html[dir="rtl"] .why-item {
    flex-direction: column;
  }

  .page-hero {
    padding-top: calc(var(--space-7) + var(--space-4));
    padding-bottom: var(--space-5);
  }
}

/* Mobile: below 480px */
@media (max-width: 480px) {
  :root {
    --space-7: 3.5rem;
  }

  .stats__grid {
    grid-template-columns: 1fr 1fr;
  }

  .filter-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
  }

  .filter-tabs::-webkit-scrollbar {
    display: none;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }

  .hero__actions .btn {
    width: auto;
  }
}