@charset "UTF-8";
/* ==========================================================================
   THE SKAGIT CASINO RESORT — THE JACKPOT BOARD
   Home-page band for [skagit_jackpot_modern_feed]
   --------------------------------------------------------------------------
   Layer 5. Load order:
     1. skagit-design-system.css   <- tokens (REQUIRED, this file consumes them)
     2. skagit-components.css
     3. skagit-responsive.css
     4. skagit-jackpot.css         <- .skagit-jp scope root, eyebrow, empty
                                      state, .skagit-jp-reveal motion contract,
                                      .skagit-jp-visually-hidden, .skagit-jp-chevron
     5. skagit-jackpot-feed.css    <- this file
   Enqueue handle: `skagit-jackpot-feed`, dependency `skagit-jackpot`.

   OWNERSHIP / COLLISION NOTE
   Every selector here is `.skagit-jp-board-*` and lives under the `.skagit-jp`
   scope root. It shares no class name with skagit-jackpot.css §9
   (.skagit-jp-feed, .skagit-jp-carousel, .skagit-jp-slide, .skagit-jp-btn,
   .skagit-jp-controls…), which styled the carousel this band replaced — those
   rules are now unreachable and can be deleted independently, at zero risk.
   Nothing here overrides anything there and nothing there reaches in here, so
   there is no !important arms race and this file contains no !important at all
   outside the two guard blocks at the bottom.

   THE DESIGN, IN ONE PARAGRAPH
   These images are not portraits. They are 2560x1440 screen captures of the
   casino floor's jackpot display board, and each one already carries the word
   JACKPOT, the game name, a machine badge and the amount burned into the
   pixels. So the component is a BOARD, not a gallery: one lead result at the
   full width of the panel — width is what makes the figure legible — and the
   rest as a row of tiles beneath it. Every frame is 16:9 and every image is
   `object-fit: contain`, which is the whole fix: nothing is cropped, by this
   design or by any future upload of a different shape.

   THINGS THIS FILE DELIBERATELY DOES NOT DO
   - No `transform: scale()` on the image, ever, on any state. The classic
     "Ken Burns" hover zoom crops the frame, and on these captures what it
     crops is the amount. Hover feedback is carried by the border, the corner
     brackets and the shadow instead.
   - No text over a photograph. The captures are bright, high-contrast and
     unpredictable; the only caption block sits BELOW the frame on a solid
     --sk-navy-800 ground, and it only renders when there is a real name or a
     parsed amount to put in it.
   - No aggregate figure of any kind — not a total, not a count.
   ========================================================================== */

/* ==========================================================================
   1. LOCAL TOKENS
   ========================================================================== */

.skagit-jp-board-band {
  /* The one number this whole redesign exists for. */
  --skagit-jp-board-frame: 16 / 9;

  /* Track floor for the tile row. 13rem keeps three tiles across an ~880px
     board at desktop and collapses to a single stacked column at 360px,
     from one rule — see §6. */
  --skagit-jp-board-tile-min: 13rem;

  --skagit-jp-board-radius: var(--sk-radius-lg);
  --skagit-jp-board-brass: rgba(212, 175, 55, 0.34);
}

/* ==========================================================================
   2. THE BAND
   ========================================================================== */

.skagit-jp-board-band {
  position: relative;
  isolation: isolate;
  /* `hidden`, not `clip`: nothing inside is sticky, and this guarantees the
     band can never contribute a horizontal scrollbar at any width. */
  overflow: hidden;
  background-image: var(--sk-tex-flute), var(--sk-grad-night);
  background-size: 9px 100%, 100% 100%;
  border-block: 1px solid rgba(212, 175, 55, 0.22);
}

.skagit-jp-board-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sk-space-xl);
  width: 100%;
  max-width: var(--sk-container);
  margin-inline: auto;

  /* TIGHTER THAN THE OTHER HOME BANDS, ON PURPOSE.
     This was `--sk-space-2xl` top and bottom, the same as the sections that
     carry a page's main content. With the lead capture removed the band is a
     header and one row of thumbnails — full section padding around that much
     content is most of what made it read as oversized. */
  padding: var(--sk-space-xl) var(--sk-gutter);
}

/* Last section on the page, so its lower border sits directly against the
   footer's top edge. One line, not two. */
.skagit-home-jackpots .skagit-jp-board-band { border-block-end: 0; }

