@charset "UTF-8";
/* ==========================================================================
   THE SKAGIT CASINO RESORT — RESPONSIVE LAYER
   Layer 3 of 3. Requires skagit-design-system.css + skagit-components.css.
   --------------------------------------------------------------------------
   Almost all scaling is already handled without media queries: every font
   size, gutter and section rhythm in layer 1 is a clamp(), and every card
   grid is `repeat(auto-fill, minmax(min(100%, N), 1fr))`. That is what makes
   360px -> 2560px work continuously rather than in five jumps.

   This layer therefore does only three things:
     A. Mobile-first base corrections (overflow safety, touch targets).
     B. min-width ENHANCEMENTS as room appears.
     C. A small number of max-width CORRECTIONS that exist purely to fix
        layouts the legacy style.css / per-shortcode <style> blocks get
        wrong on small screens. Those are labelled.

   Verified target range: 360px -> 2560px, no horizontal overflow.
   ========================================================================== */

/* ==========================================================================
   A. MOBILE-FIRST BASE  (applies at every width; 360px is the floor)
   ========================================================================== */

/* A.1 Overflow safety net -------------------------------------------------
   Any single unbreakable string (a long URL in editor content, a jackpot
   winner's name) can otherwise push the page wider than the viewport. */
body,
.sno-content-body,
.card-excerpt,
.offer-excerpt,
.ent-card-excerpt,
.location-desc,
.expand-desc,
.jp-hero-desc,
.footer-col ul li a,
.copyright-row a,
.winner-details h4,
.winner-name,
.jackpot-winner-name,
.collage-info h4,
.jp-wide-body h4 {
  overflow-wrap: break-word;
  word-break: break-word;
  /* NOT `hyphens: auto`. `<html lang="en-US">` is set, so auto-hyphenation was
     live everywhere this list reaches — body copy, card excerpts, footer links,
     winner names — and it hyphenates ORDINARY words at soft line breaks, not
     just the long strings this rule exists for. `manual` is the CSS initial
     value: the browser breaks only at an explicit &shy;.

     >>> THE TWO DECLARATIONS ABOVE ARE THE PROTECTION AND MUST STAY. <<<
     `hyphens` never did the overflow work; `overflow-wrap` and `word-break`
     do. Deleting either of those to "clean up after" this change re-opens the
     bug this rule was written for — a single unbreakable string (a long URL in
     editor content, a jackpot winner's name) pushing the page wider than the
     viewport. Set the property, do not remove the block. */
  hyphens: manual;
}

