/**
 * Author page (single-resource_author.php).
 *
 * Kept outside scss/ deliberately: wp-scss compiles scss/ into css/, so a
 * hand-written file in css/ would be confusing to maintain. Same arrangement
 * as the block stylesheets.
 *
 * Every measurement below is the comp's (artboard px, 1200px container), not a
 * theme preset. Section padding is asymmetric in the comp, so it is set per
 * section rather than as one shared rhythm.
 */

.author-page__hero,
.author-page__about,
.author-page__topics,
.author-page__insights {
	padding-inline: 0;
}

/* --- Hero ---------------------------------------------------------------- */

.author-page__hero {
	background-color: var(--wp--preset--color--grey, #F7F7F7);
	padding-block: 61px 84px;
}

.author-page__hero-inner {
	align-items: center;
	display: grid;
	gap: 49px;
	grid-template-columns: 200px minmax(0, 1fr);
}

.author-page__headshot {
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	width: 200px;
}

.author-page__headshot img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.author-page__eyebrow {
	color: var(--wp--preset--color--lightblue, #0F78B9);
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	margin: 0;
}

.author-page__name {
	font-size: 46px;
	font-weight: 700;
	line-height: 52px;
	margin: 6px 0 0;
}

.author-page__role {
	color: var(--wp--preset--color--darkgrey, #464646);
	font-size: 16px;
	line-height: 24px;
	margin: 3px 0 0;
}

.author-page__linkedin {
	margin: 20px 0 0;
}

/* The button must never wrap, however narrow the column gets. */
.author-page__linkedin a {
	white-space: nowrap;
}

/* --- About --------------------------------------------------------------- */

.author-page__about {
	padding-block: 67px 62px;
}

.author-page__about-inner {
	align-items: start;
	display: grid;
	gap: 0 72px;
	grid-template-columns: minmax(0, 760px);
}

.author-page__about-inner.has-focus {
	/* The comp's column is 724px, but its type measures ~5% narrower than the
	   Inter the site loads, so the same copy needs ~760px to break on the
	   same words. */
	grid-template-columns: minmax(0, 760px) 368px;
	justify-content: space-between;
}

.author-page__section-heading {
	font-size: 46px;
	font-weight: 700;
	line-height: 52px;
	margin: 0 0 15px;
	text-wrap: balance;
}

.author-page__about .author-page__section-heading {
	margin-top: 2px;
}

.author-page__bio p {
	color: var(--wp--preset--color--darkgrey, #464646);
	font-size: 16px;
	line-height: 24px;
	margin: 0 0 15px;
}

.author-page__bio p:last-child {
	margin-bottom: 0;
}

.author-page__focus {
	background-color: var(--wp--preset--color--backgroundgreen, #F4FAF2);
	padding: 38px 41px 48px;
}

.author-page__focus-icon {
	display: block;
	height: 50px;
	margin: 0 0 20px;
	width: auto;
}

.author-page__focus .author-page__focus-title {
	font-size: 22px;
	font-weight: 700;
	line-height: 26px;
	margin: 0 0 12px;
}

.author-page__focus-text {
	color: var(--wp--preset--color--darkgrey, #464646);
	font-size: 16px;
	line-height: 24px;
	margin: 0;
}

/* --- Topics -------------------------------------------------------------- */

.author-page__topics {
	padding-block: 62px 132px;
}

.author-page__topics .author-page__section-heading,
.author-page__insights .author-page__section-heading {
	text-align: center;
}

.author-page__intro {
	color: var(--wp--preset--color--darkgrey, #464646);
	font-size: 16px;
	line-height: 24px;
	margin: 0 auto;
	max-width: 732px;
	text-align: center;
}

.author-page__topics .author-page__intro {
	margin-bottom: 62px;
}

.author-page__topics .author-page__section-heading,
.author-page__insights .author-page__section-heading {
	margin-bottom: 27px;
}

.author-page__topic-grid {
	display: grid;
	gap: 19px 18px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.author-page__topic {
	list-style: none;
	background-color: var(--wp--preset--color--backgroundblue, #F0F5F9);
	margin: 0;
	/* The comp's text frames are 337px wide inside a 388px card. */
	padding: 33px 21px 39px 30px;
}

/* Icons are 44-61px wide and 48-60px tall; a fixed 60px slot keeps every title
   on one line across the row. */
.author-page__topic-icon {
	display: block;
	height: 60px;
	margin: 0 0 16px;
	object-fit: contain;
	object-position: left center;
	width: auto;
}

.author-page__topic .author-page__topic-title {
	font-size: 22px;
	font-weight: 700;
	line-height: 28px;
	margin: 0 0 10px;
	/* Same ~5% metric difference as the bio: at the site's Inter the longest
	   title (345px) would wrap inside the comp's 337px frame. */
	letter-spacing: -0.03em;
}

.author-page__topic-text {
	color: var(--wp--preset--color--darkgrey, #464646);
	font-size: 16px;
	line-height: 23px;
	margin: 0;
}

/* --- Latest insights ----------------------------------------------------- */

.author-page__insights {
	background-color: var(--wp--preset--color--grey, #F7F7F7);
	padding-block: 104px 114px;
}

.author-page__insights .author-page__intro {
	margin-bottom: 64px;
}

@media (max-width: 1000px) {
	.author-page__about-inner.has-focus {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 40px;
	}
}

@media (max-width: 900px) {
	.author-page__topic-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.author-page__hero-inner {
		grid-template-columns: minmax(0, 1fr);
		justify-items: start;
	}

	.author-page__topic-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.author-page__name,
	.author-page__section-heading {
		font-size: var(--wp--preset--font-size--midmedium, 2.25rem);
		line-height: 1.17;
	}
}