/* ==========================================================================
   feed.css  -  the home as an app feed on a phone (his widget 0cc02180, 18:08 ET 26 Oct 2026: "the Nash website has to feel more app-like
   ... like you're scrolling through videos, like you're doom scrolling ... swipe left, swipe right"; the seat's nash-feed-1026 and -b,
   over Omega's docs/research/NASH_FEED_1026.md). The phone's calendar, the full-screen landscape one, is fullcal.js and fullcal.css.

   Loaded after bands.css, so it wins at equal weight, and it only ever adds. Every rule below is in a block for a screen under 768 px
   wide: the desk (768 and up) is as it was (his wheel rule: the desk's wheel and finger always move the page freely; the snap is the phone's).

     1. The vertical snap. Each band of the home, the hero and the footer are snap points of the page, and a flick moves one screen:
        mandatory, as on MMV (his "lock into place"). A band taller than the screen is not held: where a snap area is larger than the
        scrollport, any position in which it covers the screen is a snap position too (css-scroll-snap-1 5.2.2), so the page scrolls freely
        through it and snaps at its ends; Omega's PHONE_SNAP_FEED_1026.md section 1 measured it. MMV's two lessons are applied from the start:
          (a) a strip that adds padding at the top of the page while it asks (a consent bar) must move the first band's snap point with it,
              by its scroll-margin-top, or the strip hides under the fixed bar. This page has no such strip (the Google tag is left exactly as
              it is and there is no consent step: tests/test_order.py), so nothing moves; tests/feed.test.mjs NF-9 holds the first screen's
              controls under the bar and would find a strip added later.
          (b) the foot of the page is a snap point too (the footer's last strip is aligned to its END, and the footer's head is a point
              of its own); without one a flick to the bottom snaps back to the last band and the footer never shows.
     2. The swipe tracks. Where a band has more, the more is a row to swipe sideways: the menu (menu.css), the calendar's days and the
        ticketed nights (week.css), the private events, and the press names. Every card is the track's whole width, so no neighbour peeks
        at rest and no gap shows (the calendar's row already was; the ticketed strip's side padding let 8 px of the next card in, and
        the private events and the press names were stacked).
     3. The one small hint: "Swipe", and an arrow that nudges three times and rests. It is NOT stilled by Reduce Motion (his brief: still
        under Reduce Motion): it is six pixels, three times, and a visitor who has asked for less motion still has to be told the row moves.
   ========================================================================== */

/* ---------- 3. the hint, one look wherever it stands ---------- */

.swipe-hint {
  display: none;                                   /* the phone's: the block below shows it */
}

@keyframes feedNudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

@media (max-width: 767px) {
  .swipe-hint {
    display: block;
    margin: 4px 0 0;
    text-align: center;
    font-family: var(--font-heading);
    font-size: var(--t-eyebrow);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gray-300);
  }

  /* the calendar's own hint (week-ui.js, its words are the row's: "Swipe for the next and previous days") and the ticketed strip's wear
     the same arrow. It stands still until feed.js has seen the hint come into view, and then nudges (a hint below the fold would have
     finished nudging before anyone saw it); with no script it is simply an arrow. */
  .swipe-hint::after,
  .wk-band .wk-swipe-hint::after {
    content: '\2192';
    display: inline-block;
    margin-left: 8px;
  }

  .swipe-hint.is-seen::after,
  .wk-band .wk-swipe-hint.is-seen::after {
    animation: feedNudge 1.4s ease-in-out 3;
  }

  /* 44 px is not asked of a line of text, but the hint stays clear of the track it names and of the next band's first line */
  .menu-carousel .swipe-hint {
    margin: 12px 0 0;
  }

  /* nash-menu-1029 C1 (his widget af2bce1e, 29 Oct 2026 16:51:59Z, "the Nash Key's website needs a good pass through"; the plan's
     item C1, tests/polish_nash_11.test.mjs NC-1): the private events' hint stood on the red button row with 0 px between them (the
     4 px under the track and the hint's own 4 px above it, and nothing below it). 16 px under it, the gap the row's own 16 px sets
     between the two buttons. */
  #private-events .swipe-hint {
    margin-bottom: 16px;
  }
}

