/* ============================================================
   PTD DTC Landing Page — responsive.css
   Breakpoints: Desktop, Tablet (≤1024px), Mobile (≤768px), Small Mobile (≤599px)
   Pasukan Tempur Digital © 2026
   ============================================================ */

/* ── TABLET: 768px – 1024px ── */
@media (max-width: 1024px) {
  .footer-grid   { grid-template-columns: 1fr 1fr; }
  .wa-card       { width: 280px; }
}

/* ── MOBILE: ≤ 768px ── */
@media (max-width: 768px) {
  :root {
    --px:  20px;
    --spy: 52px;
  }

  /* Hero: stack vertically, image on top */
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .hero-right { order: -1; }
  .hero-sub   { max-width: 100%; }

  /* Pain / features: 2 columns */
  .pain-grid  { grid-template-columns: 1fr 1fr; }
  .feat-grid  { grid-template-columns: 1fr 1fr; }

  /* Portfolio: 2 columns, large card full width */
  .portfolio-grid        { grid-template-columns: 1fr 1fr; }
  .port-card.large       { grid-column: span 2; }
  .port-card.large .port-img-inner { aspect-ratio: 4/3; }

  /* Footer: 2 columns */
  .footer-grid { grid-template-columns: 1fr 1fr; }

  /* Nav: hide countdown */
  .nav-countdown { display: none; }

  /* Nav: hide CTA button */
  .nav-cta { display: none; }

  /* Promo banner: hidden on mobile */
  .promo-banner { display: none; }

  /* Show mobile sticky bar */
  .sticky-bar { display: flex; }

  /* Body padding so content clears sticky bar */
  body { padding-bottom: 90px; }

  /* WA cards smaller */
  .wa-card { width: 260px; }

  /* Promo/countdown wraps nicely */
  .fh-countdown { flex-wrap: wrap; justify-content: center; }
}

/* ── SMALL MOBILE: ≤ 599px ── */
@media (max-width: 599px) {
  :root {
    --px:  16px;
    --spy: 44px;
  }

  /* Single column everything */
  .pain-grid  { grid-template-columns: 1fr; }
  .feat-grid  { grid-template-columns: 1fr; }

  .portfolio-grid              { grid-template-columns: 1fr; }
  .port-card.large             { grid-column: span 1; }
  .port-card.large .port-img-inner { aspect-ratio: 4/3; }

  /* Footer single column */
  .footer-grid { grid-template-columns: 1fr; }

  /* Form: single column */
  .form-row          { grid-template-columns: 1fr; }
  .form-group.full   { grid-column: 1; }

  /* Price row: stack */
  .fh-price-row { flex-direction: column; align-items: center; gap: 6px; }

  /* Nav height */
  nav { height: 60px; }

  /* WA cards */
  .wa-card { width: 240px; }
}