/* ===================================================================
   Nightshift Live Page Styles
   Page-specific: upcoming gig list, month headings, calendar subscribe
   =================================================================== */

/* Live page layout only. The shared Next Gig component — including its
   heading — is owned by next-gig.css so Home and Live cannot drift apart. */

.gig-noscript {
  text-align: center;
  color: #b9b2c6;
  padding: 28px 0;
}
.gig-noscript a {
  color: #ffd9b0;
}
.gig-list,
.past-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.past-list {
  gap: 8px;
}
.scroll-more {
  margin: 12px 0 2px;
  text-align: center;
  font:
    700 0.72rem/1 "Barlow Condensed",
    sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(207, 166, 255, 0.6);
  animation: scroll-more-pulse 2.2s ease-in-out infinite;
}
.scroll-more-arrow {
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
}
@keyframes scroll-more-pulse {
  0%,
  100% {
    opacity: 0.45;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(3px);
  }
}
.past-year > .scroll-more {
  margin-top: 14px;
}

#upcoming {
  padding-top: 72px;
  padding-bottom: 28px;
}
#past {
  padding-top: 44px;
}

/* Upcoming date rows are content-led, not full-bleed.

   The row used to span the whole 1078px feed with a 1fr middle column, but the
   widest venue name needs about 120px, so roughly 540px of empty space sat
   between the venue and the buttons in every row. The time and the two actions
   also stacked, which forced a 152px minimum row height for two lines of text.

   Rows now stop at 860px and centre, which keeps the buttons on one axis and
   keeps a gap of comfortable reading width rather than a void. The actions sit
   side by side, bringing the row to 120px. Below 901px there is no room for two
   buttons beside the venue, so they stack again and the row grows. */
@media (min-width: 761px) {
  #upcoming .gig-list {
    align-items: center;
  }
  #upcoming .gig-row {
    grid-template-columns: 92px minmax(0, 1fr) 300px;
    width: 100%;
    max-width: 860px;
    min-height: 0;
    padding-block: 14px;
  }
  #upcoming .gig-row .gig-links {
    display: flex;
    grid-template-columns: none;
  }
  #upcoming .gig-row .gig-links a {
    flex: 1 1 0;
    min-height: 42px;
    padding: 9px 8px;
  }
}
@media (min-width: 761px) and (max-width: 900px) {
  #upcoming .gig-row {
    grid-template-columns: 84px minmax(0, 1fr) 250px;
  }
  #upcoming .gig-row .gig-links {
    flex-direction: column;
  }
  #upcoming .gig-row .gig-links a {
    flex: 0 0 auto;
  }
}
#gallery {
  padding-top: 72px;
  padding-bottom: 64px;
}

