/* Cross-page layout corrections.

   Three faults that are not specific to one case study, so they are fixed
   once here rather than repeated in each page's own `ypl-` stylesheet. All
   three are horizontal overflow: at 1440 the affected pages could be scrolled
   sideways -- 10px on the Watch page, 28px on Auto Drive and Driver Tablet,
   2116px on Grab Locker and 3112px on Cloud Printer. Nothing here changes a
   colour, a typeface, or the position of anything the reader can see; the
   pages lose only the empty space to the right of their own content.

   The file is linked immediately after `ypl-resume-cta.css`, which puts it
   ahead of the per-page stylesheets, so each rule below carries an id in its
   selector and wins on specificity rather than on order. Every selector is
   scoped so it cannot reach anything it was not written for. */

/* 1. The horizontal icon list -- the numbered rows used for "Four rules",
      "Seven things that changed the design", "Key product features" and so on.

      Salient gives it `width: calc(105%)` so the last item's trailing
      `margin-right` has somewhere to go. That trailing margin is invisible,
      but it still counts as overflow, and on a 1359px column it pushed the
      list 68px past its own column and 28px past the viewport.

      Dropping the last item's right margin and returning the list to its
      column's width keeps the items exactly where they were -- they are
      flex-sized, so each one grows by the fraction of the removed margin it
      is owed. The right-hand item ends up flush with the column edge
      (1399 against the column's 1400) instead of 4px short of it, which is
      also how the rest of the page's grid lines up. */
#portfolio-extra .nectar-icon-list[data-direction="horizontal"] {
  width: 100%;
}

#portfolio-extra
  .nectar-icon-list[data-direction="horizontal"]
  > .nectar-icon-list-item:last-child {
  margin-right: 0;
}

/* 2. The sticky media sections -- Grab Locker's four business lines, and the
      equivalent strip on Cloud Printer. The content wrap is as wide as all its
      panels laid end to end (3516px on Grab Locker) and is moved sideways as
      the reader scrolls down. That is the intended effect; what was missing was
      the clip, so the whole strip was also reachable by scrolling right.

      `clip` rather than `hidden` on purpose: `overflow: hidden` would make this
      element a scroll container and break the `position: sticky` the effect
      depends on. `clip` cuts the overflow without creating one. */
#portfolio-extra .nectar-sticky-media-sections {
  overflow-x: clip;
}

/* 3. The page wrapper, as the backstop.

      Salient's full-width rows carry negative side margins (-13.6px on the
      standard grid, -50px on `full-width-content` rows) to cancel their
      columns' padding. On rows that already span the viewport there is nothing
      to cancel, so the margin becomes overflow -- the residual 10px on Watch
      and Cloud Printer, and 20px on GrabMaps. Rather than chase each row, clip
      at the wrapper.

      `.container-wrap` measures exactly the viewport width at x=0 on all
      thirteen pages and at every breakpoint, so this cuts precisely at the
      window edge and no content is lost. `clip` again, so the sticky section
      navigation and sticky columns inside it keep working. */
#ajax-content-wrap .container-wrap {
  overflow-x: clip;
}