/*
 * responsive.css — DigitalEdge Marketplace
 * Mobile-first responsive breakpoints.
 * Mobile < 768px | Tablet 768–1024px | Desktop > 1024px
 */

/* ============================================================
   MOBILE FIRST: base styles in style.css already target mobile.
   Here we progressively enhance for larger screens.
   ============================================================ */

/* ============================================================
   TABLET (768px – 1023px)
   ============================================================ */
@media (min-width: 768px) {
  /* Nav */
  .nav__links {
    gap: 1.25rem;
  }

  /* Hero */
  .hero__title {
    font-size: clamp(2.5rem, 5vw, 4rem);
  }

  /* About: single column on tablet, two col on desktop */
  .about__layout {
    grid-template-columns: 1fr 1fr;
  }

  /* Contact: two col on tablet */
  .contact__layout {
    grid-template-columns: 1fr 1.5fr;
  }

  /* Footer */
  .footer__inner {
    grid-template-columns: 1fr 1.5fr;
  }

  /* Product detail */
  .product-detail__layout {
    grid-template-columns: 1fr 1fr;
  }

  /* Checkout */
  .checkout-layout {
    grid-template-columns: 1fr 340px;
  }
}

/* ============================================================
   DESKTOP (1024px +)
   ============================================================ */
@media (min-width: 1024px) {
  /* Nav: ensure hamburger never shows on desktop */
  .nav__links {
    display: flex !important;
    position: static;
    flex-direction: row;
    background: none;
    padding: 0;
    border: none;
    box-shadow: none;
    width: auto;
    top: auto;
    left: auto;
  }

  .nav__hamburger { display: none !important; }

  /* About */
  .about__layout {
    grid-template-columns: 1fr 1.6fr;
    gap: 5rem;
  }

  /* Hero video: desktop source shown on large screens */
  .hero__video--desktop { display: block; }
  .hero__video--mobile  { display: none; }

  /* Featured grid: 4-col on wide desktop */
  .featured__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Products grid: 3-col */
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Related: 4-col */
  .related-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Checkout layout */
  .checkout-layout {
    grid-template-columns: 1fr 380px;
  }
}

/* ============================================================
   MOBILE ONLY (< 768px)
   ============================================================ */
@media (max-width: 767px) {
  /* Show hamburger, hide full nav */
  .nav__hamburger {
    display: flex;
  }

  .nav__links {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(9,9,14,0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    padding: 100px var(--space-md) var(--space-md);
    gap: 1.5rem;
    z-index: 99;
    align-items: center;
    justify-content: flex-start;
  }

  .nav__links.open {
    display: flex;
    animation: navSlideIn 0.3s var(--ease) both;
  }

  @keyframes navSlideIn {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .nav__link {
    font-size: 1.5rem;
    font-weight: 700;
  }

  .nav__cta {
    margin-top: var(--space-sm);
    font-size: 1rem;
    padding: 0.875rem 2rem;
  }

  /* Hero */
  .hero__title {
    font-size: 2.25rem;
  }

  .hero__subtitle {
    font-size: 0.9375rem;
  }

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

  .stat__num { font-size: 1.375rem; }

  /* Video: switch to mobile source on small screens */
  .hero__video--desktop { display: none; }
  .hero__video--mobile  { display: block; }

  /* Featured grid: single col */
  .featured__grid {
    grid-template-columns: 1fr;
  }

  /* Offers */
  .offers__grid {
    grid-template-columns: 1fr;
  }

  /* About */
  .about__layout {
    grid-template-columns: 1fr;
  }

  .about__image-frame {
    max-width: 100%;
    aspect-ratio: 4/3;
  }

  .about__image-badge {
    right: 12px;
    bottom: 12px;
  }

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

  /* Contact */
  .contact__layout {
    grid-template-columns: 1fr;
  }

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

  .footer__links {
    gap: var(--space-lg);
    flex-wrap: wrap;
  }

  /* Floating ads: smaller on mobile */
  .floating-ads {
    bottom: var(--space-xs);
    right: var(--space-xs);
    left: var(--space-xs);
  }

  .floating-ad {
    max-width: 100%;
    min-width: unset;
    width: 100%;
  }

  /* Product grid */
  .products-grid {
    grid-template-columns: 1fr;
  }

  /* Product detail */
  .product-detail__layout {
    grid-template-columns: 1fr;
  }

  .product-loading {
    grid-template-columns: 1fr;
  }

  .product-gallery__thumbs {
    justify-content: center;
  }

  /* Checkout */
  .checkout-layout {
    grid-template-columns: 1fr;
  }

  /* On mobile, show summary above form */
  .checkout-summary-col {
    order: -1;
  }

  .order-summary-box {
    position: static;
  }

  .checkout-steps {
    overflow-x: auto;
    padding-bottom: 0.25rem;
  }

  .step-label { display: none; }

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

  .payment-btns,
  .confirm-btns {
    flex-direction: column;
  }

  /* Filter bar */
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-bar__search {
    max-width: 100%;
  }

  .filter-bar__sort select {
    width: 100%;
  }

  /* Related */
  .related-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Success actions */
  .success-actions {
    flex-direction: column;
    width: 100%;
  }

  .success-actions .btn {
    width: 100%;
  }
}

/* ============================================================
   SMALL MOBILE (< 480px)
   ============================================================ */
@media (max-width: 479px) {
  .hero__actions {
    flex-direction: column;
  }

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

  .product-guarantees {
    flex-direction: column;
    gap: var(--space-sm);
  }

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

  .thumb-img {
    width: 56px;
    height: 56px;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html { scroll-behavior: auto; }
}