/* Generated by tools/build-rtl-css.mjs from sports.css — do not edit; edit sports.css and re-run. */
/* /sports and the per-sport pages (Views/Sports). Builds on products.css, which these
   pages also load. Arabic gets sports.rtl.css (tools/build-rtl-css.mjs). */

.sp--racquet { --acc: #10a6d6; }
.sp--team { --acc: #1f9d6b; }
.sp--combat { --acc: #e5484d; }
.sp--endurance { --acc: #e8930c; }
.sp--individual { --acc: #8e4ec6; }
.sp--traditional { --acc: #c2410c; }

/* hero */
.sp-hero { padding-bottom: clamp(32px, 4vw, 56px); }
.sp-hero .pd-title { max-width: 18ch; }
.sp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px !important;
  font: 700 13px/1.3 Manrope, sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--acc-ink);
}
.sp-eyebrow img { width: 22px; height: 22px; }
.sp-h1 { font-size: clamp(32px, 4.2vw, 52px); }
.sp-visual { display: grid; place-items: center; }
.sp-visual img { width: 100%; max-width: 560px; height: auto; border-radius: 20px; box-shadow: 0 40px 60px -40px rgba(12, 15, 44, .45); }
.sp-visual--icon img {
  width: clamp(120px, 16vw, 180px);
  height: auto;
  padding: clamp(28px, 4vw, 44px);
  border-radius: 36px;
  background: #fff;
  box-shadow: 0 30px 60px -36px rgba(12, 15, 44, .4), inset 0 0 0 1px var(--pm-line);
}
.sp-sec--first { padding-top: clamp(40px, 5vw, 64px); }
.sp-h3 { font: 700 20px/1.25 Manrope, sans-serif; letter-spacing: -.01em; }

/* long-form sections: heading column + reading column */
.sp-section { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.sp-section-head { position: sticky; top: calc(var(--pd-sticky) + 90px); }
.sp-section-head .pd-h2 { margin-top: 0 !important; }
.sp-prose { display: grid; gap: 18px; max-width: 70ch; }
.sp-prose p { font: 400 17px/1.75 Manrope, sans-serif; color: var(--pm-text); text-wrap: pretty; }
.sp-points { display: grid; gap: 12px; margin-top: 6px !important; }
.sp-points li {
  position: relative;
  padding: 16px 20px 16px 18px;
  border-radius: 14px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--pm-line);
  border-inline-start: 3px solid var(--acc);
  font: 400 15.5px/1.6 Manrope, sans-serif;
  color: var(--pm-text);
}
.pd-sec--soft .sp-points li { background: #fff; }
.sp-points strong { display: block; margin-bottom: 2px; font-weight: 700; color: var(--pm-ink); }

/* sport tiles: /sports grid and "more sports" */
.sp-cat { padding-block: clamp(28px, 4vw, 48px); }
.sp-cat + .sp-cat { padding-top: 0; }
.sp-cat-title { margin: 0 0 22px !important; font-size: clamp(22px, 2.4vw, 30px); text-align: start; }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.sp-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  height: 100%;
  min-height: 132px;
  padding: 18px;
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--pm-line);
  color: var(--pm-ink) !important;
  transition: box-shadow .2s ease, transform .2s ease;
}
a.sp-tile:hover, a.sp-tile:focus-visible { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--pm-brand), 0 18px 36px -28px rgba(12, 15, 44, .5); }
.sp-tile-icon { width: 32px; height: 32px; margin-bottom: 8px; }
.sp-tile-name { font: 700 17px/1.25 Manrope, sans-serif; }
.sp-tile-live { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font: 600 12px/1 Manrope, sans-serif; color: #c2410c; }
.sp-tile-live span { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .18); }
.sp-tile--plain { opacity: .85; }
.sp-related .pd-more-link { margin-top: 22px !important; }

@media (max-width: 991.98px) {
  .sp-section { grid-template-columns: 1fr; }
  .sp-section-head { position: static; }
}
@media (max-width: 575.98px) {
  .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sp-tile { min-height: 116px; padding: 14px; }
  .sp-prose p { font-size: 16px; }
}