/* hero-carousel.css -- homepage hero carousel (getHeroCarouselHTML() in
   makeHTML_unified_v23.py). Reuses the site's own existing
   .sm-matchup-tile "mini" card unchanged (see sharpmodels-unified-v19.css
   -- these rules only add the horizontally-scrollable strip wrapper
   around it, a fixed card width so ~2.3 are visible at once, and the
   one genuinely new piece: a 3-way probability bar for soccer's
   win/draw/loss tiles, since the 2-way NFL/MLB tile only ever needs
   two fill colors. */

.sm-hero-carousel {
  position: relative;
  max-width: 1180px;
  margin: 28px auto 0;
  padding: 0 24px;
}

.sm-hero-carousel__viewport {
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  -ms-overflow-style: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.sm-hero-carousel__viewport::-webkit-scrollbar {
  display: none;
}

.sm-hero-carousel__track {
  display: flex;
  gap: 16px;
  padding: 2px 2px 10px;
}

.sm-hero-carousel__card {
  position: relative;
  flex: 0 0 auto;
  width: 43%;
  min-width: 300px;
  max-width: 400px;
  scroll-snap-align: start;
}

/* Small sport-tag pill overlaid on each card -- see getHeroCarouselHTML()'s
   own docstring for why this lives on the carousel, not the shared tile.
   Sits just inside the card's top edge, not above it -- the carousel
   viewport's own overflow-x:auto silently forces overflow-y to clip too
   (same class of bug as an earlier "More Soccer" dropdown fix), so
   anything positioned ABOVE the card here would get its top sliced off. */
.sm-hero-carousel__sport-tag {
  position: absolute;
  top: 10px;
  left: 18px;
  z-index: 2;
  font-family: var(--font-heading, "Oswald", Arial, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--sm-color-link, #163f78);
  padding: 4px 10px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(19, 35, 58, 0.2);
}

/* The carousel's flex row already stretches every .sm-hero-carousel__card
   to match the tallest one (default align-items:stretch) -- but a
   percentage height only resolves against an ancestor with its OWN
   real height, and .sm-matchup-tile__link-wrapper (the site's existing
   <a> wrapper, display:block/height:auto) sat in between, breaking that
   chain. Without this, cards fell back to their own natural content
   height instead of the stretched slot -- a 3-way (soccer) tile is
   taller than a 2-way (US sport) tile, so cards visibly varied in
   height (cardsh.png). */
.sm-hero-carousel__card .sm-matchup-tile__link-wrapper {
  display: block;
  height: 100%;
}

/* The existing .sm-matchup-tile already sets its own border/radius/
   background/padding -- just make sure it fills this fixed-width slot
   rather than the 2-column grid it normally sits in, and reserve extra
   top padding (scoped to the carousel only) so the sport-tag pill has
   clean room above the date line instead of overlapping it. */
.sm-hero-carousel__card .sm-matchup-tile {
  height: 100%;
  padding-top: 40px;
  display: flex;
  flex-direction: column;
}

/* With the tile now a real flex column filling the stretched slot, pin
   the footer button to the bottom of whatever extra space that leaves
   (a shorter 2-way US-sport card vs. a taller 3-way soccer card)
   instead of leaving it stranded mid-card with blank space below it. */
.sm-hero-carousel__card .sm-matchup-tile__footer {
  margin-top: auto;
  padding-top: 12px;
}

/* ---------------- Soccer's 3-way bar ---------------- */
/* Same visual language as the site's existing 2-way
   .sm-matchup-tile__bar (grid-column fill), extended to three simple
   width-percent divs since a middle "draw" segment doesn't fit a
   2-column grid cleanly. Deliberately new, unscoped classes -- soccer's
   OWN 3-way bar treatment (.ssm-scope .sm-matchup-tile__bar-draw) only
   applies inside soccer's own pages, not the homepage. */
.sm-hero-carousel__bar3 {
  display: flex;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: #e8eef6;
}

.sm-hero-carousel__bar-draw {
  background: #cbd5e1;
}

.sm-hero-carousel__crest-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-family: var(--font-heading, "Oswald", Arial, sans-serif);
  font-weight: 700;
  font-size: 15px;
}

/* ---------------- Controls ---------------- */

.sm-hero-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #dfe6ee;
  background: #ffffff;
  color: var(--sm-color-link, #163f78);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(19, 35, 58, 0.14);
}

.sm-hero-carousel__arrow:hover {
  background: var(--sm-color-link, #163f78);
  color: #ffffff;
}

.sm-hero-carousel__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.sm-hero-carousel__arrow:disabled:hover {
  background: #ffffff;
  color: var(--sm-color-link, #163f78);
}

.sm-hero-carousel__arrow--prev { left: -4px; }
.sm-hero-carousel__arrow--next { right: -4px; }

.sm-hero-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 4px;
}

.sm-hero-carousel__dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  background: #d3dbe4;
  padding: 0;
  cursor: pointer;
}

/* The visible dot stays tiny, but with up to 18+ of them packed edge to
   edge, a 7px visual target is well under the ~24px minimum a thumb can
   reliably hit -- this invisible, absolutely-positioned hit area (doesn't
   affect layout/spacing) gives each one a real touch target on mobile. */
.sm-hero-carousel__dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
}

.sm-hero-carousel__dot.is-active {
  background: var(--sm-color-brand-accent, #00b4d8);
  width: 18px;
  border-radius: 4px;
}

/* Compact hero text once the carousel is the top focal point. */
.sm-home-hero--compact { padding-top: 8px; }
.sm-home-hero--compact .sm-home-hero__title { font-size: clamp(1.7rem, 3vw, 2.4rem); }

@media (max-width: 720px) {
  .sm-hero-carousel { padding: 0 12px; }
  .sm-hero-carousel__card { width: 82%; min-width: 0; }
  .sm-hero-carousel__arrow { display: none; }
}