/* ---- Unified gig event card formatting ---- */
.gig-row {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid rgba(207, 166, 255, 0.28);
  border-radius: 16px;
  overflow: hidden;
}
.gig-row .gig-date,
.gig-row .gig-main,
.gig-row .gig-action {
  min-width: 0;
}
.gig-date {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.gig-dow {
  font:
    700 0.72rem/1 "Barlow Condensed",
    sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.gig-day {
  font:
    800 1.35rem/1 "Barlow Condensed",
    sans-serif;
  font-variant-numeric: tabular-nums;
}
.gig-mon {
  font:
    700 0.78rem/1 "Barlow Condensed",
    sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.gig-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.gig-venue {
  font:
    700 1.14rem/1.15 "Barlow Condensed",
    sans-serif;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.gig-loc {
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}
.gig-loc-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.gig-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.gig-time-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}
.gig-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.gig-time {
  font-size: 0.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.gig-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.gig-details,
.gig-dir {
  font:
    700 0.76rem/1 "Barlow Condensed",
    sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.gig-row .gig-date .gig-year {
  margin-top: 3px;
  color: #b3aac0;
  font:
    700 0.68rem/1 "Barlow Condensed",
    sans-serif;
  letter-spacing: 0.08em;
}
.gig-row .gig-time {
  color: #f1ebf7;
  font-weight: 700;
}

/* ---- Past gig card formatting ---- */
.past-year + .past-year {
  margin-top: 20px;
}
.past-year-btn,
.upcoming-more-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 12px;
  padding: 14px 16px;
  border: 1px solid rgba(207, 166, 255, 0.28);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: #e6d3ff;
  font:
    800 1.05rem/1 "Barlow Condensed",
    sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
}
.past-year-btn:hover,
.past-year-btn:focus-visible,
.upcoming-more-btn:hover,
.upcoming-more-btn:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  border-color: rgba(207, 166, 255, 0.6);
}
.past-year-btn-count,
.upcoming-more-count {
  margin-left: auto;
  color: #b3aac0;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.past-year-btn-chevron,
.upcoming-more-chevron {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  transition: transform 0.2s ease;
  flex: 0 0 auto;
}
.past-year-btn[aria-expanded="true"] .past-year-btn-chevron,
.upcoming-more-btn[aria-expanded="true"] .upcoming-more-chevron {
  transform: rotate(180deg);
}
.past-year-scroll,
.upcoming-more-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.past-year-scroll {
  overflow-y: auto;
}
.past-year-scroll > .gig-row {
  flex: 0 0 auto;
}
.past-year-scroll[hidden],
.upcoming-more-box[hidden] {
  display: none;
}
.upcoming-more {
  margin-top: 20px;
}
.upcoming-more-box {
  margin-top: 12px;
  overflow: visible;
  max-height: none;
}
.past-year-scroll::after,
.upcoming-more-box::after {
  content: "";
  position: sticky;
  bottom: 0;
  height: 32px;
  background: linear-gradient(to bottom, transparent, rgba(9, 7, 17, 0.6));
  pointer-events: none;
}
.past-year-scroll.scrolled-end::after,
.upcoming-more-box.scrolled-end::after {
  opacity: 0;
}
.gig-empty {
  text-align: center;
  color: #b9b2c6;
  padding: 20px 0;
}

.section-actions .button {
  min-height: 38px;
  padding: 0 18px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

#gallery .gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
#gallery figure {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(207, 166, 255, 0.22);
  background: rgba(9, 7, 17, 0.5);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.25);
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}
#gallery figure:hover,
#gallery figure:focus-within {
  border-color: rgba(207, 166, 255, 0.5);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.38);
  transform: translateY(-2px);
}
#gallery figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform 0.4s ease;
}
#gallery figure:hover img,
#gallery figure:focus-within img {
  transform: scale(1.04);
}
#gallery .gallery-more {
  margin-top: 24px;
}
#gallery .gallery-more > summary {
  cursor: pointer;
  min-height: 48px;
}

