/**
 * Author page (author.php) -- page-scoped stylesheet.
 *
 * The hero keeps the other image heroes' background treatment (slid up
 * under the floating header, background image over white): a large
 * centered "Author" title, then the profile row (photo left, name and
 * introduction beside it) like klouddata.com/author/. The post grid below
 * reuses .insights-grid / .service-resources__card (insights.css / main.css).
 *
 * @package sap-migration-theme
 */

.author-hero {
	position: relative;
	overflow: hidden;
	/* Slide up under the floating header, same as the other page heroes. */
	margin-top: -96px;
	padding: 200px 0 88px;
	background:
		radial-gradient(circle at 50% 0%, rgba(1, 174, 240, 0.14) 0%, rgba(1, 174, 240, 0) 60%),
		radial-gradient(circle at 50% 20%, #eef4fb 0%, #ffffff 70%);
}

.author-hero.author-hero--has-bg {
	background: #fff;
}

.author-hero__bg-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0.85;
}

.author-hero__inner {
	position: relative;
	max-width: var(--header-max-width);
	margin-inline: auto;
	/* Same box as .insights-grid__inner, so the photo lines up with the cards. */
	padding-inline: var(--header-padding-x);
}

/* Big centered page title, same size as the other page hero headings. */
.author-hero__title {
	margin: 0 0 48px;
	text-align: center;
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 52px;
	line-height: 1.2;
	letter-spacing: -1px;
	color: var(--color-heading);
}

.author-hero__profile {
	display: flex;
	align-items: center;
	gap: 36px;
}

.author-hero__avatar {
	width: 128px;
	height: 128px;
	flex-shrink: 0;
	border: 4px solid #fff;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 16px 40px -18px rgba(10, 17, 40, 0.35);
}

.author-hero__body {
	min-width: 0;
}

.author-hero__name {
	margin: 0;
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 36px;
	line-height: 1.25;
	letter-spacing: -0.5px;
	color: var(--color-heading);
}

.author-hero__bio {
	margin: 12px 0 0;
	font-size: 17px;
	line-height: 1.7;
	color: var(--color-body-text);
}

/* Gap between the hero and the post grid. */
.author-page .insights-grid__inner {
	padding-top: 64px;
}

@media (max-width: 1024px) {
	.author-hero {
		padding: 160px 0 64px;
	}

	.author-hero__inner {
		padding-inline: var(--header-padding-x-tablet);
	}

	.author-hero__title {
		margin-bottom: 36px;
		font-size: 40px;
		line-height: 1.25;
		letter-spacing: -0.5px;
	}

	.author-hero__profile {
		gap: 28px;
	}

	.author-hero__avatar {
		width: 112px;
		height: 112px;
	}

	.author-hero__name {
		font-size: 30px;
	}

	.author-page .insights-grid__inner {
		padding-top: 48px;
	}
}

@media (max-width: 640px) {
	.author-hero {
		margin-top: -88px;
		padding: 132px 0 48px;
	}

	.author-hero__inner {
		padding-inline: var(--header-padding-x-mobile);
	}

	.author-hero__title {
		margin-bottom: 28px;
		font-size: 40px;
		letter-spacing: 0;
	}

	/* Stacked and centered on phones. */
	.author-hero__profile {
		flex-direction: column;
		gap: 18px;
		text-align: center;
	}

	.author-hero__avatar {
		width: 96px;
		height: 96px;
	}

	.author-hero__name {
		font-size: 28px;
	}

	.author-hero__bio {
		font-size: 16px;
		line-height: 26px;
	}

	.author-page .insights-grid__inner {
		padding-top: 40px;
	}
}