/* =========================================================
   BTC HUNTER TEA — DESKTOP REFINEMENT LAYER
   -----------------------------------------------------------
   Every single rule in this file lives inside a
   `@media (min-width: 1024px)` query (or a narrower desktop
   tier nested above it). Nothing here can ever apply below
   1024px — the mobile/tablet-portrait experience in base.css,
   components.css and pages.css is untouched by this file.

   Loaded last, after the three core stylesheets, so it wins
   the cascade only inside its own media queries.

   QA PASS 3 (final polish) — the recurring "images too big on
   desktop" reports kept coming back because earlier passes only
   capped card width defensively; the grid itself was still
   `repeat(4, 1fr)`, which stretches columns to fill whatever
   width is available. Fixed properly this time: product and
   gallery grids now use a FIXED column size and centre the
   whole grid as a block (`justify-content: center`), so extra
   space on wide screens becomes elegant whitespace around the
   grid instead of bigger cards. Card size stays constant;
   spacing grows instead — the actual pattern premium sites use.
   ========================================================= */

@media (min-width: 1024px) {

  /* ============ 1 & 2. Responsive layout + container width ============ */
  .container, .container-wide { padding: 0 48px; }
  .grid { gap: 40px; }
  .section { padding: 110px 0; }
  .section--tight { padding: 72px 0; }

  /* ============ 3. Image scaling — highest priority ============ */
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }

  /* Product cards (Home preview + full Products catalog) and the
     gallery preview grid: fixed 240px columns, centred as a block.
     This is the real fix — a stretchy fr-based grid will always
     grow cards to fill the row; a fixed+centred grid never does. */
  .products-grid, .gallery-grid {
    grid-template-columns: repeat(4, minmax(0, 240px));
    justify-content: center;
    gap: 40px;
  }

  /* Gallery preview: landscape source photos were cropping into an
     overly tall 4:5 portrait cell. A gentler 4:3 crop keeps far
     more of each photo visible, and reads better at the smaller
     fixed card size above. */
  .split-media img.gallery-preview-img,
  img.gallery-preview-img { aspect-ratio: 4/3; object-position: center 60%; }

  /* Hero product pack: modest, controlled growth — never below the
     mobile cap, never large enough to crowd its column. */
  .hh-cup { width: clamp(360px, 20vw + 130px, 420px); }

  /* ============ 4. Product showcase balance ============ */
  .home-hero .hh-grid { gap: 72px; }
  .home-hero .hh-sub { max-width: 500px; }

  /* ============ 5. Product cards ============ */
  .product-card .pc-body { padding: 26px 24px 28px; gap: 12px; }
  .value-card { padding: 38px 32px; }
  .testimonial-card { padding: 40px 36px; }

  /* ============ 6 & 7. Padding + margins / vertical rhythm ============ */
  .section-head { margin-bottom: 56px; }
  .home-hero { padding: 160px 0 90px; }
  .page-hero { padding: 190px 0 100px; }
  .stats-band { padding: 90px 0; }
  .cta-band { padding: 64px 72px; }
  .form-card { padding: 52px; }
  .founder-block { padding: 64px; }

  /* ============ 8. Alignment ============ */
  .contact-mini-card { padding: 32px 22px; }

  /* ============ 9. Typography ============ */
  .legal-body p, .legal-body li, .faq-a p { max-width: 700px; }
  .lede { max-width: 620px; }

  /* ============ 10. Hero section — proportions & balance only ============ */
  .hh-scroll-cue { bottom: 40px; }

  /* ============ 11. Gallery grid ============ */
  .grid--auto { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

  /* ============ 12. Navbar ============ */
  .navbar { padding: 26px 0; }
  .navbar.is-scrolled { padding: 15px 0; }
  .navbar-inner { gap: 32px; }
  .nav-links { gap: 38px; }
  .nav-actions { gap: 14px; }

  /* ============ 13. Footer ============ */
  .site-footer { padding-top: 100px; }
  .footer-top { gap: 56px; grid-template-columns: 1.4fr 0.8fr 0.9fr 1.1fr; padding-bottom: 64px; }
  .footer-brand p { max-width: 320px; }

  /* ============ 14. Buttons ============ */
  .btn { padding: 16px 34px; }
  .btn--sm { padding: 12px 24px; }
  .cta-band .cta-actions .btn,
  .hh-actions .btn { min-width: 180px; }

  /* ============ 16. Consistency ============ */
  .benefit-strip { gap: 28px; }
  .contact-card-grid { gap: 24px; }
  .stats-grid { gap: 44px; }
}

/* ---------------- Laptop / small desktop (1280px) ---------------- */
@media (min-width: 1280px) {
  :root { --container: 1240px; }
  .container, .container-wide { padding: 0 56px; }
  .home-hero .hh-grid { gap: 90px; }
  .products-grid, .gallery-grid { gap: 48px; }
}

/* ---------------- Standard desktop (1440px) ---------------- */
@media (min-width: 1440px) {
  :root { --container: 1300px; }
  .grid { gap: 44px; }
  .section { padding: 128px 0; }
  .nav-links { gap: 44px; }
  .products-grid, .gallery-grid { gap: 52px; }
}

/* ---------------- Large desktop (1600px) ---------------- */
@media (min-width: 1600px) {
  :root { --container: 1340px; }
  .container, .container-wide { padding: 0 72px; }
  .section-head { max-width: 680px; }
  .products-grid, .gallery-grid { gap: 56px; }
}

/* ---------------- Extra-large / 1920px+ ---------------- */
@media (min-width: 1920px) {
  :root { --container: 1420px; }
  .products-grid, .gallery-grid { gap: 64px; }
}