/* ==========================================================================
   Karawang Creative - Responsive Breakpoints & Device Adaptation
   ========================================================================== */

/* --------------------------------------------------------------------------
   Large Tablets & Compact Laptops (< 1200px)
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .grid-4col {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
  }
}

/* --------------------------------------------------------------------------
   Tablets (< 992px)
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
  :root {
    --header-height: 76px;
  }

  .nav-menu-desktop {
    display: none;
  }

  .mobile-toggle {
    display: flex;
  }

  .split-2col,
  .split-2col.equal {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .split-sticky-col {
    position: static;
  }

  .hero-media-wrapper {
    aspect-ratio: 16 / 10;
  }

  .hero-floating-badge {
    position: static;
    margin-top: 1.25rem;
    max-width: 100%;
  }

  .market-card {
    aspect-ratio: 16 / 10;
  }

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

  .form-group.col-full {
    grid-column: auto;
  }
}

/* --------------------------------------------------------------------------
   Mobile Landscape & Large Phones (< 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .grid-3col,
  .grid-4col,
  .grid-2col {
    grid-template-columns: 1fr;
  }

  .hero-section {
    padding-top: calc(var(--header-height) + 1.5rem);
  }

  .hero-media-wrapper {
    aspect-ratio: 4 / 3;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .product-specs-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .form-submit-row {
    flex-direction: column;
    align-items: stretch;
  }

  .form-submit-row .btn {
    width: 100%;
  }

  .filter-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 0.75rem;
    -webkit-overflow-scrolling: touch;
  }

  .filter-pill {
    flex-shrink: 0;
  }
}

/* --------------------------------------------------------------------------
   Small Phones (< 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  :root {
    --container-padding: 1.25rem;
    --section-spacing: 4rem;
  }

  .hero-actions-row {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .hero-actions-row .btn {
    width: 100%;
  }

  .product-card-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .product-card-actions .btn {
    width: 100%;
  }

  .drawer-panel {
    padding: 1.5rem;
  }
}