/* Wide editor content (tables, pre) scrolls inside itself, never the page. */
.sno-content-body table,
.sno-content-body pre {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Slick's track/list can compute a width wider than its parent mid-init. */
.slick-slider,
.slick-list,
.random-offers-slider,
.skagit-home-slider,
.skagit-promo-slider,
.jackpot-slider,
.month-winners-slider,
.jackpot-slider-grid,
.jp-wide-slider { max-width: 100%; }

.slick-list { overflow: hidden; }

/* Anything absolutely positioned with a negative offset is clipped by the
   section rather than allowed to widen the document. */
.month-slider-wrapper,
.month-winners-slider-wrap,
.clean-slider-wrapper,
.home-slider-container,
.random-offers-wrapper { max-width: 100%; }

/* A.2 Touch targets --------------------------------------------------------
   44x44 CSS px minimum for anything tappable (WCAG 2.2 AA Target Size). */
@media (hover: none), (pointer: coarse) {
  .header-menu > li > a,
  .footer-col ul li a,
  .copyright-row a,
  .sno-breadcrumb-container a,
  .back-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .header-socials a,
  .social-icons a { width: 44px; height: 44px; }

  .promo-filters .filter-pill { min-height: 44px; }

  .clean-slider-wrapper .clean-arrow,
  .home-slider-container .clean-home-arrow,
  .month-slider-wrapper .jp-arrow,
  .month-winners-slider-wrap .month-prev,
  .month-winners-slider-wrap .month-next { width: 44px; height: 44px; }

  /* Hover-only reveals are unreachable on touch — show them permanently. */
  .promotions-grid .sno-card::before,
  .random-offers-wrapper .offer-card::before,
  .ent-grid .ent-card::before { transform: scaleX(1); opacity: 0.45; }
}

/* A.3 Mobile drawer behaviour --------------------------------------------- */
body.mobile-menu-active { overflow: hidden; }

.main-navigation {
  overscroll-behavior: contain;
}

/* ==========================================================================
   B. ENHANCEMENTS  (min-width — mobile-first)
   ========================================================================== */

/* ---- B.1 >= 480px : the first breathing room ---------------------------- */
@media (min-width: 30em) {
  /*
   * NO `.footer-links-row` COLUMN COUNT HERE — nor at B.3, B.4, C.1 or C.5,
   * where four more of these used to sit.
   *
   * skagit-components.css already declares
   *   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))
   * which derives the count from the available width AND collapses empty
   * tracks. Five hard-coded overrides were fighting it, and between them they:
   *
   *   - pinned SIX columns from 992px up, against five actual `.footer-col`
   *     children, leaving a permanently empty ~206px track at the right edge;
   *   - pinned TWO columns all the way to 1024px from the C.1 block, which
   *     loaded last and so beat both the 3- and 6-column steps. A 1024px screen
   *     showed the sitemap in two 469px columns and the footer stood 1511px
   *     tall — TALLER than the same footer at 768px.
   *
   * Auto-fit gets it right at every width on its own: 1 column at 320, 2 at
   * 440, 3 at 768, 5 at 1024 and 5 at 1440. Adding or removing a footer column
   * needs no CSS change.
   */

  /* style.css toggles .footer-mobile-buttons' `display` with !important at
     both widths, so only the axis and the children are adjusted here. */
  .footer-mobile-buttons { flex-direction: row; flex-wrap: wrap; }

  .footer-mobile-buttons a,
  .footer-mobile-buttons button { flex: 1 1 calc(50% - 0.5rem); }
}

/* ---- B.2 >= 640px : two-up card grids, side-by-side toolbars ----------- */
@media (min-width: 40em) {
  .sno-promo-archive .promo-toolbar,
  .related-header,
  .footer-promo-header,
  .month-header-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .related-header,
  .footer-promo-header,
  .month-header-row { align-items: flex-end; }

  .ent-dates-wrapper .ent-date-row { flex-wrap: nowrap; }

  .skagit-booking-wrapper .skagit-booking-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
  }

  .skagit-booking-wrapper .booking-submit { grid-column: 1 / -1; }
  .booking-submit #sb-submit-btn { width: 100%; }
}

/* ---- footer sitemap: the one band auto-fit gets wrong ------------------- */
/*
 * There are FIVE `.footer-col` children, so only 1, 3 or 5 tracks divide them
 * without leaving an orphan. Auto-fit sizes by width alone and knows nothing
 * about the count, so between roughly 730px and 920px it lands on FOUR tracks
 * and wraps them 4 + 1 — one lone column on a second row with 544px of empty
 * grid beside it, measured at 768px.
 *
 * Pinning three across that band gives 3 + 2, which reads as a deliberate block.
 * Above 992px auto-fit reaches five and all of them sit on one row, so the rule
 * releases there; below 640px two tracks give 2 + 2 + 1, which is normal for a
 * phone and costs no visible whitespace.
 *
 * This is the ONLY column-count override left; the four others were removed
 * because auto-fit already did their job. See the note in B.1.
 */
@media (min-width: 40em) and (max-width: 61.99em) {
  .footer-links-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- B.3 >= 768px : the tablet layout ---------------------------------- */
@media (min-width: 48em) {
  /* `.footer-links-row` column count removed — see the note in B.1. */

  .jackpot-collage-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  }

  .skagit-expand-panel { padding-inline: var(--sk-space-xl); }

  .jp-static-hero { min-height: clamp(360px, 40vw, 560px); }

  .random-offers-wrapper .offer-scrollbar-container { display: flex; }
}

