/* ==========================================================================
   FOLLOW THE ACTION — photo mosaic (Direction A)
   James's verdict 2026-10-16: full photo mosaic for the /sports/ league grid.
   Seamless: zero gaps, zero dividers, zero borders, zero colored dots.
   Real photo behind every tile; bold white name on a gradient scrim
   (hero-blend rule: scrims only, never hard panels). Scoped to the Leagues
   widget in the sports rail — nothing else on the page is touched.
   ========================================================================== */

/* The widget sheds its box: no border, no fill, no padding — the photo wall
   runs flush to the rail edges. */
.sp-rail .sp-widget.fm {
  background: transparent; border: 0; border-radius: 0;
  padding: 0; overflow: visible;
}
.sp-rail .sp-widget.fm > .sp-sec-head { margin-bottom: 12px; padding: 0 2px; }

/* The mosaic itself: one continuous wall of photography. The block keeps the
   site's 14px outer radius so it sits natively beside the Board widget;
   inside, tiles butt edge-to-edge with no gap at any size. */
.sp-rail .sp-widget.fm .fm-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-radius: 14px; overflow: hidden; background: #000;
}

/* Tiles reset every trace of the old boxed quick-link treatment. */
.sp-rail .sp-widget.fm .fm-tile {
  position: relative; display: block; aspect-ratio: 6 / 5;
  overflow: hidden; background: #0A0A0A;
  border: 0; border-radius: 0; padding: 0; margin: 0;
  color: #FFF; text-decoration: none;
}
.sp-rail .sp-widget.fm .fm-tile:hover { background: #0A0A0A; text-decoration: none; }
.sp-rail .sp-widget.fm .fm-tile--wide { grid-column: 1 / -1; aspect-ratio: 31 / 10; }

.sp-rail .sp-widget.fm .fm-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: brightness(.94) saturate(1.03);
  transition: transform .35s ease;
}
.sp-rail .sp-widget.fm .fm-tile:hover .fm-img { transform: scale(1.045); }
.sp-rail .sp-widget.fm .fm-tile:focus-visible { outline: 2px solid #FFF; outline-offset: -2px; }

/* Gradient scrim only — the label zone is deepened until white text measures
   >= 4.5:1 against the scrimmed photo (verified per tile at build time). */
.sp-rail .sp-widget.fm .fm-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0,0,0,.02) 38%, rgba(0,0,0,.55) 72%, rgba(0,0,0,.90) 100%);
}

.sp-rail .sp-widget.fm .fm-label {
  position: absolute; left: 14px; bottom: 11px; z-index: 2;
  font-size: 16.5px; font-weight: 800; letter-spacing: .01em; line-height: 1.1;
  color: #FFF; text-shadow: 0 1px 10px rgba(0,0,0,.45);
}
.sp-rail .sp-widget.fm .fm-label .fm-dot { color: #E10600; font-style: normal; }
.sp-rail .sp-widget.fm .fm-tile--wide .fm-label { font-size: 19px; }

/* Photo credits — the house fine print, under the grid. */
.sp-rail .sp-widget.fm .fm-credits {
  margin: 10px 2px 0; font-size: 10.5px; line-height: 1.55;
  color: var(--pv-ivory-faint, #7E858B);
}

/* Laptop composition (the rail is 340px): NFL becomes a full-width feature
   tile on top, the rest run taller — a deliberate wide composition of the
   same language, not the phone grid stretched. */
@media (min-width: 1024px) {
  .sp-rail .sp-widget.fm .fm-tile { aspect-ratio: 16 / 11; }
  .sp-rail .sp-widget.fm .fm-tile--feature { grid-column: 1 / -1; aspect-ratio: 16 / 8; }
  .sp-rail .sp-widget.fm .fm-tile--wide { aspect-ratio: 31 / 10; }
  .sp-rail .sp-widget.fm .fm-label { font-size: 17px; }
  .sp-rail .sp-widget.fm .fm-tile--feature .fm-label,
  .sp-rail .sp-widget.fm .fm-tile--wide .fm-label { font-size: 20px; }
  /* With NFL spanning as the feature, the 10th tile (All Teams) would leave
     a black void beside it — it takes a full-width band too, closing the
     wall symmetrically with Stats Hub. (Tile order is a fixed 11.) */
  .sp-rail .sp-widget.fm .fm-grid .fm-tile:nth-child(10) {
    grid-column: 1 / -1; aspect-ratio: 31 / 10;
  }
  .sp-rail .sp-widget.fm .fm-grid .fm-tile:nth-child(10) .fm-label { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-rail .sp-widget.fm .fm-img { transition: none; }
}