/*
 * Entity logo (components/entity-logo/): a client's / partner's logo, or the
 * brand's placeholder — the open diamond with the seed and the stored
 * initials. Sized by --gb-entity-h (set inline from the "height" arg).
 * Used on dark surfaces. A logo in its own colours (revision 14) sits on a
 * small white card so it reads there as it was made.
 */

.gb-entity-logo {
	display: inline-grid;
	place-items: center;
	block-size: var(--gb-entity-h, 48px);
	color: var(--gb-scene-text);
}

.gb-entity-logo img {
	display: block;
	inline-size: auto;
	/* The height itself, not 100%: a grid item's percentage height does not resolve (a large logo file would show at its own size). */
	block-size: var(--gb-entity-h, 48px);
	max-inline-size: calc(var(--gb-entity-h, 48px) * 3.4);
	object-fit: contain;
}

.gb-entity-logo--color {
	box-sizing: border-box;
	block-size: calc(var(--gb-entity-h, 48px) * 1.32);
	max-inline-size: 100%;
	padding: calc(var(--gb-entity-h, 48px) * 0.16) calc(var(--gb-entity-h, 48px) * 0.28);
	border-radius: calc(var(--gb-entity-h, 48px) * 0.22);
	background-color: #fff;
	box-shadow: 0 6px 16px -10px rgb(0 0 0 / 0.45);
}

/* On its card a long wordmark narrows to the card's width (object-fit keeps it whole). */
.gb-entity-logo--color img {
	max-inline-size: min(calc(var(--gb-entity-h, 48px) * 3.4), 100%);
}

.gb-entity-logo--mark {
	inline-size: var(--gb-entity-h, 48px);
}

.gb-entity-logo__mark {
	inline-size: 100%;
	block-size: 100%;
	overflow: visible;
}

.gb-entity-logo__mark path {
	fill: none;
	stroke: var(--gb-primary);
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.gb-entity-logo__mark circle {
	fill: var(--gb-seed);
}

/* Initials: typed by the owner in wp-admin, never derived from the name. */
.gb-entity-logo__mark text {
	fill: currentColor;
	font-family: var(--gb-font-display);
	font-size: 13px;
	font-weight: var(--gb-weight-bold);
}