/* ============================================
   RESPONSIVE.CSS
   Mobile-first breakpoint overrides for all
   components. Breakpoints: 480px, 768px, 1024px.
============================================ */

/* ---- 1024px and below (tablets) ---- */
@media (max-width: 1024px) {
  :root { --section-py: 4rem; }

  .hero-content { max-width: 100%; }
  .hero-headline { font-size: clamp(2.5rem, 5vw, 4rem); }

  .about-grid { grid-template-columns: 1fr; gap: 3rem; }
  .about-artwork { max-width: 400px; margin: 0 auto; }

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

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

  .footer-grid { grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
  .footer-col:last-child { grid-column: 1 / -1; }

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

  .private-container { grid-template-columns: 1fr; gap: 2rem; }
  .private-arabic { display: none; }

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

  .lightbox-content { grid-template-columns: 1fr; }
  .lightbox-info { max-height: 200px; overflow-y: auto; }

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

/* ---- 768px and below (mobile) ---- */
@media (max-width: 768px) {
  :root { --section-py: 3rem; }

  /* Navbar */
  .navbar-links { display: none; }
  .hamburger { display: flex; }
  .navbar-actions .btn-primary { display: none; }
  .navbar { padding: 1rem 0; }

  /* Hero */
  .hero { padding-top: 70px; min-height: 90vh; }
  .hero-headline { font-size: clamp(2.2rem, 8vw, 3rem); }
  .hero-subheading { font-size: 1rem; }
  .hero-ctas { flex-direction: column; align-items: flex-start; }
  .hero-stats { gap: 1.5rem; }
  .stat-num { font-size: 1.6rem; }
  .hero-scroll-hint { display: none; }

  /* Albums */
  .albums-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }

  /* Featured grid */
  .featured-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }

  /* Services */
  .services-grid { grid-template-columns: 1fr; }

  /* Workshops */
  .workshops-grid { grid-template-columns: 1fr; }
  .workshop-detail-header { flex-direction: column; }
  .workshop-price-block { text-align: left; }
  .workshop-detail-meta { flex-direction: column; gap: 0.5rem; }
  .workshop-included ul { grid-template-columns: 1fr; }

  /* Gallery */
  .album-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .gallery-hub-grid { grid-template-columns: 1fr; }
  .album-switcher { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.5rem; }
  .album-switcher-btn { flex-shrink: 0; }

  /* Testimonials */
  .testimonial-card { padding: 1.75rem; }
  .testimonial-card blockquote { font-size: 1.05rem; }

  /* Videos */
  .videos-grid { grid-template-columns: 1fr; }

  /* About */
  .about-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .values-grid { grid-template-columns: 1fr; }
  .pull-quote { font-size: 1.3rem; }

  /* Steps */
  .steps-grid { grid-template-columns: 1fr; gap: 1.5rem; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .footer-brand { grid-column: 1 / -1; }

  /* Page hero */
  .page-hero { padding: 6rem 0 3rem; }

  /* Lightbox */
  .lightbox-close { top: 1rem; right: 1rem; }
  .lightbox-prev { left: 0.25rem; }
  .lightbox-next { right: 0.25rem; }
  .lightbox-info { display: none; }

  /* WhatsApp float */
  .whatsapp-float { bottom: 1.5rem; right: 1.5rem; width: 50px; height: 50px; }

  /* Hide announcement bar text overflow properly */
  .announcement-bar { font-size: 0.7rem; }

  /* General */
  h1 { font-size: clamp(2rem, 7vw, 2.8rem); }
  h2 { font-size: clamp(1.5rem, 5vw, 2.2rem); }
  .container { padding: 0 1rem; }
  .btn-lg { padding: 0.875rem 2rem; font-size: 0.85rem; }
}

/* ---- 480px and below (small phones) ---- */
@media (max-width: 480px) {
  :root { --section-py: 2.5rem; }

  .albums-grid { grid-template-columns: 1fr; }
  .featured-grid { grid-template-columns: 1fr; }
  .album-grid { grid-template-columns: 1fr; }

  .hero-stats { grid-template-columns: repeat(2, 1fr); display: grid; gap: 1rem; }

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

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-big { font-size: 2.2rem; }

  .testimonial-card { padding: 1.25rem; }
  .testimonial-card blockquote { font-size: 0.95rem; }

  .workshop-detail-card { padding: 1.5rem; }

  .gallery-hub-grid { grid-template-columns: 1fr; }

  h1 { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  h2 { font-size: clamp(1.4rem, 6vw, 1.8rem); }
}

/* ---- Reduced motion preference ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1; transform: none; }
  .reveal-stagger > * { opacity: 1; transform: none; }
  main { animation: none; }
  html { scroll-behavior: auto; }
}