/* Layout only – button colours, borders and hover states come from the theme's .button styles. */

.singer-gigs {
	/* Column sizes – override these in the theme to resize. */
	--sg-image: 7.5em;
	--sg-date: 4.5em;
	--sg-gap: 1.25em;

	list-style: none;
	margin: 0 0 2em;
	padding: 0;
}

.singer-gig {
	/* How far the payment form / wrapped rows are indented to line up with the details. */
	--sg-indent: calc(var(--sg-date) + var(--sg-gap));

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sg-gap);
	padding: 1em 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.singer-gig--has-image {
	--sg-indent: calc(var(--sg-image) + var(--sg-date) + 2 * var(--sg-gap));
}

.singer-gig__image {
	flex: 0 0 var(--sg-image);
}

.singer-gig__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.singer-gig__date {
	flex: 0 0 var(--sg-date);
	text-align: center;
	line-height: 1.1;
	text-transform: uppercase;
}

.singer-gig__day {
	display: block;
	font-size: 2em;
	font-weight: 700;
}

.singer-gig__month,
.singer-gig__year {
	display: block;
	font-size: 0.8em;
	letter-spacing: 0.05em;
}

.singer-gig__info {
	flex: 1 1 0;
	min-width: 0;
}

.singer-gig__title {
	margin: 0 0 0.25em;
	font-size: 1.15em;
}

.singer-gig__venue,
.singer-gig__time {
	margin: 0;
	opacity: 0.8;
}

.singer-gig__notes {
	margin-top: 0.5em;
	font-size: 0.9em;
}

.singer-gig__notes p:last-child {
	margin-bottom: 0;
}

.singer-gig__tickets {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 0.75em;
}

.singer-gig__price {
	font-weight: 700;
}

.singer-gig__button {
	display: inline-block;
	white-space: nowrap;
}

/* Payment form toggle sits on its own full-width row under the event. */
.singer-gig__payment {
	flex-basis: 100%;
	padding-left: var(--sg-indent);
}

.singer-gig__payment > summary,
.singer-gigs-simple__payment > summary {
	cursor: pointer;
	list-style: none;
}

.singer-gig__payment > summary::-webkit-details-marker,
.singer-gigs-simple__payment > summary::-webkit-details-marker {
	display: none;
}

.singer-gig__form {
	margin-top: 1em;
}

/* -------------------------------------------------------------------------
 * Simple list ([singer_gigs_all])
 * ---------------------------------------------------------------------- */

.singer-gigs-simple {
	list-style: none;
	margin: 0 0 2em;
	padding: 0;
}

.singer-gigs-simple__item {
	padding: 1em 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.singer-gigs-simple__title {
	font-weight: 700;
}

.singer-gigs-simple__meta {
	margin-top: 0.25em;
}

.singer-gigs-simple__meta span + span::before {
	content: " · ";
}

.singer-gigs-simple__action {
	margin-top: 0.75em;
}

/* Past events: greyed out, booking button disabled. */
.singer-gigs-simple__item.is-past {
	opacity: 0.5;
	filter: grayscale(1);
}

.singer-gigs-simple__item.is-past .singer-gig__button,
.singer-gigs-simple__item.is-past .singer-gig__button:hover,
.singer-gigs-simple__item.is-past .singer-gig__button:focus {
	cursor: not-allowed;
	pointer-events: none;
}

@media (max-width: 600px) {
	.singer-gigs {
		--sg-image: 4.5em;
		--sg-date: 3.5em;
		--sg-gap: 0.75em;
	}
	.singer-gig {
		align-items: flex-start;
	}
	.singer-gig__info {
		flex-basis: calc(100% - var(--sg-indent));
	}
	.singer-gig__tickets {
		flex-basis: 100%;
		padding-left: var(--sg-indent);
	}
	.singer-gig__day {
		font-size: 1.6em;
	}
}