/* Cole Mechanical — mobile / responsive layer.
   ADDITIVE and self-contained: desktop layout (>768px) is unchanged.
   To fully revert mobile behavior, remove the <link> to this file in page.html. */

/* Global overflow guards (all viewports) */
html, body { max-width: 100%; overflow-x: hidden; }
img, video { max-width: 100%; }

/* ---------- Tablet and below ---------- */
@media (max-width: 768px) {
  :root {
    --container-max: 100%;
    --section-y: clamp(40px, 8vw, 64px);
  }
  /* Collapse multi-column grids to a single column. minmax(0,1fr) lets the
     track shrink below its content so wide children (images, long cells) can't
     force horizontal overflow. min-width:0 does the same for flex children. */
  .cm-stack { grid-template-columns: minmax(0, 1fr) !important; }
  .cm-stack > * { min-width: 0; }
  /* Spec rows: two compact columns instead of six. */
  .cm-grid2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  .cm-grid2 > * { min-width: 0; }

  /* Hero: shrink the headline so its non-wrapping lines fit small screens,
     and let the flex-wrapped product figure shrink instead of overflowing. */
  #cm-hero h1 { font-size: clamp(2rem, 9vw, 2.8rem) !important; }
  #cm-hero * { min-width: 0 !important; }
  #cm-hero img { max-width: 100% !important; }

}

/* Auto-replaying sheen on the hero Purchase button. Hidden on desktop (which
   uses a hover sweep); on mobile it sweeps once then idles, looping every 5s.
   Transform-only (compositor thread) so it never blocks taps/scroll, and the
   page's global prefers-reduced-motion rule disables it for motion-sensitive users. */
.cm-hero-sheen {
  display: none; position: absolute; top: 0; left: 0; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  pointer-events: none;
}
@media (max-width: 768px) {
  /* 1s startup delay, then sweep once and idle within each 5s loop.
     `backwards` holds the off-screen start position during the delay so the
     sheen never shows as a static streak before the first sweep. */
  .cm-hero-sheen { display: block; animation: cmSheenLoop 5s linear 1s infinite backwards; }
}
@keyframes cmSheenLoop {
  0%   { transform: translateX(-120%) skewX(-18deg); }
  16%  { transform: translateX(320%) skewX(-18deg); }
  100% { transform: translateX(320%) skewX(-18deg); }
}

/* Product cards: on mobile move the category badge off the photo into the
   content area (above the title) so it doesn't intrude on the image. */
.cm-card-badge-inline { display: none; }
@media (max-width: 768px) {
  .cm-card-badge-img { display: none !important; }
  .cm-card-badge-inline { display: inline-flex !important; }
}

/* Hero CTAs sit side by side on mobile. The buttons are compacted slightly so
   both fit on one line (no wrapping) from 320px up. */
@media (max-width: 768px) {
  .cm-hero-cta { flex-wrap: nowrap !important; gap: 10px !important; justify-content: center !important; }
  .cm-hero-cta > * { min-width: 0 !important; flex: 0 1 auto !important; }
  .cm-hero-cta button {
    padding-left: 14px !important; padding-right: 14px !important;
    font-size: 0.95rem !important; white-space: nowrap !important;
  }
}

/* ---------- Phones ---------- */
@media (max-width: 480px) {
  :root {
    --section-y: clamp(32px, 7vw, 48px);
    --fs-h1: 1.75rem;   /* desktop 2.5rem */
    --fs-h2: 1.5rem;    /* desktop 2rem   */
    --fs-h3: 1.25rem;   /* desktop 1.5rem */
    --fs-display-md: clamp(1.7rem, 7vw, 2.2rem);
  }
}

/* Very small: stack spec rows fully. */
@media (max-width: 400px) {
  .cm-grid2 { grid-template-columns: 1fr !important; }
}