/**
 * Inoforest Logo Grid
 *
 * Contents
 * 1. Grid (variables)
 * 2. Logo box: boxed and plain
 * 3. Logo image, icon and name
 * 4. Greyscale until hover
 * 5. Label, row and marquee
 * 6. Editor hint, reduced motion
 *
 * Colours read the Design System (--inoforest-color-*) with the HTML design's values as fallbacks.
 */

/* 1. Grid ------------------------------------------------------------------ */
.inoforest-logo-grid {
	--ino-logo-columns: 6;
	--ino-logo-gap: 20px;
	--ino-logo-align: center;
	--ino-logo-icon-size: 1.6rem;
	--ino-logo-icon-gap: 8px;
	--ino-logo-img-height: 44px;
	--ino-logo-img-width: 80%;
	--ino-logo-muted: #8b99a6;
	--ino-logo-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.inoforest-logo-grid .inoforest-logo-grid__list {
	display: grid;
	grid-template-columns: repeat(var(--ino-logo-columns), minmax(0, 1fr));
	gap: var(--ino-logo-row-gap, var(--ino-logo-gap)) var(--ino-logo-gap);
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.inoforest-logo-grid__item {
	min-width: 0;
	margin: 0;
	padding: 0;
}

/* 2. Logo box ---------------------------------------------------------------- */
/* Modifiers sit in :where() and hover rules stay one class below the panel's hover controls, so a colour picked in
   the Style tab always wins: normal 2 classes < control 3; hover 4 < control 5. */
.inoforest-logo-grid .inoforest-logo-grid__logo {
	display: flex;
	align-items: center;
	justify-content: var(--ino-logo-align);
	gap: var(--ino-logo-icon-gap);
	height: var(--ino-logo-height, 84px);
	padding: 0 12px;
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
	text-align: center;
	color: var(--ino-logo-muted);
	text-decoration: none;
	background-color: transparent;
	border: 1px solid var(--inoforest-color-border, #e5ebef);
	border-radius: 16px;
	transition: color 0.35s var(--ino-logo-ease), background-color 0.35s var(--ino-logo-ease), border-color 0.35s var(--ino-logo-ease), box-shadow 0.35s var(--ino-logo-ease), filter 0.35s var(--ino-logo-ease), transform 0.35s var(--ino-logo-ease);
}

.inoforest-logo-grid:where([data-style="plain"]) .inoforest-logo-grid__logo {
	height: var(--ino-logo-height, auto);
	padding: 0;
	border-color: transparent;
	border-radius: 0;
}

.inoforest-logo-grid .inoforest-logo-grid__list .inoforest-logo-grid__logo:hover,
.inoforest-logo-grid .inoforest-logo-grid__list .inoforest-logo-grid__logo:focus-visible {
	color: var(--inoforest-color-primary, #0b7a75);
	transform: translateY(var(--ino-logo-lift, 0));
}

.inoforest-logo-grid:where([data-style="boxed"]) .inoforest-logo-grid__list .inoforest-logo-grid__logo:hover,
.inoforest-logo-grid:where([data-style="boxed"]) .inoforest-logo-grid__list .inoforest-logo-grid__logo:focus-visible {
	border-color: var(--inoforest-color-primary, #0b7a75);
}

/* 3. Logo image, icon and name ------------------------------------------------ */
/* Two classes to beat Elementor's `.elementor img` reset. */
.inoforest-logo-grid .inoforest-logo-grid__image {
	display: block;
	width: auto;
	max-width: var(--ino-logo-img-width);
	height: auto;
	max-height: var(--ino-logo-img-height);
	object-fit: contain;
	opacity: var(--ino-logo-img-opacity, 1);
	transition: opacity 0.35s var(--ino-logo-ease), filter 0.35s var(--ino-logo-ease);
}

.inoforest-logo-grid .inoforest-logo-grid__logo:hover .inoforest-logo-grid__image,
.inoforest-logo-grid .inoforest-logo-grid__logo:focus-visible .inoforest-logo-grid__image {
	opacity: var(--ino-logo-img-hover-opacity, 1);
}

.inoforest-logo-grid__icon {
	display: inline-flex;
	flex: none;
	font-size: var(--ino-logo-icon-size);
	line-height: 1;
	transition: color 0.35s var(--ino-logo-ease);
}

.inoforest-logo-grid__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.inoforest-logo-grid__name {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* 4. Greyscale until hover ------------------------------------------------------ */
.inoforest-logo-grid:where([data-grayscale="true"]) .inoforest-logo-grid__logo {
	filter: grayscale(1);
}

.inoforest-logo-grid:where([data-grayscale="true"]) .inoforest-logo-grid__image {
	opacity: var(--ino-logo-img-opacity, 0.6);
}

.inoforest-logo-grid:where([data-grayscale="true"]) .inoforest-logo-grid__logo:hover,
.inoforest-logo-grid:where([data-grayscale="true"]) .inoforest-logo-grid__logo:focus-visible {
	filter: none;
}

.inoforest-logo-grid:where([data-grayscale="true"]) .inoforest-logo-grid__logo:hover .inoforest-logo-grid__image,
.inoforest-logo-grid:where([data-grayscale="true"]) .inoforest-logo-grid__logo:focus-visible .inoforest-logo-grid__image {
	opacity: var(--ino-logo-img-hover-opacity, 1);
}

/* Without greyscale the demo names show in the primary colour, as in the design. */
.inoforest-logo-grid:where([data-grayscale="false"]) .inoforest-logo-grid__logo {
	color: var(--inoforest-color-primary, #0b7a75);
}

/* 5. Label, row and marquee -------------------------------------------------------- */
/* With a label: the label and the logos side by side, or the label above (Label position, per device). */
.inoforest-logo-grid[data-label="true"] {
	display: flex;
	flex-direction: var(--ino-logo-label-direction, row);
	align-items: center;
	gap: var(--ino-logo-label-gap, 40px);
}

.inoforest-logo-grid[data-label="true"] > .inoforest-logo-grid__list,
.inoforest-logo-grid__viewport {
	flex: 1;
	align-self: stretch;
	min-width: 0;
}

.inoforest-logo-grid__label {
	flex: none;
	/* Beside the logos: centred in the row; above them: Label alignment (both set by Label position). */
	align-self: var(--ino-logo-label-self, center);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ino-logo-muted);
}

.inoforest-logo-grid:where([data-layout="row"]) .inoforest-logo-grid__viewport {
	display: flex;
	align-items: center;
	overflow: hidden;
}

.inoforest-logo-grid:where([data-layout="row"]) .inoforest-logo-grid__track {
	flex: 1;
	min-width: 0;
}

.inoforest-logo-grid[data-layout="row"] .inoforest-logo-grid__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--ino-logo-justify, space-between);
}

.inoforest-logo-grid[data-layout="row"] .inoforest-logo-grid__item {
	flex: none;
}

.inoforest-logo-grid:where([data-layout="row"]) .inoforest-logo-grid__logo {
	white-space: nowrap;
}

/* A plain row is just the names or images: no box edge (a plain grid keeps its transparent one). */
.inoforest-logo-grid[data-layout="row"][data-style="plain"] .inoforest-logo-grid__logo {
	border-width: 0;
}

/* Marquee: the list twice in a track that moves by one list and its gap, then starts again. */
.inoforest-logo-grid[data-marquee="true"] .inoforest-logo-grid__track {
	display: flex;
	flex: none;
	gap: var(--ino-logo-gap);
	width: max-content;
	animation: inoforest-logo-marquee var(--ino-logo-speed, 40s) linear infinite;
}

.inoforest-logo-grid[data-marquee="true"] .inoforest-logo-grid__list {
	flex-wrap: nowrap;
	justify-content: flex-start;
}

.inoforest-logo-grid[data-marquee="true"]:hover .inoforest-logo-grid__track,
.inoforest-logo-grid[data-marquee="true"]:focus-within .inoforest-logo-grid__track {
	animation-play-state: paused;
}

[dir="rtl"] .inoforest-logo-grid[data-marquee="true"] .inoforest-logo-grid__track {
	animation-direction: reverse;
}

@keyframes inoforest-logo-marquee {
	to {
		transform: translateX(calc(-50% - var(--ino-logo-gap) / 2));
	}
}

/* 6. Editor hint, reduced motion ------------------------------------------------- */
.inoforest-logo-grid__hint {
	margin: 0;
	font-size: 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
	.inoforest-logo-grid .inoforest-logo-grid__logo,
	.inoforest-logo-grid .inoforest-logo-grid__image,
	.inoforest-logo-grid__icon {
		transition: none;
	}

	.inoforest-logo-grid .inoforest-logo-grid__logo:hover,
	.inoforest-logo-grid .inoforest-logo-grid__logo:focus-visible {
		transform: none;
	}

	.inoforest-logo-grid[data-marquee="true"] .inoforest-logo-grid__track {
		flex-wrap: wrap;
		width: auto;
		animation: none;
	}

	.inoforest-logo-grid[data-marquee="true"] .inoforest-logo-grid__list {
		flex-wrap: wrap;
	}

	.inoforest-logo-grid[data-marquee="true"] .inoforest-logo-grid__list[aria-hidden="true"] {
		display: none;
	}
}