/**
 * Homepage Hero
 *
 * Desktop (>=1200px) : copy 1fr / wall 2fr, two vertical tracks, opposite directions
 * Tablet  (768-1199) : copy stacked, two horizontal rows, opposite directions
 * Phone   (<768px)   : copy stacked, single swipe row, no autoplay
 *
 * Cards use margin rather than gap on the animated axis. With equal margins
 * the track is an exact multiple of the card pitch, so translate(-50%) lands
 * precisely on a card boundary and the loop has no visible seam. A CSS gap
 * leaves one gap unaccounted for and the loop jumps.
 *
 * Link rules are written as .crea-hero .crea-hero__x rather than a single
 * class. The theme underlines links from a descendant selector that beats
 * one class on specificity, so a single class loses and the underline
 * returns. Two classes wins without resorting to !important.
 *
 * @package creaunited_2020
 */
.crea-hero {
  overflow: hidden;
}
.crea-hero__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 3rem 1.25rem;
}
.crea-hero {
  /* ---------------------------------------------------------------
   * Copy column
   * ------------------------------------------------------------ */
}
.crea-hero__kicker {
  margin: 0 0 1rem;
  font-size: 0.6875rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--crea-ink-faint);
}
.crea-hero__headline {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.24;
  color: var(--crea-ink);
}
@media (min-width: 1200px) {
  .crea-hero__headline {
    font-size: 2.125rem;
  }
}
.crea-hero__sub {
  margin: 1rem 0 1.75rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--crea-ink-soft);
  max-width: 34em;
}
.crea-hero {
  /* ---------------------------------------------------------------
   * Cards
   * ------------------------------------------------------------ */
}
.crea-hero .crea-hero__card {
  display: block;
  flex: 0 0 auto;
  background-color: var(--crea-surface);
  border-radius: 8px;
  overflow: hidden;
  color: var(--crea-surface-ink);
  text-decoration: none;
  transition: transform 0.2s ease;
}
.crea-hero .crea-hero__card:hover, .crea-hero .crea-hero__card:focus, .crea-hero .crea-hero__card:active, .crea-hero .crea-hero__card:visited {
  text-decoration: none;
  color: var(--crea-surface-ink);
}
.crea-hero .crea-hero__card:hover {
  transform: translateY(-2px);
}
.crea-hero .crea-hero__card:focus-visible {
  outline: 2px solid var(--crea-focus);
  outline-offset: 3px;
}
.crea-hero__card-media {
  display: block;
  height: 128px;
  background-color: #eef0f3;
}
.crea-hero__card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.crea-hero__card-title {
  display: block;
  padding: 0.75rem 0.875rem 0.875rem;
  font-size: 0.9375rem;
  line-height: 1.3;
  text-decoration: none;
}
.crea-hero {
  /* ---------------------------------------------------------------
   * Wall and tracks
   * ------------------------------------------------------------ */
}
.crea-hero__wall {
  position: relative;
  margin-top: 2rem;
}
.crea-hero__track {
  display: flex;
  will-change: transform;
}
.crea-hero {
  /* ---------------------------------------------------------------
   * Tablet: two horizontal rows, opposite directions
   * ------------------------------------------------------------ */
  /* Below the desktop split, every width gets two horizontal rows
   * running in opposite directions. Phone used to be a swipe-only
   * scroll-snap row built with display:contents, which is unreliable
   * as a scroll container in older Safari. Same layout everywhere is
   * both simpler and more robust. */
}
@media (max-width: 1199.98px) {
  .crea-hero__wall {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .crea-hero__col {
    overflow: hidden;
  }
  .crea-hero__track {
    flex-direction: row;
    width: max-content;
    animation-name: crea-hero-roll-x;
  }
  .crea-hero__card {
    width: 200px;
    margin-right: 14px;
  }
}
@media (max-width: 1199.98px) and (min-width: 768px) {
  .crea-hero__card {
    width: 240px;
  }
}
.crea-hero {
  /* ---------------------------------------------------------------
   * Desktop: copy left, two vertical tracks right
   * ------------------------------------------------------------ */
}
@media (min-width: 1200px) {
  .crea-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 3.5rem;
    align-items: center;
    padding: 4.5rem 2rem;
  }
  .crea-hero__wall {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    height: 620px;
    margin-top: 0;
  }
  .crea-hero__col {
    overflow: hidden;
  }
  .crea-hero__track {
    flex-direction: column;
    animation-name: crea-hero-roll-y;
  }
  .crea-hero__card {
    margin-bottom: 14px;
  }
}
.crea-hero {
  /* ---------------------------------------------------------------
   * Motion. Stops on hover and on keyboard focus inside a track.
   * ------------------------------------------------------------ */
}
.crea-hero__track {
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.crea-hero__track--reverse {
  animation-direction: reverse;
}
.crea-hero {
  /* Hover covers pointer devices and focus-within covers keyboards.
   * Touch has neither, so on a phone the rows run continuously; the
   * reduced-motion query below is the only stop for those users. */
}
.crea-hero__wall:hover .crea-hero__track, .crea-hero__track:focus-within {
  animation-play-state: paused;
}

@keyframes crea-hero-roll-y {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, -50%, 0);
  }
}
@keyframes crea-hero-roll-x {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .crea-hero__track {
    animation: none !important;
  }
}