/*
 * Client logo bar.
 *
 * Two custom properties come in from the render callback on the root element —
 * `--btxc-logo-bar-size` (the shared height) and `--btxc-logo-bar-ink` (the one
 * colour, already resolved to a `--btx-*` token by PHP). Per logo, the item
 * carries `--btxc-logo-src` and `--btxc-logo-ratio`.
 *
 * Same rules as every component stylesheet: design-system `--btx-*` tokens only,
 * a fallback on every var(). See cta-button/style.css for the full note.
 */

@layer bertex-components {
	.btxc-logo-bar {
		box-sizing: border-box;
		margin: 0;

		font-family: var(--btx-font-body-family, system-ui, sans-serif);
		color: var(--btx-color-primary-1, #1a2744);
	}

	.btxc-logo-bar__heading {
		margin: 0 0 var(--btx-spacing-m, 1rem);

		font-family: var(--btx-font-body-family, system-ui, sans-serif);
		font-size: var(--btx-font-body-s, 0.875rem);
		line-height: var(--btx-line-height-body, 1.6);
		font-weight: 600;
		letter-spacing: 0.06em;
		text-align: center;
		text-transform: uppercase;
		color: var(--btx-color-primary-1-light-40, #2e4578);
	}

	/*
	 * Wraps rather than scrolls. A logo bar that needs a scrollbar is a logo bar
	 * with too many logos in it, and the second line reads fine.
	 */
	.btxc-logo-bar__list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;

		gap: var(--btx-spacing-lg, 1.5rem) var(--btx-spacing-xl, 3rem);
		margin: 0;
		padding: 0;

		list-style: none;
	}

	.btxc-logo-bar__item {
		display: flex;
		align-items: center;
		justify-content: center;

		height: var(--btxc-logo-bar-size, 40px);
	}

	/*
	 * The mask is the whole component.
	 *
	 * The element paints one flat colour and the logo's own alpha channel decides
	 * where that colour lands, which is what makes a dozen unrelated files agree
	 * on a colour without anyone re-exporting them.
	 *
	 * `contain` fits the logo inside a box already sized to its own aspect ratio,
	 * so it is normally an exact fit; it only does visible work at the max-width,
	 * where a very wide logo gives up height to stay inside the cap.
	 *
	 * The `--btxc-logo-src` fallback is a fully transparent gradient, not `none`.
	 * A missing mask means every pixel is opaque, which paints the box as a solid
	 * coloured rectangle — the loudest possible failure. Masking with transparency
	 * renders nothing instead, which is what a logo with no file should look like.
	 */
	/*
	 * `max-width` is where the row is evened out, and it is doing real work
	 * rather than guarding an edge case.
	 *
	 * At a shared height a 6:1 wordmark covers six times the area of a square
	 * mark, and reads that much heavier — equal height is not equal weight. The
	 * cap says how many times its height a logo may be wide; past that, the
	 * width binds, and `contain` spends the difference on height instead. So a
	 * wide logo gets shorter, a square one stays full height, and the two end up
	 * carrying comparable weight.
	 *
	 * `--btxc-logo-bar-max` comes from the Width limit control, so there is no
	 * second number here to keep in step with PHP.
	 */
	.btxc-logo-bar__mark {
		display: block;

		height: calc(100% * var(--btxc-logo-scale, 1));
		width: calc(var(--btxc-logo-bar-size, 40px) * var(--btxc-logo-ratio, 3) * var(--btxc-logo-scale, 1));
		max-width: calc(var(--btxc-logo-bar-size, 40px) * var(--btxc-logo-bar-max, 3) * var(--btxc-logo-scale, 1));

		background-color: var(--btxc-logo-bar-ink, var(--btx-color-primary-1, #1a2744));

		-webkit-mask-image: var(--btxc-logo-src, linear-gradient(transparent, transparent));
		mask-image: var(--btxc-logo-src, linear-gradient(transparent, transparent));

		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;

		-webkit-mask-position: center;
		mask-position: center;

		-webkit-mask-size: contain;
		mask-size: contain;
	}

	/*
	 * The no-file path: a client with a name and no usable logo renders as the
	 * name, in the same ink, at the same height as the marks beside it.
	 */
	.btxc-logo-bar__wordmark {
		display: flex;
		align-items: center;

		height: 100%;

		font-size: calc(var(--btx-font-body-m, 1rem) * var(--btxc-logo-scale, 1));
		line-height: var(--btx-line-height-heading, 1.2);
		font-weight: 700;
		letter-spacing: 0.01em;
		white-space: nowrap;
		color: var(--btxc-logo-bar-ink, var(--btx-color-primary-1, #1a2744));
	}

	/*
	 * Editor only — the render callback emits this on REST renders and never on
	 * the front end. Styled to look like a warning rather than like content, so
	 * nobody mistakes it for part of the component.
	 */
	.btxc-logo-bar__notice {
		margin: 0 0 var(--btx-spacing-m, 1rem);
		padding: var(--btx-spacing-xs, 0.5rem) var(--btx-spacing-m, 1rem);

		border-left: 3px solid var(--btx-color-secondary-1, #c9a227);
		background-color: var(--btx-color-text-bg-1-dark-10, #dfd6c7);

		font-size: var(--btx-font-body-s, 0.875rem);
		line-height: var(--btx-line-height-body, 1.6);
		color: var(--btx-color-primary-1, #1a2744);
		text-align: left;
	}

	/*
	 * Tighter gaps once the row is wrapping anyway. The logos keep their height —
	 * shrinking them here would undo the size the editor chose.
	 */
	@media (width < 40rem) {
		.btxc-logo-bar__list {
			gap: var(--btx-spacing-m, 1rem) var(--btx-spacing-lg, 1.5rem);
		}
	}
}