/**
 * TourDates frontend styles.
 * Colors inherit from the active theme (text/background) and are derived from
 * the inherited text color, so the component blends with light or dark themes.
 * Only the accent color is configurable. Override any --td-* var in your theme.
 */

/* Accent default lives on :root so the setting-injected :root value wins. */
:root {
	--td-accent: #e63946;
}

.tourdates {
	/* Follow the theme's text and background colors. */
	--td-text: inherit;
	--td-bg: transparent;

	/* Derived from the inherited text color (with fallbacks for old browsers). */
	--td-surface: rgba( 128, 128, 128, 0.08 );
	--td-surface: color-mix( in srgb, currentColor 6%, transparent );
	--td-muted: rgba( 128, 128, 128, 0.85 );
	--td-muted: color-mix( in srgb, currentColor 62%, transparent );
	--td-border: rgba( 128, 128, 128, 0.28 );
	--td-border: color-mix( in srgb, currentColor 20%, transparent );

	--td-radius: 12px;
	--td-badge-bg: var(--td-accent);
	--td-badge-text: #ffffff;
	--td-gap: 1rem;

	color: var(--td-text);
	font-family: inherit;
	line-height: 1.5;
	box-sizing: border-box;
}

.tourdates *,
.tourdates *::before,
.tourdates *::after {
	box-sizing: border-box;
}

/* Empty state */
.tourdates--empty .tourdates__empty {
	margin: 0;
	padding: 1rem 1.25rem;
	background: var(--td-surface);
	border: 1px dashed var(--td-border);
	border-radius: var(--td-radius);
	color: var(--td-muted);
	text-align: center;
}

/* Gig card */
.tourdates__gig {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1rem;
	background: var(--td-bg);
	border: 1px solid var(--td-border);
	border-radius: var(--td-radius);
}

.tourdates__gig--featured {
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.06 );
}

/* Main row: badge | body | action, vertically centered and unaffected by the description. */
.tourdates__main {
	display: flex;
	align-items: center;
	gap: var(--td-gap);
}

/* Featured card: anchor name + meta to the bottom so the body grows upward when the label shows. */
.tourdates__gig--featured .tourdates__main {
	align-items: flex-end;
}

/* Date badge */
.tourdates__date-badge {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 68px;
	padding: 0.5rem 0.75rem;
	background: var(--td-badge-bg);
	color: var(--td-badge-text);
	border-radius: calc( var(--td-radius) - 4px );
	text-align: center;
	line-height: 1.1;
}

.tourdates__day {
	font-size: 1.75rem;
	font-weight: 700;
}

.tourdates__month {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.tourdates__year {
	font-size: 0.7rem;
	opacity: 0.85;
}

/* Body */
.tourdates__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
}

.tourdates__label {
	display: inline-block;
	align-self: flex-start;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--td-accent);
}

.tourdates__title {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.25;
}

.tourdates__meta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.9rem;
	color: var(--td-muted);
	font-size: 0.9rem;
}

.tourdates__meta-item {
	display: inline-flex;
	align-items: center;
}

.tourdates__meta-time::before {
	content: "\1F552";
	margin-right: 0.35rem;
}

.tourdates__meta-location::before {
	content: "\1F4CD";
	margin-right: 0.35rem;
}

/* Description sits below the main row, indented to align with the body. */
.tourdates__desc {
	margin: 0;
	padding-left: calc( 68px + var(--td-gap) );
	color: var(--td-text);
}

.tourdates__desc p {
	margin: 0 0 0.5rem;
}

