/* CURSOR BYLINE-004 - Article byline: Written by / Reviewed 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;
}

/* Photo on the left, LinkedIn in the top-right corner - the card's two anchors at opposite
   edges, which balances it better than the icon tucked against the photo. */
.aec-byline__card-head {
	align-items: flex-start;
	display: flex;
	gap: 12px;
	justify-content: space-between;
}

/* CURSOR BYLINE-007 - LinkedIn's own blue, the one colour here not taken from the theme: it is
   their mark, and a recoloured logo reads as a different thing. */
.aec-byline__card-linkedin {
	color: #0a66c2;
	display: inline-flex;
	line-height: 0;
}

.aec-byline__card-linkedin:hover,
.aec-byline__card-linkedin:focus {
	color: #004182;
}

.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 {
	line-height: 1.45;
}

/* 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;
	}
}