@media (max-width: 760px) {
  #upcoming {
    padding-top: 48px;
    padding-bottom: 24px;
  }
  #gallery {
    padding-top: 52px;
    padding-bottom: 48px;
  }
  #past {
    padding-top: 40px;
  }
  .gig-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-areas: "date main" "date action";
    align-items: start;
    column-gap: 14px;
    row-gap: 7px;
    padding: 16px 14px;
  }
  .gig-row .gig-date {
    grid-area: date;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    padding: 3px 12px 3px 0;
    border-right: 1px solid rgba(207, 166, 255, 0.22);
    text-align: center;
  }
  .gig-row .gig-day {
    font-size: 1.9rem;
    line-height: 0.95;
  }
  .gig-row .gig-main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-top: 1px;
  }
  .gig-row .gig-venue {
    font-size: 1.18rem;
    line-height: 1.16;
  }
  .gig-row .gig-loc-row {
    align-items: flex-start;
    gap: 6px 8px;
  }
  .gig-row .gig-loc {
    font-size: 0.86rem;
    line-height: 1.4;
  }
  .gig-row .gig-action {
    grid-area: action;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    margin-top: 2px;
    padding-top: 9px;
    border-top: 1px solid rgba(207, 166, 255, 0.12);
    text-align: left;
  }
  .gig-row .gig-time {
    font-size: 0.92rem;
    line-height: 1.3;
  }
  .gig-row .gig-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 9px;
  }
  .gig-row .gig-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 10px 12px;
    box-sizing: border-box;
    border: 1px solid rgba(207, 166, 255, 0.55);
    border-radius: 10px;
    background: rgba(183, 140, 255, 0.18);
    color: #fff !important;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.22);
    font:
      800 0.78rem/1.15 "Barlow Condensed",
      sans-serif;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    white-space: normal;
  }
  .gig-row .gig-links a::after {
    display: none !important;
  }
  .gig-row .gig-links .gig-details {
    background: rgba(183, 140, 255, 0.38);
    border-color: rgba(207, 166, 255, 0.78);
  }
  .gig-row .gig-links .gig-dir {
    background: rgba(48, 35, 68, 0.9);
    border-color: rgba(207, 166, 255, 0.5);
  }
  .gig-row .gig-links a:hover {
    background: rgba(183, 140, 255, 0.48);
    border-color: rgba(207, 166, 255, 0.9);
  }
  .gig-row .gig-links .gig-dir:hover {
    background: rgba(70, 50, 94, 0.95);
  }
  .gig-row .gig-links a:active {
    transform: translateY(1px);
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.2);
  }
  .gig-row-past .gig-action {
    margin: 0;
    padding: 2px 0 0;
    border: 0;
    align-items: flex-start;
  }
  .gig-row-past .gig-time {
    color: #a9a1b4;
    font-size: 0.86rem;
    font-weight: 600;
  }
  #past .page-note {
    margin-top: 20px;
    padding: 18px;
    text-align: center;
  }
  #past .section-actions {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
  }
  #past .section-actions .button {
    width: 100%;
  }
}
@media (max-width: 350px) {
  .gig-row {
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 11px;
    padding: 14px 12px;
  }
  .gig-row .gig-date {
    padding-right: 9px;
  }
  .gig-row .gig-day {
    font-size: 1.72rem;
  }
  .gig-row .gig-links {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 761px) {
  .upcoming-more-box {
    max-height: 284px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .gig-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) 230px;
    grid-template-areas: "date main action";
    align-items: stretch;
    column-gap: 24px;
    min-height: 116px;
    padding: 18px 20px;
  }
  .gig-row .gig-date {
    grid-area: date;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 3px 22px 3px 0;
    border-right: 1px solid rgba(207, 166, 255, 0.22);
    text-align: center;
  }
  .gig-row .gig-day {
    font-size: 2.05rem;
    line-height: 0.95;
  }
  .gig-row .gig-main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
  }
  .gig-row .gig-venue {
    font-size: 1.32rem;
    line-height: 1.14;
  }
  .gig-row .gig-loc {
    font-size: 0.9rem;
    line-height: 1.4;
  }
  .gig-row .gig-action {
    grid-area: action;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    padding-left: 20px;
    border-left: 1px solid rgba(207, 166, 255, 0.14);
    text-align: left;
  }
  .gig-row .gig-time {
    font-size: 0.95rem;
    line-height: 1.3;
  }
  .gig-row .gig-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
  }
  .gig-row .gig-links a {
    width: 100%;
    min-height: 44px;
    padding: 9px 10px;
    box-sizing: border-box;
  }
  .gig-row-past {
    grid-template-columns: 96px minmax(0, 1fr) max-content;
    min-height: 102px;
  }
  .gig-row-past .gig-action {
    min-width: 0;
    width: auto;
    align-items: flex-end;
  }
  .gig-row-past .gig-time {
    white-space: nowrap;
    color: #9f98aa;
    font-size: 0.9rem;
    font-weight: 600;
  }
  #gallery .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (min-width: 1024px) {
  #gallery .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}
@media (min-width: 761px) and (max-width: 980px) {
  .gig-row {
    grid-template-columns: 86px minmax(0, 1fr) 176px;
    column-gap: 18px;
    padding: 17px 18px;
  }
  .gig-row .gig-date {
    padding-right: 16px;
  }
  .gig-row .gig-action {
    padding-left: 14px;
  }
  .gig-row .gig-links {
    grid-template-columns: 1fr;
  }
  .gig-row-past {
    grid-template-columns: 86px minmax(0, 1fr) max-content;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-more {
    animation: none;
  }
  #gallery figure,
  #gallery figure img {
    transition: none;
  }
}