/* Button */
.tourdates__button {
	display: inline-block;
	align-self: flex-start;
	margin-top: 0.5rem;
	padding: 0.55rem 1.1rem;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid var(--td-accent);
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Shape */
.tourdates__button--round {
	border-radius: 999px;
}

.tourdates__button--square {
	border-radius: 0;
}

/* Filled: accent background with the badge text color. */
.tourdates__button--filled {
	background: var(--td-accent);
	color: var(--td-badge-text);
}

.tourdates__button--filled:hover,
.tourdates__button--filled:focus {
	background: color-mix( in srgb, var(--td-accent) 80%, transparent );
	border-color: color-mix( in srgb, var(--td-accent) 80%, transparent );
	color: var(--td-badge-text);
}

/* Transparent: accent border and text on a see-through background. */
.tourdates__button--transparent {
	background: transparent;
	color: var(--td-accent);
}

.tourdates__button--transparent:hover,
.tourdates__button--transparent:focus {
	color: color-mix( in srgb, var(--td-accent) 80%, transparent );
	border-color: color-mix( in srgb, var(--td-accent) 80%, transparent );
}

.tourdates__button--small {
	margin-top: 0;
	padding: 0.4rem 0.85rem;
	font-size: 0.85rem;
}

/* List */
.tourdates__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.tourdates__item {
	margin: 0;
	list-style: none;
}

/*
 * Some themes/plugins re-add list markers on li elements (or via ::marker)
 * with higher specificity than list-style on the ul. Reset it on the items
 * themselves and neutralize the marker so bullets never leak through.
 */
.tourdates__items > li::marker,
.tourdates__item::marker,
.tourdates__year-header::marker {
	content: "";
}

/* Year headers in the list */
.tourdates__year-header {
	list-style: none;
	margin: 0.75rem 0 0.15rem;
	padding-bottom: 0.2rem;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--td-muted);
	border-bottom: 1px solid var(--td-border);
}

.tourdates__items > .tourdates__year-header:first-child {
	margin-top: 0;
}

.tourdates--list .tourdates__date-badge {
	width: 58px;
	height: 58px;
	min-width: 58px;
}

.tourdates--list .tourdates__desc {
	padding-left: calc( 58px + var(--td-gap) );
}

.tourdates--list .tourdates__day {
	font-size: 1.4rem;
}

.tourdates__action {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.tourdates__action .tourdates__button {
	margin-top: 0;
	align-self: center;
}

/* Expander (next gig -> upcoming list) */
.tourdates__expander {
	margin-top: 0.75rem;
}

.tourdates__expander-summary {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	cursor: pointer;
	list-style: none;
	padding: 0.5rem 0.9rem;
	font-weight: 600;
	color: var(--td-accent);
	border: 1px solid var(--td-border);
	border-radius: 999px;
	user-select: none;
	transition: background 0.15s ease;
}

.tourdates__expander-summary:hover,
.tourdates__expander-summary:focus {
	background: var(--td-surface);
}

/* Hide the default disclosure triangle, use our own caret */
.tourdates__expander-summary::-webkit-details-marker {
	display: none;
}

.tourdates__expander-summary::after {
	content: "\25BE"; /* down caret */
	font-size: 0.8em;
	transition: transform 0.2s ease;
}

.tourdates__expander[open] .tourdates__expander-summary::after {
	transform: rotate( 180deg );
}

/* Toggle the summary label based on open state */
.tourdates__expander-less {
	display: none;
}

.tourdates__expander[open] .tourdates__expander-more {
	display: none;
}

.tourdates__expander[open] .tourdates__expander-less {
	display: inline;
}

.tourdates__expander-list {
	margin-top: 0.75rem;
}

/* Past gigs expander */
.tourdates--past {
	margin-top: 1rem;
}

.tourdates__expander--past .tourdates__expander-summary {
	color: var(--td-muted);
}

/* Small screens */
@media ( max-width: 480px ) {
	.tourdates__main {
		flex-wrap: wrap;
		align-items: flex-start;
	}

	/*
	 * Keep the date badge and the event info on the same top row no matter how
	 * much optional data (time / location) is present. Using flex-basis 0 lets
	 * the body shrink and wrap its text internally instead of dropping onto a
	 * separate line from the date badge.
	 */
	.tourdates__body {
		flex: 1 1 0;
	}

	/*
	 * The ticket action drops to its own full-width row below the event info
	 * and becomes a large, full-width button with its text label. This gives a
	 * consistent, easy-to-tap target across both the featured card and list
	 * rows on mobile.
	 */
	.tourdates__action {
		flex-basis: 100%;
		margin-top: 0.5rem;
	}

	.tourdates__action .tourdates__button {
		width: 100%;
		text-align: center;
	}

	.tourdates__gig--featured .tourdates__button {
		width: 100%;
		text-align: center;
	}

	/* Match the small list button padding to the full-size button for a bigger tap target. */
	.tourdates--list .tourdates__button--small {
		padding: 0.6rem 1.1rem;
		font-size: 0.9rem;
	}

	/* Screen estate is scarce: show the description under the button, truncated. */
	.tourdates__desc,
	.tourdates--list .tourdates__desc {
		padding-left: 0;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}