@media (min-width: 768px) {
  .wk-band .wk-tix-hint {
    display: none;                                 /* the ticketed strip shows three cards from here: nothing to cue */
  }
}

.wk-band.wk-tix--fits .wk-tix-hint {
  display: none;                                   /* every card is in sight: nothing to swipe to */
}

/* ---------- 1. the vertical snap (a phone) ---------- */

@media (max-width: 767px) {
  /* the page's y snap is a TOUCH phone's (the seat's 08:34:44Z, nash-mobile-mori-1028): his flick moves one screen; a narrow desk window
     with a mouse wheel scrolls freely, so his wheel rule holds now that each band is exactly one screen (CB-1, FC-6) */
  @media (pointer: coarse) {
    html {
      scroll-snap-type: y mandatory;
    }
  }

  /* The hero is the top of the page (its margin is 0) and each band stops with its top at the foot of the bar: style.css gives every id
     scroll-margin-top = the bar's height (64 here), so the snap point is exactly where a link to the band lands. scroll-snap-stop makes a
     hard flick rest on the next screen and not the one after. */
  /* nash-beta-fixes-1030 wave 2: #fight-with-us, the closing call between #featured and the footer (bands.css), is a snap point like every band;
     tests/test_feed.py ff12 and tests/test_nashfix1030_copy2.py NB-7 hold the list */
  .hero,
  html body :is(#showtimes, #menu, #vip, #private-events, #reserve, #reviews, #about, #featured, #fight-with-us).section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* The hero is a screen and no more. On a short phone (375 x 667) its words run 52 px past the screen, which made the hero a snap area
     taller than the screen: the page may then rest anywhere in which it covers the screen, and a flick up from the first band came to rest
     where the hero's foot met the screen's (52 px down) and never at the top. A negative scroll-margin-bottom of a screen less 1 px draws
     the snap area in to the hero's height less a screen, plus the 1 px (53 px here): no taller than the screen, so the hero is one snap
     position, 0, whatever its height. Its last 52 px are the hero's own padding and its Scroll cue, below the fold at rest. */
  .hero {
    scroll-margin-bottom: calc(1px - 100vh);
    scroll-margin-bottom: calc(1px - 100svh);
  }

  /* MMV's lesson (b): the foot of the page is a snap point, or a flick to the bottom snaps back to the last band and the footer never
     shows. The footer is two positions. It is about 1030 px tall at 390 x 844, taller than the screen, and as ONE snap area that is a span
     in which the page rests anywhere it covers the screen (css-scroll-snap-1 5.2.2): a flick from the band above carried on through its
     head (10450 where its head, at the bar's foot, is 10385.9) and came to rest with the first 64 px of the footer under the bar, and a flick
     up from inside it skipped back over it (tests/feed.test.mjs NF-7). So:
       - .footer is START-aligned at the bar's foot, its snap area drawn in as the hero's is (a negative scroll-margin-bottom, a screen
         less 65 px: the footer's height less that, plus the bar's 64: 315 px at 390 x 844, no taller than the screen), so it is a position:
         its head;
       - its last strip, the copyright (.footer-bottom), is END-aligned: a position at the very foot of the page, which is where a flick
         from the head comes to rest. The head's screen and the foot's screen together show the whole footer.
     Both stop a fling, like every band. */
  .footer {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-margin-top: var(--nav-height);
    scroll-margin-bottom: calc(65px - 100vh);
    scroll-margin-bottom: calc(65px - 100svh);
  }

  .footer .footer-bottom {
    scroll-snap-align: end;
    scroll-snap-stop: always;
  }
}

/* ---------- 2. the swipe tracks (a phone) ---------- */

@media (max-width: 767px) {
  /* The ticketed nights: one card the strip's whole width, from 0 to 767 px (week.css gives halves from 601). The strip had 24 px of side
     padding bled out to the screen's edges, and the next card began 16 px after the first: 8 px of it showed at rest. */
  .wk-band .wk-strip {
    margin: 0;
    padding: 4px 0 16px;
    scroll-padding-inline: 0;
  }

  .wk-band .wk-tix-card {
    flex: 0 0 100%;
    scroll-snap-stop: always;
  }

  /* The private events: four cards, now a track, one card to a screen of the band. The cards' own entrance (a rise of 12 px, an opacity
     of 0.7) and their hover lift are off here: a card in a track that scrolls sideways is not "entering", and a lift of 6 px is clipped
     by the track's overflow. */
  #private-events .events-grid {
    display: flex;
    gap: 14px;
    margin-bottom: 4px;
    padding: 4px 0 12px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #private-events .events-grid::-webkit-scrollbar {
    display: none;
  }

  #private-events .events-grid > .event-card {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    opacity: 1;
    transform: none;
    transition: none;
    box-shadow: none;
  }

  #private-events .events-grid:focus-visible {
    outline: 2px solid var(--nash-orange);
    outline-offset: -2px;
  }

  /* The press names: fourteen outlets in pages of four, two rows by two columns, and a page is the track's whole width. A grid that
     flows by column makes each page two columns of two names; the first name of each page (1, 5, 9, 13) is the snap point; an empty
     last cell (::after) fills the last page's second column so the last page can rest where the first of its names stands. */
  .reviews-band .press-logos {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none;                   /* style.css's .press-grid-layout names two columns (repeat(2, 1fr)): they would be the first two, narrow, and the rest auto */
    grid-template-rows: repeat(2, minmax(44px, auto));
    grid-auto-columns: calc((100% - 12px) / 2);
    gap: 12px;
    justify-content: start;
    margin-bottom: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .reviews-band .press-logos::-webkit-scrollbar {
    display: none;
  }

  .reviews-band .press-logos::after {
    content: '';
    pointer-events: none;
  }

  .reviews-band .press-logos .press-name {
    min-width: 0;
  }

  .reviews-band .press-logos .press-name:nth-child(4n + 1) {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}

/* ---------- 4. one screen each: the four bands that ran past it (a phone) ----------
   His 16:53Z and 16:55Z words of 28 Oct 2026 ("everything has to feel scrollable and swipeable", "Every section would be its own screen on
   the page"; docs/plans/nash_mobile_mori_1028.md Part B, the seat's nash-mobile-phone-1028). At 390 x 844 four bands were taller than the
   screen under the bar (#reviews 1,154, #showtimes 1,292, #vip 1,364, #reserve 1,218): each is cut to one screen, its more a sideways track
   (x mandatory, a card the track's whole width, as the private events' are, section 2 above). Only these four ids are touched: the hero, the
   menu, the private events, About and Featured are as they were. The bands' padding is 40 px here (the home's is 80), so the words fit;
   on a short phone (667 high and under) it is 24 and the least important lines give way. Nothing is set outside this block, and nothing
   in it reaches 768 px and up: the desk is as it was (tests/phone_screens.test.mjs NS-6). */

/* The one desk rule: #reviews' quotes were the band's last child (style.css gives that child no bottom margin); the hint under them
   (hidden from 768 px) makes them not the last, so their own 48 px would show. Held at 0, as it was. */
@media (min-width: 768px) {
  html body #reviews .container > .rb-quotes {
    margin-bottom: 0;
  }
}

