/* ==========================================
   SCHOOL №11 - RESPONSIVE BREAKPOINT SYSTEM
   Breakpoints: 1920px, 1440px, 1280px, 1024px, 768px, 480px, 375px
   ========================================== */

/* 1. Large Displays (Up to 1440px) */
@media (max-width: 1440px) {
  :root {
    --container-max-width: 1240px;
  }
}

/* 2. Standard Desktop / Laptops (Up to 1280px) */
@media (max-width: 1280px) {
  .desktop-nav {
    gap: 1.25rem;
  }

  .nav-link-item {
    font-size: 0.88rem;
  }

  .footer-top-grid {
    grid-template-columns: 1.5fr repeat(4, 1fr);
    gap: 1.75rem;
  }
}

/* 3. Small Laptops & Tablets Landscape (Up to 1024px) */
@media (max-width: 1024px) {
  .desktop-nav {
    display: none; /* Hide primary inline nav links, use Menu Drawer */
  }

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

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

  .grid-asymmetric,
  .grid-asymmetric-reverse {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .news-journal-grid {
    grid-template-columns: 1fr;
  }

  .footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }

  .footer-brand-col {
    grid-column: span 2;
  }
}

/* 4. Tablets Portrait (Up to 768px) */
@media (max-width: 768px) {
  :root {
    --header-height: 72px;
  }

  .hero-section {
    min-height: 85vh;
    padding-bottom: 4rem;
  }

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

  .hero-cta-group {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
  }

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

  .pillar-card {
    height: 380px;
    padding: 1.5rem;
  }

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

  .search-form-group {
    max-width: 100%;
  }

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

  .cta-banner {
    padding: 2.5rem 1.5rem;
  }

  .footer-top-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-brand-col {
    grid-column: span 1;
  }

  .footer-bottom-bar {
    flex-direction: column;
    text-align: center;
  }
}

/* 5. Compact Mobile (Up to 480px) */
@media (max-width: 480px) {
  .logo-subtitle {
    display: none;
  }

  .logo-title {
    font-size: 1.2rem;
  }

  .btn-admissions {
    display: none; /* Accessible in mobile drawer */
  }

  .program-item-card {
    padding: 1.25rem;
  }

  .news-side-item {
    flex-direction: column;
  }

  .news-side-thumb {
    width: 100%;
    height: 160px;
  }
}

/* 6. Extra Small Mobile (Up to 375px) */
@media (max-width: 375px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

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

  .section-title {
    font-size: 1.75rem;
  }
}