/* Content Detail — Header (neilkelly/content-detail-header) · Figma 1576:5 */
.wp-block-neilkelly-content-detail-header.nk-cd-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--6); /* title -> byline = 24px */
	padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--gutter) var(--wp--preset--spacing--6); /* padding-bottom = title/byline -> breadcrumbs = 24px */
	background: var(--wp--preset--color--surface-page);
	font-family: var(--wp--preset--font-family--inter);
	box-sizing: border-box;
}
/* No byline: the H1 is the bottom element, so double its gap to the breadcrumbs (48px).
   With a byline present the 24px padding-bottom above spaces byline -> breadcrumbs. */
.wp-block-neilkelly-content-detail-header.nk-cd-header:not(:has(.nk-cd-header__byline)) {
	padding-bottom: var(--wp--preset--spacing--12);
}
/* Title + byline sit in the same content-width band as the breadcrumbs and body
   (centered within the section's gutter padding), so they share both edges. */
.wp-block-neilkelly-content-detail-header .nk-cd-header__title {
	margin: 0 auto;
	width: 100%;
	max-width: var(--wp--custom--layout--content-width);
	color: var(--wp--preset--color--ink-primary);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: var(--wp--custom--font-weight--extrabold);
	line-height: var(--wp--custom--line-height--xl-tight);
	text-align: left;
	text-wrap: balance;
}
.wp-block-neilkelly-content-detail-header .nk-cd-header__byline {
	width: 100%;
	max-width: var(--wp--custom--layout--content-width);
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
}
/* Link variant — inherits color, no underline; the author name reddens on hover.
   Keeps the base byline's content-width band + centering for alignment; only the
   avatar/text inside are visible, so the row aligns with the title and body. */
.wp-block-neilkelly-content-detail-header a.nk-cd-header__byline--link {
	color: inherit;
	text-decoration: none;
}
.wp-block-neilkelly-content-detail-header a.nk-cd-header__byline--link:hover .nk-cd-header__author,
.wp-block-neilkelly-content-detail-header a.nk-cd-header__byline--link:focus-visible .nk-cd-header__author {
	color: var(--wp--preset--color--brand-red);
	text-decoration: underline;
}
.wp-block-neilkelly-content-detail-header a.nk-cd-header__byline--link:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-red);
	outline-offset: 2px;
}
.wp-block-neilkelly-content-detail-header .nk-cd-header__avatar {
	display: block;
	flex: 0 0 auto;
	width: var(--wp--custom--components--content-detail--avatar-size);
	height: var(--wp--custom--components--content-detail--avatar-size);
	border-radius: var(--wp--custom--radius--full);
	border: 1px solid var(--wp--preset--color--border-default);
	overflow: hidden;
}
.wp-block-neilkelly-content-detail-header .nk-cd-header__avatar-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top; /* crop from the top of the photo, not the center */
}
.wp-block-neilkelly-content-detail-header .nk-cd-header__avatar-img--placeholder {
	background: var(--wp--preset--color--surface-section);
}
.wp-block-neilkelly-content-detail-header .nk-cd-header__byline-text {
	display: flex;
	flex-direction: column;
	text-align: left;
}
.wp-block-neilkelly-content-detail-header .nk-cd-header__author {
	color: var(--wp--preset--color--ink-primary);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--font-weight--bold);
}
.wp-block-neilkelly-content-detail-header .nk-cd-header__meta {
	color: var(--wp--preset--color--ink-secondary);
	font-size: var(--wp--preset--font-size--sm);
}
@media (max-width: 767px) {
	.wp-block-neilkelly-content-detail-header.nk-cd-header {
		padding-left: var(--wp--preset--spacing--6);
		padding-right: var(--wp--preset--spacing--6);
	}
}