/* button */
/* Button — variant/size tuning lives in tokens.css; refine values per project. */

.rrt-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--rrt-space-xs);
	border-radius: var(--rrt-radius-pill);
	font-family: var(--rrt-font-body);
	font-weight: var(--rrt-font-weight-medium);
	line-height: 1;
	letter-spacing: var(--rrt-tracking-normal);
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--rrt-duration-normal) var(--rrt-ease-standard),
		color var(--rrt-duration-normal) var(--rrt-ease-standard),
		border-color var(--rrt-duration-normal) var(--rrt-ease-standard),
		transform var(--rrt-duration-fast) var(--rrt-ease-standard);
	border: 1px solid transparent;
	min-height: 3rem;
	white-space: nowrap;
}

.rrt-button--small {
	padding: var(--rrt-space-xs) var(--rrt-space-md);
	font-size: var(--rrt-fs-small);
}

.rrt-button--medium {
	padding: var(--rrt-space-sm) var(--rrt-space-lg);
	font-size: var(--rrt-fs-body);
}

.rrt-button--large {
	padding: var(--rrt-space-md) var(--rrt-space-xl);
	font-size: var(--rrt-fs-h4);
}

.rrt-button--primary {
	background-color: var(--rrt-color-text);
	color: var(--rrt-color-text-inverse);
}

.rrt-button--primary:hover,
.rrt-button--primary:focus-visible {
	background-color: var(--rrt-color-accent);
	color: var(--rrt-color-text);
}

.rrt-button--secondary {
	background-color: transparent;
	color: var(--rrt-color-text);
	border-color: var(--rrt-color-text);
}

.rrt-button--secondary:hover,
.rrt-button--secondary:focus-visible {
	background-color: var(--rrt-color-text);
	color: var(--rrt-color-text-inverse);
}

.rrt-button--ghost {
	background-color: transparent;
	color: var(--rrt-color-text);
	padding-inline: 0;
}

.rrt-button--ghost:hover,
.rrt-button--ghost:focus-visible {
	color: var(--rrt-color-link-hover);
}

/* tape-card */
.rrt-tape-card {
	display: grid;
	gap: var(--rrt-space-md);
	padding-block: var(--rrt-space-lg);
	border-top: 1px solid var(--rrt-color-border);
}

.rrt-tape-card__body {
	display: grid;
	gap: var(--rrt-space-sm);
}

.rrt-tape-card__date,
.rrt-tape-card__facts {
	margin: 0;
	color: var(--rrt-color-text-muted);
	font-family: var(--rrt-font-mono);
	font-size: var(--rrt-fs-small);
}

.rrt-tape-card__title {
	margin: 0;
	font-family: var(--rrt-font-display);
	font-size: var(--rrt-fs-card-title);
	font-weight: var(--rrt-font-weight-bold);
	line-height: var(--rrt-lh-snug);
	letter-spacing: var(--rrt-tracking-tight);
}

.rrt-tape-card__title a {
	color: var(--rrt-color-text);
	text-decoration: none;
}

.rrt-tape-card__title a:hover,
.rrt-tape-card__title a:focus-visible {
	color: var(--rrt-color-text);
	text-decoration: underline;
	text-decoration-color: var(--rrt-color-accent);
	text-decoration-thickness: 3px;
	text-underline-offset: 4px;
}

.rrt-tape-card__excerpt {
	margin: 0;
	color: var(--rrt-color-text-muted);
}

.rrt-tape-card__facts a {
	color: inherit;
	font-size: inherit;
}
/* tape-meta */
.rrt-tape-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rrt-space-xs);
	margin: 0;
}

.rrt-tape-meta__item {
	display: flex;
	gap: var(--rrt-space-xs);
	padding: var(--rrt-space-xs) var(--rrt-space-sm);
	background: var(--rrt-color-accent);
	font-family: var(--rrt-font-mono);
	font-size: var(--rrt-fs-small);
}

