/*
 * Author card and byline of the blog single (TASK-2057). Board «Ficha B · Órbita oscura» of the canvas «Autor del blog
 * Efeonce» (approved 2026-10-24). Values of La órbita (AXIS efeonceGraphicLine, dark theme): ground #001a33, ink #fff,
 * ink-soft #cfe4fa, halo #72ded8 (ring at 0.4), accent Growth #36c8bf; Bricolage for the name, Poppins for the rest
 * (both loaded by the site header). The straight corner points to where the block is born (AXIS `straightCorner`).
 */

.eo-author {
	--eo-a-ground: #001a33;
	--eo-a-ink: #ffffff;
	--eo-a-soft: #cfe4fa;
	--eo-a-halo: #72ded8;
	--eo-a-accent: #36c8bf;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 32px;
	max-width: 800px;
	margin: 56px auto;
	padding: clamp(24px, 3vw, 36px);
	border-radius: 0 24px 24px 24px;
	background: var(--eo-a-ground);
	color: var(--eo-a-ink);
	font-family: "Poppins", system-ui, sans-serif;
	text-align: left;
}

.eo-author *,
.eo-byline * {
	box-sizing: border-box;
}

.eo-author__portrait {
	position: relative;
	flex: 0 0 auto;
	width: 160px;
	height: 160px;
}

.eo-author__photo {
	position: absolute;
	left: 12.5%;
	top: 12.5%;
	width: 75%;
	height: 75%;
	border-radius: 50%;
	object-fit: cover;
	max-width: none;
}

.eo-author__photo--initials {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #023c70;
	font-family: "Bricolage Grotesque", system-ui, sans-serif;
	font-weight: 700;
	font-size: 38px;
	color: var(--eo-a-ink);
}

.eo-author__orbit {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.eo-author__ring {
	stroke: var(--eo-a-halo);
	stroke-opacity: 0.4;
}

.eo-author__arc {
	stroke: var(--eo-a-accent);
}

.eo-author__sphere {
	fill: var(--eo-a-accent);
}

.eo-author__body {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.eo-author p {
	margin: 0;
	padding: 0;
}

.eo-author__eyebrow {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--eo-a-soft);
}

.eo-author__name {
	font-family: "Bricolage Grotesque", system-ui, sans-serif;
	font-weight: 740;
	font-size: clamp(28px, 3vw, 36px);
	line-height: 0.95;
	letter-spacing: -0.03em;
	color: var(--eo-a-ink);
}

.eo-author__dot {
	color: var(--eo-a-accent);
}

.eo-author__role {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--eo-a-ink);
}

.eo-author__bio {
	font-size: 15px;
	line-height: 1.55;
	color: var(--eo-a-soft);
}

.eo-author__topics {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 4px 0 0;
	list-style: none;
}

.eo-author__topics li {
	margin: 0;
	padding: 0;
}

.eo-author__topics li::before {
	content: none;
}

.eo-author__topics a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(207, 228, 250, 0.08);
	color: var(--eo-a-soft);
	font-size: 13px;
	line-height: 1.2;
	text-decoration: none;
}

.eo-author__topics a:hover,
.eo-author__topics a:focus-visible {
	background: rgba(207, 228, 250, 0.16);
	color: var(--eo-a-ink);
}

.eo-author__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 6px;
	padding-top: 14px;
	border-top: 1px solid rgba(207, 228, 250, 0.14);
}

.eo-author__links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.eo-author__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 20px;
	border-radius: 999px;
	background: var(--eo-a-ink);
	color: var(--eo-a-ground);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.eo-author__cta:hover,
.eo-author__cta:focus-visible {
	background: var(--eo-a-soft);
	color: var(--eo-a-ground);
}

.eo-author__cta svg,
.eo-author__social svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

.eo-author__social svg {
	width: 18px;
	height: 18px;
}

.eo-author__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 1px solid rgba(207, 228, 250, 0.28);
	color: var(--eo-a-ink);
}

.eo-author__social:hover,
.eo-author__social:focus-visible {
	border-color: var(--eo-a-soft);
	color: var(--eo-a-ink);
	background: rgba(207, 228, 250, 0.08);
}

.eo-author a:focus-visible {
	outline: 2px solid var(--eo-a-halo);
	outline-offset: 3px;
}

