/* ==========================================================================
   responsive.css — breakpoint adjustments
   Base styles are desktop-friendly and fluid; these rules adapt the few
   layouts that need restructuring on smaller viewports.
   ========================================================================== */

/* ---------- ≤ 1024px (small laptop / tablet landscape) ------------------ */

@media (max-width: 64rem) {
  .profile-layout {
    grid-template-columns: 16.5rem minmax(0, 1fr);
    gap: var(--space-4);
  }

  .content-section {
    padding: var(--space-5);
  }
}

/* ---------- ≤ 860px (tablet portrait) ------------------------------------ */

@media (max-width: 53.75rem) {
  .filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Sidebar stacks above content; sticky no longer makes sense */
  .profile-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-sidebar {
    position: static;
  }

  /* Sidebar spans the page here — cap the square portrait */
  .profile-photo {
    max-width: 13rem;
  }

  /* Content covers most of narrow viewports — keep only corner shapes */
  .profile-bg__shape--circuit,
  .profile-bg__shape--hex,
  .profile-bg__shape--wave {
    display: none;
  }

  .profile-bg__shape--atom {
    width: 120px;
  }

  .hero__stats {
    gap: var(--space-5);
  }
}

/* ---------- ≤ 640px (mobile) --------------------------------------------- */

@media (max-width: 40rem) {
  .container {
    padding-inline: var(--space-4);
  }

  .hero__inner {
    padding-block: var(--space-7) var(--space-6);
  }

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

  .hero__stat {
    min-width: 0;
    flex: 1;
    padding-inline: var(--space-3);
  }

  .hero__stat dd {
    font-size: 1.375rem;
  }

  .hero__terminal {
    font-size: 0.71875rem;
  }

  .hero__stat dt {
    font-size: 0.71875rem;
    text-align: center;
  }

  .hero__search-kbd {
    display: none;
  }

  .brand__sub {
    display: none;
  }

  .site-nav__link:not(.is-active) {
    display: none;
  }

  .directory {
    padding-block: var(--space-6) var(--space-7);
  }

  .directory__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .faculty-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .filter-bar {
    grid-template-columns: minmax(0, 1fr);
  }

  .content-section {
    padding: var(--space-4);
  }

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

  .site-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  /* Full-width square is too tall on phones — cap the portrait */
  .profile-photo {
    max-width: 13rem;
  }
}

/* ---------- ≤ 360px (small mobile) --------------------------------------- */

@media (max-width: 22.5rem) {
  .hero__title {
    font-size: 1.75rem;
  }

  .stat-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}