/* =====================================================================
   Asad Enterprise — responsive.css
   Fluid typography + breakpoints for Large Desktop → Mobile.
   Typography already uses clamp() in style.css; this file handles
   layout shifts, masonry columns, and touch-friendly tweaks.
   ===================================================================== */

/* --------------------------------------------------------------------
   Breakpoint reference (Bootstrap-aligned)
   xs: <576  sm: ≥576  md: ≥768  lg: ≥992  xl: ≥1200  xxl: ≥1400
   -------------------------------------------------------------------- */

/* ---------- Large Desktop (≥1400px) ---------- */
@media (min-width: 1400px) {
  .container { max-width: 1280px; }
  .masonry-grid { column-count: 5; }
}

/* ---------- Desktop / Laptop (992–1399px) — defaults already set ---------- */

/* ---------- Tablet landscape (≤1199px) ---------- */
@media (max-width: 1199px) {
  .masonry-grid { column-count: 3; }

  /* Steps: 3 per row on tablet */
  .steps-line { display: none; }
  .step { padding-top: 2.8rem; }
}

/* ---------- Tablet portrait (≤991px) ---------- */
@media (max-width: 991px) {
  :root { --nav-h: 70px; }

  .section { padding-block: clamp(3.5rem, 7vw, 5.5rem); }

  /* Hero stacks: copy first, visual below */
  .hero .row { text-align: center; }
  .hero-copy { order: 1; }
  .hero-visual { order: 2; margin-top: 2rem; }
  .hero-sub { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-stats { justify-content: center; }

  /* About: image on top */
  .about-image { margin-bottom: 2.5rem; max-width: 100%; }
  .about-img-main { aspect-ratio: 16/10; }
  .about-badge { left: 10px; }

  /* Pricing: featured card no longer scaled up */
  .price-card.featured { transform: none; }
  .price-card.featured:hover { transform: translateY(-8px); }

  /* Hide mouse glow on smaller/touch screens */
  .mouse-glow { display: none; }
}

/* ---------- Mobile large (≤767px) ---------- */
@media (max-width: 767px) {
  body { font-size: 15px; }

  .masonry-grid { column-count: 2; column-gap: .8rem; }
  .masonry-item { margin-bottom: .8rem; }

  /* Products: 2 per row */
  .product-card { aspect-ratio: 1; }

  /* Testimonials */
  #testimonialCarousel { padding-inline: .5rem; }
  .testimonial-card { padding: 2rem 1.2rem; }
  .carousel-control-prev, .carousel-control-next { width: 40px; }
  .carousel-arrow { width: 40px; height: 40px; font-size: 1rem; }

  /* Contact info stacks above form */
  .contact-info { margin-bottom: 1rem; }

  /* Footer columns */
  .footer-brand { justify-content: flex-start; }

  /* Lightbox controls smaller & closer */
  .lightbox-close { top: 1rem; right: 1rem; width: 42px; height: 42px; }
  .lightbox-prev { left: .8rem; width: 42px; height: 42px; }
  .lightbox-next { right: .8rem; width: 42px; height: 42px; }

  .back-to-top { bottom: 1rem; right: 1rem; width: 44px; height: 44px; }
  .theme-toggle { bottom: 1rem; right: 4.2rem; width: 44px; height: 44px; }

  .play-btn { width: 76px; height: 76px; font-size: 1.8rem; }

  .about-badge { padding: .8rem 1rem; }
  .about-badge .years { font-size: 1.6rem; }
}

/* ---------- Mobile small (≤575px) ---------- */
@media (max-width: 575px) {
  :root { --nav-h: 64px; }

  .section { padding-block: 3rem; }
  .section-head { margin-bottom: 2rem; }

  .hero { padding-top: var(--nav-h); }
  .hero-title { font-size: clamp(2.2rem, 9vw, 2.8rem); }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .hero-stats { gap: 1.2rem; justify-content: space-between; }
  .hero-stats strong { font-size: 1.4rem; }
  .hero-stats span { font-size: .72rem; }

  /* Polaroid stack simplified for small screens */
  .hero-visual { min-height: 360px; }
  .polaroid-stack { height: 360px; }
  .polaroid { width: 150px; padding: 8px 8px 34px; }
  .polaroid figcaption { font-size: 1rem; bottom: 6px; }
  .polaroid.p1 { top: 20px; left: 2%; }
  .polaroid.p2 { top: 50px; right: 4%; }
  .polaroid.p3 { bottom: 0; left: 30%; }
  .floating-frame { display: none; }
  .deco-circle { display: none; }

  .about-img-sub { width: 45%; right: -10px; bottom: -20px; }
  .about-badge { position: static; display: inline-flex; margin-bottom: 1.2rem; }

  .counters-row .counter-card { padding: 1.4rem .8rem; }

  .gallery-filters { gap: .4rem; }
  .filter-btn { padding: .4rem .9rem; font-size: .8rem; }

  .price-card { padding: 2rem 1.2rem; }

  .accordion-custom .accordion-button { font-size: .92rem; padding: 1.1rem 1rem; }

  .footer-newsletter { flex-direction: column; }
  .footer-newsletter .btn { width: 100%; }

  .scroll-cue { display: none; }
}

/* ---------- Extra small (≤380px) ---------- */
@media (max-width: 380px) {
  .masonry-grid { column-count: 1; }
  .hero-stats { flex-direction: column; gap: .8rem; align-items: center; }
  .hero-stats > div { align-items: center; }
}

/* ---------- Touch device tweaks ---------- */
@media (hover: none) {
  /* Disable hover-only lift effects on touch to avoid sticky states */
  .service-card:hover,
  .feature-card:hover,
  .price-card:hover,
  .counter-card:hover,
  .step:hover { transform: none; }
  .product-card:hover .product-img { transform: none; }
  .mouse-glow { display: none; }
}

/* ---------- Print ---------- */
@media print {
  .preloader, .scroll-progress, .mouse-glow, .particles,
  .back-to-top, .scroll-cue, .hero-divider, .promo-bg, .blob { display: none !important; }
  body { background: #fff; color: #000; }
  .glass, .service-card, .feature-card, .price-card { background: #fff !important; border-color: #ccc !important; }
  a { color: #000; }
}