/* Press page only. */

/* ---------- Featured in ---------- */

#outlets { padding: 120px 0 40px; background: var(--chalk); }
#outlets .split__label { padding-left: var(--gutter); }

/* A continuous run of mastheads rather than a grid of boxes. The track holds the
   list twice so the loop has no seam, and the animation moves it exactly half. */
/* The body is a flex item, so it needs min-width 0 or the track's max-content
   width pushes the whole page sideways. */
#outlets .split__body { min-width: 0; width: 100%; }
#outlets .marquee {
  position: relative; overflow: hidden; width: 100%;
  border-top: 1px solid var(--hedge); border-bottom: 1px solid var(--hedge);
  padding: 54px 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 90px, #000 calc(100% - 90px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 90px, #000 calc(100% - 90px), transparent);
}
#outlets .marquee__track {
  display: flex; align-items: center; gap: 112px; width: max-content;
  animation: outlets-run 60s linear infinite;
}
#outlets .outlet {
  display: flex; align-items: center; justify-content: center;
  height: 56px; flex: none;
  font-size: 19px; font-weight: 500; letter-spacing: 2.6px; text-transform: uppercase;
  color: var(--field); white-space: nowrap;
}
#outlets .outlet img { height: 100%; width: auto; max-width: none; object-fit: contain; }

/* Mastheads run as masks so they all print in Field regardless of their own
   colours. Widths are set per logo from the artwork's own proportions. */
#outlets .outlet--logo {
  background-color: var(--field);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
#outlets .outlet--times     { width: 334px; height: 40px; -webkit-mask-image: url(../assets/press/logos/times.svg);     mask-image: url(../assets/press/logos/times.svg); }
#outlets .outlet--telegraph { width: 246px; height: 40px; -webkit-mask-image: url(../assets/press/logos/telegraph.svg); mask-image: url(../assets/press/logos/telegraph.svg); }
#outlets .outlet--ft        { width: 150px; height: 56px; -webkit-mask-image: url(../assets/press/logos/ft.svg);        mask-image: url(../assets/press/logos/ft.svg); }
#outlets .outlet--standard  { width: 215px; height: 43px; -webkit-mask-image: url(../assets/press/logos/standard.png);  mask-image: url(../assets/press/logos/standard.png); }
@keyframes outlets-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  #outlets .marquee__track { animation: none; flex-wrap: wrap; justify-content: center; gap: 44px 60px; width: auto; }
}

/* ---------- Coverage ---------- */

#coverage { padding: 50px var(--gutter) 130px; background: var(--chalk); }
#coverage .mention {
  display: flex; gap: 40px; align-items: center;
  padding: 32px 0;
  border-top: 1px solid var(--hedge);
  transition: opacity 200ms ease;
}
#coverage .mention:last-child { border-bottom: 1px solid var(--hedge); }
#coverage a.mention:hover { opacity: 0.62; }
#coverage .mention__outlet { flex: 0 0 220px; width: 220px; font-size: 10px; font-weight: 500; letter-spacing: 1.8px; }
#coverage .mention__date { flex: 0 0 150px; width: 150px; font-size: 10px; font-weight: 500; letter-spacing: 1.4px; }
#coverage .mention__title { flex: 1 1 0; min-width: 0; font-weight: 300; font-size: 20px; line-height: 30px; }
#coverage .mention__arrow { flex: none; width: 14px; height: 12px; }

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

@media (max-width: 1400px) {
  #coverage .mention__outlet { flex-basis: 170px; width: 170px; }
  #coverage .mention__date { flex-basis: 110px; width: 110px; }
  #coverage .mention__title { font-size: 18px; line-height: 27px; }
}

@media (max-width: 1100px) {
  #outlets { padding-top: 72px; }
  #outlets .outlet__grid { grid-template-columns: repeat(2, 1fr); }
  #outlets .outlet { min-height: 112px; font-size: 12px; }
  #coverage { padding-bottom: 80px; }
  #coverage .mention { flex-wrap: wrap; gap: 8px 28px; align-items: flex-start; }
  #coverage .mention__title { flex: 1 1 100%; margin-top: 6px; }
  #coverage .mention__arrow { position: absolute; opacity: 0; }
}

@media (max-width: 620px) {
  #outlets .outlet { letter-spacing: 1.6px; }
  #coverage .mention__title { font-size: 17px; line-height: 26px; }
}

@media (max-width: 620px) {
  #outlets .marquee { padding: 38px 0; }
  #outlets .marquee__track { gap: 68px; animation-duration: 42s; }
  #outlets .outlet { height: 40px; font-size: 15px; }
  #outlets .outlet--times     { width: 217px; height: 26px; }
  #outlets .outlet--telegraph { width: 160px; height: 26px; }
  #outlets .outlet--ft        { width: 104px; height: 38px; }
  #outlets .outlet--standard  { width: 140px; height: 28px; }
}