/* ========================================
   THIS WEEK, THE TICKETED and THE FULL CALENDAR inside #showtimes
   (docs/plans/nash_site.md section 4; steps 4 and 5). Drawn by week-ui.js.

   Every text size is one of step 1's ladder tokens from style.css (--t-body, --t-small,
   --t-eyebrow, --t-h3; --t-h2 is not needed here), every tap target is 44 px or more, and
   the colours are the site's own (:root in style.css). Loaded after style.css, so it never
   restates a token. Every rule starts from .wk-band or .wk-calendar so it outranks the
   section's own `.section--light p` and `h4` colours without an !important.

   Still by default: nothing here animates. The only motion is the browser's own scroll
   snap and the buttons' hover colour.
   ======================================== */

.wk-band {
  margin: 0 0 var(--band-tight);
}

.wk-band[hidden] {
  display: none;
}

.wk-band .wk-heading {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 400;
  letter-spacing: 3px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--nash-orange);
  margin: 0 0 20px;
}

/* ---------- THIS WEEK: seven cards ---------- */

/* A phone: one row that scrolls sideways and snaps, bled to the screen edges (the container pads 24). */
.wk-band .wk-days {
  position: relative;               /* the offset parent week-ui.js centres today against */
  list-style: none;
  display: flex;
  gap: 12px;
  margin: 0 -24px;
  padding: 4px 24px 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--nash-orange) var(--nash-black-light);
}

.wk-band .wk-day {
  flex: 0 0 min(78vw, 300px);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 16px 20px;
  background: rgba(24, 34, 48, 0.55);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  color: var(--white);
}

.wk-band .wk-day--past {
  opacity: 0.66;                    /* dimmed, still readable: the week stays Monday to Sunday */
}

.wk-band .wk-day--today {
  background: rgba(248, 149, 34, 0.09);
  border-color: var(--nash-orange);
  box-shadow: inset 0 0 0 1px var(--nash-orange);
}

.wk-band .wk-day-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--nash-yellow);
}

.wk-band .wk-today {
  text-transform: uppercase;          /* TODAY (the seat's 01:18:03Z) */
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--nash-red);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 2px;
  line-height: 1.2;
}

.wk-band .wk-house {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1.4;
  color: var(--white);
}

/* A closed day, or private events only, with nothing else on it: the word is the card. */
.wk-band .wk-day--quiet .wk-house,
.wk-band .wk-day--closed .wk-house {
  font-size: var(--t-body);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--nash-orange);
}

/* A shut or private day (docs/plans/polish_1025.md, Nash item 5): its heading and one line, at the top of the row and quieter than
   an open night, so Monday and Tuesday are not as tall as Saturday. The row stretches every card to the tallest; align-self lets this
   one stay as tall as its words. Today keeps its frame and its red tag (the :not), whatever it is. Written after the quiet rule above,
   at the same weight, so it wins. */
.wk-band .wk-day--compact {
  align-self: flex-start;
  gap: 6px;
}

.wk-band .wk-day--compact:not(.wk-day--today) {
  background: rgba(24, 34, 48, 0.25);
  border-color: var(--gray-700);
}

.wk-band .wk-day--compact:not(.wk-day--today) .wk-day-head {
  color: var(--gray-300);
}

.wk-band .wk-day--compact .wk-house {
  font-size: var(--t-small);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gray-300);
}

.wk-band .wk-closure-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1.4;
  color: var(--white);
}

.wk-band .wk-closure {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--gray-300);
}

.wk-band .wk-lines,
.wk-band .wk-events {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wk-band .wk-lines li {
  font-size: var(--t-small);
  line-height: 1.4;
  color: var(--gray-300);
}

/* The one-offs sit under a hairline, inside their day. */
.wk-band .wk-events {
  padding-top: 10px;
  border-top: 1px solid var(--gray-200);
}

.wk-band .wk-ev {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  font-size: var(--t-small);
  line-height: 1.4;
}

.wk-band .wk-ev-time {
  color: var(--nash-orange);
  font-weight: 700;
}

.wk-band .wk-ev-title {
  min-width: 0;
  overflow-wrap: break-word;
  color: var(--white);
}

.wk-band .wk-around-head {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--gray-700);
  font-family: var(--font-heading);
  font-size: var(--t-eyebrow);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gray-300);
}

.wk-band .wk-ev--around .wk-ev-time,
.wk-band .wk-ev--around .wk-ev-title {
  color: var(--gray-300);
}

/* "Tickets": the mark on a ticketed night. When the row has a link the whole line is the link (see .wk-ev-link below). */
.wk-band .wk-mark {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--nash-red);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 2px;
  line-height: 1.2;
  text-transform: uppercase;
}

/* A linked line (his 03:16:06Z (2)): an event whose events.json row carries a `link` is one <a> around the whole line, a box
   44 px tall at least and as wide as the card, opening the link in a new tab. The "Tickets" mark inside it is the drawn word
   only (the link is the line); a line with no link is the plain <li> above and has no box. */
.wk-band .wk-ev--link {
  display: block;
}

.wk-band .wk-ev-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  min-height: 44px;
  padding: 4px 0;
  color: inherit;
}

.wk-band .wk-ev-link .wk-ev-title {
  text-decoration: underline;
  text-decoration-color: rgba(237, 230, 219, 0.35);
  text-underline-offset: 3px;
}

.wk-band .wk-ev-link:hover .wk-ev-title,
.wk-band .wk-ev-link:focus-visible .wk-ev-title {
  text-decoration-color: currentColor;
}

.wk-band .wk-ev-link:hover .wk-mark {
  background: var(--nash-red-light);
}