.rrt-tape-meta dt {
	color: var(--rrt-color-accent-contrast);
}

.rrt-tape-meta dd {
	margin: 0;
	color: var(--rrt-color-text);
	font-weight: var(--rrt-font-weight-medium);
}

/* tracklist */
.rrt-tracklist__title {
	margin-bottom: var(--rrt-space-md);
	font-size: var(--rrt-fs-h2);
}

.rrt-tracklist__side + .rrt-tracklist__side {
	margin-top: var(--rrt-space-lg);
}

.rrt-tracklist__side-title {
	font-family: var(--rrt-font-mono);
	font-size: var(--rrt-fs-small);
	font-weight: var(--rrt-font-weight-medium);
	color: var(--rrt-color-text-muted);
}

.rrt-tracklist__list {
	margin: var(--rrt-space-sm) 0 0;
	padding-left: 0;
	list-style: none;
	counter-reset: rrt-track;
}

.rrt-tracklist__track {
	display: flex;
	gap: var(--rrt-space-sm);
	padding-block: var(--rrt-space-2xs);
	border-bottom: 1px solid var(--rrt-color-border);
}

.rrt-tracklist__track::before {
	content: counter(rrt-track, decimal-leading-zero);
	counter-increment: rrt-track;
	font-family: var(--rrt-font-mono);
	color: var(--rrt-color-text-muted);
	min-width: 1.5rem;
}

.rrt-tracklist__artist {
	font-weight: var(--rrt-font-weight-medium);
}

.rrt-tracklist__name {
	color: var(--rrt-color-text-muted);
}

/* audio-embed */
.rrt-audio-embed iframe {
	display: block;
	width: 100%;
	border: 0;
	background: var(--rrt-color-surface);
}

.rrt-audio-embed__fallback {
	font-weight: var(--rrt-font-weight-semibold);
}
/* section-heading */
.rrt-section-heading {
	display: flex;
	flex-direction: column;
	gap: var(--rrt-space-sm);
	margin-bottom: var(--rrt-space-2xl);
}

.rrt-section-heading--center {
	align-items: center;
	text-align: center;
	margin-inline: auto;
	max-width: min(48rem, 100%);
}

.rrt-section-heading__eyebrow {
	/* Eyebrow colour comes from `.rrt-text-eyebrow` (typography.css). */
}

.rrt-section-heading__title {
	/* Inherits scale + weight from typography.css. Override per template if needed. */
}

.rrt-section-heading__lead {
	max-width: min(var(--rrt-container-narrow), 100%);
	color: var(--rrt-color-text-muted);
}

/* connect */

.rrt-connect {
	display: grid;
	gap: var(--rrt-space-lg);
	list-style: none;
	margin: 0;
	padding: 0;
}

.rrt-connect__item {
	display: grid;
	gap: var(--rrt-space-sm);
	background: var(--rrt-color-surface);
	padding: var(--rrt-space-lg);
}

.rrt-connect__name,
.rrt-connect__text {
	margin: 0;
}

.rrt-connect__name a {
	color: var(--rrt-color-text);
}

.rrt-connect__name a:hover,
.rrt-connect__name a:focus-visible {
	color: var(--rrt-color-text);
	text-decoration-color: var(--rrt-color-accent);
}

.rrt-connect__text {
	color: var(--rrt-color-text-muted);
}

.rrt-connect__icon svg,
.rrt-tape__tags svg,
.rrt-button svg {
	display: block;
	fill: currentColor;
	flex: none;
}

.rrt-connect__icon svg {
	width: 1.75rem;
	height: 1.75rem;
}

.rrt-tape__tags svg {
	width: 1rem;
	height: 1rem;
}

.rrt-button svg {
	width: 1.125rem;
	height: 1.125rem;
}

.rrt-skip:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
}

@media (min-width: 60rem) {
	.rrt-connect {
		grid-template-columns: 1fr 1fr;
	}
}