/* ==========================================================================
   3. THE COPY PANEL
   ========================================================================== */

.skagit-jp-board-pitch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

/* .skagit-jp-eyebrow (skagit-jackpot.css §3) supplies the metrics; only the
   colour is contextual. 11.6:1 on --sk-navy-800, the LIGHTEST stop of
   --sk-grad-night and therefore the worst case anywhere in the band. */
.skagit-jp-board-eyebrow { color: var(--sk-gold-300); }

/* An <h2>, so it already inherits --sk-font-display from the design system's
   `h1..h6 { font-family: … !important }`. Only the colour needs restating,
   and a class (0,1,0) beats the element selector (0,0,1) without !important —
   the design system's heading COLOUR is not marked important, only its family. */
.skagit-jp-board-title {
  margin: 0;
  font-size: var(--sk-fs-3xl);
  line-height: var(--sk-lh-heading);
  letter-spacing: var(--sk-tracking-display);
  color: var(--sk-white);               /* 15.8:1 on --sk-navy-800 */
  text-wrap: balance;
}

.skagit-jp-board-rule {
  width: clamp(56px, 7vw, 88px);
  height: 2px;
  margin: var(--sk-space-sm) 0;
  border: 0;
  border-radius: 2px;
  background: var(--sk-grad-brass);
  box-shadow: 0 1px 6px rgba(212, 175, 55, 0.3);
}

.skagit-jp-board-desc {
  max-width: var(--sk-measure-narrow);
  margin: 0 0 var(--sk-space-md);
  font-size: var(--sk-fs-md);
  line-height: var(--sk-lh-loose);
  color: var(--sk-text-on-dark-muted);  /* 8.9:1 on --sk-navy-800 */
}

/* .sk-btn / .sk-btn--primary carry all the paint (skagit-buttons.css §2:
   --sk-navy-950 on --sk-grad-brass, 6.1:1 at the gradient's darkest stop).
   Nothing is overridden here, which is why this file needs no !important to
   survive style.css's `button, input[type="button"], input[type="submit"], .elementor-button` rule. */
.skagit-jp-board-cta { align-self: flex-start; }

.skagit-jp-board-cta .skagit-jp-chevron {
  transition: transform var(--sk-dur-base) var(--sk-ease-out);
}

.skagit-jp-board-cta:hover .skagit-jp-chevron,
.skagit-jp-board-cta:focus-visible .skagit-jp-chevron {
  transform: rotate(-45deg) translate(2px, 2px);
}

/* ==========================================================================
   4. THE BOARD PANEL
   --------------------------------------------------------------------------
   Solid --sk-navy-950, i.e. DARKER than the band it sits on, so it reads as a
   recessed panel and every contrast ratio inside it is measured against one
   known hex rather than against a point on a gradient.
   ========================================================================== */

.skagit-jp-board {
  position: relative;
  display: grid;
  gap: var(--sk-space-sm);
  min-width: 0;
  padding: clamp(0.75rem, 1.2vw, 1.25rem);
  border: 1px solid var(--sk-border-on-dark);
  border-radius: var(--skagit-jp-board-radius);
  background-color: var(--sk-navy-950);
  box-shadow: var(--sk-shadow-dark), var(--sk-rim-light);
}

/* The brass edge along the top of the panel — the design system's signature
   rule, doing structural work. Inset by the radius so it never pokes out of
   the rounded corners. */
.skagit-jp-board::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--skagit-jp-board-radius);
  right: var(--skagit-jp-board-radius);
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--sk-grad-brass);
}

.skagit-jp-board--empty { display: block; }

/* ---- 4.1 Header rail ----------------------------------------------------
   Two facts, both true, neither derived: what you are looking at, and when it
   happened. The month is printed HERE, once — not under every tile, which
   would recreate the repeated-caption problem the old design had with
   "A Skagit Winner". */

.skagit-jp-board-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem var(--sk-space-sm);
  padding: 0.35rem 0.4rem 0.7rem;
  border-bottom: 1px solid var(--sk-border-on-dark);
}

.skagit-jp-board-label {
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-xs);
  font-weight: var(--sk-weight-bold);
  letter-spacing: var(--sk-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--sk-text-on-dark-muted);  /* 10.8:1 on --sk-navy-950 */
}