@media (max-width: 767px) {
  html body :is(#reviews, #showtimes, #vip, #reserve).section {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  /* ----- B1 #reviews: heading, the two ratings side by side, then the reviews as one track, a review to a screen ----- */
  #reviews .nk-what {
    margin: 0 auto 16px;
  }

  #reviews .section-header {
    margin-bottom: 20px;
  }

  #reviews .rb-ratings {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 0 auto 20px;
  }

  #reviews .rb-rating {
    padding: 12px 8px;
    gap: 4px;
  }

  #reviews .rb-stars {
    font-size: var(--t-body);
    letter-spacing: 2px;
  }

  #reviews .rb-source {
    letter-spacing: 1px;
    text-wrap: balance;
  }

  /* nash-menu-1029 C3 (his widget af2bce1e, 29 Oct 2026 16:51:59Z, "the Nash Key's website needs a good pass through"; the plan's
     item C3, tests/polish_nash_11.test.mjs NC-3): "on Google • 300+ reviews" wraps to two lines in a 149 px column and "on TripAdvisor"
     is one, so the two "As of October 2026" lines stood 46 px apart. The two ratings share four rows (stars, score, source, date) as a
     subgrid, so each row is as tall as the taller of the two and the dates meet; the Google label breaks in two even halves. A browser
     without subgrid draws the two cards as before. The markup is not touched (tests/test_order.py names the label's words). */
  #reviews .rb-rating {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    justify-items: center;
    align-content: start;
    row-gap: 4px;
  }

  #reviews .rb-quotes {
    display: flex;
    gap: 0;
    max-width: none;
    margin: 0 0 4px;
    padding: 4px 0 8px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #reviews .rb-quotes::-webkit-scrollbar {
    display: none;
  }

  #reviews .rb-quotes:focus-visible {
    outline: 2px solid var(--nash-orange);
    outline-offset: -2px;
  }

  /* a review in a track is not "entering" (no rise, no blur): the same as the private events' cards above */
  #reviews .rb-quotes > .rb-quote {
    flex: 0 0 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 4px 4px 4px 20px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  /* ----- B2 #showtimes: heading. RETIRED by selector (his fd8ce38f, 30 Oct 2026 02:31:28Z, nash-beta-fixes-1030 step 14: "the site has two
     calendars doing the same thing"): the rule `html body:has(#ticketed:not(:empty)) #showtimes #theTicketed { display: none }` stood here;
     #theTicketed and the day strip are erased from the page, and #ticketed carries the ticketed nights at every width. ----- */

  #showtimes .section-header {
    margin-bottom: 20px;
  }

  /* ----- B3 #vip: the pitch with its picture is one screen of a track, the booking card the next ----- */
  #vip .vip-layout {
    display: flex;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #vip .vip-layout::-webkit-scrollbar {
    display: none;
  }

  #vip .vip-layout:focus-visible {
    outline: 2px solid var(--nash-orange);
    outline-offset: -2px;
  }

  #vip .vip-layout > .vip-content,
  #vip .vip-layout > .vip-form-container {
    flex: 0 0 100%;
    min-width: 0;
    box-sizing: border-box;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  #vip .vip-desc {
    margin-bottom: 16px;
  }

  #vip .vip-photo {
    margin-bottom: 16px;
  }

  #vip .vip-perks {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  #vip .vip-perks li {
    padding: 8px 10px;
    gap: 8px;
  }

  #vip .vip-form-container {
    padding: 24px 20px;
    justify-content: flex-start;
  }

  /* ----- B4 #reserve: title, Reserve and Buy a gift card side by side (the same style), Call Us under them, then the
     Before you go list as one track, a line to a screen ----- */
  #reserve .reserve-brandmark {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
  }

  #reserve .reserve-title {
    margin-bottom: 12px;
  }

  #reserve .reserve-desc {
    font-size: var(--t-small);
    line-height: 1.5;
    margin: 0 auto 20px;
  }

  #reserve .reserve-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
  }

  #reserve .reserve-actions > .btn {
    flex: 1 1 calc(50% - 6px);
    width: auto;
    max-width: none;
    min-width: 0;
    min-height: 52px;
    padding-left: 8px;
    padding-right: 8px;
    letter-spacing: 1px;
    line-height: 1.2;
    text-align: center;
    justify-content: center;
    align-items: center;
  }

  #reserve .reserve-actions > .btn:nth-child(n + 3) {
    flex-basis: 100%;
  }

  #reserve .before-you-go {
    margin: 20px auto 0;
    padding-top: 16px;
  }

  #reserve .before-you-go__title {
    margin: 0 0 12px;
  }

  #reserve .before-you-go__list {
    display: flex;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #reserve .before-you-go__list::-webkit-scrollbar {
    display: none;
  }

  #reserve .before-you-go__list:focus-visible {
    outline: 2px solid var(--nash-orange);
    outline-offset: -2px;
  }

  #reserve .before-you-go__item {
    flex: 0 0 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0 8px;
    text-align: center;
    justify-content: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}

