/* ==========================================================================
   QRBELL Store — Responsive hardening
   --------------------------------------------------------------------------
   Component files carry their own breakpoints. This file holds only the
   cross-cutting corrections found during the responsive audit (spec §73–75):
   the very narrow band, the tablet band, and the very wide band.

   Load LAST.
   ========================================================================== */


/* ==========================================================================
   VERY NARROW — 320px to 359px
   The hardest real target. Tighten gutters and step type down rather than
   letting anything overflow. Spec §73.
   ========================================================================== */

@media (max-width: 359.98px) {
  :root {
    --gutter: var(--space-3);
    --space-section: var(--space-8);
  }

  .qb-hero__title { font-size: 1.75rem; }
  .qb-hero__lead  { font-size: var(--text-md); }

  /* Five bottom-nav labels must still fit — drop to the smallest legible size
     and let the icon carry the meaning. */
  .qb-bottomnav__label { font-size: 0.625rem; letter-spacing: -0.01em; }
  .qb-bottomnav__icon  { font-size: 1.15rem; }

  .qb-btn { padding-inline: var(--space-4); font-size: var(--text-sm); }
  .qb-btn--lg { padding-inline: var(--space-5); }

  .qb-card--pad { padding: var(--space-4); }
  .qb-section-head { margin-bottom: var(--space-4); }

  /* Stat grids go single-column rather than squeezing two */
  .qb-qr-card__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1); }
  .qb-qr-stat__label { font-size: 0.5625rem; }

  /* Sticky bar: the price label would push the CTA off-screen */
  .qb-stickybar { gap: var(--space-2); padding-inline: var(--space-3); }
  .qb-stickybar__value { font-size: var(--text-md); }
}


/* ==========================================================================
   MOBILE — up to 767px
   ========================================================================== */

@media (max-width: 767.98px) {

  /* Full-width primary actions are the mobile default — spec §9 */
  .qb-btn--mobile-block { display: flex; width: 100%; }

  /* Section heads stack so the "View all" link doesn't crowd the title */
  .qb-section-head { flex-direction: column; align-items: flex-start; gap: var(--space-2); }

  /* Any table that reaches mobile scrolls inside its own container rather
     than breaking the page — spec §73, §76 */
  .qb-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Horizontal card rails: peek the next card so the scroll is discoverable */
  .qb-rail-cards {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: var(--space-2);
  }
  .qb-rail-cards::-webkit-scrollbar { display: none; }
  .qb-rail-cards > * {
    flex: 0 0 auto;
    width: 72vw;
    max-width: 280px;
    scroll-snap-align: start;
  }

  /* Modal footers stack full-width buttons */
  .qb-sheet__foot { flex-direction: column-reverse; }
  .qb-sheet__foot > .qb-btn { width: 100%; }
}


/* ==========================================================================
   TABLET — 768px to 991px
   Explicitly not the desktop layout. Spec §75.
   ========================================================================== */

@media (min-width: 768px) and (max-width: 991.98px) {

  /* Bottom nav is still present here, so pages keep their bottom padding
     (handled in base.css) and sticky bars still stack above it. */

  /* Two-up splits would be too cramped; keep single column but widen the
     content so it doesn't look like a stretched phone layout. */
  .qb-split { gap: var(--space-6); }

  /* Filters become a full-width bar rather than a sidebar or a sheet */
  .qb-filter-rail {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-section);
  }

  /* Footer settles at three columns — five is too thin, one is too tall */
  .qb-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Hero image sits beside a narrower text column */
  .qb-hero__inner { padding-block: var(--space-12); }
  .qb-hero__lead { max-width: 46ch; }
}


/* ==========================================================================
   DESKTOP — 992px and up
   ========================================================================== */

@media (min-width: 992px) {
  /* Sticky bars resolve into the page flow; the page reclaims the space */
  body.has-stickybar { padding-bottom: 0; }

  /* Rails become normal grids */
  .qb-rail-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin-inline: 0; padding-inline: 0; overflow: visible; }
  .qb-rail-cards > * { width: auto; max-width: none; }
}


/* ==========================================================================
   WIDE — 1600px and up
   Cards must not become absurdly wide and text must stay readable. Spec §74.
   ========================================================================== */

@media (min-width: 1600px) {
  :root { --gutter: var(--space-8); }

  /* The container is already capped at 1280/1440; this just keeps the
     generous outer margin from collapsing the design against the edges. */
  .qb-hero__inner { padding-block: var(--space-20); }

  /* A fifth product column only at genuinely wide viewports, and only for
     grids that opt in — the default stays at four so cards keep their scale. */
  .qb-grid-products--wide { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}


/* ==========================================================================
   LANDSCAPE PHONES
   Short viewports: the sticky bar plus bottom nav can eat the whole screen.
   ========================================================================== */

@media (max-height: 480px) and (orientation: landscape) {
  .qb-bottomnav { display: none; }
  body.has-bottomnav { padding-bottom: 0; }
  body.has-bottomnav .qb-stickybar { bottom: 0; padding-bottom: calc(var(--space-3) + var(--safe-bottom)); }
  .qb-sheet { max-height: 94vh; }
}


/* ==========================================================================
   COARSE POINTERS
   Hover effects that would stick after a tap are neutralised at source in
   each component; this catches anything relying on the utility classes.
   ========================================================================== */

@media (hover: none) {
  .qb-cat:hover { transform: none; box-shadow: none; }
  .qb-btn:hover { transform: none; }
  .qb-btn--primary:hover { box-shadow: var(--shadow-primary); }
  .qb-btn--accent:hover  { box-shadow: var(--shadow-accent); }
}