.skagit-jp-board-dateline {
  margin: 0;
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-xs);
  font-weight: var(--sk-weight-bold);
  letter-spacing: var(--sk-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--sk-gold-300);            /* 14.1:1 on --sk-navy-950 */
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  text-align: right;
}

.skagit-jp-board-dash { margin-inline: 0.4em; opacity: 0.7; }

/* ---- 4.2 Footnote -------------------------------------------------------
   Without this line a screen capture of a display board reads as an odd stock
   photo. With it, it reads as evidence. */

.skagit-jp-board-note {
  margin: 0;
  padding: 0.1rem 0.4rem 0.2rem;
  font-size: var(--sk-fs-sm);
  line-height: var(--sk-lh-snug);
  color: var(--sk-text-on-dark-muted);  /* 10.8:1 on --sk-navy-950 */
  text-wrap: pretty;
}

/* ==========================================================================
   5. A TILE
   ========================================================================== */

.skagit-jp-board-tile {
  position: relative;
  display: block;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--sk-border-on-dark);
  border-radius: var(--sk-radius-md);
  background-color: var(--sk-navy-950);
  transition:
    border-color var(--sk-dur-base) var(--sk-ease-out),
    box-shadow var(--sk-dur-base) var(--sk-ease-out);
}

/* No lift, no scale on hover. These tiles are not links, and a card that
   rises under the cursor promises a click that is not there. The feedback is
   a brighter edge and the corner brackets — ornament, not affordance. */
.skagit-jp-board-tile:hover {
  border-color: var(--skagit-jp-board-brass);
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.18), var(--sk-shadow-dark);
}

/* ---- 5.1 The brass hairline -------------------------------------------- */

.skagit-jp-board-hairline {
  display: block;
  height: 2px;
  background: var(--sk-grad-brass);
  transform-origin: left center;
}

/* ---- 5.2 The 16:9 frame -------------------------------------------------
   THIS IS THE FIX. The source images are 2560x1440. The previous design put
   them in a 4:5 portrait frame with `object-fit: cover`, which discarded ~64%
   of the width — enough to render "JACKPOT" as "ACKPO" and remove the game
   name entirely.

   `contain` rather than `cover` even though the frame ratio already matches
   the sources: `cover` is only lossless while EVERY upload is exactly 16:9,
   and the moment somebody uploads a phone photo it silently starts cutting
   the amount off again. `contain` letterboxes instead, and the letterbox is
   --sk-navy-950 — the same colour as the panel — so a correctly shaped image
   shows no bars at all and a wrongly shaped one degrades invisibly. */

.skagit-jp-board-frame {
  position: relative;
  display: block;
  aspect-ratio: var(--skagit-jp-board-frame);
  overflow: hidden;
  background-color: var(--sk-navy-950);
}

.skagit-jp-board-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* ---- 5.3 Deco corner brackets ------------------------------------------ */

.skagit-jp-board-corners {
  position: absolute;
  inset: 0.55rem;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--sk-dur-base) var(--sk-ease-out);
}

.skagit-jp-board-corners::before,
.skagit-jp-board-corners::after {
  content: "";
  position: absolute;
  width: 1.15rem;
  height: 1.15rem;
  border-color: var(--sk-gold-300);
  transition: transform var(--sk-dur-slow) var(--sk-ease-spring);
}

.skagit-jp-board-corners::before {
  top: 0;
  left: 0;
  border-top: 1px solid;
  border-left: 1px solid;
  transform: translate(5px, 5px);
}

.skagit-jp-board-corners::after {
  right: 0;
  bottom: 0;
  border-right: 1px solid;
  border-bottom: 1px solid;
  transform: translate(-5px, -5px);
}

.skagit-jp-board-tile:hover .skagit-jp-board-corners { opacity: 1; }

.skagit-jp-board-tile:hover .skagit-jp-board-corners::before,
.skagit-jp-board-tile:hover .skagit-jp-board-corners::after { transform: none; }

/* ---- 5.4 The lead ------------------------------------------------------- */

.skagit-jp-board-tile--lead { border-radius: var(--sk-radius-md); }

/* The lead keeps its brackets on permanently at half strength, which is the
   only visual weight separating it from the row without changing its shape. */
.skagit-jp-board-tile--lead .skagit-jp-board-corners { opacity: 0.5; }

.skagit-jp-board-tile--lead .skagit-jp-board-corners::before,
.skagit-jp-board-tile--lead .skagit-jp-board-corners::after {
  width: 1.6rem;
  height: 1.6rem;
  transform: none;
}

