/* ===================================================================
   10.07.2026 part 2 (from "Final Website Edit Pt 2.pdf", pages 1–5)
   Loaded last.
   =================================================================== */

/* p1 — ♫ a tiny bit closer to "Kollar" */
.wordmark .wordmark-note { margin-left: -5px; }

/* p1 — one testimonial across the width of both boxes */
.testimonials.testimonials-single { grid-template-columns: 1fr; }
.testimonials-single .testimonial { padding: 18px 22px; }
.testimonials-single .testimonial blockquote { line-height: 1.45; font-size: 16.5px; } /* 2 pt smaller (was 19.5px) */
.testimonials-single .testimonial figcaption { margin-top: 10px; }

/* p3 — Spotify: arrow button to switch songs (bottom right of the player) */
.spotify-player { position: relative; }
.spotify-next {
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 3;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 50%;
  background: rgba(0,0,0,.25);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.spotify-next:hover, .spotify-next:focus-visible { background: rgba(0,0,0,.45); transform: scale(1.06); }

/* p3 — lyrics 1 pt smaller */
.lyric-grid .lyric blockquote { font-size: 21px; }

/* p3 — Recording Artist: two landscape photos stacked beside the full-length portrait.
   Column widths follow the photos' shapes, so both sides end at the same height. */
.rec-layout { display: flex; gap: 12px; align-items: stretch; }
.rec-stack { flex: 0.883 1 0; min-width: 0; display: grid; gap: 12px; }
.rec-stack img { width: 100%; aspect-ratio: 1600 / 906; object-fit: cover; border-radius: var(--radius-lg); margin: 0; }
.rec-tall { flex: 0.566 1 0; min-width: 0; width: 0; height: auto; object-fit: cover; border-radius: var(--radius-lg); margin: 0; }

/* p4 — schedule: venues/dates/times 1 pt smaller */
.show-date strong, .show-info strong { font-size: 19px; }
.show-time { font-size: 15px; }

/* p4 — Duo dates spread across the top, Full Band underneath */
.schedule-cols.schedule-stacked { grid-template-columns: 1fr; gap: 22px; }
.schedule-stacked .schedule-col:first-child .schedule-list { grid-template-columns: 1fr 1fr; }
.schedule-stacked .schedule-col:last-child .schedule-list { grid-template-columns: 1fr; }

@media (max-width: 1100px) {
  .schedule-stacked .schedule-col:first-child .schedule-list { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .wordmark .wordmark-note { margin-left: -4px; }
  .lyric-grid .lyric blockquote { font-size: 18px; }
  .spotify-next { right: 14px; bottom: 14px; width: 40px; height: 40px; font-size: 19px; }
  .rec-layout { flex-direction: column; }
  .rec-tall { width: 100%; flex: none; }
}

/* Mobile menu fix: the header's blur effect made the full-screen menu shrink to
   the header's height (items were cut off and the page showed through).
   Size the menu to the screen below the header instead. */
@media (max-width: 800px) {
  .primary-nav {
    top: 100%;
    bottom: auto;
    height: 100vh;
    height: 100dvh;
    padding-bottom: 72px;
    overflow-y: auto;
  }
}

/* Duo dates read in order down the whole left column, then down the right column.
   js sets --sched-rows to half the number of dates (rounded up). */
@media (min-width: 1101px) {
  .schedule-stacked .schedule-col:first-child .schedule-list {
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--sched-rows, 3), auto);
  }
}

/* "Band dates coming soon": no box behind it, just the text */
.schedule-stacked .schedule-col:last-child .schedule-list { justify-items: start; }
.schedule-list li.show-tbd { width: fit-content; max-width: 100%; padding: 0; background: none; border: 0; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }