/*! RelaxingJazz.com · on-tour.css (the On tour page, /on-tour/)
 * Scoped under .page--on-tour (the next page's stylesheet loads a moment before a router swap) and built only
 * from rj.css tokens, so Night and Day both work. Motif: the ticket stub. Each show's date sits on its own stub,
 * torn off along a dashed gold perforation, with a soft stage light over the hero.
 */

/* ============================================================================ hero === */
.page--on-tour .tour-hero {
  position: relative;
  overflow: clip;
  padding-top: var(--page-hero-pad-top, clamp(3rem, 2rem + 4vw, 6rem));
  padding-bottom: var(--page-hero-pad-bottom, clamp(2rem, 1.5rem + 2vw, 3rem));
}
.page--on-tour .tour-hero::before {
  /* a warm stage light from above the facts card */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(60% 90% at 82% -10%, color-mix(in srgb, var(--gold) 13%, transparent), transparent 70%);
  pointer-events: none;
}
.page--on-tour .tour-hero__inner { position: relative; z-index: 1; display: grid; gap: var(--space-6); align-items: start; }
/* Block flow, like the other pages' heroes, so the eyebrow and h1 land at the same y on every page. */
.page--on-tour .tour-hero__text .h-display { margin-top: var(--space-3); font-size: var(--page-hero-title, var(--step-6)); }
.page--on-tour .tour-hero__text .lede { margin-top: var(--space-4); }
@media (min-width: 960px) {
  .page--on-tour .tour-hero__inner { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
}

.page--on-tour .tour-facts {
  display: grid;
  margin: 0;
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--border);
  border-left: 2px solid var(--gold);
  border-radius: var(--radius-m);
  background: var(--surface-solid);
  box-shadow: var(--shadow-2);
}
.page--on-tour .tour-facts__item { display: grid; gap: 2px; padding-block: var(--space-3); min-width: 0; }
.page--on-tour .tour-facts__item + .tour-facts__item { border-top: 1px solid var(--border); }
.page--on-tour .tour-facts dt { font-size: var(--step--2); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.page--on-tour .tour-facts dd {
  margin: 0;
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.2;
  color: var(--text);
  font-variant-numeric: lining-nums;
}
.page--on-tour .tour-facts dd a { text-decoration: none; }
.page--on-tour .tour-facts dd a:hover { color: var(--gold); font-style: italic; }
.page--on-tour .tour-facts__sub {
  display: block;
  margin-top: 2px;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  line-height: 1.4;
  color: var(--text-2);
}
/* the two counts side by side over the next show, so the box is no taller than the hero text and the list starts
   on the first screen */
.page--on-tour .tour-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-5); }
.page--on-tour .tour-facts__item:nth-child(2) { border-top: 0; }
.page--on-tour .tour-facts__item--next { grid-column: 1 / -1; }
@media (max-width: 959px) {
  /* Phones and tablets: no facts box, so the first shows are on the first screen (the count line under the
     filters says the same, and the list starts with the next show). */
  .page--on-tour .tour-facts { display: none; }
}

