/* ==============================
   TABLET & SMALL DEVICES
   ============================== */
@media (max-width: 768px) {
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }

  .finalists-grid,
  .schools-grid {
    grid-template-columns: 1fr;
  }

  .container {
    padding: 15px;
  }

  header nav {
    flex-direction: column;
    gap: 10px;
  }

  header nav a {
    margin: 5px 0;
    font-size: 0.9rem;
  }

  .hero {
    padding: 60px 15px;
  }

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

  .hero-buttons {
    flex-direction: column;
    gap: 12px;
  }

  .auth-box {
    padding: 25px 20px;
  }

  .btn {
    padding: 10px 20px;
    font-size: 0.9rem;
  }

  .deadline-notice {
    font-size: 1rem;
  }

  .finalist-pair {
    flex-direction: column;
    gap: 15px;
  }

  .school-card-footer {
    flex-direction: row;
  }

  .org-content-wrapper {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .org-logo {
    max-height: 250px;
  }

  .illustrations-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .illustration-image {
    height: 150px;
  }
}

/* ==============================
   MOBILE DEVICES
   ============================== */
@media (max-width: 480px) {
  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.3rem;
  }

  h3 {
    font-size: 1rem;
  }

  .btn {
    padding: 8px 16px;
    font-size: 0.85rem;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 0.9rem;
    padding: 10px 12px;
  }

  header nav {
    flex-direction: column;
    gap: 8px;
  }

  header nav a {
    font-size: 0.85rem;
  }

  .logo {
    font-size: 1.1rem;
  }

  .hero {
    padding: 50px 15px;
  }

  .hero h1 {
    font-size: 1.5rem;
    margin-bottom: 15px;
  }

  .hero p {
    font-size: 1rem;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 10px;
    margin: 20px 0;
  }

  .card {
    padding: 15px;
  }

  .search-bar {
    padding: 10px 12px;
    font-size: 0.9rem;
  }

  .school-card-title {
    font-size: 1rem;
  }

  .school-card-location {
    font-size: 0.85rem;
  }

  table {
    font-size: 0.85rem;
  }

  table th,
  table td {
    padding: 10px 8px;
  }

  .rank-badge {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }

  .org-content-wrapper {
    grid-template-columns: 1fr;
  }

  .org-logo {
    max-height: 200px;
  }

  .org-info-container h2 {
    font-size: 1.5rem;
  }

  .org-actions {
    flex-direction: column;
  }

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

  .illustration-image {
    height: 200px;
  }
}