/* ---- 5.5 The caption slug ----------------------------------------------
   Renders ONLY when the row carries a real name or an amount that parsed out
   of it. Every `name` in the current data is empty, so today this block does
   not render at all — which is the point. A caption that repeats what is
   already burned into the picture is noise; a caption that invents a person
   is worse. Text sits on a SOLID --sk-navy-800, never on the image. */

.skagit-jp-board-slug {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.8rem;
  padding: var(--sk-space-2xs) var(--sk-space-xs);
  background-color: var(--sk-navy-800);
}

.skagit-jp-board-amount {
  font-family: var(--sk-font-display);
  font-size: var(--sk-fs-lg);
  font-weight: var(--sk-weight-bold);
  line-height: var(--sk-lh-tight);
  letter-spacing: var(--sk-tracking-display);
  color: var(--sk-gold-400);            /* 9.4:1 on --sk-navy-800 */
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  overflow-wrap: anywhere;
}

.skagit-jp-board-who {
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-xs);
  font-weight: var(--sk-weight-bold);
  letter-spacing: var(--sk-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--sk-text-on-dark-muted);  /* 8.9:1 on --sk-navy-800 */
  overflow-wrap: anywhere;
}

.skagit-jp-board-tile--lead .skagit-jp-board-amount { font-size: var(--sk-fs-2xl); }

/* ==========================================================================
   6. THE TILE ROW
   --------------------------------------------------------------------------
   One rule for every data volume. `auto-fit` collapses tracks that hold no
   item, so three tiles become three equal columns rather than three columns
   plus a hole; `min(100%, …)` is what stops the floor overflowing a 360px
   viewport. At an ~880px board that is 3 across; at ~530px, 2; below ~320px,
   1 stacked column at full width, which is the most legible thing a 2560px
   screen capture can do on a phone.
   ========================================================================== */

.skagit-jp-board-row {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, var(--skagit-jp-board-tile-min)), 1fr));
  gap: var(--sk-space-xs);
  margin: 0;
  padding: 0;              /* beats `ul, ol { padding-left: 1.25em }` */
  list-style: none;
}

.skagit-jp-board-cell {
  margin: 0;               /* beats `li { margin-bottom: … }` */
  min-width: 0;
}

/* TWO ACROSS ON A PHONE, NOT ONE.
   Full-width captures stacked one per row made the band 1300px tall on a
   375px screen — taller than the viewport by half again, for a section that
   is supporting evidence rather than a reason to visit. Two across halves it.
   At 375px each frame is ~155px wide, which still reads: these are screen
   captures of a display board, and the amount is set in very large type. */
@media (max-width: 33.99em) {
  .skagit-jp-board-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   7. MOTION
   --------------------------------------------------------------------------
   The band reuses skagit-jackpot.css's motion contract wholesale: the reveal
   elements carry `.skagit-jp-reveal`, the hidden state is double-gated on
   `html.skagit-jp-js` AND `prefers-reduced-motion: no-preference`, and
   skagit-jackpot.js has a 3s dead-man's switch that reveals everything
   regardless. Nothing here can strand content at opacity: 0.

   All this file adds is the per-element delay and one extra flourish: the
   brass hairline wipes in from the left, so each tile lands the way a row on
   a results board lands.
   ========================================================================== */

.skagit-jp-board-pitch                    { --skagit-jp-stagger: 0ms; }
.skagit-jp-board-tile--lead               { --skagit-jp-stagger: 90ms; }
.skagit-jp-board-row > li:nth-child(1)    { --skagit-jp-stagger: 170ms; }
.skagit-jp-board-row > li:nth-child(2)    { --skagit-jp-stagger: 230ms; }
.skagit-jp-board-row > li:nth-child(3)    { --skagit-jp-stagger: 285ms; }
.skagit-jp-board-row > li:nth-child(4)    { --skagit-jp-stagger: 330ms; }
.skagit-jp-board-row > li:nth-child(5)    { --skagit-jp-stagger: 365ms; }
.skagit-jp-board-row > li:nth-child(n+6)  { --skagit-jp-stagger: 390ms; }

@media (prefers-reduced-motion: no-preference) {
  html.skagit-jp-js .skagit-jp-board-tile .skagit-jp-board-hairline {
    transform: scaleX(0);
  }

  html.skagit-jp-js .skagit-jp-board-tile.is-in .skagit-jp-board-hairline {
    transform: none;
    transition: transform var(--sk-dur-lazy) var(--sk-ease-out);
    transition-delay: calc(var(--skagit-jp-stagger, 0ms) + 140ms);
  }
}

/* ==========================================================================
   8. RESPONSIVE
   ========================================================================== */

/* ---- 8.1 <34em — the tightest phones ----------------------------------- */
@media (max-width: 33.99em) {
  .skagit-jp-board-inner { padding-block: var(--sk-space-xl); }

  .skagit-jp-board-head { justify-content: flex-start; }
  .skagit-jp-board-dateline { text-align: left; }

  /* A full-width primary button is the only shape that stays comfortably
     above the 44px target once the label wraps out of `nowrap`. */
  .skagit-jp-board-cta {
    align-self: stretch;
    width: 100%;
    white-space: normal;
  }
}

/* ---- 8.2 >=62em — the band splits -------------------------------------- */
@media (min-width: 62em) {
  .skagit-jp-board-inner {
    grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr);
    align-items: center;
    gap: var(--sk-space-2xl);
  }
}

