/* =========================================================================
   Author archive — 2026 redesign
   See: docs/superpowers/specs/2026-05-21-author-page-redesign-design.md
   ========================================================================= */

/* Panel — owned by author-2026.css, not shared with article hero */
.author-hero {
	background: var(--wp--preset--color--indigo-bg);
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	padding: 24px 48px 48px;
}

@media (max-width: 781px) {
	.author-hero {
		padding: 24px 20px 36px;
	}
}

/* =========================================================================
   Breadcrumbs
   ========================================================================= */
.author-hero__breadcrumbs {
	margin-bottom: 48px;
}
.author-hero__breadcrumbs-inner {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
	font-family: var(--wp--preset--font-family--inter, "Inter", sans-serif);
	font-size: 18px;
	line-height: 28px;
}
.author-hero__breadcrumbs a,
.author-hero__breadcrumbs .breadcrumb_last {
	color: #707579;
	text-decoration: none;
}
.author-hero__breadcrumbs .is-current,
.author-hero__breadcrumbs .breadcrumb_last,
.author-hero__breadcrumbs a:last-child {
	color: #4D67D6;
}
.author-hero__breadcrumbs svg {
	flex-shrink: 0;
}

/* =========================================================================
   Body — flex row desktop, column mobile
   ========================================================================= */
.author-hero__body {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 48px;
}
@media (max-width: 781px) {
	.author-hero__body {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		text-align: left;
	}
}

/* =========================================================================
   Photo — circular
   ========================================================================= */
.author-hero__photo {
	flex-shrink: 0;
	width: 160px;
	height: 160px;
	margin: 0;
	border-radius: 50%;
	overflow: hidden;
}
.author-hero__photo-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 50%;
}
@media (max-width: 781px) {
	.author-hero__photo {
		width: 80px;
		height: 80px;
	}
}

/* =========================================================================
   Text column
   ========================================================================= */
.author-hero__text {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

/* Pill */
.author-hero__pill {
	display: inline-block;
	align-self: flex-start;
	margin: 0;
	padding: 0 12px;
	background: #DCEEC3;
	color: #40621A;
	border-radius: 20px;
	height: 24px;
	line-height: 24px;
	font-family: var(--wp--preset--font-family--inter, "Inter", sans-serif);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.012em;
}

/* Two-tone H1 */
.author-hero__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--rethink-sans, "Rethink Sans", sans-serif);
	font-weight: 600;
	font-size: 40px;
	line-height: 48px;
	letter-spacing: -1px;
	color: #1D2E8A;
}
@media (max-width: 781px) {
	.author-hero__name {
		font-size: 28px;
		line-height: 36px;
	}
}

