/* ==========================================================================
   RIWAAQ - RESPONSIVE STYLESHEET
   ========================================================================== */

/* --- Ultra Wide Screens (1600px+) --- */
@media (min-width: 1600px) {
  .container { padding: 0 8rem; }
  .hero-headline { font-size: 5.5rem; }
}

/* --- Large Screens (1280px - 1599px) --- */
@media (max-width: 1280px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); }
  .about-grid { gap: clamp(2rem, 4vw, 4rem); }
}

/* --- Tablet Landscape (1024px - 1279px) --- */
@media (max-width: 1024px) {
  /* Hide desktop nav, show only hamburger */
  .nav-desktop { display: none; }
  .nav-cta-btn { display: none; }

  /* Header */
  .header-container { padding: 0 clamp(1rem, 2.5vw, 1.75rem); }
  .nav-desktop { margin-right: 0.75rem; }

  /* Hero */
  .hero { padding-top: clamp(5.5rem, 10vh, 6.5rem); }
  .hero-content { max-width: 760px; }
  .hero-headline { font-size: clamp(2.8rem, 7vw, 6rem); }
  .hero-stats-row { gap: 18px; }

  /* About */
  .about-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .about-founder-badge { left: -20px; }

  /* Services */
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }

  /* Portfolio */
  .portfolio-grid { gap: 20px; }
  .size-large { grid-column: span 7; }
  .size-medium { grid-column: span 5; }
  .size-wide { grid-column: span 8; }

  /* Why Us */
  .why-us-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .why-us-img { height: 380px; }

  /* FAQ */
  .faq-grid { grid-template-columns: 1fr; gap: 3rem; }
  .faq-left .section-title { max-width: none; }

  /* Footer */
  .footer-top { grid-template-columns: 1.2fr 0.8fr; gap: 3rem; }
  .footer-contact { grid-column: span 2; }
}

/* --- Tablet Portrait (768px - 1023px) --- */
@media (max-width: 768px) {
  /* Hide custom cursor */
  .custom-cursor,
  .custom-cursor-follower { display: none; }

  /* Hero */
  .hero { min-height: 90svh; padding-top: 5rem; }
  .hero-content { max-width: 100%; padding-top: 1.5rem; }
  .hero-headline { font-size: clamp(2.2rem, 8vw, 4.5rem); }
  .hero-badge { padding: 0.55rem 0.9rem; }
  .hero-badge span:last-child { font-size: 0.7rem; }
  .hero-subheading { max-width: 100%; }
  .hero-stats-row { gap: 16px; }
  .hero-stat strong { font-size: 1.2rem; }
  .hero-stat-divider { display: none; }
  .hero-stat span { display: none; }

  /* Clients */
  .marquee-content { gap: 3rem; }

  /* About */
  .about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-image-wrapper { height: clamp(280px, 55vw, 450px); }
  .about-founder-badge { left: 20px; right: auto; }

  /* Services */
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .service-card { padding: 32px 24px; min-height: 320px; }
  .service-card h3 { font-size: 1.3rem; }

  /* Portfolio */
  .portfolio-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .size-large { grid-column: span 2; aspect-ratio: 16/9; }
  .size-medium { grid-column: span 1; aspect-ratio: 4/5; }
  .size-wide { grid-column: span 2; aspect-ratio: 16/9; }

  /* Why Us */
  .why-us-grid { grid-template-columns: 1fr; gap: 2rem; }
  .why-us-image-container { display: none; }
  .why-us-list { gap: 24px; }

  /* Timeline — collapse to vertical single column */
  .timeline-container { max-width: 100%; }
  .timeline-line, .timeline-progress { left: 18px; transform: none; }
  .timeline-node { left: 18px; transform: translateX(-50%); }
  .timeline-item { flex-direction: column !important; margin-bottom: 48px; padding-left: 44px; }
  .timeline-content { width: 100% !important; text-align: left !important; margin: 0 !important; padding: 0 !important; }
  .timeline-item h3 { font-size: 1.2rem; }

  /* Equipment — disable horizontal, show vertical */
  .equipment { overflow: visible; }
  .horizontal-scroll-container { 
    flex-direction: column; width: 100%; height: auto;
    transform: none !important;
  }
  .horizontal-slide { width: 100%; height: auto; min-height: auto; padding: 2.5rem clamp(1.5rem, 5vw, 3rem); }
  .slide-content-grid { grid-template-columns: 1fr; gap: 2rem; }
  .slide-visual-panel { height: clamp(220px, 50vw, 380px); }
  .slide-info-panel h2 { font-size: 2.5rem; }
  .slide-info-panel h3 { font-size: 1.4rem; }

  /* Podcast */
  .podcast-grid { grid-template-columns: 1fr; gap: 2rem; }
  .podcast-visual-deck { height: 320px; margin-bottom: 0; }
  .pod-card-main { width: 75%; height: 75%; }
  .pod-card-sub { width: 55%; height: 55%; }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }

  /* Testimonials */
  .testimonial-card { width: min(90vw, 480px); }

  /* FAQ */
  .faq-grid { grid-template-columns: 1fr; gap: 2rem; }
  .faq-header h3 { font-size: 1rem; }

  /* Insta */
  .insta-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* CTA */
  .cta { padding: 4rem 0; }
  .cta h2 { font-size: clamp(1.8rem, 6vw, 3rem); }
  .cta-buttons { flex-direction: column; align-items: center; }
  .cta-buttons .btn { width: 100%; max-width: 320px; justify-content: center; }

  /* Footer */
  .footer-top { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 8px; }

  /* Fullscreen Menu */
  .fullscreen-menu-container { grid-template-columns: 1fr; padding: 0 28px; }
  .fullscreen-menu-info { display: none; }
  .fs-link { font-size: clamp(1.8rem, 7vw, 3rem); }
}

