/**
 * Bio grid and single-bio styles.
 *
 * Light touch on top of core blocks: headshot cropping (faces sit in the upper part of the
 * frame), hiding empty bound paragraphs, and the placeholder image.
 *
 * @package    WadeLLC_UTVenturesExtensions
 * @subpackage Assets
 * @category   Stylesheet
 * @author     David W. Couch <http://wadellc.co>
 * @version    0.7.0
 * @since      0.7.0
 */

:root {
	--utv-bio-focus: currentcolor;
	--utv-bio-radius: 4px;
}

.utv-bio-grid {
	.wp-block-post-featured-image {
		margin-block-end: 0.75rem;

		a {
			display: block;
		}

		img {
			inline-size: 100%;
			object-position: center 20%;
			border-radius: var(--utv-bio-radius);
		}

		a:focus-visible {
			outline: 3px solid var(--utv-bio-focus);
			outline-offset: 3px;
		}
	}

	.utv-bio-grid__name {
		margin-block: 0 0.25rem;
	}

	.utv-bio-grid__title,
	.utv-bio-grid__email {
		margin-block: 0;
		text-wrap: balance;
	}
}

.utv-bio {
	.wp-block-post-featured-image img {
		inline-size: 100%;
		object-position: center 20%;
		border-radius: var(--utv-bio-radius);
	}

	.utv-bio__scope {
		margin-block-end: 0;
		text-transform: uppercase;
		letter-spacing: 0.08em;
	}

	.utv-bio__name {
		margin-block: 0.25rem 0.5rem;
	}

	.utv-bio__title {
		margin-block: 0;
	}

	.utv-bio__back {
		margin-block-start: clamp(1.5rem, 4vw, 3rem);
	}
}

/* Bound paragraphs render empty when the field has no value. */
.utv-bio-grid__title:empty,
.utv-bio-grid__email:empty,
.utv-bio__scope:empty,
.utv-bio__title:empty {
	display: none;
}

.utv-bio__placeholder {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--utv-bio-radius);
}