/* ==========================================================================
   DECK GRID — the locations deck as a row of cards  (2026-08-20)

   Replaces the sticky ticket stack. The stack folded six near-viewport-tall
   tickets over each other, so five of the six cities were off screen and a
   reader had to scroll 6.5 phone screens to see the set. Somebody who cannot
   see their city assumes we do not run there, and "Gold Coast is filling"
   only argues anything when it sits beside a city you can still book.

   So: every city on screen at once. Three across on a laptop, two rows, no
   orphan card and no sideways scroll. The card carries the room, the city,
   the date and the two actions, and stops. Room, level and street live on
   that city's own page behind "See the day".

   Loads AFTER deck.css and ground.css and overrides both.
   Tokens measured off the site: seam #FAF9F5, card #FFFFFA, hairline #E8E4DA,
   ink #242424 / #616161, accent #6736E2 (pressed #5024C0), radii 20/30/40,
   no shadows. Buttons carry their label and nothing else.
   ========================================================================== */

/* ---- ground -------------------------------------------------------------
   #the-deck was the one section ground.css never gave a gradient, and
   deck.css forced it `background: transparent !important`, so it fell through
   to the bare body colour while every neighbour swelled and settled. It also
   sat 40px in from each side of <main>, leaving a strip of a different value
   down both edges. Full width, and on the same swell as its neighbours. */

html { min-height: 100%; background: #FAF9F5; }
body { min-height: 100vh; background: #FAF9F5; }

#the-deck.selr-deck-sec {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-inline: 0;
  padding: 0;
  background: linear-gradient(180deg,
    #FAF9F5 0%, #FCFCFA 32%, #FCFCFA 68%, #FAF9F5 100%) !important;
}

/* The house container. Every other section is 1320 max with a 60px inner pad,
   so this is what the content edge has to line up with. */
#the-deck .selr-deck-inner {
  max-width: 1320px;
  margin: 0 auto;
  /* Less below than above: the next section opens with a pinned stage that is
     mostly air, so the deck does not need to add its own. */
  padding: 120px 60px 76px;
  box-sizing: border-box;
}

/* deck.css pinned the lead block — `position: sticky` with a fixed height
   sized for the scroll-stack. Without the stack that height was 260px of dead
   air under the subhead. Released. */
#the-deck .selr-deck-lead { height: auto; }
#the-deck .selr-deck-head { position: static; height: auto; min-height: 0; }
#the-deck .selr-deck-sub { margin: 0 0 40px; max-width: 46ch; }

/* ---- the row ------------------------------------------------------------
   Three across is the shape six cities want: two clean rows, cards wide
   enough that the photograph of the room actually reads. */

#the-deck .selr-deck-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 20px;
  row-gap: 20px;
  align-items: stretch;
}

#the-deck .selr-tk {
  background: #FFFFFA;
  border: 1px solid #E8E4DA;
  border-radius: 30px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ---- the room ----------------------------------------------------------- */

#the-deck .selr-tk-photo { position: relative; }
#the-deck .selr-tk-photo img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  background: #EDEAE2;
}
/* The credit was only styled inside deck.css's ≤810px query, so on a laptop it
   rendered as bare grey text against the card edge. Styled at every width now,
   over a scrim so it holds on a pale room. A photograph we took ourselves
   carries no credit, and no scrim either. */
#the-deck .selr-tk-photo::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 64px;
  background: linear-gradient(180deg, rgba(11, 11, 11, 0), rgba(11, 11, 11, .42));
  pointer-events: none;
}
#the-deck .selr-tk-photo.is-ours::after,
#the-deck .selr-tk-photo.is-blank::after { display: none; }

#the-deck .selr-tk-credit {
  position: absolute;
  left: 12px; right: 12px; bottom: 10px;
  z-index: 2;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 3px rgba(11, 11, 11, .55);
  /* One line, clipped, EXCEPT where a credit has to say more than a name — a
     photograph of the room a city was last run in, on a card whose next venue
     is not announced yet. Those wrap to two rather than lose the half that
     stops the picture reading as a promise. */
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* A city we have said we are coming to but have not booked a room for has no
   room to photograph. It gets a plain panel with its name, not another city's
   room and not a stock boardroom. */
#the-deck .selr-tk-photo.is-blank {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F3F1EA;
  border-bottom: 1px solid #E8E4DA;
}
#the-deck .selr-tk-photo.is-blank span {
  font-size: 20px;
  letter-spacing: -0.04em;
  font-weight: 600;
  color: #B4AFA2;
}

/* ---- the facts ----------------------------------------------------------
   Each band carries its own inline padding, so the bands can be handed to a
   shared subgrid and line up across the row whatever the copy length. */

#the-deck .selr-tk-head,
#the-deck .selr-tk-when,
#the-deck .selr-tk-venue,
#the-deck .selr-tk-actions { padding-inline: 22px; }

#the-deck .selr-tk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 22px;
  padding-bottom: 8px;
}
#the-deck .selr-tk-city {
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.04em;
  font-weight: 600;
  margin: 0;
}
#the-deck .selr-tk-date {
  font-size: 15px;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0;
}
#the-deck .selr-tk-time {
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: -0.025em;
  color: #616161;
  margin: 2px 0 0;
}