/* Bio */
.author-hero__bio {
	margin: 0;
	color: #2F3335;
	font-family: var(--wp--preset--font-family--inter, "Inter", sans-serif);
	font-size: 18px;
	line-height: 28px;
}
.author-hero__bio p { margin: 0 0 1em; }
.author-hero__bio p:last-child { margin-bottom: 0; }
.author-hero__bio a { color: #4D67D6; }

/* Socials */
.author-hero__socials {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.author-hero__socials a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 24px;
	background: #FFFFFF;
	border: 1px solid #E7E9EA;
	border-radius: 100px;
	color: #707579;
	font-family: var(--wp--preset--font-family--inter, "Inter", sans-serif);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-decoration: none;
	transition: border-color 0.15s, color 0.15s;
}
.author-hero__socials a:hover {
	border-color: #D1D4D6;
	color: #2F3335;
}
.author-hero__socials a:focus-visible {
	outline: 2px solid #4D67D6;
	outline-offset: 2px;
}
.author-hero__socials svg {
	flex-shrink: 0;
}

/* =========================================================================
   Section heading: "All articles by …"
   ========================================================================= */
.author-archive__heading {
	margin: 0 0 48px;
	color: #2F3335;
	font-family: var(--wp--preset--font-family--hedvig-letters-serif, "Hedvig Letters Serif", serif);
	font-weight: 400;
	font-size: 36px;
	line-height: 48px;
	letter-spacing: -1px;
}
@media (max-width: 781px) {
	.author-archive {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
	.author-archive__heading {
		font-size: 24px;
		line-height: 36px;
		margin-bottom: 24px;
	}
}

/* =========================================================================
   Card grid — scoped to .author-archive so home/category cards untouched
   ========================================================================= */
.author-archive .wp-block-query .wp-block-post-template.is-layout-flex {
	gap: 48px 24px;
	list-style: none;
	padding-left: 0;
}
.author-archive .wp-block-query .wp-block-post-template.is-layout-flex > li {
	flex: 1 1 calc(25% - 18px);
	max-width: calc(25% - 18px);
}
@media (max-width: 1199px) {
	.author-archive .wp-block-query .wp-block-post-template.is-layout-flex > li {
		flex: 1 1 calc(50% - 12px);
		max-width: calc(50% - 12px);
	}
}
@media (max-width: 781px) {
	.author-archive .wp-block-query .wp-block-post-template.is-layout-flex > li {
		flex: 1 1 100%;
		max-width: 100%;
	}
}

/* =========================================================================
   Card — Figma "All articles by ..." card spec
   Image (16px radius all corners) → 16px gap → badge → 12px gap → title →
   16px gap → date. No author byline, no read-more. Block defaults are reset
   so the wp-block-* wrappers don't introduce stray margins or borders.
   ========================================================================= */
.author-archive__card {
	background: transparent;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-align: left;
}
/* Belt-and-suspenders: WP block markup may inject `margin-left: auto` on
   children of constrained-layout groups (centering them on the inline axis).
   Force every descendant of the card back to flush-left. */
.author-archive__card > *,
.author-archive__card-meta > * {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
}

.author-archive__card-image,
.author-archive__card-image.wp-block-post-featured-image {
	margin: 0 0 16px;
}
.author-archive__card-image img,
.author-archive__card-image a img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 16px 0 16px 16px; /* TL, TR, BR, BL — top-right squared */
}

.author-archive__card-meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 0;
	margin: 0;
	text-align: left;
}

/* Badge — pale blue pill with dark blue text */
.author-archive__card-badge {
	margin: 0;
	padding: 0;
}
.author-archive__card-badge .wp-block-post-terms__link,
.author-archive__card-badge a {
	display: inline-block;
	padding: 0 12px;
	height: 24px;
	line-height: 24px;
	background: #D3DCFF;
	color: #1D2E8A;
	border-radius: 20px;
	font-family: var(--wp--preset--font-family--inter, "Inter", sans-serif);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.012em;
	text-decoration: none;
	max-width: 100%;
	overflow-wrap: anywhere;
}
.author-archive__card-badge .wp-block-post-terms__link:hover,
.author-archive__card-badge a:hover {
	background: #C3CDFF;
	color: #1D2E8A;
}

/* Title — high-specificity overrides because some posts get inline
   typography from theme.json defaults that we need to flatten. */
.author-archive .author-archive__card-title.wp-block-post-title,
.author-archive .author-archive__card-title.wp-block-post-title a {
	margin: 0;
	font-family: var(--wp--preset--font-family--rethink-sans, "Rethink Sans", sans-serif);
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
	letter-spacing: 0;
	color: #2F3335;
	text-align: left;
	text-decoration: none;
}
.author-archive .author-archive__card-title.wp-block-post-title a:hover {
	color: #4D67D6;
}

/* Date — bumped 4px below the title (meta gap is 12px badge→title;
   16px total title→date is closer to the Figma spacing).
   Match-on-class-and-block selector with .author-archive ancestor for
   sufficient specificity to defeat any block-level inline font styles. */
.author-archive .author-archive__card-date.wp-block-post-date,
.author-archive .author-archive__card-date.wp-block-post-date time {
	margin: 4px 0 0;
	font-family: var(--wp--preset--font-family--inter, "Inter", sans-serif);
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
	color: #707579;
	text-align: left;
}

/* Mobile: card title shrinks slightly, image radius stays */
@media (max-width: 781px) {
	.author-archive__card-title.wp-block-post-title {
		font-size: 18px;
		line-height: 24px;
	}
}

/* =========================================================================
   Pagination — centered on the author archive
   ========================================================================= */
.author-archive .wp-block-query-pagination {
	justify-content: center;
	margin-top: 48px;
}
@media (max-width: 781px) {
	.author-archive .wp-block-query-pagination {
		margin-top: 32px;
	}
}