/* ════════════════════════════════════════════════════════════════
   SPRINT-JELØY MATCHES — Stylesheet
   ════════════════════════════════════════════════════════════════
   Edit the CSS variables in the :root block below to recolor or
   restyle the entire module. Most customizations don't require
   touching any other rules in this file.
   ════════════════════════════════════════════════════════════════ */

.sj-module {

  /* ──────────────────────────────────────────────────────────────
     EDIT THESE — colors, fonts, sizing
     ──────────────────────────────────────────────────────────── */

  /* Brand colors */
  --sj-primary:    #c8102e;   /* main accent (next-match background)    */
  --sj-primary-dk: #a40d24;   /* darker accent (bottom strip on next)   */

  /* Neutral palette */
  --sj-ink:        #111418;   /* main text color                        */
  --sj-paper:      #ffffff;   /* used on crest fallback circles         */
  --sj-soft:       #f4f5f7;   /* past-card background                   */
  --sj-muted:      #6b7280;   /* meta / score separator color           */
  --sj-line:       #e6e8ec;   /* hairlines and borders                  */

  /* Outcome colors (currently unused but available if you want
     to colorize the score on past cards by W/L/D) */
  --sj-win:        #0a7c3a;
  --sj-loss:       var(--sj-primary);
  --sj-draw:       #8a8e96;

  /* Typography */
  --sj-display:    "Oswald", "Barlow Condensed", "Arial Narrow", sans-serif;
  --sj-body:       "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Spacing */
  --sj-gap:        1rem;          /* gap between cards in the slider    */
  --sj-card-pad:   0.85rem 1rem 0.7rem;
  --sj-card-min-h: 110px;
  --sj-radius:     4px;

  /* Sizing */
  --sj-crest-size-prev: 44px;
  --sj-crest-size-next: 48px;
  --sj-score-size:      1.55rem;
  --sj-kickoff-size:    1.4rem;

  /* Cards in the slider */
  /* Each card is a fixed pixel width. How many are visible at once
     depends on the container width — wider column = more cards.    */
  --sj-card-width:      248px;

  /* ──────────────────────────────────────────────────────────────
     END EDIT SECTION — usually no need to change anything below
     ──────────────────────────────────────────────────────────── */

  font-family: var(--sj-body);
  color: var(--sj-ink);

  /* Width robustness ─────────────────────────────────────────── */
  /* `width: 100%` alone is not enough when the parent is a flex   */
  /* container (e.g. some Beaver Builder columns). Flex items have */
  /* `flex-shrink: 1` and `flex-basis: auto`, so they can collapse */
  /* to zero before the inner content has measurable width.        */
  /* The combination below works as both a block element and as a  */
  /* flex/grid item without depending on the parent's behaviour.   */
  display: block;
  width: 100%;
  flex: 1 1 100%;          /* if parent IS a flex container        */
  box-sizing: border-box;

  container-type: inline-size;
  -webkit-font-smoothing: antialiased;
}

/* Beaver Builder HTML module wrapper: when our module is inside
   it, the wrapper itself can have zero width because Beaver Builder
   doesn't always give its HTML modules an explicit width. We force
   the wrapper to fill its parent.

   Two layers: a precise :has() rule for modern browsers (scoped to
   wrappers that actually contain our module), and a broad fallback
   for older browsers. The fallback affects all Beaver Builder HTML
   modules site-wide, which is harmless (they normally want full
   column width anyway) but kept secondary to be polite.            */
.fl-html:has(> .sj-module),
.fl-html:has(.sj-module),
.fl-module-content:has(.sj-module),
.fl-html-content:has(> .sj-module) {
  display: block;
  width: 100%;
  flex: 1 1 100%;
  min-width: 0;
}

/* Fallback: applies to BB HTML modules generally. Safe because BB
   modules already want to fill their column; we're not changing
   their effective behavior, just guaranteeing it.                  */
@supports not selector(:has(*)) {
  .fl-html,
  .fl-html-content,
  .fl-module-fl-html .fl-module-content {
    display: block;
    width: 100%;
    flex: 1 1 100%;
    min-width: 0;
  }
}


/* SLIDER TRACK ───────────────────────────────────────────────── */

.sj-slider-wrap {
  position: relative;        /* positioning context for the fade overlay */
}

.sj-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--sj-card-width);
  gap: var(--sj-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: auto;          /* prevents theme smooth-scroll from lagging drag */
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
  overscroll-behavior-x: contain;
}
.sj-track::-webkit-scrollbar { display: none; }
.sj-track.is-dragging  { cursor: grabbing; }
.sj-track.is-dragging .sj-card { pointer-events: none; }