/* ---- Upcoming dates composition ----
   The shared feed component is capped at 600px from 761px up (see
   .feed-wrapper in assets/css/base/styles-base.css). On Live that cap applied
   only up to the 980px breakpoint while the section heading and the gig
   calendar beside it stayed full width, so between 761px and 980px the list of
   dates sat 100px+ inside the section it belongs to. Clear the cap for the
   whole tablet-and-up range; the card treatment below still starts at 981px. */
@media (min-width: 761px) {
  #upcoming .feed-wrapper {
    width: 100%;
    max-width: none;
  }

  /* The "Upcoming dates" heading labels this feed, so it has to sit on the same
     width as the feed. It shared the quieter 920px tier with the calendar, which
     left the heading 158px narrower than the list of dates underneath it. */
  #upcoming .section-head {
    max-width: none;
  }
}

/* ---- Wide desktop upcoming dates composition ----
   The shared feed component is intentionally capped at 600px elsewhere in the
   site. On Live that left a large unused desktop column, so the gig diary gets
   its own full-width responsive composition here. */
@media (min-width: 981px) {
  #upcoming .feed-wrapper {
    width: 100%;
    max-width: none;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid rgba(157, 108, 232, 0.28);
    background: linear-gradient(
      145deg,
      rgba(53, 31, 82, 0.22),
      rgba(13, 8, 25, 0.12)
    );
    box-shadow:
      0 0 28px rgba(147, 81, 255, 0.12),
      0 22px 54px rgba(0, 0, 0, 0.22);
  }

  #upcoming .gig-list {
    width: 100%;
    min-width: 0;
  }

  #upcoming .page-note {
    margin-top: 24px;
  }

  #upcoming .section-actions {
    margin-top: 20px;
    align-items: center;
  }
}

@media (min-width: 1100px) {
  #upcoming .gig-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
  }

  #upcoming .gig-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    grid-template-areas:
      "date main"
      "date action";
    column-gap: 20px;
    row-gap: 10px;
    min-height: 148px;
    height: 100%;
    padding: 20px 22px;
  }

  #upcoming .gig-row .gig-date {
    grid-area: date;
    align-self: stretch;
    justify-content: center;
    padding: 4px 18px 4px 0;
    border-right: 1px solid rgba(207, 166, 255, 0.22);
  }

  #upcoming .gig-row .gig-main {
    grid-area: main;
    justify-content: center;
    gap: 6px;
    padding-top: 1px;
  }

  #upcoming .gig-row .gig-venue {
    font-size: 1.3rem;
    line-height: 1.12;
  }

  #upcoming .gig-row .gig-loc {
    font-size: 0.9rem;
    line-height: 1.4;
  }

  #upcoming .gig-row .gig-action {
    grid-area: action;
    min-width: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    margin: 0;
    padding: 11px 0 0;
    border-top: 1px solid rgba(207, 166, 255, 0.12);
    border-left: 0;
    text-align: left;
  }

  /* Long set times ("8.30pm until 1am after the interval") must wrap rather
     than push past the fixed action column. min-width:0 lets the flex item
     shrink to the column instead of holding its max-content width. */
  #upcoming .gig-row .gig-time {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 0.92rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  #upcoming .gig-row .gig-links {
    display: flex;
    width: auto;
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: 8px;
  }

  #upcoming .gig-row .gig-links a {
    width: auto;
    min-width: 92px;
    min-height: 38px;
    padding: 8px 12px;
  }

  #upcoming .gig-row.gig-row-cancelled {
    grid-column: 1 / -1;
    height: auto;
  }
}

