/* =========================================================
   MEMOKART — responsive.css
   Mobile-first base lives in style.css (360–430px)
   This file progressively enhances for larger screens.
   ========================================================= */

/* ---------- Tablet 768px+ ---------- */
@media (min-width: 768px) {
  .header-inner { padding: 14px 24px; }
  .logo-img { height: 36px; }

  .gallery { max-width: 560px; }

  .product-title { font-size: 26px; }
  .product-subtitle { font-size: 15.5px; max-width: 640px; }

  .section-heading { font-size: 22px; }

  .option-grid { grid-template-columns: repeat(6, 1fr); }
  .option-grid-size { grid-template-columns: repeat(5, 1fr); }

  .configurator { max-width: 640px; }

  .video-card { flex: 0 0 200px; }
  .review-card { flex: 0 0 170px; }

  .process-list { flex-direction: row; flex-wrap: wrap; }
  .process-item { flex: 1 1 45%; }

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

  /* Sticky CTA only needed on smaller viewports */
  .sticky-cta { display: none; }
}

/* ---------- Desktop 1024px+ ---------- */
@media (min-width: 1024px) {
  .container { padding: 0 32px; }

  .header-inner { max-width: var(--container-width); }

  /* Two-column layout: gallery left, product+configurator right */
  .gallery-section {
    display: grid;
    grid-template-columns: 1fr;
  }

  .product-info,
  .usp-section,
  .configurator {
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
  }

  .gallery { max-width: 620px; }

  .configurator { max-width: 720px; }

  .option-card { min-height: 64px; font-size: 16px; }

  .process-item { flex: 1 1 22%; }

  .video-card { flex: 0 0 220px; }
  .review-card { flex: 0 0 190px; }

  .section-heading { font-size: 24px; }

  .btn-sample { padding: 10px 18px; font-size: 14.5px; }
}

/* ---------- Large desktop 1440px+ ---------- */
@media (min-width: 1440px) {
  :root { --container-width: 1280px; }

  .gallery { max-width: 680px; }
  .configurator { max-width: 780px; }
}

/* ---------- Desktop side-by-side hero: gallery + product info ---------- */
@media (min-width: 1024px) {
  .gallery-section .container .gallery { margin: 0; }

  .hero-flex {
    display: flex;
    gap: 40px;
    align-items: flex-start;
  }
}