/* ---- B.4 >= 992px : desktop — the design's home ground ----------------- */
@media (min-width: 62em) {
  /* `.footer-links-row` SIX-column override removed — it was the source of the
     permanently empty track at the right edge. See the note in B.1. */

  /* Jackpot modern feed becomes the intended two-column split. */
  .jp-modern-section-wrapper {
    grid-template-columns: 1.15fr 1fr;
  }

  /* Jackpot viewer becomes vertical tabs + panel. */
  .jackpot-viewer-wrapper { flex-wrap: nowrap; }
  .jackpot-viewer-wrapper .jackpot-nav { width: 260px; }

  /* Booking bar returns to a single row. */
  .skagit-booking-wrapper .skagit-booking-form {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: var(--sk-space-sm);
  }

  .skagit-booking-wrapper .booking-field.property-select { flex: 1.4 1 220px; }
  .skagit-booking-wrapper .booking-field.date-field { flex: 1 1 160px; }
  .skagit-booking-wrapper .booking-field.guest-field { flex: 1.2 1 200px; }

  /* >>> width AND margin, not just flex — the row is only safe if it says so.
     `flex: 0 0 auto` fixes how the submit GROWS and says nothing about how wide
     it is, so a `width: 100%` from anywhere else still fills the line. The
     stacked-layout CSS printed by inc/shortcode-booking-widget.php sets exactly
     that, and while its breakpoint was 1100px against this block's 62em the two
     overlapped: the submit went full width inside this nowrap row, could not
     shrink, and crushed all four fields to zero pixels — labels wrapping one
     letter per line — at every width from 992 to 1100.

     That breakpoint is now aligned, so the overlap is gone. These two
     declarations stay anyway: this block defines the single-row layout and
     should not depend on a number in another file staying correct to survive.
     Restating them costs nothing and closes the failure mode for good. */
  .skagit-booking-wrapper .booking-submit {
    flex: 0 0 auto;
    width: auto;
    margin-top: 0;
  }
  .booking-submit #sb-submit-btn { width: auto; }

  /* Expanding section: text column stops at a readable measure. */
  .skagit-expand-panel .expand-desc { max-width: 40rem; }

  /* Editorial rhythm — the collage gets its grid-breaking hero tiles.
     style.css already spans every 5th item and hard-codes a 350px media
     height; that is neutralised first so only one rule decides. */
  .jackpot-collage-grid .collage-item:nth-child(5n) { grid-column: auto; }
  .jackpot-collage-grid .collage-item:nth-child(5n) .collage-img-wrap {
    height: auto;
    aspect-ratio: 3 / 4;
  }

  .jackpot-collage-grid .collage-item:nth-child(7n + 1) { grid-column: span 2; }
  .jackpot-collage-grid .collage-item:nth-child(7n + 1) .collage-img-wrap {
    height: auto;
    aspect-ratio: 16 / 11;
  }
}

/* ---- B.5 >= 1200px : generous desktop ---------------------------------- */
@media (min-width: 75em) {
  .sno-promo-archive .promotions-grid,
  .ent-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 350px), 1fr));
    gap: var(--sk-space-lg);
  }

  .jackpot-collage-grid { gap: var(--sk-space-lg); }

  .header-menu > li > a { padding-inline: 1.1rem; }

  .skagit-expand-wrap { min-height: clamp(520px, 44vw, 780px); }
}

/* ---- B.6 >= 1440px : large desktop ------------------------------------- */
@media (min-width: 90em) {
  :root {
    --sk-container: 1480px;
  }

  .promo-text-header .promo-header-content { font-size: var(--sk-fs-lg); }
}

/* ---- B.7 >= 1800px : ultra-wide -----------------------------------------
   Above ~1800px a 1400px column starts to look stranded. The container and
   the gutters grow, the type scale does NOT (it is capped at 1440px by the
   clamps) — big screens should show more, not bigger. */
@media (min-width: 112.5em) {
  :root {
    --sk-container: 1640px;
    --sk-gutter: 3rem;
    --sk-section-y: var(--sk-space-4xl);
  }

  .sno-promo-archive .promotions-grid,
  .ent-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  }

  .jackpot-collage-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  }

  .footer-content-wrap { padding-block: var(--sk-space-3xl) var(--sk-space-xl); }

  .jackpot-viewer-wrapper .jackpot-nav { width: 300px; }
}

/* ---- B.8 >= 2200px : very large displays / TV ------------------------- */
@media (min-width: 137.5em) {
  :root {
    --sk-container: 1840px;
    --sk-gutter: 4rem;
  }

  /* Media stops growing indefinitely; the composition breathes instead. */
  .jp-static-hero { min-height: 620px; }
  .skagit-expand-wrap { min-height: 820px; }

  .sno-single-wrapper .sno-content-body { max-width: 76ch; }
}

/* ==========================================================================
   C. CORRECTIONS  (max-width — repairing legacy small-screen layouts)
   These override rules already present in style.css or in the per-shortcode
   <style> blocks. Each one names the problem it fixes.
   ========================================================================== */

/* ---- C.1 <= 1024px : header / drawer ------------------------------------
   style.css hides .header-contact and .header-utilities here, which is
   correct, but the drawer itself needs polish and the gas badge needs to
   survive somewhere. */