@media (min-width: 761px) {
  /* Match the mobile gig action buttons on desktop. */
  #upcoming .gig-row .gig-links a.action-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
    padding: 8px 7px !important;
    border: 0 !important;
    border-radius: 15px !important;
    background: linear-gradient(135deg, #c995ff, #9557ef) !important;
    color: #160b25 !important;
    box-shadow: none !important;
    font:
       600 0.75rem/1.2 "Manrope",
      sans-serif !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: normal !important;
  }
  #upcoming .gig-row .gig-links a.gig-dir {
    border: 1px solid rgba(207, 166, 255, 0.58) !important;
    background: rgba(183, 140, 255, 0.045) !important;
    color: #f3eafa !important;
  }
  #upcoming .gig-row .gig-links a.action-link::after {
    display: none !important;
  }
  #upcoming .gig-row .gig-links a.action-link:hover {
    background: #d9baf3 !important;
    color: #160b25 !important;
  }
  #upcoming .gig-row .gig-links a.gig-dir:hover {
    background: #352643 !important;
    color: #fff !important;
  }
}

@media (min-width: 1400px) {
  #upcoming .feed-wrapper {
    padding: 22px;
  }

  #upcoming .gig-list {
    gap: 18px;
  }

  #upcoming .gig-row {
    min-height: 154px;
    padding: 22px 24px;
  }
}

/* ===================================================================
   FINAL GIG LAYOUT — stable desktop/tablet composition
   Keep each public gig as one clear horizontal event row on larger screens;
   reserve the stacked layout for phones. This prevents the venue, time and
   actions from drifting into separate vertical bands at wider widths.
   =================================================================== */
@media (min-width: 761px) {
  #upcoming .gig-list,
  #past .past-year-scroll,
  #past .past-list {
    width: 100%;
    min-width: 0;
  }

  #upcoming .gig-row,
  #past .gig-row-past {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) minmax(220px, 260px);
    grid-template-areas: "date main action";
    align-items: center;
    column-gap: 22px;
    row-gap: 0;
    width: 100%;
    min-width: 0;
    min-height: 112px;
    height: auto;
    padding: 18px 20px;
    box-sizing: border-box;
  }

  #upcoming .gig-row .gig-date,
  #past .gig-row-past .gig-date {
    grid-area: date;
    align-self: stretch;
    justify-content: center;
    padding: 4px 18px 4px 0;
    border-right: 1px solid rgba(207, 166, 255, 0.22);
  }

  #upcoming .gig-row .gig-main,
  #past .gig-row-past .gig-main {
    grid-area: main;
    min-width: 0;
    justify-content: center;
    gap: 6px;
  }

  #upcoming .gig-row .gig-venue,
  #past .gig-row-past .gig-venue {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  #upcoming .gig-row .gig-action,
  #past .gig-row-past .gig-action {
    grid-area: action;
    min-width: 0;
    align-self: stretch;
    justify-content: center;
    align-items: stretch;
    gap: 9px;
    margin: 0;
    padding: 0 0 0 20px;
    border-left: 1px solid rgba(207, 166, 255, 0.14);
    border-top: 0;
  }

  #upcoming .gig-row .gig-time-row,
  #past .gig-row-past .gig-time-row {
    min-width: 0;
  }

  #upcoming .gig-row .gig-links,
  #past .gig-row-past .gig-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
  }

  #upcoming .gig-row .gig-links a,
  #past .gig-row-past .gig-links a {
    min-width: 0;
  }

  #upcoming .gig-row.gig-row-cancelled {
    grid-column: 1 / -1;
  }
}

@media (min-width: 761px) and (max-width: 980px) {
  #upcoming .gig-row,
  #past .gig-row-past {
    grid-template-columns: 82px minmax(0, 1fr) 184px;
    column-gap: 16px;
    padding: 16px;
    min-height: 106px;
  }
  #upcoming .gig-row .gig-date,
  #past .gig-row-past .gig-date {
    padding-right: 14px;
  }
  #upcoming .gig-row .gig-action,
  #past .gig-row-past .gig-action {
    padding-left: 14px;
  }
}

@media (min-width: 1100px) {
  #upcoming .gig-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  #upcoming .gig-row {
    min-height: 116px;
    padding: 18px 22px;
  }
}

