/*
 * Homepage "prognostics" section — Figma "Website" file, node 4207:353
 * (desktop 1440, the 1280 column) and 4299:1944 (mobile 393).
 *
 * The first section under the hero: a centred eyebrow + serif headline, a
 * band of "We look at" tags between two dotted rules, and a closing paragraph.
 *
 * The tag band has two modes. At ≥ 1440px every tag fits on one line, so the
 * row is static and centred like the desktop mock. Below that the row is wider
 * than the column (1120rem of tags against a 912rem container at 992–1439, and
 * 345rem on mobile), so it becomes the mobile mock's scrolling strip: a slow
 * continuous marquee with the "We look at" label pinned over a white fade on
 * the left and a shorter fade on the right. It pauses on hover and, under
 * prefers-reduced-motion, stands still as a normal horizontally scrollable row.
 *
 * Units: rem, like the rest of the site (1rem = 1px at the design widths, see
 * the <style> block in index.html). The content box is a plain .container
 * (layout.css owns --container-max).
 *
 * Fonts: the headline is PP Pangaia Medium in Figma and here (the site already
 * ships it for the mission section); everything else is Inter, as in Figma —
 * this section uses no Aeonik at all. Colours are the Figma literals.
 */

.prognostics {
  --prog-bg: #fff;
  --prog-text: #000;
  --prog-subtle: #666;
  --prog-dot: #eee;
  --prog-tag-bg: #f5f5f5;
  --prog-tag-border: #ebebeb;
  --prog-tag-text: #222;
  --prog-rule-h: 20rem;

  position: relative;
  z-index: 1;
  padding: 96rem 0;
  background-color: var(--prog-bg);
  color: var(--prog-subtle);
  /* Inter (Figma Typography/font/Primary). The token override, not just
     font-family, is what redirects the Webflow `a` / `h1` element rules. */
  --_colors---family-paragraph: var(--font-ui);
  font-family: var(--font-ui);
  text-align: center;
}

.prognostics .container.prognostics-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24rem;
}

/* Headline ---------------------------------------------------------------- */

.prognostics-headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rem;
  width: 100%;
}

/* Figma "Label/L": 16/20 medium, -0.16px, #666 */
.prognostics-eyebrow {
  margin: 0;
  font-size: 16rem;
  line-height: 20rem;
  font-weight: 500;
  letter-spacing: -0.16rem;
  color: var(--prog-subtle);
}

/* Figma "Heading/Accent": PP Pangaia Medium 48/56, -0.64px, black */
.prognostics-heading {
  margin: 0;
  font-family: "PP Pangaia", var(--font-display);
  font-size: 48rem;
  line-height: 56rem;
  font-weight: 500;
  letter-spacing: -0.64rem;
  color: var(--prog-text);
}

/* Tag band ---------------------------------------------------------------- */

.prognostics-row {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12rem;
  width: 100%;
}

/* Dotted rule: Figma draws 4px #eee circles on a 10px pitch inside a 20px
   tall strip; a repeating radial gradient does the same without the nodes. */
.prognostics-rule {
  height: var(--prog-rule-h);
  background-image: radial-gradient(circle, var(--prog-dot) 2rem, transparent 2.4rem);
  background-size: 10rem var(--prog-rule-h);
  background-position: center;
  background-repeat: repeat-x;
}

/* Static desktop row (≥ 1440): label, then the tags, all centred */
.prognostics-marquee {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16rem;
  width: 100%;
  min-width: 0;
}

.prognostics-label {
  flex-shrink: 0;
  margin: 0;
  font-size: 16rem;
  line-height: 20rem;
  font-weight: 500;
  letter-spacing: -0.16rem;
  color: var(--prog-subtle);
  white-space: nowrap;
}

