/* ==========================================================================
   J.I.M - Press (Figma frame 1309:495, 1728 x 6023)
   Article cards, sweaty band and "obsessed" videos come from articles.css.
   ========================================================================== */

/* 3. Quote card (1654x500, red, r30) */
.press-quote-section {
  padding-top: 95px;
}

.press-quote-card {
  position: relative;
  width: calc(100% + 1px);
  height: 500px;
  border-radius: 30px;
  background-color: #f04e36;
  color: #000000;
}

.press-quote-text {
  position: absolute;
  left: 60.5px;
  top: 95px;
  margin: 0;
  font-family: "Futura", sans-serif;
  font-weight: 700;
  font-size: 60px;
  line-height: 62px;
  text-transform: uppercase;
}

.press-quote-logo {
  position: absolute;
  left: 60.5px;
  top: 349px;
  width: 206px;
  height: 52px;
}

.press-quote-dots {
  position: absolute;
  left: 791.5px;
  top: 444px;
  display: flex;
  gap: 4px;
}

.press-quote-dots span {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.29);
}

.press-quote-dots span.is-active {
  background-color: #000000;
}

/* 4. Logo ticker band (full bleed #242424, 365px tall) */
.press-ticker-band {
  height: 365px;
  margin-top: 95px;
  padding-top: 115px;
  background-color: #242424;
  overflow: hidden;
}

.press-ticker-img {
  display: block;
  width: 1728px;
  max-width: none;
  height: 135px;
  margin-left: max(3px, calc(50% - 861px));
}

/* 5-7. Offsets vs. the articles page */
.press-grid-section {
  padding-top: 120px;
}

/* Footer: x=17 variant (home.css) */
.jim-footer--press {
  margin-top: 231px;
  padding-bottom: 83px;
}

@media (max-width: 992px) {
  .press-quote-card {
    width: 100%;
    height: auto;
    padding: 48px 32px 40px;
  }
  .press-quote-text,
  .press-quote-logo,
  .press-quote-dots {
    position: static;
  }
  .press-quote-text {
    font-size: 36px;
    line-height: 40px;
  }
  .press-quote-logo {
    margin-top: 24px;
  }
  .press-quote-dots {
    margin-top: 32px;
    justify-content: center;
  }
  .press-ticker-band {
    height: 200px;
    padding-top: 60px;
  }
  .press-ticker-img {
    height: 80px;
    width: auto;
    margin-left: 0;
  }
  .jim-footer--press {
    margin-top: 80px;
  }
}

/* Quote slider: slides stack on the card; only the active one is visible.
   Slide boxes cover the card, so the text/logo positions above are unchanged. */
.press-quote-slides,
.press-quote-slide {
  position: absolute;
  inset: 0;
}

.press-quote-slide {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.6s ease,
    visibility 0.6s ease;
}

.press-quote-slide.is-active {
  opacity: 1;
  visibility: visible;
}

.press-quote-dots span {
  cursor: pointer;
}

/* Logo ticker: a moving copy of the logo strip laid exactly over the static image.
   Geometry and edge fades are measured from press_ticker_logos.webp (2592 x 203):
   the seamless loop (press_ticker_loop_clear.webp) is 2029px wide and starts at x=587. */
.press-ticker-band {
  position: relative;
}

.jim-ticker {
  --tk-w: 1728px;
  position: absolute;
  top: 115px;
  left: max(3px, calc(50% - 861px));
  width: var(--tk-w);
  height: 135px;
  background-color: rgb(18, 16, 19);
  pointer-events: none;
}

.jim-ticker::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--jim-ticker-img);
  background-repeat: repeat-x;
  background-size: calc(var(--tk-w) * 2029 / 2592) 100%;
  background-position: calc(var(--tk-w) * 587 / 2592) 0;
  -webkit-mask-image: var(--jim-ticker-fade);
  mask-image: var(--jim-ticker-fade);
  animation: jim-ticker 30s linear infinite;
  --jim-ticker-fade: linear-gradient(
    to right,
    transparent 5.864%,
    rgba(0, 0, 0, 0.08) 6.096%,
    rgba(0, 0, 0, 0.5) 6.944%,
    rgba(0, 0, 0, 0.63) 7.33%,
    rgba(0, 0, 0, 0.85) 7.716%,
    #000 8.41%,
    #000 90.471%,
    rgba(0, 0, 0, 0.8) 91.049%,
    rgba(0, 0, 0, 0.6) 91.744%,
    rgba(0, 0, 0, 0.3) 92.207%,
    rgba(0, 0, 0, 0.1) 92.67%,
    transparent 92.901%
  );
}

@keyframes jim-ticker {
  to {
    background-position-x: calc(var(--tk-w) * (587 - 2029) / 2592);
  }
}

@media (prefers-reduced-motion: reduce) {
  .jim-ticker::before {
    animation: none;
  }
}

@media (max-width: 992px) {
  .press-quote-slides {
    position: static;
    display: grid;
  }
  .press-quote-slide {
    position: static;
    grid-area: 1 / 1;
  }
  .jim-ticker {
    --tk-w: calc(80px * 2592 / 203);
    top: 60px;
    left: 0;
    height: 80px;
  }
}

/* Ticker without the dark strip: the logos run straight on the band (transparent loop image),
   and the static strip image underneath stays hidden while the moving layer is shown. */
.jim-ticker {
  background-color: transparent;
}

.press-ticker-band:has(.jim-ticker) .press-ticker-img {
  visibility: hidden;
}

/* Quote slider: the quotes slide sideways (js/script.js). The leaving slide stays visible while
   it moves out and only then hides; the card clips anything outside it. */
.press-quote-card {
  overflow: hidden;
}

.press-quote-slide {
  opacity: 1;
  visibility: hidden;
  transition:
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    visibility 0s linear 0.7s;
}

.press-quote-slide.is-active {
  visibility: visible;
  transition:
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .press-quote-slide,
  .press-quote-slide.is-active {
    transition: none;
  }
}

@media (min-width: 993px) and (max-width: 1300px) {
  /* Hero title wrapped onto the LOCATIONS pill at these widths */
  .page-hero-title {
    font-size: 64px;
    line-height: 68px;
    max-width: 760px;
  }
}

/* Quote source name, shown where the logo goes when a slide has no logo */
.press-quote-source {
  position: absolute;
  left: 60.5px;
  top: 349px;
  margin: 0;
  font-family: "Futura", sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 52px;
  color: #000000;
  text-transform: uppercase;
}

@media (max-width: 992px) {
  .press-quote-source {
    position: static;
    margin-top: 24px;
    font-size: 28px;
    line-height: 34px;
  }
}