#the-deck .selr-tk-venue { padding-top: 14px; }
#the-deck .selr-tk-venue::before {
  content: "";
  display: block;
  height: 1px;
  background: #E8E4DA;
  margin-bottom: 14px;
}
#the-deck .selr-tk-name {
  font-size: 14px;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0;
}
#the-deck .selr-tk-soon {
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: -0.025em;
  color: #616161;
  margin: 2px 0 0;
}

#the-deck .selr-tk-fill { flex: 1; min-height: 18px; }

/* Elite reads as a foil stamp, not a lavender chip. The one place on the site
   that carries a second colour, and only ever on the Elite tier.
   The ramp is deeper than the first pass on purpose: at #D9BD82 the ivory
   label sat at 1.79:1 and disappeared into the light end of the gradient.
   Every stop below clears 4.8:1. */
#the-deck .selr-badge {
  display: inline-block;
  border-radius: 40px;
  padding: 5px 13px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  background: linear-gradient(135deg, #8C6B3F 0%, #7A5A2E 48%, #64491F 100%);
  color: #FFFDF6;
  white-space: nowrap;
}
#the-deck .selr-badge.is-soon {
  background: #EFEDE6;
  color: #6B675E;
  letter-spacing: 0.12em;
}

/* ---- the actions -------------------------------------------------------- */

#the-deck .selr-tk-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding-top: 16px;
  padding-bottom: 24px;
}
#the-deck .selr-tk-actions .selr-pill-btn {
  display: block;
  width: auto;
  text-align: center;
  background: #6736E2;
  color: #FFFFFA;
  border-radius: 40px;
  padding: 13px 22px;
  font-size: 14px;
  letter-spacing: -0.03em;
  font-weight: 600;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background .3s cubic-bezier(.44, 0, .56, 1),
              transform .2s cubic-bezier(.4, 0, .2, 1);
}
#the-deck .selr-tk-actions .selr-pill-btn:hover { background: #5024C0; }
#the-deck .selr-tk-actions .selr-pill-btn:active { transform: scale(.98); }
#the-deck .selr-tk-actions .selr-pill-btn:focus-visible {
  outline: 2px solid #6736E2;
  outline-offset: 2px;
}

#the-deck .selr-tk-see {
  font-size: 13px;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: #6736E2;
  text-decoration: none;
  text-align: center;
}
#the-deck .selr-tk-see:hover { color: #5024C0; text-decoration: underline; }

#the-deck .selr-deck-foot {
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.02em;
  color: #616161;
  margin: 30px 0 0;
}

/* The stack's tail was scroll runway for the fold. There is no fold now. */
#the-deck .selr-deck-tail { display: none; }

/* ---- alignment across the row ------------------------------------------
   Cards in a row share one subgrid, so the city, the date, the venue rule and
   the button all sit on the same line however long a venue name runs. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 810px) {
    /* Six tracks per row of cards, one per band: photo, city, date, venue,
       the flexible spacer, actions. Five left the actions band outside the
       subgrid and the spacer inherited its height as a hole. */
    #the-deck .selr-deck-row { grid-template-rows: repeat(2, auto auto auto auto 1fr auto); }
    /* A subgrid inherits the parent's row-gap, which would put 20px between
       every band inside the card: five phantom gaps and a 100px taller card.
       The card sets its own gap to nothing; the 20px between the two rows of
       cards still comes from the parent track it spans across. */
    #the-deck .selr-tk { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
    #the-deck .selr-tk-fill { min-height: 0; }
  }
}

/* ---- narrower ----------------------------------------------------------- */

@media (max-width: 1199.98px) {
  #the-deck .selr-deck-inner { padding: 90px 40px 60px; }
}
@media (max-width: 809.98px) {
  #the-deck .selr-deck-row { grid-template-columns: repeat(2, 1fr); }
  #the-deck .selr-deck-inner { padding: 70px 24px 52px; }
  #the-deck .selr-tk-photo img,
  #the-deck .selr-tk-photo.is-blank { height: 160px; }
}

/* Phones. Six cards stacked is a long scroll, so the card goes compact: a
   shorter photo band, tighter padding, and the two actions on one line. */
@media (max-width: 539.98px) {
  #the-deck .selr-deck-inner { padding: 56px 16px 44px; }
  #the-deck .selr-deck-row { grid-template-columns: 1fr; row-gap: 14px; }
  #the-deck .selr-deck-sub { margin-bottom: 28px; }
  #the-deck .selr-tk { border-radius: 24px; }
  #the-deck .selr-tk-photo img,
  #the-deck .selr-tk-photo.is-blank { height: 124px; }
  #the-deck .selr-tk-head,
  #the-deck .selr-tk-when,
  #the-deck .selr-tk-venue,
  #the-deck .selr-tk-actions { padding-inline: 18px; }
  #the-deck .selr-tk-head { padding-top: 16px; padding-bottom: 6px; }
  #the-deck .selr-tk-city { font-size: 20px; }
  #the-deck .selr-tk-venue { padding-top: 10px; }
  #the-deck .selr-tk-venue::before { margin-bottom: 10px; }
  #the-deck .selr-tk-fill { min-height: 14px; }
  #the-deck .selr-tk-actions {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding-top: 14px;
    padding-bottom: 18px;
  }
  #the-deck .selr-tk-actions .selr-pill-btn { flex: 1; padding: 12px 18px; }
  #the-deck .selr-tk-see { white-space: nowrap; }
  #the-deck .selr-deck-foot { margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  #the-deck .selr-tk-actions .selr-pill-btn { transition: none; }
}