/* ==========================================================================
   Foundryline — phone fixes to the page body
   --------------------------------------------------------------------------
   THREE THINGS FROM A 390px SCREENSHOT

   1. THE STATS STRIP WAS TWO COLUMNS AND TOO NARROW.

      "8 in 10", "5 days", "$390" and "No middlemen" sat in a 2x2 grid, so each
      cell was about 160px wide inside 20px of padding. "No middlemen" is a
      24px display heading and did not fit, so it broke mid-word at "middleme"
      and the rest ran out of the cell.

      One column on a phone. Each figure gets the full width, which is what a
      number that is meant to be read deserves.

   2. THE DISPLAY HEADINGS NEED A SMALLER CEILING ON A PHONE.

      The clamp() minimums were set for a 900px column. In a 350px column the
      largest of them still overflowed its box, which is how "No middlemen"
      lost its last two letters. This lowers the floor rather than the ceiling,
      so a laptop is untouched.

   3. THE PAGE HAD NO ROOM FOR A THUMB AT THE EDGES.

      Side padding was 24px, which is right for a laptop trackpad and tight for
      a thumb at the edge of a phone. 20px with the content inset from the
      rounded screen corners reads better and keeps text off the curve.
   ========================================================================== */

@media (max-width: 620px) {

  /* 1. one figure per row */
  .stats { grid-template-columns: 1fr; }

  /* a row of stats reads better with the number beside the label than with
     the label under a very large number, once the column is this narrow */
  .stat {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    align-items: baseline;
    padding: 18px 18px;
  }

  .stat b {
    font-size: 1.75rem;
    margin-bottom: 0;
    min-width: 3.6em;
  }

  .stat span { font-size: 0.82rem; }

  /* 2. headings that fit a 350px column */
  h1 { font-size: clamp(1.72rem, 8.6vw, 2.4rem); }
  h2 { font-size: clamp(1.32rem, 6.2vw, 1.9rem); }
  h3 { font-size: clamp(1.08rem, 4.8vw, 1.32rem); }

  .hero h1,
  h1.hero-title { font-size: clamp(1.8rem, 9vw, 2.6rem); }

  /* a two-column grid of anything is one column down here */
  .grid.two,
  .grid.three,
  .grid.four { grid-template-columns: 1fr; }

  /* the price cards stack, and the middle one loses its side borders because
     "in the middle" means nothing once they are stacked */
  .price-card + .price-card {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  /* 3. room for a thumb */
  .wrap { padding-left: 19px; padding-right: 19px; }

  /* Buttons that sat in a desktop row should fill the column instead, so a
     thumb is not aiming at a 150px target. The real class is .btn-row. */
  .btn-row .btn,
  .cta-band .btn { width: 100%; }

  .btn-row { gap: 10px; }
}

/* Between a phone and the desktop layout: two figures per row, which reads
   better than four cramped ones and better than a very tall single column. */
@media (min-width: 621px) and (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Long display headings

   A stat label or a figure with no spaces cannot wrap and will push its own
   box wider than the column. This lets the browser break it only when there is
   no other option, which is the difference between a tidy cell and a cell with
   the last two letters hanging outside it.
   -------------------------------------------------------------------------- */
.stat b,
.stat span,
.price-card h3,
.sample h3 {
  overflow-wrap: break-word;
  hyphens: none;
}

/* --------------------------------------------------------------------------
   The offer pop-up on a small screen

   It is centred with flex, which is correct, but on a short phone in landscape
   there is not enough room for the card plus its padding, and the card was
   pushed off the top. Allowing the overlay to scroll keeps the card reachable.
   -------------------------------------------------------------------------- */
@media (max-height: 560px) {
  .gate {
    align-items: flex-start;
    overflow-y: auto;
    padding-top: max(14px, env(safe-area-inset-top, 0px) + 10px);
    padding-bottom: max(14px, env(safe-area-inset-bottom, 0px) + 10px);
  }

  .gate-card { margin: 0 auto; }
}

/* --------------------------------------------------------------------------
   Tabs and filter rows wrap rather than scroll away

   On a narrow screen a horizontal row of tabs either wraps or hides its last
   item off the edge. Wrapping is discoverable; a hidden tab is not.
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .tpl-tabs,
  .tabs,
  .btn-row {
    flex-wrap: wrap;
    row-gap: 8px;
  }
}