/* ============================================================================ filters === */
.page--on-tour .tour-main { padding-top: var(--space-2); }
.page--on-tour .tour-tools { display: grid; gap: var(--space-4) var(--space-5); align-items: end; }
/* the country menu (when there is one) and the search share a row from 480 px */
@media (min-width: 480px) {
  .page--on-tour .tour-tools { grid-template-columns: minmax(0, 12rem) minmax(0, 24rem); gap: var(--space-4); }
  .page--on-tour .tour-tools:has([data-country-field][hidden]) { grid-template-columns: minmax(0, 24rem); }
}
@media (min-width: 640px) {
  .page--on-tour .tour-tools { grid-template-columns: minmax(0, 15rem) minmax(0, 24rem); gap: var(--space-4) var(--space-5); }
}
.page--on-tour .tour-tools__field { display: grid; gap: var(--space-2); min-width: 0; }
.page--on-tour .tour-tools__label {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
/* the select matches the search field's height and shape, so the two read as one row */
.page--on-tour .tour-tools .select { min-height: 52px; border-radius: var(--radius-pill); padding-left: 1.2em; }

.page--on-tour .tour-count-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  min-height: 44px;
  margin-top: var(--space-4);
}
.page--on-tour .tour-count { min-height: 1.6em; color: var(--text-3); font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.page--on-tour .tour-clear .icon { width: 1em; height: 1em; }

/* ============================================================================ the shows === */
.page--on-tour .tour-month { padding-top: var(--space-6); }
.page--on-tour .tour-month__head { display: flex; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-3); }
.page--on-tour .tour-month__head::after {
  content: "";
  order: 2;
  flex: 1 1 auto;
  height: 1px;
  align-self: center;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 55%, transparent), transparent);
}
.page--on-tour .tour-month__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--step-4);
  line-height: 1;
  color: var(--gold);
}
.page--on-tour .tour-month__year {
  font-family: var(--font-ui);
  font-style: normal;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--text-3);
}
.page--on-tour .tour-month__count {
  order: 1;
  color: var(--text-3);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* One show: the date stub | artist, venue and place | the tickets link. On phones the link drops under the text. */
.page--on-tour .tour-show {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  grid-template-areas: "date body" "date act";
  gap: var(--space-2) var(--space-4);
  align-items: start;
  padding: var(--space-4) var(--space-2) var(--space-4) 0;
  border-bottom: 1px solid var(--border);
  transition: background-color var(--dur-1) var(--ease);
}
.page--on-tour .tour-show:first-child { border-top: 1px solid var(--border); }
@media (hover: hover) {
  .page--on-tour .tour-show:hover { background: color-mix(in srgb, var(--surface-hover) 55%, transparent); }
}
@media (min-width: 720px) {
  .page--on-tour .tour-show {
    grid-template-columns: 5.5rem minmax(0, 1fr) auto;
    grid-template-areas: "date body act";
    align-items: center;
    gap: var(--space-5);
    padding-right: var(--space-3);
  }
}
.page--on-tour .tour-show__date {
  grid-area: date;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding-right: var(--space-3);
  border-right: 1px dashed color-mix(in srgb, var(--gold) 45%, transparent);
  text-align: center;
  line-height: 1.1;
}
@media (min-width: 720px) {
  .page--on-tour .tour-show__date { padding-right: var(--space-4); }
}
.page--on-tour .tour-show__wd,
.page--on-tour .tour-show__mon {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
}
.page--on-tour .tour-show__day {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 500;
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: lining-nums;
}
.page--on-tour .tour-show__time { font-size: var(--step--2); color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

.page--on-tour .tour-show__body { grid-area: body; min-width: 0; }
.page--on-tour .tour-show__artist {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.page--on-tour .tour-show__artist a { color: var(--text); text-decoration: none; }
.page--on-tour .tour-show__artist a:hover { color: var(--gold); font-style: italic; }
.page--on-tour .tour-show__where { margin-top: var(--space-1); color: var(--text-2); line-height: 1.45; overflow-wrap: anywhere; }
.page--on-tour .tour-show__place { color: var(--text-3); }
.page--on-tour .tour-show__sep { color: var(--text-3); }
.page--on-tour .tour-show__status { margin-top: var(--space-1); font-size: var(--step--1); font-weight: 500; color: var(--gold); }
.page--on-tour .tour-show__status--warn { color: var(--coral); }
.page--on-tour .tour-show__status--off { color: var(--text-3); font-weight: 400; }
.page--on-tour .tour-show__tickets { grid-area: act; justify-self: start; }
@media (min-width: 720px) {
  .page--on-tour .tour-show__tickets { justify-self: end; }
}

/* ============================================================================ states === */
.page--on-tour .tour-note:empty { display: none; }
.page--on-tour .tour-note .empty-state, .page--on-tour .tour-note .error-state { margin-top: var(--space-4); }
.page--on-tour .tour-note__more { max-width: 46ch; color: var(--text-2); }
.page--on-tour .tour-note__nojs { color: var(--text-2); }
.page--on-tour .tour-nomatch { margin-top: var(--space-5); }
.page--on-tour .tour-skeleton { margin-top: var(--space-6); }
.page--on-tour .tour-skeleton__row {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--border);
}
.page--on-tour .tour-skeleton__date { width: 3.25rem; height: 3.75rem; }
.page--on-tour .tour-credit {
  margin-top: var(--space-6);
  max-width: 68ch;
  color: var(--text-3);
  font-size: var(--step--1);
  line-height: 1.55;
}

/* ============================================================================ artists on tour === */
.page--on-tour .tour-artists { padding-bottom: var(--space-4); }
.page--on-tour .tour-artists__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 0 var(--space-6);
}
.page--on-tour .tour-artist {
  display: grid;
  gap: 2px;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
.page--on-tour .tour-artist__name {
  justify-self: start;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.25;
  color: var(--text);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.page--on-tour .tour-artist__name:hover { color: var(--gold); font-style: italic; }
.page--on-tour .tour-artist__meta { color: var(--text-3); font-size: var(--step--1); }

/* ============================================================================ buy the music === */
.page--on-tour .tour-more__card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: var(--space-5) var(--space-7);
  align-items: center;
  padding: clamp(var(--space-5), 4vw, var(--space-7));
  padding-bottom: clamp(var(--space-6), 5vw, var(--space-8));
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 60%),
    var(--surface-solid);
  box-shadow: var(--shadow-1);
}
.page--on-tour .tour-more__card::after {
  /* the Pitons along the bottom edge, as on the artist pages' support card */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  aspect-ratio: 1200 / 160;
  background: var(--text-3);
  opacity: 0.12;
  -webkit-mask: url("../img/pitons.svg") center bottom / 100% 100% no-repeat;
  mask: url("../img/pitons.svg") center bottom / 100% 100% no-repeat;
  pointer-events: none;
}
.page--on-tour .tour-more__text { position: relative; z-index: 1; }
.page--on-tour .tour-more__text h2 { margin-top: var(--space-2); }
.page--on-tour .tour-more__text p:last-child { margin-top: var(--space-3); max-width: 56ch; color: var(--text-2); }
.page--on-tour .tour-more__btn { position: relative; z-index: 1; justify-self: start; }
@media (min-width: 860px) {
  .page--on-tour .tour-more__card { grid-template-columns: minmax(0, 1fr) auto; }
}