/* --- Mobile (max 480px) --- */
@media (max-width: 480px) {
  /* Hero */
  .hero { min-height: 88svh; padding-top: 4.5rem; }
  .hero-content { padding-top: 0.75rem; }
  .hero-headline { font-size: clamp(2rem, 10vw, 3rem); max-width: 100%; }
  .hero-subheading { font-size: 0.75rem; letter-spacing: 1.5px; }
  .hero-buttons { gap: 12px; flex-direction: column; align-items: flex-start; }
  .hero-buttons .btn { width: 100%; max-width: 280px; justify-content: center; font-size: 0.75rem; padding: 0.7rem 1.4rem; }
  .hero-stats-row { display: none; }

  /* Services */
  .services-grid { grid-template-columns: 1fr; }
  .service-card { min-height: auto; }

  /* Portfolio */
  .portfolio-grid { grid-template-columns: 1fr; }
  .size-large, .size-medium, .size-wide {
    grid-column: span 1; aspect-ratio: 4/3;
  }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-card h2 { font-size: 2.5rem; }

  /* Footer */
  .footer-brand h2 { font-size: 1.5rem; }
  .footer-socials { gap: 10px; }
  .social-circle { width: 36px; height: 36px; }

  /* Preloader */
  .preloader-wordmark { font-size: 2.5rem; letter-spacing: 8px; }
  .preloader-logo-img { width: 60px; height: 60px; }

  /* Header */
  .header-container { min-height: 3.25rem; }
  .logo { gap: 0.6rem; }

  /* Hamburger — keep visible */
  .header-right .nav-cta-btn { display: none; }
}

/* --- Small Mobile (max 360px) --- */
@media (max-width: 360px) {
  .hero-headline { font-size: 2rem; }
  .container { padding: 0 1.25rem; }
  .section { padding: 3rem 0; }
  .podcast-visual-deck { height: 260px; }
}

/* --- Touch Devices — disable 3D tilt --- */
@media (pointer: coarse) {
  [data-tilt] { transform: none !important; }
  .service-card { transition: box-shadow 0.3s ease; }
}

/* --- Print --- */
@media print {
  .noise-overlay, .custom-cursor, .custom-cursor-follower,
  .scroll-progress-container, .preloader,
  .fullscreen-menu, .hamburger-btn { display: none !important; }

  .header { position: static; background: white; }
  .hero { height: auto; padding: 40px 0; }
}