/* Content-width shell: cards and section rules align to theme content width */
.gcva-members-list__inner {
	width: 100%;
	max-width: var(--wp--style--global--content-size, 45rem);
	margin-inline: auto;
	box-sizing: border-box;
}

/* Wall: theme wide size so more logos fit on one screen for screenshots */
.gcva-members-list__wall-shell {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 75rem);
	margin-inline: auto;
	box-sizing: border-box;
}

.gcva-members-list__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30, 1rem) var(--wp--preset--spacing--40, 1.5rem);
	margin-bottom: var(--wp--preset--spacing--40, 1.5rem);
}

.gcva-members-list__toggle {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20, 0.5rem);
}

.gcva-members-list__toggle-btn {
	padding: 0.5em 1em;
	border: 1px solid currentColor;
	background: transparent;
	font: inherit;
	cursor: pointer;
	border-radius: 4px;
}

.gcva-members-list__toggle-btn.is-active {
	background: var(--wp--preset--color--contrast, #000);
	color: var(--wp--preset--color--base, #fff);
}

.gcva-members-list__aspect {
	display: flex;
	align-items: center;
	flex: 1 1 14rem;
	min-width: 12rem;
	max-width: 22rem;
}

.gcva-members-list__aspect[hidden] {
	display: none;
}

.gcva-members-list--editor .gcva-members-list__aspect {
	display: none;
}

@media (max-width: 37.5rem) {
	.gcva-members-list__aspect {
		flex-basis: 100%;
		max-width: none;
	}
}

.gcva-members-list__aspect-slider-wrap {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	min-width: 0;
	width: 100%;
}

.gcva-members-list__aspect-slider-wrap::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1px;
	height: 0.75rem;
	background: currentColor;
	opacity: 0.28;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.gcva-members-list__aspect-slider {
	position: relative;
	width: 100%;
	margin: 0;
	accent-color: currentColor;
	cursor: pointer;
}

.gcva-members-list__view[aria-hidden="true"] {
	display: none;
}

.gcva-members-list__view[aria-hidden="false"] {
	display: block;
}

/* Section (letter or sector): extra space after grid, very light rule under title */
.gcva-members-list__section {
	margin-bottom: var(--wp--preset--spacing--60, 2.75rem);
}

.gcva-members-list__section:last-child {
	margin-bottom: 0;
}

.gcva-members-list__section-title {
	font-size: 1.125rem;
	margin: 0 0 var(--wp--preset--spacing--40, 1.5rem);
	padding-bottom: var(--wp--preset--spacing--30, 1rem);
	border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
	font-weight: 600;
}

.gcva-members-list__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
	gap: var(--wp--preset--spacing--30, 1rem);
}

/* Card: logo + name; white tile so white-backed logos don’t show a tint */
.gcva-members-list__member {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.625rem;
	text-align: center;
	text-decoration: none;
	color: inherit;
	padding: var(--wp--preset--spacing--30, 1rem) var(--wp--preset--spacing--20, 0.75rem);
	border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
	border-radius: 6px;
	box-sizing: border-box;
	min-height: 100%;
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gcva-members-list__member:hover {
	text-decoration: none;
	border-color: color-mix(in srgb, currentColor 22%, transparent);
	box-shadow: 0 2px 8px color-mix(in srgb, currentColor 8%, transparent);
}

.gcva-members-list__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 8rem;
	height: 4.5rem;
	flex-shrink: 0;
}

.gcva-members-list__logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.gcva-members-list__logo img.gcva-is-svg,
.gcva-members-list__logo img[src*='.svg'] {
	width: 100%;
	height: 100%;
}

.gcva-members-list__placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	line-height: 1.2;
	padding: 0.25rem;
	text-align: center;
	background: color-mix(in srgb, var(--wp--preset--color--blue-5, #dae1ea) 40%, transparent);
	border-radius: 4px;
}

.gcva-members-list__name {
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 1.25;
	word-break: break-word;
	max-width: 100%;
}

/* Wall: column count drives width vs height for screenshot framing */
.gcva-members-list__wall {
	display: grid;
	grid-template-columns: repeat(var(--gcva-wall-cols, 9), minmax(0, 1fr));
	justify-content: center;
	gap: var(--wp--preset--spacing--20, 0.5rem);
	width: 100%;
	margin-inline: auto;
	box-sizing: border-box;
}

.gcva-members-list__wall.is-fitted {
	grid-template-rows: repeat(var(--gcva-wall-rows, 9), minmax(0, 1fr));
}

.gcva-members-list__wall-item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 0;
	height: 100%;
	text-decoration: none;
	color: inherit;
	padding: var(--wp--preset--spacing--20, 0.5rem);
	box-sizing: border-box;
	border-radius: 6px;
	border: 1px solid transparent;
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gcva-members-list__wall-item:hover {
	border-color: color-mix(in srgb, currentColor 10%, transparent);
	box-shadow: 0 2px 8px color-mix(in srgb, currentColor 8%, transparent);
}

.gcva-members-list__wall-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 0;
}

.gcva-members-list__wall:not(.is-fitted) .gcva-members-list__wall-logo {
	aspect-ratio: 4 / 3;
	height: auto;
}

.gcva-members-list__wall-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.gcva-members-list__wall-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 0.625rem;
	line-height: 1.15;
	text-align: center;
	padding: 0.25rem;
	color: inherit;
	opacity: 0.85;
}

.gcva-members-list--empty {
	padding: var(--wp--preset--spacing--50, 2rem);
	background: var(--wp--preset--color--base-2, #f5f5f5);
}

/* Fallback when color-mix is unsupported */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
	.gcva-members-list__section-title {
		border-bottom-color: rgba(0, 0, 0, 0.08);
	}

	.gcva-members-list__member {
		border-color: rgba(0, 0, 0, 0.1);
		background: #fff;
	}

	.gcva-members-list__wall-item {
		border-color: transparent;
		background: #fff;
	}

	.gcva-members-list__wall-item:hover {
		border-color: rgba(0, 0, 0, 0.1);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	}
}