/* ---- 8.3 >=100em — very large displays ---------------------------------
   The copy panel takes the extra width, not the board: past ~1000px a 16:9
   lead stops gaining legibility and starts becoming a billboard. */
@media (min-width: 100em) {
  .skagit-jp-board-inner {
    grid-template-columns: minmax(20rem, 27rem) minmax(0, 1fr);
  }

  .skagit-jp-board-band { --skagit-jp-board-tile-min: 15rem; }
}

/* ==========================================================================
   9. REDUCED MOTION  (guard block — the only !important in this file)
   --------------------------------------------------------------------------
   Belt and braces, mirroring skagit-jackpot.css §13. skagit-jackpot.js already
   withholds the `skagit-jp-js` flag under reduced motion and §7 is gated on
   `no-preference` besides, but a motion kill switch that another rule can
   override is not a kill switch.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .skagit-jp-board-hairline,
  html.skagit-jp-js .skagit-jp-board-tile .skagit-jp-board-hairline,
  html.skagit-jp-js .skagit-jp-board-tile.is-in .skagit-jp-board-hairline,
  .skagit-jp-board-tile:hover .skagit-jp-board-corners::before,
  .skagit-jp-board-tile:hover .skagit-jp-board-corners::after,
  .skagit-jp-board-cta:hover .skagit-jp-chevron,
  .skagit-jp-board-cta:focus-visible .skagit-jp-chevron {
    transform: none !important;
    transition: none !important;
  }

  /* The lead's brackets are a static decoration, not a transition, so they
     stay exactly where they are. */
  .skagit-jp-board-tile--lead .skagit-jp-board-corners::before,
  .skagit-jp-board-tile--lead .skagit-jp-board-corners::after {
    transform: none !important;
  }
}

/* ==========================================================================
   10. FORCED COLOURS  (Windows High Contrast)
   ========================================================================== */
@media (forced-colors: active) {
  .skagit-jp-board,
  .skagit-jp-board-tile {
    border: 1px solid ButtonBorder;
  }

  /* Brass gradients render as nothing in forced-colours mode, so the two
     hairlines become system-coloured rules rather than vanishing. */
  .skagit-jp-board::before,
  .skagit-jp-board-hairline,
  .skagit-jp-board-rule {
    background: ButtonBorder;
    forced-color-adjust: none;
  }

  .skagit-jp-board-corners { display: none; }
}

/* ==========================================================================
   11. PRINT
   ========================================================================== */
@media print {
  .skagit-jp-board-cta,
  .skagit-jp-board-corners { display: none !important; }

  .skagit-jp-board-band,
  .skagit-jp-board {
    background: none !important;
    box-shadow: none !important;
    border-color: #999 !important;
    color: #000 !important;
  }

  .skagit-jp-board-title,
  .skagit-jp-board-dateline,
  .skagit-jp-board-label,
  .skagit-jp-board-note,
  .skagit-jp-board-desc { color: #000 !important; }

  .skagit-jp-board-tile { break-inside: avoid; border: 1px solid #999; }

  .skagit-jp-board-slug { background: none !important; }
  .skagit-jp-board-amount,
  .skagit-jp-board-who { color: #000 !important; }
}