/* ============================================================
   RESPONSIVE.CSS — سنتر الأستاذ
   Breakpoints: 1024px, 768px, 480px
   ============================================================ */

/* ---- Tablet (≤ 1024px) ---- */
@media (max-width: 1024px) {
  :root {
    --navbar-h: 64px;
  }

  .section {
    padding-block: var(--space-16);
  }

  .section-title {
    font-size: var(--font-size-2xl);
  }

  /* Navbar */
  .navbar__links {
    position: fixed;
    top: var(--navbar-h);
    inset-inline: 0;
    background: var(--clr-surface);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-6);
    gap: var(--space-4);
    border-bottom: 1px solid var(--clr-border);
    box-shadow: var(--shadow-md);
    transform: translateY(-20px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease-in-out !important;
    margin-inline-start: 0;
    z-index: 999;
  }

  .navbar__links.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .navbar__links a {
    font-size: var(--font-size-base);
    padding: var(--space-2) 0;
    width: max-content;
  }

  .navbar__cta {
    display: none;
  }

  .navbar__toggle {
    display: flex;
    margin-inline-start: auto;
  }

  .navbar__toggle.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .navbar__toggle.open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  .navbar__toggle.open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  /* About */
  .about__grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .about__visual {
    max-width: 500px;
    margin-inline: auto;
  }

  /* Teachers — 3 columns على التابلت */
  .teachers__list {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }

  /* Gallery */
  .gallery__grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 180px;
  }

  .gallery-item:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
  }

  .gallery-item:nth-child(5) {
    grid-column: span 1;
  }

  /* Booking */
  .booking__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .footer__brand {
    grid-column: span 2;
  }

  /* Modal */
  .modal-teacher__header {
    grid-template-columns: 180px 1fr;
  }
}

/* ---- Mobile (≤ 768px) ---- */
@media (max-width: 768px) {
  .container {
    padding-inline: var(--space-4);
  }

  .section {
    padding-block: var(--space-12);
  }

  .section-title {
    font-size: var(--font-size-xl);
  }

  .section-desc {
    font-size: var(--font-size-base);
  }

  /* Hero */
  .hero__title {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
  }

  .hero__desc {
    font-size: var(--font-size-base);
  }

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

  .hero__stats {
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
  }

  .stat strong {
    font-size: var(--font-size-xl);
  }

  /* Teachers — 2 columns على الموبايل */
  .teachers__list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  /* Pagination */
  .pagination-btn {
    min-width: 36px;
    height: 36px;
    font-size: var(--font-size-xs);
  }

  /* Gallery */
  .gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 160px;
  }

  .gallery-item:nth-child(1) {
    grid-column: span 2;
    grid-row: span 1;
  }

  /* Students */
  .topstudents__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  /* Booking form */
  .form-row {
    grid-template-columns: 1fr;
  }

  .booking__form-wrap {
    padding: var(--space-6);
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer__brand {
    grid-column: span 1;
  }

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

  /* Modal */
  .modal {
    padding: 0;
  }
  .modal__content {
    max-width: 100vw;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }
  .modal-teacher__header {
    grid-template-columns: 1fr;
    grid-template-rows: 200px auto;
  }

  .modal-teacher__img {
    border-radius: 0;
    height: 200px;
  }

  .modal-teacher__intro {
    border-radius: 0;
  }

  .modal-teacher__body {
    padding: var(--space-4);
  }

  /* Scroll top */
  .scroll-top {
    bottom: var(--space-5);
    left: var(--space-5);
  }

  /* Toast */
  .toast {
    bottom: var(--space-5);
    right: var(--space-4);
    left: var(--space-4);
    max-width: none;
  }
}

/* ---- Small Mobile (≤ 480px) ---- */
@media (max-width: 480px) {
  .hero__badge {
    font-size: var(--font-size-xs);
  }

  .hero__actions .btn--lg {
    padding: 0.75rem 1.5rem;
    font-size: var(--font-size-base);
  }

  .hero__stats {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
    padding: var(--space-3) var(--space-4);
  }

  .stat__divider {
    display: none;
  }

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

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

  .gallery__grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 200px;
  }

  .gallery-item:nth-child(1) {
    grid-column: span 1;
  }

  .modal {
    padding: var(--space-3);
  }

  .modal__content {
    border-radius: var(--radius-lg);
  }

  /* Teachers 1 column removed to force 2 columns on small mobile */
}

/* ---- Large screens (≥ 1400px) ---- */
@media (min-width: 1400px) {
  :root {
    --container-max: 1320px;
  }

  .hero__title {
    font-size: 4rem;
  }

  .section-title {
    font-size: var(--font-size-3xl);
  }
}

/* ---- Extra small (≤ 360px) ---- */
@media (max-width: 360px) {
  .container {
    padding-inline: var(--space-3);
  }

  .hero__title {
    font-size: 1.6rem;
  }

  .btn--lg {
    padding: 0.75rem 1.25rem;
    font-size: var(--font-size-base);
  }

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

  .booking__form-wrap {
    padding: var(--space-4);
  }
}

/* Removed reduced motion to force smooth animations for all users */

/* ---- High contrast ---- */
@media (prefers-contrast: high) {
  :root {
    --clr-border: #888;
    --clr-text-muted: #444;
  }

  .btn--primary {
    border: 2px solid #000;
  }
}