/* =========================================================
   GameObserver — Author Box (Starfield)
   Loaded by gamezone_child_scripts() on single posts (any).
   Extracted from style.css.
   ========================================================= */

/* =========================================================
   Author Box — Starfield style (matches review box)
   ========================================================= */
.author_info {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 0 1.5rem;
	align-items: center;

	margin-top: 3rem;
	padding: 1.75rem;

	background:
		radial-gradient(ellipse at 100% 0%,
			rgba(120, 120, 216, 0.25) 0%,
			rgba(88, 88, 200, 0) 50%),
		radial-gradient(ellipse at 0% 100%,
			rgba(56, 72, 104, 0.5) 0%,
			rgba(28, 25, 44, 0) 60%),
		linear-gradient(135deg, #1c192c 0%, #232040 40%, #384868 100%);
	border: 1px solid rgba(120, 120, 216, 0.2);
	border-radius: 16px;
	box-shadow: 0 16px 36px -16px rgba(28, 25, 44, 0.7);

	color: #fff;
	position: relative;
	overflow: hidden;
}

/* Starfield dots — same as review box */
.author_info::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(1.5px 1.5px at 90% 15%, rgba(255, 255, 255, 0.5) 50%, transparent 51%),
		radial-gradient(1px 1px at 15% 80%, rgba(184, 184, 255, 0.5) 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 70% 85%, rgba(184, 184, 255, 0.4) 50%, transparent 51%),
		radial-gradient(1px 1px at 40% 30%, rgba(255, 255, 255, 0.3) 50%, transparent 51%);
	pointer-events: none;
	z-index: 0;
}

.author_info > * {
	position: relative;
	z-index: 1;
}

/* Avatar — circular badge matching the score emblem */
.author_avatar {
	width: 100px;
	height: 100px;
	flex: none;
	position: static;
	line-height: normal;
}

.author_avatar img {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	border: 2px solid rgba(184, 184, 255, 0.35);
	box-shadow:
		0 0 0 4px rgba(28, 25, 44, 0.45),
		0 6px 18px -4px rgba(56, 72, 104, 0.6);
}

/* Description column */
.author_description {
	padding-left: 0;
}

.author_info .author_description .author_title {
	color: #fff !important;
	font-family: "Roboto", sans-serif;
	font-size: 1rem;
	font-weight: 700;
	font-style: normal;
	line-height: 1.2;
	letter-spacing: -0.2px;
	margin: 0 0 0.5rem 0;
}

.author_bio {
	font-family: "Roboto", sans-serif;
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.75);
	margin: 0;
}

.author_bio p {
	margin: 0 0 0.75rem 0;
	color: rgba(255, 255, 255, 0.75);
}

/* "Read more about [name]" link */
.author_info a,
.author_bio .author_link {
	color: #b8b8ff !important;
	font-family: "Roboto", sans-serif;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-decoration: none !important;
	border-bottom: 1px dotted rgba(184, 184, 255, 0.45);
	padding-right: 0;
	margin-top: 0.75rem;
	display: inline-block;
	position: static;
	transition: color 0.15s ease, border-color 0.15s ease;
}
/* "More articles by [author]" — drop to its own line, centred,
   so it doesn't trail awkwardly off the end of the bio paragraph.
   width:max-content collapses the link to its text width; auto
   margins then centre it inside the bio column. */
.author_bio .author_link {
	display: block !important;
	width: max-content;
	max-width: 100%;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-top: 1.25rem !important;
	text-align: center;
}

.author_info a:hover,
.author_bio .author_link:hover {
	color: #fff !important;
	border-bottom-color: #fff;
}

/* Remove the old decorative line pseudo-element */
.author_bio .author_link:after,
.author_bio .author_link:hover:after {
	display: none;
}

.author_bio .socials_wrap {
	margin-top: 0.75rem;
}

.socials_wrap .social_item:last-child {
	margin-right: 0 !important;
}

/* Mobile — stack avatar above description */
@media (max-width: 480px) {
	.author_info {
		grid-template-columns: 1fr;
		text-align: center;
		padding: 1.5rem 1.25rem;
		gap: 1rem 0;
	}

	.author_avatar {
		margin: 0 auto;
	}

	.author_bio p,
	.author_bio {
		text-align: center;
	}

	.author_info a,
	.author_bio .author_link {
		display: block;
		text-align: center;
	}
}