.wk-band .wk-ev-link:focus-visible {
  outline: 2px solid var(--nash-orange);
  outline-offset: 2px;
}

/* A phone (polish_1025.md Nash item 5): the row fades out at its right edge, so the next card reads as more to swipe, and seven dots
   under it show which day is in view (week-ui.js drawDots). The fade is 32 px, a little wider than the row's 24 px side padding, so
   the last card at the end of its scroll is not faded. A tablet and a desk have neither: the dots are drawn but not shown. */
.wk-band .wk-dots {
  display: none;
}

@media (max-width: 767px) {
  .wk-band .wk-days {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
  }

  .wk-band .wk-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
  }

  .wk-band .wk-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gray-700);
  }

  .wk-band .wk-dot--on {
    background: var(--nash-orange);
  }
}

/* A tablet: the same row, narrower cards, a card and a half in view. */
@media (min-width: 768px) {
  .wk-band .wk-day {
    flex-basis: 240px;
  }
}

/* A desk, 1200 and up: the seven sit in one line, no scrolling. */
@media (min-width: 1200px) {
  .wk-band .wk-days {
    margin: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .wk-band .wk-day {
    flex: 1 1 0;
    min-width: 0;
    padding: 16px 12px 18px;
  }
}

/* ---------- THE TICKETED: featured cards in a snap strip ---------- */

.wk-band .wk-tix-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.wk-band .wk-tix-head .wk-heading {
  margin: 0;
}

/* The arrows are for a desk; a phone swipes. Both greyed ends and a strip that fits send them away. */
.wk-band .wk-arrows {
  display: none;
  gap: 8px;
}

@media (min-width: 1024px) {
  .wk-band .wk-arrows {
    display: flex;
  }
}

.wk-band.wk-tix--fits .wk-arrows {
  display: none;
}

.wk-band .wk-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid rgba(237, 230, 219, 0.2);
  border-radius: 50%;
  color: var(--nash-orange);
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: 1;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.wk-band .wk-arrow:hover:not([aria-disabled="true"]) {
  background: var(--nash-red);
  border-color: var(--nash-red);
  color: var(--white);
}

.wk-band .wk-arrow[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
}

.wk-band .wk-strip {
  list-style: none;
  display: flex;
  align-items: stretch;             /* every card as tall as the tallest in its row (his 03:16:06Z (1)) */
  gap: 16px;
  margin: 0 -24px;
  padding: 4px 24px 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 24px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--nash-orange) var(--nash-black-light);
}

.wk-band .wk-tix-card {
  /* A phone: one card per swipe, as wide as the band (a percentage of the strip's content box, inside its 24 px side padding).
     The scroll-snap-align and the arrows' step (one card and the gap) then move exactly one card. */
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  background: linear-gradient(160deg, rgba(166, 44, 42, 0.18) 0%, rgba(24, 34, 48, 0.55) 100%);
  border: 1px solid rgba(249, 208, 116, 0.35);
  border-radius: 8px;
}

.wk-band .wk-tix-date {
  font-family: var(--font-heading);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 3px;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--nash-orange);
}

.wk-band .wk-tix-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--nash-yellow);
  overflow-wrap: break-word;
}

.wk-band .wk-tix-time {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--white);
}

.wk-band .wk-tix-line {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--gray-300);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.wk-band .wk-tix-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: auto;
  padding-top: 12px;
}

.wk-band .wk-soon {
  font-family: var(--font-heading);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--nash-yellow);
}

/* From 601 the cards share the band's full width equally (his 03:16:06Z (1)). The basis is a half (601) or a third (768) of the
   width less the gaps, and the cards grow into what is left: one card fills the band, two are halves and three are thirds. A fourth
   and on stay a third wide and the strip scrolls (swipe, and the arrows from 1024; one press moves one card). The strip stretches
   every card to the tallest, and .wk-tix-cta's `margin-top: auto` puts each button at its card's foot. */
@media (min-width: 601px) {
  .wk-band .wk-tix-card {
    flex: 1 0 calc((100% - 16px) / 2);
  }
}

@media (min-width: 768px) {
  .wk-band .wk-tix-card {
    flex: 1 0 calc((100% - 32px) / 3);
  }
}

@media (min-width: 1200px) {
  .wk-band .wk-strip {
    margin: 0;
    padding: 4px 0 16px;
    scroll-padding-inline: 0;
  }
}

/* The strip and the row are tab stops (they scroll): the ring sits inside, where the section's overflow cannot clip it. */
.wk-band .wk-days:focus-visible,
.wk-band .wk-strip:focus-visible,
.wk-band .wk-arrow:focus-visible,
.wk-calendar > summary:focus-visible {
  outline: 2px solid var(--nash-orange);
  outline-offset: -2px;
}

/* ---------- THE FULL CALENDAR: the monthly view, collapsed under the cards ---------- */

.wk-calendar {
  border-top: 1px solid var(--gray-200);
  margin: 0;
}

.wk-calendar > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 12px 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--nash-orange);
}

.wk-calendar > summary::-webkit-details-marker {
  display: none;
}

.wk-calendar > summary::after {
  content: '+';
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: 1;
}

.wk-calendar[open] > summary::after {
  content: '\2212';
}

/* script.js still renders into #calGrid and #calMonth unchanged. #view-monthly was the Monthly tab, shown only while
   .active; here it is always the open panel's content, and it does not slide in. */
.wk-calendar .schedule-view {
  display: block;
  animation: none;
  padding-top: 24px;
}

/* The weekly grid is kept in the markup for .github/scripts/derive_weekly.py and is never shown. */
.schedule-view[hidden] {
  display: none !important;
}