/* Graviteit — Auteursblok onder een blog. Naam bovenaan, onderschrift eronder: de naam is
   waar de lezer op scant, het onderschrift is de toelichting. Optioneel met een scheidingslijn
   of een paneel eromheen, zodat het blok niet als zoveelste alinea leest. */

.gft-auteur {
	--gft-auteur-gap: 20px;
	--gft-auteur-foto: 84px;
	--gft-auteur-radius: 50%;
	--gft-auteur-naam-color: inherit;
	--gft-auteur-bio-color: inherit;
	--gft-auteur-lijn-color: currentColor;

	display: flex;
	align-items: flex-start;
	gap: var(--gft-auteur-gap);
	color: inherit;
}

.gft-auteur--lijn { border-top: 1px solid var(--gft-auteur-lijn-color); padding-top: 24px; }
.gft-auteur--foto-rechts { flex-direction: row-reverse; }
.gft-auteur--foto-boven  { flex-direction: column; }
.gft-auteur--midden      { align-items: center; text-align: center; }
.gft-auteur--midden .gft-auteur__tekst { align-items: center; }

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

.gft-auteur__tekst { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }

.gft-auteur__label {
	display: block;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .72em;
	opacity: .7;
}

.gft-auteur__naam { display: block; color: var(--gft-auteur-naam-color); font-weight: 500; }
.gft-auteur__naam a { color: inherit; text-decoration: none; }
.gft-auteur__naam a:hover,
.gft-auteur__naam a:focus-visible { text-decoration: underline; text-underline-offset: .18em; }

.gft-auteur__bio { margin: 0; color: var(--gft-auteur-bio-color); }

.gft-auteur__leeg { opacity: .6; font-style: italic; }

@media (max-width: 767px) {
	.gft-auteur { --gft-auteur-gap: 16px; --gft-auteur-foto: 64px; }
}

/* Terugval als er geen foto is: het sterretje uit de huisstijl, in de accentkleur.
   Het beeld dient als masker, zo volgt de kleur de instelling in Elementor. */
.gft-auteur .gft-auteur__ster,
.gbm .gbm__ster {
	flex: 0 0 auto;
	display: block;
	background-color: var(--gft-ster-kleur, currentColor);
	-webkit-mask: var(--gft-ster-bron) center / contain no-repeat;
	mask: var(--gft-ster-bron) center / contain no-repeat;
}
.gft-auteur .gft-auteur__ster { width: var(--gft-auteur-foto, 84px); height: var(--gft-auteur-foto, 84px); }
.gbm .gbm__ster  { width: var(--gbm-foto, 44px);        height: var(--gbm-foto, 44px); }