/* CURSOR BYLINE-004 - Article byline: Written by / Edited by, with a profile card per person.
   Front end only, loaded on single articles. Colours come from the theme's presets so the byline
   sits in whatever palette the site uses; the fallbacks are for themes that declare none. */
.aec-byline {
	--aec-byline-ink: var(--wp--preset--color--contrast, #1e1e1e);
	--aec-byline-muted: var(--wp--preset--color--text-muted, #646970);
	--aec-byline-surface: var(--wp--preset--color--base, #fff);
	--aec-byline-rule: rgba(0, 0, 0, 0.12);
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	justify-content: space-between;
	margin-block: var(--wp--preset--spacing--30, 16px);
}

.aec-byline__people {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
}

.aec-byline__person {
	align-items: center;
	display: flex;
	gap: 10px;
	position: relative;
}

.aec-byline__avatar img,
.aec-byline__card-avatar img {
	border-radius: 50%;
	display: block;
}

.aec-byline__who {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.aec-byline__role {
	color: var(--aec-byline-muted);
	font-size: 0.75em;
}

.aec-byline__name {
	color: var(--aec-byline-ink);
	font-size: 0.875em;
	font-weight: 600;
	text-decoration: none;
}

.aec-byline__name:hover,
.aec-byline__name:focus {
	text-decoration: underline;
}

.aec-byline__date {
	color: var(--aec-byline-muted);
	font-size: 0.875em;
}

/* The card is in the HTML from the start and only its visibility changes, so it is readable
   without script and opens for keyboard users on focus as well as for the mouse on hover. */
.aec-byline__card {
	background: var(--aec-byline-surface);
	border: 1px solid var(--aec-byline-rule);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
	color: var(--aec-byline-ink);
	display: flex;
	flex-direction: column;
	font-size: 0.8125rem;
	gap: 6px;
	left: 0;
	max-width: calc(100vw - 32px);
	opacity: 0;
	padding: 16px;
	position: absolute;
	top: calc(100% + 8px);
	transition: opacity 0.15s ease, visibility 0.15s ease;
	visibility: hidden;
	width: 300px;
	z-index: 50;
}

/* A bridge across the gap, so the pointer can travel from the name into the card without the
   card closing on the way. */
.aec-byline__card::before {
	content: "";
	height: 8px;
	left: 0;
	position: absolute;
	right: 0;
	top: -8px;
}

.aec-byline__person:hover .aec-byline__card,
.aec-byline__person:focus-within .aec-byline__card {
	opacity: 1;
	visibility: visible;
}

.aec-byline__card-name {
	color: var(--aec-byline-ink);
	font-size: 1rem;
	font-weight: 600;
}

.aec-byline__card-title,
.aec-byline__card-fact {
	color: var(--aec-byline-muted);
}

.aec-byline__card-label {
	font-weight: 600;
}

.aec-byline__card-expertise ul {
	margin: 2px 0 0;
	padding-left: 18px;
}

.aec-byline__card-bio {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	display: -webkit-box;
	overflow: hidden;
}

/* On a phone the editor sits halfway across, and a card hung from their name runs off the right
   edge - hidden or not, since a hidden box still widens the page. Both cards hang from the
   byline's left edge instead. */
@media (max-width: 600px) {
	.aec-byline__people {
		position: relative;
	}

	.aec-byline__person {
		position: static;
	}

	.aec-byline__card {
		max-width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aec-byline__card {
		transition: none;
	}
}