/*
 * Layer: components. The utils media block (kit .nd-player), GLOBAL because ~1,131 legacy
 * shortcodes render it without loading block CSS (L47). Utils markup (class-media.php) has no
 * kind modifier, so the variants key on the element inside:
 *   audio     figure > audio[controls] (+ figcaption when the block has a label)
 *   video     figure > video[controls][width][height] (+ figcaption)
 *   download  div > a[download]
 * Visitors without access get nothing at all from utils (empty string), so there is no teaser
 * state to style here. Native controls stay native (plan D): the card, caption and download
 * affordance carry the kit look.
 */
@layer components {

	.wp-block-nourishingdestiny-media {
		margin-block: var(--wp--preset--spacing--32);
	}

	/* Audio: the kit player card, the browser's controls across it. */
	.wp-block-nourishingdestiny-media:has(> audio) {
		display: grid;
		gap: 12px;
		padding: 16px;
		border-radius: var(--wp--preset--border-radius--media);
		background-color: var(--wp--preset--color--paper);
		box-shadow: 0 0 0 1px var(--wp--preset--color--line);
	}

	.wp-block-nourishingdestiny-media > audio {
		display: block;
		width: 100%;
		min-width: 0;
		height: 54px;
		border-radius: var(--wp--preset--border-radius--pill);
	}

	/* Chromium paints its own grey pill; a porcelain one sits inside the white card. */
	.wp-block-nourishingdestiny-media > audio::-webkit-media-controls-panel {
		background-color: var(--wp--preset--color--porcelain);
	}

	/* The label, above the controls (kit .nd-player__title). */
	.wp-block-nourishingdestiny-media:has(> audio) > figcaption {
		order: -1;
		margin: 0;
		padding-inline: 4px;
		color: var(--wp--preset--color--ink);
		font-family: var(--wp--preset--font-family--display);
		font-size: var(--wp--preset--font-size--lead);
		font-weight: 500;
		line-height: 1.2;
	}

	/* Video (kit .nd-media): rounded, on the deep surface while the poster is blank. */
	.wp-block-nourishingdestiny-media > video {
		display: block;
		width: 100%;
		height: auto;
		border-radius: var(--wp--preset--border-radius--card-sm);
		background-color: var(--wp--preset--color--cobalt);
		box-shadow: var(--wp--preset--shadow--island);
	}

	.wp-block-nourishingdestiny-media:has(> video) > figcaption {
		margin-block-start: 12px;
		color: var(--wp--preset--color--ink-soft);
		font-size: var(--wp--preset--font-size--small);
		line-height: var(--wp--custom--line-height--small);
	}

	/* Download (kit .nd-link-card): the label and a down arrow, the whole card the link. */
	.wp-block-nourishingdestiny-media > a[download] {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 20px;
		align-items: center;
		padding: 18px 22px 18px 26px;
		border-radius: var(--wp--preset--border-radius--media);
		background-color: var(--wp--preset--color--paper);
		box-shadow: 0 0 0 1px var(--wp--preset--color--line);
		color: var(--wp--preset--color--ink);
		font-family: var(--wp--preset--font-family--display);
		font-size: var(--wp--preset--font-size--lead);
		font-weight: 500;
		line-height: 1.2;
		text-decoration: none;
		transition:
			transform var(--wp--custom--duration--base) var(--wp--custom--ease),
			box-shadow var(--wp--custom--duration--base);
	}

	.wp-block-nourishingdestiny-media > a[download]::after {
		content: "↓" / "";
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		border: 1px solid var(--wp--custom--glass--tag-border);
		border-radius: 50%;
		color: var(--wp--preset--color--brand-deep);
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--cta);
		font-weight: 600;
		line-height: 1;
		transition:
			background-color var(--wp--custom--duration--fast),
			color var(--wp--custom--duration--fast);
	}

	.wp-block-nourishingdestiny-media > a[download]:hover {
		box-shadow: var(--wp--preset--shadow--island);
		color: var(--wp--preset--color--ink);
	}

	.wp-block-nourishingdestiny-media > a[download]:hover::after {
		background-color: var(--wp--preset--color--brand);
		color: var(--wp--preset--color--paper);
	}

	.wp-block-nourishingdestiny-media > a[download]:focus-visible {
		outline: 2px solid transparent;
		box-shadow: var(--wp--custom--focus-ring);
	}

	/* Legacy bodies label each file in the line above ("The Journal…:"): keep the card close to it. */
	.wp-block-nourishingdestiny-media:has(> a[download]) {
		margin-block-start: var(--wp--preset--spacing--16);
	}

	/* Class pages stack many files: a run of downloads reads as one list. */
	.wp-block-nourishingdestiny-media:has(> a[download]) + .wp-block-nourishingdestiny-media:has(> a[download]) {
		margin-block-start: 12px;
	}

	@media (prefers-reduced-motion: no-preference) {

		.wp-block-nourishingdestiny-media > a[download]:hover {
			transform: translateY(-4px);
		}
	}
}