/*
 * Presentation shared by the helpers in includes/blocks.php.
 *
 * The credit, the art box and the player are emitted by shared helpers, so their CSS
 * belongs here rather than in one block's sheet. That is D26, learned the expensive way:
 * a calendar link that rendered with no CSS and a 28px touch target on the one page that
 * did not use the block its styles lived in.
 *
 * No `--ti-*` custom property is declared in this file. Every token is read with a
 * fallback chain at the point of use, which is D27: declaring one here would put the
 * definition on the element itself and beat the retune the theme performs on an ancestor
 * such as `.ti-counter-field`. That mistake produced a white label on a light field at
 * 1.08:1, and it is not repeated.
 */

.ti-music-credit {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 44px;
	color: var( --ti-muted );
	font-size: var( --ti-label-size, 0.8125rem );
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration-color: transparent;
	text-underline-offset: 0.3em;
	transition: color 160ms ease, text-decoration-color 160ms ease;
}

/*
 * The mark is rendered by ti-social, which owns the vendored file, its provenance and its
 * licence. Sized by element rather than by its class name: that class belongs to the
 * other package, and reaching for it here would couple this plugin to their markup.
 */
.ti-music-credit svg {
	width: 1.05rem;
	height: 1.05rem;
	flex: 0 0 auto;
}

.ti-music-credit:hover,
.ti-music-credit:focus-visible {
	color: var( --ti-accent );
	text-decoration-color: currentcolor;
}

.ti-music-credit:focus-visible {
	outline: 2px solid var( --ti-accent );
	outline-offset: 3px;
}

/*
 * The square the cover art sits in.
 *
 * Capped at 8.25rem on purpose. Measured on 24/09/2026, the provider serves 300x300 and
 * nothing larger without credentials — the file was opened and checked, it is not a label
 * understating a bigger image. So 132 CSS pixels is the widest box that still renders
 * sharp on a 2x display, and asking this art to be a hero would only make it soft.
 *
 * The licence forbids copying the image, so there is no srcset to generate and no format
 * conversion to do. Reserving the box with aspect-ratio is the entire defence against
 * layout shift here.
 */
.ti-music-art {
	position: relative;
	width: clamp( 5.5rem, 18vw, 8.25rem );
	aspect-ratio: 1;
	flex: 0 0 auto;
	overflow: hidden;
	background: var( --ti-well );
}

.ti-music-art__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ti-music-play {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0 1.1rem;
	/* The label belongs to the fill: near-black on the brand orange, 6.08:1. */
	color: var( --ti-on-action );
	font: inherit;
	font-size: var( --ti-label-size, 0.8125rem );
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: var( --ti-action );
	border: 0;
	cursor: pointer;
}

.ti-music-play:focus-visible {
	outline: 2px solid var( --ti-accent );
	outline-offset: 3px;
}

.ti-music-player:empty {
	display: none;
}

.ti-music-player__frame {
	display: block;
	width: 100%;
	border: 0;
}

/*
 * The one authorial movement on this surface: the player arrives from slightly below, and
 * only that. It animates transform and never opacity, so a card whose animation does not
 * run is a card that is simply there. Starting from `opacity: 0` is how a whole section
 * once disappeared on a phone.
 */
@media ( prefers-reduced-motion: no-preference ) {
	.ti-music-player__frame {
		animation: ti-music-arrive 240ms cubic-bezier( 0.16, 1, 0.3, 1 );
	}
}

@keyframes ti-music-arrive {
	from {
		transform: translateY( 6px );
	}

	to {
		transform: translateY( 0 );
	}
}