/* GDI-Marquee: the homepage "Key facts" strip. Ported from site.css section 7 (Marquee) and the v10
   edge fade. The list is printed twice and the track slides by exactly half its width, so the loop is
   seamless. CSS only, no JavaScript. Colours, type, gap and speed are overridable from the widget panel. */
.gdi-marquee {
  --gdi-marquee-gap: 2.4rem;
  --gdi-marquee-pad: 1.05rem;
  position: relative;
  overflow: hidden;
  padding-block: var(--gdi-marquee-pad);
  background: var(--gdi-sky);
  border-block: 1px solid rgba(14,84,94,.12);
}
.gdi-marquee.marquee--fade {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.gdi-marquee .marquee__track {
  display: flex;
  width: max-content;
  animation: gdi-marquee 34s linear infinite;
}
.gdi-marquee.marquee--reverse .marquee__track { animation-direction: reverse; }
.gdi-marquee.marquee--pause:hover .marquee__track,
.gdi-marquee.marquee--pause:focus-within .marquee__track { animation-play-state: paused; }
.gdi-marquee ul {
  display: flex;
  align-items: center;
  gap: var(--gdi-marquee-gap);
  margin: 0;
  padding: 0 var(--gdi-marquee-gap) 0 0;
  list-style: none;
}
.gdi-marquee li {
  display: flex;
  align-items: center;
  gap: var(--gdi-marquee-gap);
  margin: 0;
  white-space: nowrap;
  font-family: var(--gdi-font-display);
  font-stretch: 95%;
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem);
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--gdi-ink);
}
.gdi-marquee.marquee--dots li::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gdi-navy);
  flex-shrink: 0;
}
@keyframes gdi-marquee { to { transform: translateX(-50%); } }

/* Reduce motion: the strip stops and the facts wrap onto as many lines as they need, so every one can
   still be read. The copy printed for the loop is dropped. */
@media (prefers-reduced-motion: reduce) {
  .gdi-marquee.marquee--fade { -webkit-mask-image: none; mask-image: none; }
  .gdi-marquee .marquee__track { animation: none; width: auto; justify-content: center; }
  .gdi-marquee ul[aria-hidden="true"] { display: none; }
  .gdi-marquee ul { flex-wrap: wrap; justify-content: center; row-gap: .35rem; padding: 0 1.15rem; }
  .gdi-marquee li { white-space: normal; }
}