/* ============================================================
   Scrolling Headlines — Ticker-style text below the hero
   Multilingual football headlines in varied fonts
   ============================================================ */

.scrolling-headlines {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow: hidden;
  padding: 0;
  height: 264px;
}

.sh-row {
  display: flex;
  flex-direction: row;
  width: max-content;
  will-change: transform;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 0;
  position: absolute;
  left: 0;
}

.sh-row:nth-child(1) { top: 0; }
.sh-row:nth-child(2) { top: 42px; }
.sh-row:nth-child(3) { top: 84px; }
.sh-row:nth-child(4) { top: 126px; }
.sh-row:nth-child(5) { top: 168px; }
.sh-row:nth-child(6) { top: 210px; }

.sh-row-left  { animation: sh-scroll-left 120s linear infinite; }
.sh-row-right { animation: sh-scroll-right 120s linear infinite; }
.sh-row-slow.sh-row-left  { animation-duration: 150s; }
.sh-row-slow.sh-row-right { animation-duration: 140s; }

@keyframes sh-scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes sh-scroll-right {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

.sh-track {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}

.sh-item {
  white-space: nowrap;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  line-height: 1.3;
  color: var(--text-muted, #8b8b8b);
  padding: 0 20px;
  opacity: 0.65;
  visibility: visible;
  display: inline-block;
}

.sh-dot {
  color: var(--border, rgba(0,0,0,0.15));
  font-size: 1.6rem;
  flex-shrink: 0;
  user-select: none;
  visibility: visible;
  display: inline-block;
}

/* ============================================================
   Font Variations
   Serif fonts for .sh-serif variants, Sans-serif for others
   ============================================================ */

.sh-serif {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  font-weight: 500;
}

.sh-serif-italic {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  font-weight: 500;
  font-style: italic;
}

.sh-sans {
  font-family: "Inter", sans-serif;
  font-weight: 400;
}

.sh-sans-bold {
  font-family: "Inter", sans-serif;
}

.sh-condensed {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: clamp(1.3rem, 2.8vw, 1.7rem);
}

.sh-condensed-bold {
  font-family: "Inter", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-size: clamp(1.3rem, 2.8vw, 1.7rem);
}

.sh-mono {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  letter-spacing: -0.3px;
}

.sh-slab {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  font-weight: 500;
  letter-spacing: 0.2px;
}

/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .sh-row {
    animation: none !important;
  }
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 768px) {
  .scrolling-headlines { height: 216px; }
  .sh-row:nth-child(1) { top: 0; }
  .sh-row:nth-child(2) { top: 34px; }
  .sh-row:nth-child(3) { top: 68px; }
  .sh-row:nth-child(4) { top: 102px; }
  .sh-row:nth-child(5) { top: 136px; }
  .sh-row:nth-child(6) { top: 170px; }
  .sh-item { font-size: clamp(1.3rem, 3.5vw, 1.8rem); padding: 0 14px; }
  .sh-row-left  { animation-duration: 90s; }
  .sh-row-right { animation-duration: 90s; }
  .sh-row-slow.sh-row-left  { animation-duration: 110s; }
  .sh-row-slow.sh-row-right { animation-duration: 105s; }
}

@media (max-width: 480px) {
  .scrolling-headlines { height: 186px; }
  .sh-row:nth-child(1) { top: 0; }
  .sh-row:nth-child(2) { top: 30px; }
  .sh-row:nth-child(3) { top: 60px; }
  .sh-row:nth-child(4) { top: 90px; }
  .sh-row:nth-child(5) { top: 120px; }
  .sh-row:nth-child(6) { top: 150px; }
  .sh-item { font-size: clamp(1.1rem, 3vw, 1.5rem); padding: 0 12px; }
  .sh-row-left  { animation-duration: 70s; }
  .sh-row-right { animation-duration: 70s; }
  .sh-row-slow.sh-row-left  { animation-duration: 85s; }
  .sh-row-slow.sh-row-right { animation-duration: 80s; }
}

@media (min-width: 768px) {
  .scrolling-headlines {
    height: 180px;
  }

  .sh-row:nth-child(1) { top: 0; }
  .sh-row:nth-child(2) { top: 30px; }
  .sh-row:nth-child(3) { top: 60px; }
  .sh-row:nth-child(4) { top: 90px; }
  .sh-row:nth-child(5) { top: 120px; }
  .sh-row:nth-child(6) { top: 150px; }

  .sh-item {
    font-size: clamp(1.1rem, 2vw, 1.55rem);
    padding: 0 14px;
  }
}