/* a short phone (an iPhone SE, 375 x 667): 603 px under the bar; the least important lines give way, nothing is cut from the page's words
   but the brandmark, the stars and the hero's Scroll cue (decoration) and a band's one-line slogan (the heading and the facts stay) */
@media (max-width: 767px) {
  /* the short phone (375x667 and the like): the same bands, tighter, so each is still one screen; nested in the phone
     block, so the desk is never reached and the sheet keeps its two media headers (test_feed ff14) */
  @media (max-height: 740px) {
    html body :is(#reviews, #showtimes, #vip, #reserve).section {
      padding-top: 24px;
      padding-bottom: 24px;
    }

    #reviews .section-desc,
    #reviews .rb-stars,
    #reserve .reserve-brandmark {
      display: none;
    }

    #reviews .nk-what {
      margin-bottom: 8px;
    }

    #reviews .section-header {
      margin-bottom: 12px;
    }

    #reviews .rb-ratings {
      margin-bottom: 12px;
    }

    #vip .vip-photo img {
      max-height: 110px;
      object-fit: cover;
    }

    #reserve .reserve-desc {
      margin-bottom: 12px;
    }

    /* NS-5 at 375 x 667 (Part B): the hero's Scroll cue is decoration on a page that snaps a screen a flick, and gives way, so the hero runs
       21 px past the window, not 110 (the square and the badge's 81 percent rule stand); #showtimes loses its one-line slogan, as #reviews
       does, and the 40 px under the day strip */
    .hero .hero-scroll-inline,
    #showtimes .section-desc {
      display: none;
    }

    /* RETIRED by selector (his fd8ce38f, 30 Oct 2026 02:31:28Z): `#showtimes #thisWeek { margin-bottom: 0 }` stood here, the 40 px under the
       first calendar's day strip; #thisWeek is an empty mark now and the strip is erased. */

    /* the menu and the private events keep their 80 px on every taller phone (PL-3, the seat's 08:34:44Z) and take 24 here, the four bands'
       short padding; the menu's photo rides up over the band's top by the same variable (menu.css), so the variable is what changes */
    html body :is(#menu, #private-events).section {
      --section-pad: 24px;
    }

    /* nash-menu-1029 C1 gives the private events' swipe hint 16 px above its button; on the short phone the band pays for it here, its
       heading 20 px above the cards in place of 32, so it is still one screen (NS-5 at 375x667: 612 px with the gap, 603 wanted) */
    #private-events .section-header {
      margin-bottom: 20px;
    }

    #menu .menu-head {
      padding-bottom: 16px;
    }

    #menu .menu-tabs {
      margin-bottom: 8px;
      padding-top: 8px;
      padding-bottom: 8px;
    }

    #menu .menu-pdf-link {
      padding-top: 8px;
    }

    /* nash-menu-1029 Part A (his widget af2bce1e): the menu's one row height and note slot made the band 20 px taller than the short
       phone's screen (NS-5 at 375x667: 623, 603 wanted); here the note's slot is 8 px and the switch sits 8 px under the tabs' head */
    #menu .menu-strip > .menu-card.active {
      grid-template-rows: auto minmax(8px, auto);
      row-gap: 4px;                /* the row to its note (12 above); the cards' own sideways gap is unchanged */
    }

    #menu .menu-carousel .swipe-hint {
      margin-top: 4px;
    }

    #menu .menu-switch {
      padding-top: 8px;
    }
  }
}