/* Graviteit — Blog-info boven de titel. De schrijver op de eerste regel, de cijfers eronder
   in een rustiger toon: wie het schreef weegt zwaarder dan wanneer en hoe lang. Op één regel
   zetten kan ook, voor wie het compacter wil. */

.gbm {
	--gbm-gap: 14px;
	--gbm-foto: 44px;
	--gbm-radius: 50%;
	--gbm-naam-color: inherit;
	--gbm-meta-color: inherit;

	display: flex;
	align-items: center;
	gap: var(--gbm-gap);
	color: inherit;
	line-height: 1.35;
}

.gbm .gbm__foto {
	width: var(--gbm-foto);
	height: var(--gbm-foto);
	border-radius: var(--gbm-radius, 50%);
	object-fit: cover;
	display: block;
	flex: 0 0 auto;
}

.gbm__tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.gbm__naam { color: var(--gbm-naam-color); }
.gbm__naam a { color: inherit; text-decoration: none; }
.gbm__naam a:hover,
.gbm__naam a:focus-visible { text-decoration: underline; text-underline-offset: .18em; }

.gbm__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	color: var(--gbm-meta-color);
	font-size: .875em;
}

.gbm__scheiding { opacity: .5; }

/* Compacte stand: alles achter elkaar op één regel. */
.gbm--regel { flex-wrap: wrap; }
.gbm--regel .gbm__tekst { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.gbm--regel .gbm__meta { font-size: 1em; }

.gbm__leeg { opacity: .6; font-style: italic; }

@media (max-width: 767px) {
	.gbm { --gbm-gap: 10px; --gbm-foto: 36px; }
}

/* Terug naar het overzicht: staat als eigen regel boven de gegevens, zodat het als
   navigatie leest en niet als nog een stukje informatie over het artikel. */
/* Terug naar het overzicht: dezelfde knop als elders op de site (.gft-ab--a13), op een
   eigen regel boven de gegevens zodat het als navigatie leest en niet als nog een stukje
   informatie over het artikel. De knop blijft display:inline, want daar hangt de band
   achter de tekst van af; de ruimte eronder zit daarom op de regel. */
.gbm-terug-regel { display: block; }
.gbm-terug,
.gbm-terug:link,
.gbm-terug:visited { color: var(--gbm-terug-color, inherit); }
/* Bij hover blijft de kleur dezelfde: het bandje achter de tekst doet het werk al.
   Zonder deze regels valt de knop terug op de linkkleur van het thema, en dat is
   een kleur die niets met het palet van de pagina te maken heeft. */
.gbm-terug:hover,
.gbm-terug:focus,
.gbm-terug:focus-visible,
.gbm-terug:active { color: var(--gbm-terug-color-hover, var(--gbm-terug-color, inherit)); }
.gbm-terug__pijl { margin-right: 6px; display: inline-block; transition: transform .16s ease; }
.gbm-terug:hover .gbm-terug__pijl { transform: translateX(-3px); }

/* Mobiel: de compacte "op één regel"-stand (gbm--regel) mag de auteursnaam niet onder
   de profielfoto duwen. Foto blijft links, naam en cijfers eronder in een kolom ernaast. */
@media (max-width: 1024px) {
	/* Byline op tablet én mobiel: foto links van de naam op de eerste regel, leestijd en
	   datum eronder over de volle breedte. display:contents haalt de tekst-wrapper uit de
	   layout zodat naam en meta los in het grid vallen. */
	.gbm--regel {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 10px;
		row-gap: 4px;
		align-items: center;
	}
	.gbm--regel .gbm__foto, .gbm--regel .gbm__ster { grid-column: 1; grid-row: 1; }
	.gbm--regel .gbm__tekst { display: contents; }
	.gbm--regel .gbm__naam { grid-column: 2; grid-row: 1; align-self: center; }
	.gbm--regel .gbm__meta { grid-column: 1 / -1; grid-row: 2; }
}