/* ==========================================================================
   WINTEAM — TOUCH AND SMALL SCREENS

   Loaded last so it can raise the floor on anything the layout above sets.
   Two separate concerns, deliberately not conflated:

     `pointer: coarse`   a finger is imprecise. Hit areas grow; nothing else
                         changes, and a mouse never sees any of it.
     narrow viewports    less room. Type and rhythm tighten.

   A phone matches both. A touchscreen laptop matches only the first, which is
   the point — its layout should not shrink just because it can be tapped.
   ========================================================================== */

/* ------------------------------------------------------------ Hit areas */

/*  44px is the accepted floor for a tap target. Where a link is set inline in
    running text or a tight list, growing the element would wreck the rhythm —
    so the *hit area* grows instead, through a pseudo-element that reaches out
    beyond the glyphs without occupying any layout.                          */

@media (pointer: coarse) {
  .footer__list a,
  .contact__row dd a,
  .nav__brand,
  .nav-overlay__child,
  .locale-switch__item,
  .projects__item a,
  .type-lead a,
  .type-body a,
  .type-caption a {
    position: relative;
  }

  .footer__list a::after,
  .contact__row dd a::after,
  .nav__brand::after,
  .nav-overlay__child::after,
  .locale-switch__item::after,
  .type-lead a::after,
  .type-body a::after,
  .type-caption a::after {
    content: "";
    position: absolute;
    /*  0.9rem either side clears 44px for every line height the site sets,
        down to the 13px caption. Measured — 0.75rem left a dozen links at
        42px, which looks fine and misses under a thumb. */
    inset-block: -0.9rem;
    inset-inline: -0.5rem;
  }

  /* The wordmark sets a shorter line than the links, so it needs more. */
  .nav__brand::after {
    inset-block: -1rem;
    inset-inline: -0.75rem;
  }

  /*  Lists whose rows would otherwise sit closer together than the hit areas
      they need. Opening the gap is the honest fix — overlapping targets just
      move the mis-tap somewhere else.                                       */
  .footer__list {
    gap: 1.1rem;
  }

  .nav-overlay__children {
    gap: 1rem 1.75rem;
  }

  /* Pills: filters, configurator options. 40px to 44px. */
  .option {
    height: 2.75rem;
  }

  /* The menu button and the form controls. */
  .nav-toggle {
    width: 3rem;
    height: 3rem;
  }

  .field__control {
    padding-block: 0.85rem;
  }

  /*  Hover is a state a finger cannot occupy, and a sticky :hover after a tap
      reads as a bug. These are the effects that leave a mark.               */
  .underline-draw:hover {
    background-size: 0% 1px;
  }

  .underline-draw[data-active="true"] {
    background-size: 100% 1px;
  }

  .projects__item:hover .projects__frame {
    padding: 0.625rem;
  }

  .projects__item:hover .projects__viewport img {
    transform: none;
  }

  .collection__pick:hover .collection__name {
    transform: none;
  }
}

/* --------------------------------------------------------- Narrow screens */

@media (max-width: 30rem) {
  /*  The section index and its label share a line at the top of every
      section. At 375px the rule between them eats the label's room. */
  .eyebrow {
    gap: 0.6rem;
  }

  .eyebrow__rule {
    flex-basis: 1.25rem;
  }

  /*  Buttons go full width rather than wrapping into a ragged stack. */
  .closing__actions .btn,
  .status-page__actions .btn,
  .enquiry__actions .btn {
    width: 100%;
    justify-content: space-between;
  }

  /*  The hero's foot puts the scroll cue and the tagline on one line; at this
      width they collide. The tagline is the one that can go — it is already
      in the navigation and the page title. */
  .hero__foot .type-caption {
    display: none;
  }

  /*  02 — the slot opens from 38% of the viewport either side, which on a
      phone leaves a 90px letterbox: too narrow to read as a view of anything.
      It starts wider here and covers the same ground. */
  .manifesto {
    --slot-start: 26%;
  }

  /*  03 — the caption and the index share the foot of the frame. At this
      width the index wraps under the caption, so it needs its own air. */
  .anatomy__caption {
    gap: 1.25rem;
    padding-block-end: var(--space-block);
  }

  .anatomy__steps {
    min-height: 5rem;
    margin-block-start: 1.25rem;
  }

  /*  04 — the series name is the tap target. Number, name and summary on one
      line at display scale is too much; the summary is already hidden below
      40rem, and the number can tuck in tighter. */
  .collection__pick {
    gap: 0.9rem;
  }

  .collection__number {
    width: 1.25rem;
  }

  /*  The drawings grid: three to a row at 375px makes each one unreadable. */
  .library__grid {
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  }

  /*  The filter bar sticks under the navigation and, unwrapped, took a third
      of the screen. It scrolls sideways instead. */
  .library__filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .library__filters::-webkit-scrollbar {
    display: none;
  }

  .library__filters .option {
    flex-shrink: 0;
  }
}

/* ---------------------------------------------------------- Short screens */

/*  A phone in landscape is wide and very short. The pinned sections are all
    `100svh`, so their copy has to fit into a few hundred pixels.            */
@media (orientation: landscape) and (max-height: 30rem) {
  .anatomy__caption {
    padding-block-end: 1.25rem;
  }

  .anatomy__steps {
    min-height: 0;
    margin-block-start: 0.75rem;
  }

  .anatomy__steps .type-body {
    display: none;
  }

  .manifesto__lines,
  .closing__headline,
  .closing__actions {
    margin-block-start: 1.25rem;
  }
}