.prognostics-track {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.prognostics-tags {
  display: flex;
  align-items: center;
  gap: 16rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Duplicate list exists only to make the marquee seamless */
.prognostics-tags[aria-hidden="true"] {
  display: none;
}

/* Figma "Label": mono/200 fill, #ebebeb hairline, 6px 16px 6px 8px, 4px gap,
   24px icon, 16/20 medium #222. Figma draws the hairline inside the 36px box,
   CSS draws it outside, so the vertical padding gives up 1px each side. */
.prognostics-tag {
  display: inline-flex;
  align-items: center;
  gap: 4rem;
  padding: 5rem 16rem 5rem 8rem;
  border: 1px solid var(--prog-tag-border);
  border-radius: 999px;
  background-color: var(--prog-tag-bg);
  font-size: 16rem;
  line-height: 20rem;
  font-weight: 500;
  letter-spacing: -0.16rem;
  color: var(--prog-tag-text);
  white-space: nowrap;
}

.prognostics-tag img {
  display: block;
  width: 24rem;
  height: 24rem;
  flex-shrink: 0;
}

.prognostics-fade {
  display: none;
}

/* Body -------------------------------------------------------------------- */

/* Figma "Body/M": 16/24, -0.32px, #666, 624px measure; the bold run is Inter
   Bold in Figma and Aeonik Pro Medium here (the site has no bold cut). */
.prognostics-body {
  max-width: 624rem;
  margin: 0;
  font-size: 16rem;
  line-height: 24rem;
  font-weight: 400;
  letter-spacing: -0.32rem;
  color: var(--prog-subtle);
}

.prognostics-body strong {
  font-weight: 500;
  color: var(--prog-tag-text);
}

/* ------------------------------------------------------------------ */
/* < 1440px: the tags no longer fit the column — scrolling strip        */
/* ------------------------------------------------------------------ */

@media screen and (max-width: 1439px) {
  .prognostics-marquee {
    justify-content: flex-start;
    gap: 0;
    overflow: hidden;
  }

  /* Label pinned over a white fade, Figma "fade-left": 178.5px wide, solid
     white to 35.9% then out; the text sits 0.5px from the row's left edge. */
  .prognostics-label {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    width: 178.5rem;
    padding-left: 0.5rem;
    background: linear-gradient(to right, var(--prog-bg) 35.9%, rgba(255, 255, 255, 0));
    pointer-events: none;
  }

  /* Figma "fade-right": 40px */
  .prognostics-fade-right {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: block;
    width: 40rem;
    background: linear-gradient(to left, var(--prog-bg), rgba(255, 255, 255, 0));
    pointer-events: none;
  }

  /* Two copies of the list, each followed by one gap, slide left by exactly
     one copy — so the loop is seamless. Speed is set by the duration; the
     travel distance is the list width, so wider lists just move faster. */
  .prognostics-track {
    width: max-content;
    animation: prognostics-marquee 36s linear infinite;
    will-change: transform;
  }

  .prognostics-marquee:hover .prognostics-track {
    animation-play-state: paused;
  }

  .prognostics-tags,
  .prognostics-tags[aria-hidden="true"] {
    display: flex;
    gap: 12rem;
    padding-right: 12rem;
  }
}

@keyframes prognostics-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* ------------------------------------------------------------------ */
/* Mobile (< 768, Figma 393): smaller type, 64px band, own gutter       */
/* ------------------------------------------------------------------ */

@media screen and (max-width: 767px) {
  .prognostics {
    padding: 64rem 24rem;
  }

  .prognostics-headline {
    gap: 8rem;
    padding: 0 16rem;
  }

  .prognostics-eyebrow {
    font-size: 14rem;
    line-height: 18rem;
    letter-spacing: -0.14rem;
  }

  .prognostics-heading {
    font-size: 32rem;
    line-height: 38rem;
  }

  .prognostics-row {
    gap: 8rem;
  }

  .prognostics-label {
    font-size: 14rem;
    line-height: 18rem;
    letter-spacing: -0.14rem;
  }

  .prognostics-tag {
    font-size: 14rem;
    line-height: 18rem;
    letter-spacing: -0.14rem;
  }
}

/* No motion: a still, finger-scrollable row; the duplicate list is dropped */
@media (prefers-reduced-motion: reduce) {
  .prognostics-marquee {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .prognostics-marquee::-webkit-scrollbar {
    display: none;
  }

  .prognostics-track {
    animation: none;
    padding-left: 80rem;
  }

  .prognostics-tags[aria-hidden="true"] {
    display: none;
  }
}