/* ==========================================================================
   Workflow Studio — showreel
   responsive.css
   Where the layout gives up its columns. Kept in one place on purpose: what a breakpoint does to a page is a page-level decision, and reading it scattered across a dozen files is how two of them end up disagreeing.
   ========================================================================== */

/* --- Responsive ------------------------------------------------------------- */

@media (max-width: 900px) {
  .section {
    padding: 72px 0;
  }

  .feature {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 56px 0;
  }

  .feature.reverse .feature-copy {
    order: 0;
  }

  /* One column throughout: the heading, then the entries. The drawing moves
     behind the type, dimmed, since there is no space left beside it. */
  .rundown-inner {
    grid-template-columns: 1fr;
  }

  .rundown-head {
    grid-area: auto;
    max-width: none;
  }

  /* .is-three has to be named here too: it sets the same custom property with a
     class more, so a bare .rundown-list would lose to it. */
  .rundown-list,
  .rundown-list.is-three {
    grid-area: auto;
    --rundown-cols: 1;
  }

  .rundown-head p {
    max-width: none;
  }

  .rundown-art {
    top: 8%;
    right: 0;
    width: 100%;
    opacity: 0.35;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .nav-links {
    display: none;
  }

  .hero {
    padding: 32px 0 88px;
  }

  /* The nav links are gone from here down, so the footer is the only way to
     reach a section — and it is being tapped rather than clicked. 24px of link
     in a column of links is a coin toss between two of them. */
  .footer-col a {
    padding: 9px 0;
  }

  /* Same reason, and this one is the page's only call to action once the links
     have gone. .btn-sm exists to sit quietly in a desktop bar; on a touch
     screen it is the thing being aimed at, so it comes back to the full
     .btn height. The bar is 64px, so there is room for it. */
  .nav .btn-sm {
    height: 44px;
    padding: 0 18px;
  }

  /* The 96px fade either side is a sixth of a phone: the strip would be more
     gradient than logo. The gap goes with it so a mark is still followed by
     another one on screen rather than by empty rail. */
  .logo-marquee {
    mask-image: linear-gradient(
      to right,
      transparent,
      #000 40px,
      #000 calc(100% - 40px),
      transparent
    );
  }

  .logo-row {
    gap: 40px;
    padding-right: 40px;
  }

  /* The marks shrink with the gap: at 30px on a phone the strip is three
     wordmarks wide and reads as a wall rather than as a list. */
  .logo img {
    height: 36px;
  }

  .logo-stacked img {
    height: 54px;
  }

  .logo-wide img {
    height: 25px;
  }
}

/* --- Short and wide: a phone turned on its side ------------------------------
   The hero used to shed its screenful here: the headline and the frame under
   it were taller than a landscape phone whatever they were given. Neither is
   there any more — the hero is a full-bleed reel, which fits any shape — so
   the only thing this shape still needs is the curtain.
   -------------------------------------------------------------------------- */

@media (orientation: landscape) and (max-height: 560px) {
  /* Half the screen is the curtain's own lockup, so the plate under it takes
     what is left rather than the 48svh it is allowed in portrait. */
  .intro-compare {
    width: min(420px, 62vw, 34svh);
    margin-top: 18px;
  }
}

@media (max-width: 520px) {
  .hero-actions {
    flex-direction: column;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
  }

  /* The list scrolls rather than wraps (see tabs.css), and it will still scroll
     on the narrowest phones. Buying back 16px a tab is what gets all three onto
     the screen from about 390px up, which is most of them. */
  .tab {
    padding: 9px 14px;
  }

  /* Three words and a mark in a bar that is now narrower than the words. The
     brand keeps its size; the CTA gives up its tail and its gutter. */
  .nav .container {
    gap: 12px;
  }

  .nav-cta-tail {
    display: none;
  }
}

/* --- The smallest screens still sold ----------------------------------------
   A 24px gutter either side of a 320px screen is 15% of it spent on margin,
   and it is what tips the navbar over: the brand and the CTA together need
   more than the 272px it leaves. Page-wide rather than nav-only, so the brand
   still lines up with the copy under it.
   -------------------------------------------------------------------------- */

@media (max-width: 400px) {
  .container {
    padding-inline: 16px;
  }
}