/*
 * PB Band Pages blocks: tracklist player, gig list, song table, next show.
 * Colours and fonts come from the active theme's palette (--wp--preset--*), falling back to the band profile's variables
 * (--pbbp-*) and then to plain defaults, so the blocks follow the chosen style (dark, Light) on a block theme.
 */
.pbbp-blk {
	--b-accent: var(--wp--preset--color--accent, var(--pbbp-accent, #15aebf));
	--b-accent-hi: var(--wp--preset--color--accent-hi, var(--pbbp-accent-hi, #2fd0e2));
	--b-heading: var(--wp--preset--color--heading, var(--pbbp-heading, #fff));
	--b-text: var(--wp--preset--color--text, var(--pbbp-text, #a3a3a3));
	--b-panel: var(--wp--preset--color--surface, var(--pbbp-panel, #1c1c1c));
	--b-line: var(--wp--preset--color--line, var(--pbbp-line, #2a2a2a));
	--b-bg: var(--wp--preset--color--base, var(--pbbp-bg, #151515));
	--b-serif: var(--wp--preset--font-family--serif, var(--pbbp-serif, Georgia, serif));
	--b-sans: var(--wp--preset--font-family--sans, var(--pbbp-sans, system-ui, sans-serif));
	--b-tint: color-mix(in srgb, var(--b-accent) 9%, transparent);
	--b-tint-strong: color-mix(in srgb, var(--b-accent) 16%, transparent);
	color: var(--b-text);
}
.pbbp-blk__note {
	padding: 1rem 1.25rem;
	border: 1px dashed var(--b-line);
	border-radius: 8px;
	font-size: 0.9rem;
}

/* ---- tracklist ---- */
.pbbp-blk .pbbp-tracks {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: pbbp-track;
	background: var(--b-panel);
	border: 1px solid var(--b-line);
	border-radius: 10px;
	overflow: hidden;
}
.pbbp-blk .pbbp-tracks li {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin: 0;
	padding: 0.65rem 1.1rem;
	border-bottom: 1px solid var(--b-line);
	transition: background 0.2s;
}
.pbbp-blk .pbbp-tracks li:last-child {
	border-bottom: 0;
}
.pbbp-blk .pbbp-tracks li:not(.pbbp-tracks__side) {
	counter-increment: pbbp-track;
}
.pbbp-blk .pbbp-tracks li:not(.pbbp-tracks__side)::before {
	content: counter(pbbp-track, decimal-leading-zero);
	flex: none;
	width: 1.6rem;
	font: 700 0.8rem var(--b-sans);
	letter-spacing: 0.06em;
	color: var(--b-accent);
}
.pbbp-blk .pbbp-tracks li.pbbp-tracks__side {
	display: block;
	padding: 0.7rem 1.1rem;
	background: var(--b-tint-strong);
	font: 800 0.75rem var(--b-sans);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--b-accent);
}
.pbbp-blk .pbbp-tracks li:not(.pbbp-tracks__side):hover {
	background: var(--b-tint);
}
.pbbp-blk .pbbp-tracks__name {
	flex: 1;
	min-width: 0;
	font: 600 1.05rem/1.3 var(--b-serif);
	color: var(--b-heading);
}
.pbbp-blk .pbbp-tracks__name small {
	display: block;
	margin-top: 2px;
	font: 400 0.8rem/1.4 var(--b-sans);
	color: var(--b-text);
}
.pbbp-blk .pbbp-tracks__len {
	flex: none;
	font: 600 0.8rem var(--b-sans);
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
}
/* the play button on tracks that have an audio file */
.pbbp-blk .pbbp-tracks li::after {
	content: "";
	flex: none;
	width: 28px;
	height: 28px;
}
.pbbp-blk .pbbp-tracks li.pbbp-tracks__side::after {
	content: none;
}
.pbbp-blk .pbbp-tracks li.pbbp-tracks__play {
	cursor: pointer;
}
.pbbp-blk .pbbp-tracks li.pbbp-tracks__play::after {
	content: "\25B6";
	display: grid;
	place-items: center;
	border: 1px solid color-mix(in srgb, var(--b-accent) 70%, transparent);
	border-radius: 50%;
	color: var(--b-accent);
	font-size: 0.6rem;
	padding-left: 2px;
	transition: background 0.2s, color 0.2s;
}
.pbbp-blk .pbbp-tracks li.pbbp-tracks__play:hover::after,
.pbbp-blk .pbbp-tracks li.pbbp-tracks__play:focus-visible::after {
	background: var(--b-accent);
	color: #fff;
}
.pbbp-blk .pbbp-tracks li.pbbp-tracks__play:focus-visible {
	outline: 2px solid var(--b-accent);
	outline-offset: -2px;
}
.pbbp-blk .pbbp-tracks li.is-playing {
	background: var(--b-tint-strong);
}
.pbbp-blk .pbbp-tracks li.is-playing::after {
	content: "\275A\275A";
	background: var(--b-accent);
	color: #fff;
	font-size: 0.5rem;
	padding-left: 0;
}
.pbbp-blk .pbbp-tracks li.is-playing .pbbp-tracks__name {
	color: var(--b-accent-hi);
}

/* ---- gig list ---- */
.pbbp-blk .pbbp-shows h2.pbbp-minor {
	margin: 2rem 0 1rem;
	font: 800 0.8rem var(--b-sans);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--b-accent);
}
.pbbp-blk .pbbp-shows > div:first-child h2.pbbp-minor {
	margin-top: 0;
}
.pbbp-blk .pbbp-showlist {
	list-style: none;
	margin: 0 0 0.5rem;
	padding: 0;
	background: var(--b-panel);
	border: 1px solid var(--b-line);
	border-radius: 10px;
	overflow: hidden;
}
.pbbp-blk .pbbp-show {
	display: grid;
	grid-template-columns: 84px 1fr auto;
	gap: 0.5rem 1.5rem;
	align-items: center;
	margin: 0;
	padding: 1rem 1.5rem;
	border-bottom: 1px solid var(--b-line);
	transition: background 0.2s;
}
.pbbp-blk .pbbp-show:last-child {
	border-bottom: 0;
}
.pbbp-blk .pbbp-show:hover {
	background: var(--b-tint);
}
.pbbp-blk .pbbp-show__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.1;
	text-align: center;
}
.pbbp-blk .pbbp-show__date span {
	font: 800 0.7rem var(--b-sans);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--b-accent);
}
.pbbp-blk .pbbp-show__date strong {
	margin: 2px 0;
	font: 700 2.1rem/1.1 var(--b-serif);
	color: var(--b-heading);
}
.pbbp-blk .pbbp-show__main h3 {
	margin: 0;
	font: 600 1.25rem/1.3 var(--b-serif);
	color: var(--b-heading);
}
.pbbp-blk .pbbp-show__main h3 a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px dotted color-mix(in srgb, var(--b-accent) 70%, transparent);
}
.pbbp-blk .pbbp-show__main h3 a:hover {
	color: var(--b-accent-hi);
}
.pbbp-blk .pbbp-show__main p {
	margin: 4px 0 0;
	font-size: 0.9rem;
	line-height: 1.5;
}
.pbbp-blk .pbbp-show__map,
.pbbp-blk .pbbp-show__setlist a {
	margin-left: 6px;
	font: 800 0.7rem var(--b-sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--b-accent-hi);
	text-decoration: none;
}
.pbbp-blk .pbbp-show__setlist a {
	margin-left: 0;
}
.pbbp-blk .pbbp-show__map:hover,
.pbbp-blk .pbbp-show__setlist a:hover {
	text-decoration: underline;
}
.pbbp-blk .pbbp-show__when {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}
.pbbp-blk .pbbp-show__time {
	font: 600 1rem var(--b-sans);
	letter-spacing: 0.06em;
	color: var(--b-heading);
	font-variant-numeric: tabular-nums;
}
.pbbp-blk .pbbp-tag-status {
	display: inline-block;
	padding: 3px 10px;
	border: 1px solid color-mix(in srgb, var(--b-accent) 70%, transparent);
	border-radius: 999px;
	font: 800 0.62rem var(--b-sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--b-accent-hi);
}
.pbbp-blk .pbbp-tag-status--cancelled {
	border-color: #c0504d;
	color: #d9726f;
}
.pbbp-blk .pbbp-show--cancelled .pbbp-show__main,
.pbbp-blk .pbbp-show--cancelled .pbbp-show__date {
	opacity: 0.55;
	text-decoration: line-through;
}
.pbbp-blk .pbbp-showlist--past .pbbp-show {
	padding-block: 0.7rem;
}
.pbbp-blk .pbbp-showlist--past .pbbp-show__date strong {
	font-size: 1.5rem;
}
.pbbp-blk .pbbp-showlist--past .pbbp-show__date span {
	color: var(--b-text);
}
.pbbp-blk .pbbp-showlist--past .pbbp-show__main h3 {
	font-size: 1.05rem;
	color: var(--b-text);
}
.pbbp-blk .pbbp-empty {
	text-align: center;
}
.pbbp-blk .pbbp-more {
	display: block;
	margin: 0.9rem auto 0;
	padding: 0.7rem 1.4rem;
	border: 1px solid var(--b-accent);
	border-radius: 5px;
	background: transparent;
	color: var(--b-accent);
	font: 800 0.75rem var(--b-sans);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
}
.pbbp-blk .pbbp-more:hover {
	background: var(--b-accent);
	color: #fff;
}
@media (max-width: 640px) {
	.pbbp-blk .pbbp-show {
		grid-template-columns: 64px 1fr;
		gap: 0.4rem 1rem;
		padding: 0.9rem 1rem;
	}
	.pbbp-blk .pbbp-show__when {
		grid-column: 2;
		flex-direction: row;
		align-items: center;
		gap: 0.6rem;
	}
	.pbbp-blk .pbbp-show__date strong {
		font-size: 1.75rem;
	}
}

/* ---- song table ---- */
.pbbp-blk .pbbp-datatable__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem 1.25rem;
	margin: 0 0 1rem;
}
.pbbp-blk .pbbp-datatable__search {
	flex: 1 1 240px;
	max-width: 360px;
	padding: 0.55rem 0.8rem;
	border: 1px solid var(--b-line);
	border-radius: 6px;
	background: var(--b-bg);
	color: var(--b-heading);
	font: 400 0.95rem var(--b-sans);
}
.pbbp-blk .pbbp-datatable__search:focus {
	border-color: var(--b-accent);
	outline: 0;
	box-shadow: 0 0 0 3px var(--b-tint-strong);
}
.pbbp-blk .pbbp-datatable__count {
	font-size: 0.8rem;
	letter-spacing: 0.04em;
}
.pbbp-blk .pbbp-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: none;
}
.pbbp-blk .pbbp-table th {
	padding: 0.65rem 1rem;
	border: 0;
	border-bottom: 2px solid var(--b-accent);
	text-align: left;
	font: 800 0.75rem var(--b-sans);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--b-accent);
}
.pbbp-blk .pbbp-table td {
	padding: 0.75rem 1rem;
	border: 0;
	border-bottom: 1px solid var(--b-line);
	background: none;
	color: var(--b-text);
}
.pbbp-blk .pbbp-table td:first-child {
	color: var(--b-heading);
	font-weight: 600;
}
.pbbp-blk .pbbp-table tbody tr:hover td {
	background: var(--b-tint);
}
.pbbp-blk .pbbp-table th[aria-sort] {
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}
.pbbp-blk .pbbp-table th[aria-sort]::after {
	content: "\2195";
	margin-left: 8px;
	font-size: 0.7rem;
	opacity: 0.35;
}
.pbbp-blk .pbbp-table th[aria-sort="ascending"]::after {
	content: "\25B2";
	opacity: 1;
}
.pbbp-blk .pbbp-table th[aria-sort="descending"]::after {
	content: "\25BC";
	opacity: 1;
}
@media (max-width: 640px) {
	.pbbp-blk .pbbp-table thead {
		position: absolute;
		left: -9999px;
	}
	.pbbp-blk .pbbp-table tr {
		display: block;
		padding: 0.6rem 0;
		border-bottom: 1px solid var(--b-line);
	}
	.pbbp-blk .pbbp-table td {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.2rem 0.25rem;
		border: 0;
	}
	.pbbp-blk .pbbp-table td::before {
		content: attr(data-label);
		font: 800 0.68rem var(--b-sans);
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--b-accent);
	}
	.pbbp-blk .pbbp-table td:first-child::before {
		content: none;
	}
}

/* ---- next show ---- */
.pbbp-blk .pbbp-nextshow {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem 0.9rem;
	margin: 0;
	padding: 0.6rem 1.1rem;
	border: 1px solid var(--b-line);
	border-radius: 999px;
	background: var(--b-panel);
}
.pbbp-blk .pbbp-nextshow strong {
	font: 800 0.7rem var(--b-sans);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--b-accent);
}
.pbbp-blk .pbbp-nextshow span {
	color: var(--b-heading);
}

/* the next-show line sits above whatever follows it */
.pbbp-blk--next {
	margin-bottom: 1.75rem;
}

/* ---- Ticker block ---- */
.pbbp-ticker-blk {
	overflow: hidden;
	white-space: nowrap;
	padding-block: 0.9rem;
	background-color: var(--wp--preset--color--accent, var(--pbbp-accent, #15aebf));
	color: var(--wp--preset--color--on-accent, var(--pbbp-ticker-text, #06262b));
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}
.pbbp-ticker-blk__track {
	display: inline-flex;
	animation: pbbp-tickblk var(--pbbp-tick-dur, 40s) linear infinite;
}
.pbbp-ticker-blk__track span { flex: none; }
.pbbp-ticker-blk__track span::after { content: "\2726"; margin-inline: 2.2em; opacity: 0.55; }
.pbbp-ticker-blk--pause:hover .pbbp-ticker-blk__track { animation-play-state: paused; }
@keyframes pbbp-tickblk { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.pbbp-ticker-blk { white-space: normal; text-align: center; }
	.pbbp-ticker-blk__track { animation: none; flex-wrap: wrap; justify-content: center; }
}
.editor-styles-wrapper .pbbp-ticker-blk__track { animation: none; }
.pbbp-ticker-edit__box { margin-top: 0.5rem; padding: 0.75rem; background: #fff; border: 1px solid #ccd0d4; border-radius: 4px; }
