/**
 * About section. Scoped under .rp-about-columns.
 */

.rp-about-columns {
	gap: 3rem;
}

.rp-about-skills-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
	margin: 2rem 0 1rem;
}

.rp-tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.rp-tag {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8rem;
	color: var(--wp--preset--color--teal);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	padding: 0.3rem 0.85rem;
}

/* Photo carousel — see assets/js/photo-carousel.js. Images are stacked
   absolutely and crossfaded via opacity; the container carries the real
   aspect-ratio/sizing since the images themselves are out of flow. The
   first image ships with is-active already set in markup, so with JS off
   (or only one photo present) this is just a normal static photo. */
.rp-photo-carousel {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: 0.5rem;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
}

.rp-photo-carousel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 900ms ease;
}

.rp-photo-carousel img.is-active {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.rp-photo-carousel img {
		transition: none;
	}
}

@media (max-width: 599px) {
	.rp-about-columns {
		flex-wrap: wrap;
	}

	.rp-about-photo {
		max-width: 16rem;
		margin: 0 auto;
	}
}