/*
 * Ohio's grid inside `.author-container` (measured 2026-10-25): the row pulls 16 px to the left and the column pads 16 px,
 * so the card sat 16 px left of center: below desktop it ended 32 px short of the article text on the right (16 px left,
 * 48 px right at 390). Below 1024 px the card takes back those 32 px to line up with the text column; from 1024 px it moves
 * 16 px right to sit centered. Margins: 56 px above and below (40 on phones), operator 2026-10-25: «equilibrar».
 */
@media (min-width: 1024px) {
	.author-container .eo-author {
		position: relative;
		left: 16px;
	}
}

@media (max-width: 1023px) {
	.author-container .eo-author {
		width: calc(100% + 32px);
		max-width: none;
		margin-left: 0;
		margin-right: 0;
	}
}

@media (max-width: 640px) {
	.eo-author {
		display: grid;
		grid-template-columns: 112px minmax(0, 1fr);
		column-gap: 16px;
		row-gap: 12px;
		align-items: center;
		margin-top: 40px;
		margin-bottom: 40px;
		padding: 28px 22px;
		border-radius: 0 20px 20px 20px;
	}

	/* Profile header: the portrait beside «Escribe», the name and the networks; the rest runs full width below. */
	.eo-author__body,
	.eo-author__actions {
		display: contents;
	}

	.eo-author__portrait {
		grid-column: 1;
		grid-row: 1 / span 3;
		width: 112px;
		height: 112px;
	}

	.eo-author__eyebrow {
		grid-column: 2;
		grid-row: 1;
		align-self: end;
	}

	.eo-author__name {
		grid-column: 2;
		grid-row: 2;
		font-size: 28px;
	}

	.eo-author__links {
		grid-column: 2;
		grid-row: 3;
		align-self: start;
		gap: 10px;
	}

	.eo-author__role,
	.eo-author__bio,
	.eo-author__topics,
	.eo-author__cta {
		grid-column: 1 / -1;
	}

	.eo-author__role {
		margin-top: 8px;
	}

	.eo-author__photo--initials {
		font-size: 28px;
	}

	.eo-author__cta {
		justify-content: center;
		min-height: 48px;
		margin-top: 8px;
	}

	.eo-author__social {
		width: 44px;
		height: 44px;
	}
}

/* Ohio paints every link on hover (`a:not(.-unlink):hover`, `.links-underline a:hover` fills the background with
   currentColor). The links carry Ohio's opt-outs; these scoped rules keep the card's own states even without them. */
.eo-author a.eo-author__cta,
.eo-author a.eo-author__cta:hover,
.eo-author a.eo-author__cta:focus-visible,
.eo-author a.eo-author__social,
.eo-author a.eo-author__social:hover,
.eo-author a.eo-author__social:focus-visible,
.eo-author .eo-author__topics a,
.eo-author .eo-author__topics a:hover,
.eo-author .eo-author__topics a:focus-visible,
.eo-byline a.eo-byline__name,
.eo-byline a.eo-byline__name:hover {
	background-image: none;
	animation: none;
}

.eo-author a.eo-author__cta:hover,
.eo-author a.eo-author__cta:focus-visible {
	background-color: var(--eo-a-soft);
	color: var(--eo-a-ground);
}

.eo-author a.eo-author__social:hover,
.eo-author a.eo-author__social:focus-visible {
	background-color: rgba(207, 228, 250, 0.12);
	border-color: var(--eo-a-soft);
	color: var(--eo-a-ink);
}

.eo-author .eo-author__topics a:hover,
.eo-author .eo-author__topics a:focus-visible {
	background-color: rgba(207, 228, 250, 0.16);
	color: var(--eo-a-ink);
}

.eo-byline a.eo-byline__name:hover,
.eo-byline a.eo-byline__name:focus-visible {
	color: inherit;
}

/* ── Byline in the single header (ohio-child page_headline.php) ── */

.eo-byline {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: "Poppins", system-ui, sans-serif;
	text-align: left;
}

.eo-byline__photo {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
	box-shadow: 0 0 0 2px var(--eo-byline-ground, transparent), 0 0 0 3px #36c8bf;
	max-width: none;
}

.eo-byline__photo--initials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #023c70;
	color: #ffffff;
	font-family: "Bricolage Grotesque", system-ui, sans-serif;
	font-weight: 700;
	font-size: 16px;
}

.eo-byline__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.eo-byline__name {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: inherit;
	text-decoration: none;
}

.eo-byline__name:hover,
.eo-byline__name:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.eo-byline__meta {
	font-size: 13px;
	line-height: 1.4;
	opacity: 0.78;
}