@media (min-width: 1400px) {
  #upcoming .gig-row {
    min-height: 120px;
    padding: 20px 24px;
  }
}

/* The archive heading was inset 120px and capped at 880px, so "GIG ARCHIVE" and
   "PAST GIGS" did not line up with the rail or with the "Upcoming dates" heading
   directly above them. `#main` and the id outrank the `:where()` rule that set
   the cap, and live.css is a page stylesheet so it wins on order too. */
#main #past .section-head {
  max-width: none;
  margin-inline: 0;
}

/* Tablet / narrow-laptop bridge ------------------------------------------------
   Live has dense date rows, a calendar callout and photo grids. These widths
   get a middle layout so controls do not crowd or drift before the phone rules.
   The Next Gig card is left out: it is the same component as on Home and has
   to match Home's width (the deployed visual audit checks this). Narrowing it
   here made it 40px narrower than Home's at 844px. */
@media (min-width: 761px) and (max-width: 1080px) {
  body.live-page :is(#upcoming, #gallery, #past) > .wrap {
    width: min(calc(100% - clamp(48px, 7vw, 72px)), 46rem) !important;
    max-width: 46rem;
  }

  body.live-page #upcoming .gig-calendar {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px;
    max-width: 44rem;
    padding: 22px;
  }

  body.live-page #upcoming .gig-calendar .section-actions {
    max-width: 24rem;
    margin-inline: auto !important;
  }

  body.live-page #gallery .gallery-grid,
  body.live-page #gallery .gallery-more > .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  body.live-page #upcoming .gig-row,
  body.live-page #past .gig-row-past {
    grid-template-columns: 78px minmax(0, 1fr) !important;
    grid-template-areas:
      "date main"
      "action action" !important;
    column-gap: 16px;
    row-gap: 14px;
    min-height: 0;
  }

  body.live-page #upcoming .gig-row .gig-action,
  body.live-page #past .gig-row-past .gig-action {
    padding: 14px 0 0 !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(207, 166, 255, 0.14) !important;
  }

  body.live-page #upcoming .gig-row .gig-links,
  body.live-page #past .gig-row-past .gig-links {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 761-1080px: the 46rem column made the date list, gallery and calendar
   card narrower than the Next Gig card above them (which must match Home's
   width), and squeezed "Get directions" onto two lines. Use the Next Gig
   card's own width rule: 92% of the screen, capped at 922px. */
@media (min-width: 761px) and (max-width: 1080px) {
  body.live-page :is(#upcoming, #gallery, #past) > .wrap {
    width: min(92%, 922px) !important;
    max-width: 922px;
  }
  body.live-page #upcoming .gig-row,
  body.live-page #past .gig-row-past {
    width: 100% !important;
    max-width: none !important;
  }
  /* "Keep the dates handy" was a narrower 44rem box under the full list. */
  html body.live-page #upcoming .gig-calendar {
    max-width: none !important;
  }
  body.live-page #gallery .section-head,
  body.live-page #upcoming .section-head,
  body.live-page #past .section-head {
    margin-inline: 0 !important;
    padding-inline: 0 !important;
  }
}
@media (min-width: 901px) and (max-width: 1080px) {
  body.live-page #upcoming .gig-row {
    grid-template-columns: 104px minmax(0, 1fr) auto !important;
  }
  body.live-page #gallery .gallery-grid,
  body.live-page #gallery .gallery-more > .gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* 761-900px keeps two gallery columns; lead with the first photo full width
   so three photos don't leave an empty cell beside the third. */
@media (min-width: 761px) and (max-width: 900px) {
  body.live-page #gallery .wrap > .gallery-grid > figure:first-child {
    grid-column: 1 / -1;
  }
}

/* Desktop gig rows: keep each button label on one line ("Get directions"
   wrapped at 901-1095px). */
@media (min-width: 901px) {
  html body.live-page #main #upcoming .gig-row .gig-links > a {
    white-space: nowrap !important;
    padding-inline: 14px !important;
  }
}