/* 16:9 Skribenter
   Bruger temaets egne variabler (spacing, farver, indholdsbredde), så udseendet
   følger Global Styles. Selektorerne er bevidst et trin mere specifikke end
   kerneblokkenes, så rækkefølgen af stylesheets er ligegyldig. */

/* -------------------------------------------------------------------------
   1) Bylines: overlappende avatars (Avatar-blokken, når posten har flere skribenter)
   Overlappet sættes som inline margin i PHP ud fra billedets størrelse.
   Ringen om billederne kan ændres med --skr-ring (standard: temaets "base"-farve).
   ---------------------------------------------------------------------- */

.wp-block-avatar.skr-flere {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.wp-block-avatar.skr-flere .skr-avatar {
	display: block;
	flex: 0 0 auto;
	line-height: 0;
}

.wp-block-avatar.skr-flere .skr-avatar a {
	display: block;
}

.wp-block-avatar.skr-flere .skr-avatar img {
	display: block;
	box-shadow: 0 0 0 2px var(--skr-ring, var(--wp--preset--color--base, #fff));
}

/* Fokusringen skal ligge over nabo-billedet, ikke gemmes bag det. */
.wp-block-avatar.skr-flere .skr-avatar a:focus-visible {
	position: relative;
	z-index: 1;
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   2) Blokken "Om skribenterne"
   Gentager opbygningen i det tidligere afsnit: overskrift, så for hver skribent
   navn → billede → biografi, alt centreret i en kolonne.
   ---------------------------------------------------------------------- */

.skr-om {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.skr-om .skr-om__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: var(--wp--preset--spacing--40);
}

.skr-om .skr-om__heading {
	margin: 0;
	text-align: center;
}

.skr-om .skr-om__person {
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	padding: var(--wp--preset--spacing--20);
}

/* Mellem to skribenter: luft og en tynd streg i indholdsbredden. */
.skr-om .skr-om__person + .skr-om__person {
	width: min(100%, var(--wp--style--global--content-size, 620px));
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid rgba(0, 0, 0, 0.15);
	border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}

.skr-om .skr-om__name {
	margin: 0;
	padding: 0;
	font-style: normal;
	font-weight: 700;
	text-align: center;
}

.skr-om .skr-om__name a {
	color: var(--wp--preset--color--custom-green-links, currentColor);
}

.skr-om .skr-om__avatar {
	margin-top: var(--wp--style--block-gap, 1.5rem);
	line-height: 0;
}

.skr-om .skr-om__avatar a {
	display: block;
}

.skr-om .skr-om__avatar img {
	display: block;
	border-radius: 100vh;
}

.skr-om .skr-om__bio {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wp--style--global--content-size, 620px);
	margin-top: var(--wp--preset--spacing--40);
	border: 0;
}