/* Left-edge fade overlay. Fixed on the left edge of the viewport,
   sits on top of the cards as they scroll under it. Indicates "more
   content to the left."
   When the user has scrolled all the way left (scrollLeft === 0),
   the oldest card sits flush against the left edge and we hide the
   fade so the card is fully readable. The .sj-at-leftmost class
   on the wrapper is added by slider.js when scrollLeft <= 2px.    */
.sj-fade {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 114px;
  pointer-events: none;
  background: linear-gradient(270deg,
    rgba(0, 83, 159, 0)   0%,
    rgb(0, 83, 159)       81.51%);
  z-index: 2;
  opacity: 1;
  transition: opacity 0.18s ease;
}
.sj-slider-wrap.sj-at-leftmost .sj-fade {
  opacity: 0;
}


/* CARD (shared) ───────────────────────────────────────────────── */

.sj-card {
  display: flex; flex-direction: column;
  min-height: var(--sj-card-min-h);
  background: var(--sj-soft);
  color: inherit;
  text-decoration: none;
  border-radius: var(--sj-radius);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
}
.sj-card:hover,
.sj-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px rgba(11, 31, 58, 0.25);
  outline: none;
}

.sj-placeholder {
  margin: auto; padding: 1.5rem 0;
  color: var(--sj-muted);
  font-size: 0.85rem;
  text-align: center;
}
.sj-placeholder--inverse { color: rgba(255,255,255,0.85); }


/* PAST CARDS ──────────────────────────────────────────────────── */

.sj-prev {
  display: grid; grid-template-rows: 1fr auto;
  height: 100%;
  padding: var(--sj-card-pad);
  box-sizing: border-box;
}
.sj-prev__row {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.6rem;
}
.sj-prev__crest {
  display: flex; align-items: center; justify-content: center;
  width: var(--sj-crest-size-prev); height: var(--sj-crest-size-prev);
}
.sj-prev__crest img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sj-prev__crest--home { justify-self: start; }
.sj-prev__crest--away { justify-self: end; }
.sj-prev__fallback {
  width: var(--sj-crest-size-prev);
  height: var(--sj-crest-size-prev);
  border-radius: 50%;
  background: var(--sj-paper);
  border: 1px solid var(--sj-line);
  display: flex; align-items: center; justify-content: center;
  font: 700 0.85rem/1 var(--sj-display);
  color: var(--sj-ink);
  letter-spacing: 0.03em;
}
.sj-prev__score {
  display: inline-flex; align-items: baseline; gap: 0.4rem;
  font: 700 var(--sj-score-size)/1 var(--sj-display);
  color: var(--sj-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  padding: 0 0.3rem;
}
.sj-prev__score-sep {
  font-size: 0.85rem;
  color: var(--sj-muted);
  align-self: center;
}
.sj-prev__meta {
  margin-top: 0.6rem;
  text-align: center;
  font-size: 0.72rem;
  color: var(--sj-muted);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}


/* NEXT CARD ───────────────────────────────────────────────────── */

.sj-card--next {
  background: var(--sj-primary);
  color: #fff;
}
.sj-next {
  display: grid; grid-template-rows: 1fr auto;
  height: 100%;
}
.sj-next__row {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.1rem;
}
.sj-next__crest {
  display: flex; align-items: center; justify-content: center;
  width: var(--sj-crest-size-next);
  height: var(--sj-crest-size-next);
}
.sj-next__crest img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}
.sj-next__crest--home { justify-self: start; }
.sj-next__crest--away { justify-self: end; }
.sj-next__fallback {
  width: var(--sj-crest-size-next);
  height: var(--sj-crest-size-next);
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 700 0.9rem/1 var(--sj-display);
  letter-spacing: 0.03em;
}
.sj-next__when {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.3rem;
  text-align: center;
  line-height: 1;
}
.sj-next__when-day {
  font: 700 0.78rem/1 var(--sj-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}
.sj-next__when-time {
  font: 600 0.82rem/1 var(--sj-body);
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.sj-next__strip {
  display: flex; justify-content: space-between; align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1.1rem;
  background: var(--sj-primary-dk);
  color: #fff;
}
.sj-next__venue {
  font: 600 0.9rem/1.1 var(--sj-body);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0;
}
.sj-next__time {
  font: 700 var(--sj-kickoff-size)/1 var(--sj-display);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}


/* MOBILE ──────────────────────────────────────────────────────── */
/* No special rule needed — cards are fixed-width, so on a narrow  */
/* container the user just sees fewer of them and scrolls.         */