@media (max-width: 64em) {
  .header-top-bar { padding-block: var(--sk-space-2xs); }

  .header-top-bar .container-fluid {
    justify-content: space-between;
    gap: var(--sk-space-xs);
  }

  .site-branding { flex: 1 1 auto; min-width: 0; }
  .header-logo { height: clamp(38px, 8vw, 52px); }

  .main-navigation {
    background: var(--sk-grad-night);
    border-top: 0;
    border-right: 1px solid rgba(212, 175, 55, 0.28);
  }

  .nav-wrapper {
    display: block;
    max-width: none;
    padding-inline: 0;
    height: calc(100% - 82px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .header-menu {
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    padding: var(--sk-space-sm) 0 var(--sk-space-2xl);
  }

  .header-menu > li { width: 100%; }

  .header-menu > li > a {
    padding: 0.95rem var(--sk-space-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    font-size: var(--sk-fs-sm);
    letter-spacing: 0.1em;
    white-space: normal;
  }

  /* The centre-out underline makes no sense in a vertical list. */
  .header-menu > li > a::after {
    left: 0;
    right: auto;
    bottom: 0;
    width: 3px;
    height: 100%;
    transform: none;
    transition: opacity var(--sk-dur-base) var(--sk-ease-out);
    opacity: 0;
  }

  .header-menu > li:hover > a::after,
  .header-menu > li > a.submenu-open::after,
  .header-menu > li.current-menu-item > a::after { width: 3px; opacity: 1; }

  /* Submenus become inline accordions (the footer.php script toggles
     inline display:block/none on them). */
  .header-menu .sub-menu {
    position: static;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(0, 0, 0, 0.28);
    box-shadow: none;
  }

  .header-menu li:hover > .sub-menu,
  .header-menu li:focus-within > .sub-menu { display: none; }

  .header-menu .sub-menu li a {
    padding: 0.75rem var(--sk-space-md) 0.75rem calc(var(--sk-space-md) + 1rem);
    font-size: var(--sk-fs-sm);
  }

  /* Restores the footer sitemap below 1024px.
     style.css sets `.footer-links-row { display: none }` there, which would
     leave phone and tablet users no footer navigation at all.

     ONLY `display` is restored. This block loads after B.3 and B.4, so the
     two-column `grid-template-columns` that used to sit here beat both of them
     and pinned the sitemap to two columns all the way up to 1024px — which is
     why a 1024px screen showed two 469px columns and a footer 1511px tall,
     taller than the same footer at 768px. The auto-fit count in
     skagit-components.css is correct at every width; it just has to be left
     alone. */
  .footer-links-row {
    display: grid;
    gap: var(--sk-space-md) var(--sk-space-sm);
  }

  .footer-connect-bar { flex-direction: column; text-align: center; }
  .connect-left,
  .connect-right { justify-content: center; }

  .footer-info-bar { flex-direction: column; text-align: center; }
  .info-contact { justify-content: center; }

  .copyright-row { justify-content: center; text-align: center; }
  .responsible-gaming { margin-left: 0; }
}

/* ---- C.2 <= 992px : stacked hero splits ---------------------------------
   .jp-modern-section-wrapper and .jackpot-viewer-wrapper are declared as
   fixed multi-column layouts; below this width they overflow. */
@media (max-width: 61.99em) {
  .jp-modern-section-wrapper { grid-template-columns: minmax(0, 1fr); }

  .jp-dynamic-feed {
    order: 2;
    padding: var(--sk-space-lg) 0 var(--sk-space-xl) var(--sk-gutter);
  }

  .jp-static-hero {
    order: 1;
    min-height: clamp(300px, 60vw, 440px);
  }

  .jp-wide-slide-padding { padding-right: var(--sk-space-sm); }

  .jackpot-viewer-wrapper { flex-direction: column; }

  .jackpot-viewer-wrapper .jackpot-nav {
    width: 100%;
    padding: 0;
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .jackpot-viewer-wrapper .jackpot-nav::-webkit-scrollbar { display: none; }
  .jackpot-viewer-wrapper .jackpot-nav-title { display: none; }

  .jackpot-viewer-wrapper .jackpot-tabs {
    display: flex;
    width: max-content;
    min-width: 100%;
  }

  .jackpot-viewer-wrapper .jackpot-tab-item {
    flex: 0 0 auto;
    padding: 0.9rem var(--sk-space-sm);
    border-left: 0;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
  }

  .jackpot-viewer-wrapper .jackpot-tab-item.active {
    border-left: 0;
    border-bottom-color: var(--sk-gold-500);
  }

  .jackpot-viewer-wrapper .jackpot-tab-item i { display: none; }
  .jackpot-viewer-wrapper .jackpot-content { padding: var(--sk-space-md); }

  .skagit-expand-wrap { min-height: clamp(400px, 78vw, 620px); }
}

/* ---- C.3 <= 768px : single-column everything ---------------------------- */
@media (max-width: 47.99em) {
  .sno-promo-archive .promo-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .sno-promo-archive .promo-sorter select { width: 100%; }

  .sno-promo-archive .promo-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: 0.35rem;
    scrollbar-width: none;
  }

  .sno-promo-archive .promo-filters::-webkit-scrollbar { display: none; }
  .promo-filters .filter-pill { flex: 0 0 auto; }

  .ent-location-section .location-title { font-size: var(--sk-fs-2xl); }

  .ent-dates-wrapper .ent-date-row {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .ent-dates-wrapper .ent-date-info { justify-content: center; }
  .ent-date-btn .ent-btn { width: 100%; }

  .ent-glass-timer .ent-timer { flex-wrap: wrap; gap: 0.5rem; }
  .ent-glass-timer .timer-dots { display: none; }
  .ent-glass-timer .timer-box { flex: 1 1 calc(50% - 0.25rem); min-width: 0; }

  .sno-single-wrapper .sno-featured-img img { width: 100%; }

  .single-related-section,
  .jackpot-footer-promos { padding-block: var(--sk-space-2xl); }

  .skagit-expand-panel { padding: var(--sk-space-lg) var(--sk-gutter); }
  .skagit-expand-panel .expand-actions { flex-direction: column; align-items: stretch; }
  .expand-actions .expand-main-btn,
  .expand-actions .expand-sub-link { justify-content: center; width: 100%; }

  .info-awards { justify-content: center; }
  .award-circle { width: 54px; height: 54px; font-size: 0.56rem; }

  /* The scrubber under the offers carousel duplicates native swipe on
     touch and the shortcode's own stylesheet hides it here; keep it hidden
     but ensure it is hidden accessibly (removed from the a11y tree too). */
  .random-offers-wrapper .offer-scrollbar-container { display: none; }
}

/* ---- C.4 <= 600px : phones -------------------------------------------- */
@media (max-width: 37.49em) {
  .promo-text-header .promo-page-title { letter-spacing: -0.015em; }

  .sno-promo-archive .promotions-grid,
  .ent-grid,
  .jackpot-collage-grid { gap: var(--sk-space-sm); }

  .promotions-grid .sno-card-body,
  .random-offers-wrapper .offer-body,
  .ent-grid .ent-card-body { padding: var(--sk-space-sm); }

  /* The phone 3/2 override is gone (2026-08-15). It was the worst crop on the
     site: a square social graphic in a 3/2 landscape box loses a third of its
     HEIGHT under object-fit: cover -- the top and bottom third of the offer,
     which on these assets is where the headline and the dates live. Removing
     it also removes a breakpoint disagreement: this block is max-width 37.49em
     while Slick's own responsive config in inc/shortcode-random-offers.php:227
     switches at breakpoint 600, so the two never changed on exactly the same
     pixel. With the frame square in every band (skagit-components.css section
     7.2) the ratio no longer depends on either number, so the seam cannot
     matter. Nothing replaces this rule -- an explicit `aspect-ratio: 1 / 1`
     here would be a rule that does nothing. */

  /*
   * BOOKING WIDGET ON A PHONE: one field per row.
   *
   * The base rule is `flex: 1 1 180px`, which fits two fields per row at 440px
   * and leaves each about 193px. That is too narrow for a date, and it caused
   * two separate faults:
   *
   *   1. iOS Safari will not shrink its native date control below its
   *      intrinsic width, so the field overflowed into the column beside it.
   *      Measured on a desktop browser everything looked correct, which is why
   *      this only showed up on a real iPhone.
   *
   *   2. Even where it did fit, the row was staggered. `.guest-inputs` stacks
   *      below, making the guest block 140px tall against a 72px date field,
   *      and `align-items: flex-end` on the form then dropped CHECK OUT to the
   *      bottom of its row while GUESTS started 68px higher up.
   *
   * A single column cures both: there is no neighbour left to collide with, and
   * nothing to misalign against. `flex-wrap` is set explicitly because the base
   * rule does not carry it — with a 100% basis and no wrap, all five fields
   * would be crushed onto one line instead.
   */
  .skagit-booking-wrapper .skagit-booking-form {
    flex-wrap: wrap;
    align-items: stretch;
  }

  .skagit-booking-wrapper .booking-field { flex: 1 1 100%; }

  /*
   * A full-width row has ample space for adults and kids side by side, which
   * gives back most of the height the single column costs. This overrides the
   * stacking that used to be needed when the guest block was sharing a row.
   */
  .skagit-booking-wrapper .guest-inputs { flex-direction: row; }

  /*
   * HOME SLIDER: hide the PREV / // / NEXT layers on a phone.
   *
   * These are not Slider Revolution's own arrows — arrows, bullets, tabs and
   * thumbs are all switched off on this slider. They are three ordinary text
   * layers placed by hand at the top-left corner of every slide, at about
   * y=4px on mobile. The headline on three of the seven slides starts inside
   * that band (slide 36 at y=18, slide 34 at y=31, slide 35 at y=33), so the
   * buttons print on top of the words.
   *
   * They are hidden rather than nudged because RevSlider positions layers with
   * inline coordinates it recalculates on every resize, so a CSS offset gets
   * overwritten while display:none holds. As tap targets they were unusable
   * anyway — about 30px of text hard against the corner, well under the 44px
   * minimum.
   *
   * SWIPE MUST BE ON FOR THIS TO BE SAFE. tools/enable-slider-swipe.php sets
   * nav.swipe.set = true. Without it these layers are the ONLY way to reach
   * slides 2-7, and hiding them strands a phone on slide 1.
   *
   * Listed by exact id. An [id$="-layer-22"] shortcut would be shorter but
   * would also catch content layers that happen to share a number elsewhere.
   */
  #slider-4-slide-31-layer-22, #slider-4-slide-31-layer-26, #slider-4-slide-31-layer-27,
  #slider-4-slide-32-layer-58, #slider-4-slide-32-layer-59, #slider-4-slide-32-layer-60,
  #slider-4-slide-33-layer-14, #slider-4-slide-33-layer-15, #slider-4-slide-33-layer-16,
  #slider-4-slide-34-layer-49, #slider-4-slide-34-layer-50, #slider-4-slide-34-layer-51,
  #slider-4-slide-35-layer-22, #slider-4-slide-35-layer-26, #slider-4-slide-35-layer-27,
  #slider-4-slide-36-layer-22, #slider-4-slide-36-layer-26, #slider-4-slide-36-layer-27,
  #slider-4-slide-37-layer-22, #slider-4-slide-37-layer-26, #slider-4-slide-37-layer-27 {
    display: none !important;   /* beats RevSlider's own inline layer styles */
  }

  .footer-links-row { gap: var(--sk-space-sm); }

  .footer-col h3 { font-size: 0.68rem; }

  .month-slider-wrapper .jp-arrow,
  .month-winners-slider-wrap .month-prev,
  .month-winners-slider-wrap .month-next {
    top: auto;
    bottom: -0.25rem;
    transform: none;
  }

  .month-slider-wrapper .jp-prev,
  .month-winners-slider-wrap .month-prev { left: calc(50% - 3.25rem); }

  .month-slider-wrapper .jp-next,
  .month-winners-slider-wrap .month-next { right: calc(50% - 3.25rem); }

  .month-slider-wrapper,
  .month-winners-slider-wrap { padding-bottom: var(--sk-space-lg); }
}

/* ---- C.5 <= 400px : the 360px floor ------------------------------------ */
@media (max-width: 25em) {
  :root { --sk-gutter: 1rem; }

  .award-circle { width: 48px; height: 48px; font-size: 0.52rem; letter-spacing: 0.08em; }

  .ent-glass-timer .timer-box { min-width: 0; padding-inline: 0.25rem; }
  .ent-glass-timer .timer-box span { font-size: 1.45rem; }

  /* `.footer-links-row` single-column override removed — auto-fit already
     yields one column at this width. See the note in B.1. */

  .copyright-row { gap: var(--sk-space-2xs); }
}

/* ==========================================================================
   D. PRINT
   ========================================================================== */
@media print {
  .site-header,
  .site-footer,
  .skagit-booking-wrapper,
  .single-related-section,
  .jackpot-footer-promos,
  .random-offers-wrapper,
  .promo-toolbar { display: none !important; }  /* documented: several of
                                                   these are shown with
                                                   !important elsewhere      */

  body { background: #fff; color: #000; }

  .sno-single-wrapper,
  .promo-text-header { padding-block: 0; background: none; }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #444;
  }
}
