/* =============================================================================
   DESKTOP GATE
   The site is a mobile microsite. On a large screen the middle is replaced
   with a short message, while the header and the social strip stay.

   Nothing here changes what mobile visitors see: below the breakpoint the
   gate is display:none and every rule is inert.
   ========================================================================== */

.gate { display: none; }

/* ---- The breakpoint -------------------------------------------------------
   64em is 1024px. Deliberately not lower: a large phone held sideways is
   often 850–930px wide, and gating at 48em would tell those visitors to open
   the site on the phone they are already holding.

   Add `and (pointer: fine)` below if tablets should be let through — that
   restricts the gate to mouse-driven devices. Leave it off to gate tablets
   too, which is the current behaviour.
   ------------------------------------------------------------------------- */

@media (min-width: 64em) {

  /* Everything between the header and the social strip goes */
  main { display: none; }

  .gate {
    display: grid;
    place-items: center;
    min-height: calc(100svh - var(--header-h) - 6rem);
    padding: var(--sp-xl) var(--gutter);
    background: var(--grad-page);
    text-align: center;
  }

  .gate__inner {
    max-width: 30rem;
    display: grid;
    justify-items: center;
    gap: var(--sp-sm);
  }

  .gate__phone {
    width: 4.5rem;
    height: auto;
    color: var(--red-600);
  }

  .gate__title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--red-600);
  }

  .gate__text {
    font-family: var(--font-display);
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--ink-600);
    max-width: 26rem;
  }

  .gate__qr {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    margin-top: var(--sp-xs);
    padding: 0.9rem;
    border-radius: 14px;
    background: var(--white);
    box-shadow: var(--shadow-md);
  }

  .gate__qr img {
    width: 9rem;
    height: 9rem;
    display: block;
  }

  .gate__qr-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-400);
  }

  .gate__url {
    font-size: var(--fs-sm);
    color: var(--ink-400);
    word-break: break-all;
  }
}

/* Very wide screens: a little more room, nothing else changes */
@media (min-width: 90em) {
  .gate__qr img { width: 11rem; height: 11rem; }
}