/* ==========================================================================
   99-RESPONSIVE.CSS  —  every breakpoint override in one place
   --------------------------------------------------------------------------
   The rest of the CSS describes the phone layout. This file describes what
   changes as the screen gets bigger (or shorter).

   Breakpoints used on this site:
     480px  — the CTA stops being full-width
     640px  — the navbar grows to 72px; the menu becomes a side panel
     900px  — the three inline nav links appear
   Type never needs a breakpoint: it scales fluidly via clamp() in 01-tokens.
   ========================================================================== */


/* ==========================================================================
   UNDER 480px — small phones
   The CTA goes full width so it is easy to hit with a thumb.
   ========================================================================== */
@media (max-width: 479px) {

  /* The How It Works rail narrows. Because the connecting line is positioned
     from --rail-w rather than a second hardcoded number, it re-centres
     itself automatically and stays exactly under the circles. */
  :root {
    --rail-w:      44px;
    --circle-size: 44px;
  }

  .process__step {
    gap: var(--space-3);
  }

  .hero__cta-wrap {
    width: 100%;
  }

  /* Scoped to the hero on purpose. The template cards use the same button,
     and they must stay side by side rather than going full width. */
  .hero__cta-wrap .btn {
    display: flex;
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
  }
}


/* ==========================================================================
   UNDER 768px — the ticker speeds up
   The loop is physically shorter on a narrow screen, so at the same duration
   it would crawl. A shorter duration keeps the apparent speed identical.
   ========================================================================== */
@media (max-width: 767px) {

  :root {
    --marquee-duration: 28s;
  }
}


/* ==========================================================================
   640px AND UP — large phones, tablets, desktop
   ========================================================================== */
@media (min-width: 640px) {

  /* --- taller navbar --- */
  .nav {
    height: var(--nav-h);
  }

  .nav__mark {
    height: var(--mark-h-lg);
  }

  /* --- hero clears the taller bar --- */
  .hero {
    padding-top: calc(var(--nav-h) + var(--space-6));
  }

  /* --- the menu becomes a panel on the right, not a full screen --- */
  .menu__backdrop {
    display: block;
  }

  .menu__panel {
    width: min(var(--panel-w), 100%);
    background-color: var(--surface);
    box-shadow: var(--shadow-md);
    padding-top: var(--space-4);
    padding-inline: var(--space-6);
    padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
  }

  .menu__close {
    margin-right: calc(var(--space-3) * -1);
  }
}


/* ==========================================================================
   UNDER 480px — the phone mockups shrink a little
   They must never touch the edges of the screen.
   ========================================================================== */
@media (max-width: 479px) {

  .template .card__phone,
  .template .card__body {
    max-width: var(--phone-w-sm);
  }
}


/* ==========================================================================
   860px AND UP — the template previews sit side by side
   auto-fit rather than a fixed 2, so the row follows however many templates
   are in the config: two makes two columns, three makes three.
   ========================================================================== */
@media (min-width: 860px) {

  /* The 260px minimum is what makes this work. It tells the browser the
     narrowest a column may be, so it fits three across the 1000px row and no
     more. auto-fit then collapses any column with nothing in it — so two
     templates give two wide columns, three give three, and a fourth wraps
     onto a second row rather than squeezing everything thinner.

     Without a real minimum here the browser makes an unbounded number of
     tracks and it only appears to work by accident. */
  .templates__list {
    grid-template-columns: repeat(auto-fit, minmax(var(--phone-col-min), 1fr));
    gap: var(--space-6);
  }
}


/* ==========================================================================
   480px AND UP — the subscribe form sits on one line
   Below this the input and the button stack, both full width, because side
   by side on a small phone leaves the input too narrow to read what you
   typed.
   ========================================================================== */
@media (max-width: 479px) {

  .subscribe__form {
    flex-direction: column;
  }

  .subscribe__form .btn {
    width: 100%;
  }

  /* Bigger tap targets where fingers are the only pointer */
  .social-tile {
    width: var(--tile-social-lg);
    height: var(--tile-social-lg);
  }
}


/* ==========================================================================
   600px AND UP — the bottom bar sits on one line
   ========================================================================== */
@media (min-width: 600px) {

  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .footer__copyright { order: 0; }
  .footer__links     { order: 0; }
}


/* ==========================================================================
   768px AND UP — the footer's three columns
   ========================================================================== */
@media (min-width: 768px) {

  .footer__top {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--space-6);
  }
}


/* ==========================================================================
   720px AND UP — the feature cards go into two columns
   Below this width they are a single stack, and the last card is an ordinary
   card like all the others.
   ========================================================================== */
@media (min-width: 720px) {

  .features__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* The last card spans both columns when there is an odd number of them,
     so it is never left as an orphan beside an empty space. js/features.js
     decides which card that is and adds this class. */
  .feature--wide {
    grid-column: 1 / -1;

    /* Spanning cards do not simply stretch — they change shape. The icon
       moves to the left with the words in a column beside it, so the card
       reads as a wide card rather than a tall one that got pulled. */
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .feature--wide .feature__title {
    margin-top: 0;
  }

  /* Without this the paragraph would run the full 1040px, which is far too
     long a line to read comfortably. */
  .feature--wide .feature__body {
    max-width: var(--measure-feature);
  }
}


/* ==========================================================================
   900px AND UP — the three inline nav links appear
   Below this width the hamburger is the only way to navigate, in both
   scroll states.
   ========================================================================== */
@media (min-width: 900px) {

  .nav__links {
    display: block;
  }
}


/* ==========================================================================
   SHORT SCREENS — phones held sideways, or a small desktop window
   ========================================================================== */

/* The scroll cue is the first thing to go when height is scarce */
@media (max-height: 600px) {

  .hero__cue {
    display: none;
  }
}

/* In landscape the hero stops trying to fill the screen and simply grows to
   fit its content, so nothing is ever cut off or scrolled past. */
@media (orientation: landscape) and (max-height: 600px) {

  .hero {
    min-height: auto;
    padding-top: calc(var(--nav-h-mobile) + var(--space-5));
    padding-bottom: var(--space-5);
  }

  .hero__wordmark-wrap {
    margin-top: var(--space-3);
  }

  .hero__lead {
    margin-top: var(--space-3);
  }

  .hero__cta-wrap {
    margin-top: var(--space-4);
  }

  /* A full-height menu panel has very little room in landscape, so tighten
     the link spacing rather than letting it scroll awkwardly. */
  .menu__link {
    font-size: var(--fs-menu-link-short);
    padding-block: var(--space-1);
  }

  .menu__foot {
    padding-top: var(--space-4);
  }
}


/* ==========================================================================
   VERY WIDE SCREENS — 1600px and up
   The container is already capped at 1200px. This just stops the hero copy
   from looking marooned in the middle of a huge empty screen by letting the
   amber glow spread a little further behind the wordmark.
   ========================================================================== */
@media (min-width: 1600px) {

  .hero::before {
    width: 46%;
  }
}