/* ── Shows page ──────────────────────────────────────────────────────────────
   Mirrors the home layout (white background, her on the left, pibby title).
   Inherits base.css + index.css; this file only styles the show content.
   ──────────────────────────────────────────────────────────────────────────── */

.show-content { margin-top: clamp(20px, 3vh, 32px); }

.shows-list { display: flex; flex-direction: column; }

.show-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid rgba(0,0,0,.12);
}
.show-row:last-child { border-bottom: 1px solid rgba(0,0,0,.12); }

/* text block shrinks/wraps so the button can stay on the same line */
.show-info { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; }

.show-date {
  font-family: 'Cinzel', serif;
  font-size: 1.02rem;
  letter-spacing: .04em;
  color: #111;
}
.show-date .show-time { color: #555; }

.show-venue {
  font-family: 'Cinzel', serif;
  font-size: .9rem;
  letter-spacing: .04em;
  color: #555;
}

.ticket-btn {
  flex-shrink: 0;
  font-family: 'Cinzel', serif;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: #111;
  padding: 11px 22px;
  border-radius: 999px;
  transition: background .2s ease, transform .15s ease;
}
.ticket-btn:hover { background: #000; transform: translateY(-1px); }

.tour-note {
  margin-top: clamp(20px, 4vh, 30px);
  font-family: 'Cinzel', serif;
  font-size: .82rem;
  letter-spacing: .04em;
  color: #666;
}
.tour-note a { color: #111; text-decoration: underline; text-underline-offset: 3px; }

.tour-back {
  display: inline-block;
  margin-top: 14px;
  font-family: 'Cinzel', serif;
  font-style: italic;
  font-size: .76rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #888;
  text-decoration: none;
}
.tour-back:hover { color: #111; }

/* ── Mobile: same as home — image left, content in the right white column ─── */
@media (max-width: 540px) {
  /* back link sits just under the "shows & tickets" subtitle */
  .tour-back {
    position: fixed;
    left: 58vw;
    top: 31%;
    z-index: 5;
    margin: 0;
  }
  .show-content {
    position: fixed;
    left: 58vw;
    right: 3vw;
    top: 40%;
    z-index: 5;
    margin: 0;
  }
  /* venue names can be long — wrap instead of clipping */
  .show-date, .show-venue { overflow-wrap: anywhere; }
  /* narrow column: stack and center the date, venue, and button */
  .show-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }
  .show-info { align-items: center; }
  .show-date { font-size: .9rem; }
  .show-venue { font-size: .8rem; }
  .ticket-btn { font-size: .72rem; padding: 10px 18px; }
}