/* ============================================================
   Mobile & tablet responsive refinements.
   Loaded LAST (after main.css) so these intentionally win the
   cascade. The design system is token-driven, so the main lever
   here is re-scaling the typography tokens at :root inside each
   breakpoint — every heading that reads `var(--text-*)` then
   shrinks proportionally without touching its individual rule.
   ============================================================ */

/* ---- Tablets and below ---- */
@media (max-width: 768px) {
  :root {
    --text-display: 2.25rem;  /* hero H1: 52px -> 36px */
    --text-h1:      1.875rem; /* 36px -> 30px */
    --text-h2:      1.5rem;   /* section titles: 32px -> 24px */
    --text-h3:      1.375rem; /* 24px -> 22px */
    --text-h4:      1.125rem; /* 20px -> 18px */
  }

  /* The brand must stay on one line — wrapping was making the
     header ~90px tall and dominating the top of the viewport. */
  .logo-text {
    font-size: 1.05rem;
    white-space: nowrap;
  }

  /* Tighten the vertical rhythm: 64px section gaps are too airy
     on a phone and push real content below the fold. */
  .section { padding: var(--space-10) 0; }
  .section-header { margin-bottom: var(--space-6); }

  /* Hero: less dead space, full reading width (the 480px cap is a
     desktop two-column constraint that hurts on a single column). */
  .hero { padding: var(--space-10) 0; }
  .hero-content { max-width: none; }
  .hero-subtitle { margin-bottom: var(--space-6); }
  .hero-actions { flex-wrap: wrap; }
}

/* ---- Product grid: phones ----
   A single-column grid made each card ~636px tall (the 3/4 portrait image
   alone was ~458px), so one wine filled the whole screen and the price fell
   below the fold. Two columns roughly halves the card height, so a full card —
   image, name and price — fits on screen and you can scan several at once. */
@media (max-width: 600px) {
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    /* Stretch (grid default): the two cards in a row share one height, so their
       prices sit on the same line instead of one card running taller. */
  }

  .product-card .card-content { padding: var(--space-3); }

  /* The "In winkelmandje" button is reveal-on-hover (opacity:0 until :hover).
     Phones never fire :hover, so it stayed invisible but still reserved a
     ~58px row under the price — the empty white space the cards showed. Hide
     it on phones; tapping the card opens the detail page, where you add to
     cart. (The sold-out badge button is a different element and stays.) */
  .product-card .add-to-cart-btn { display: none; }

  /* Names run one or two lines. Reserve a constant two-line height for the
     title so a short-named bottle and a long-named one beside it keep their
     price on the same row — otherwise the longer name pushes its price down
     and the pair looks misaligned. (card-content already bottom-aligns the
     footer via margin-top:auto, so this just removes the main source of
     height variance.) */
  .product-card .card-title {
    min-height: 2.7em; /* ~2 lines at the title's snug line-height */
  }
}

/* ---- Phones ---- */
@media (max-width: 480px) {
  :root {
    --text-display: 2rem;     /* hero H1 -> 32px */
    --text-h2:      1.375rem; /* section titles -> 22px */
  }

  .logo-text { font-size: 1rem; }

  /* Full-width stacked actions are the easiest to tap one-handed. */
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
}