/**
 * AJ Logos — frontend styles.
 *
 * Layout + sizing is driven by CSS custom properties set inline on the
 * .aj-logos wrapper by the render engine:
 *   --aj-logos-cols    desktop column count (grid / masonry)
 *   --aj-logos-logo-h  uniform logo height (the key to tidy alignment)
 *   --aj-logos-gap     spacing between logos
 *   --aj-logos-speed   seconds per full carousel loop
 *
 * Colours/typography intentionally inherit from the theme so the showcase
 * sits well under both the Neve child theme and the america-josh-2026 theme.
 */

.aj-logos {
	--aj-logos-cols: 5;
	--aj-logos-cols-eff: var(--aj-logos-cols); /* effective columns; capped responsively */
	--aj-logos-logo-h: 72px;
	--aj-logos-gap: 40px;
	--aj-logos-speed: 40s;
	--aj-logos-max-width: 1100px; /* caps the grid/masonry width and centres it */
	width: 100%;
	margin-bottom: clamp(2rem, 5vw, 3.5rem); /* breathing room below each showcase */
	padding-inline: clamp(1rem, 4vw, 2rem); /* edge gutter so logos never touch the sides */
	box-sizing: border-box;
}

.aj-logos *,
.aj-logos *::before,
.aj-logos *::after {
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * Header
 * --------------------------------------------------------------------- */

.aj-logos__header {
	margin: 0 0 clamp(1.5rem, 4vw, 2.75rem);
	display: flex;
	flex-direction: column;
	gap: 0.4em;
}

.aj-logos--align-center .aj-logos__header {
	text-align: center;
	align-items: center;
}

.aj-logos--align-left .aj-logos__header {
	text-align: left;
	align-items: flex-start;
}

.aj-logos__eyebrow {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	opacity: 0.65;
	line-height: 1.2;
}

.aj-logos__title {
	margin: 0;
	line-height: 1.15;
	font-size: clamp(1.5rem, 3.2vw, 2.25rem);
}

.aj-logos__subtitle {
	margin: 0;
	max-width: 56ch;
	opacity: 0.8;
	line-height: 1.5;
}

/* -------------------------------------------------------------------------
 * Header on the left (beside the logos, vertically centred)
 * --------------------------------------------------------------------- */

.aj-logos--header-left {
	display: flex;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3rem);
}

.aj-logos--header-left .aj-logos__header {
	flex: 0 0 auto;
	width: clamp(150px, 22%, 260px);
	margin: 0; /* no bottom margin in the side layout — the flex gap spaces it */
	text-align: left;
	align-items: flex-start;
}

/* The logos area (grid/masonry items, or the carousel viewport) takes the rest. */
.aj-logos--header-left > .aj-logos__items,
.aj-logos--header-left > .aj-logos__viewport {
	flex: 1 1 auto;
	min-width: 0;
}

/* Stack on small screens: header back above the logos. */
@media (max-width: 782px) {
	.aj-logos--header-left {
		display: block;
	}
	.aj-logos--header-left .aj-logos__header {
		width: auto;
		margin: 0 0 clamp(1.5rem, 4vw, 2.75rem);
	}
}

/* -------------------------------------------------------------------------
 * Shared item / logo framing — uniform height keeps every logo aligned
 * --------------------------------------------------------------------- */

.aj-logos__item {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-decoration: none;
	min-width: 0;
	/* Uniform cell height so every logo is centred on a common line, even when
	 * a width-capped (or short) logo renders shorter than its neighbours. */
	min-height: var(--aj-logos-logo-h);
}

a.aj-logos__item {
	cursor: pointer;
}

.aj-logos__frame {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--aj-logos-logo-h);
	width: 100%;
}

/* A *defined* height is essential: SVGs with only a viewBox have no intrinsic
 * pixel size, so without it they collapse. Fixed height + auto width also keeps
 * every logo aligned. */
.aj-logos__img {
	display: block;
	width: auto;
	height: var(--aj-logos-logo-h);
	max-width: min(100%, var(--aj-logos-logo-max-w, 100%));
	object-fit: contain;
}

/* Grayscale, colour on hover — the classic logo-wall treatment. */
.aj-logos--grayscale .aj-logos__img {
	filter: grayscale(1);
	opacity: 0.62;
	transition: filter 0.25s ease, opacity 0.25s ease;
}

.aj-logos--grayscale .aj-logos__item:hover .aj-logos__img,
.aj-logos--grayscale .aj-logos__item:focus-visible .aj-logos__img {
	filter: grayscale(0);
	opacity: 1;
}

/* -------------------------------------------------------------------------
 * Grid
 * --------------------------------------------------------------------- */

/* Flex (not grid) so a partial/short row centres instead of being left-aligned
 * with empty cells: each item takes one column's width but doesn't grow, and
 * justify-content centres the group. A full row still fills edge to edge. */
.aj-logos--grid .aj-logos__items {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	gap: var(--aj-logos-gap);
	max-width: var(--aj-logos-max-width);
	margin-inline: auto;
}

.aj-logos--grid .aj-logos__item {
	flex: 0 1 calc((100% - (var(--aj-logos-cols-eff) - 1) * var(--aj-logos-gap)) / var(--aj-logos-cols-eff));
	min-width: 80px;
}

/* -------------------------------------------------------------------------
 * Masonry wall (CSS columns — logos flow and pack vertically)
 * --------------------------------------------------------------------- */

.aj-logos--masonry .aj-logos__items {
	column-count: var(--aj-logos-cols);
	column-gap: var(--aj-logos-gap);
	max-width: var(--aj-logos-max-width);
	margin-inline: auto;
}

.aj-logos--masonry .aj-logos__item {
	break-inside: avoid;
	margin-bottom: var(--aj-logos-gap);
	width: 100%;
}

.aj-logos--masonry .aj-logos__frame {
	height: auto;
	min-height: var(--aj-logos-logo-h);
}

.aj-logos--masonry .aj-logos__img {
	max-height: none;
	height: var(--aj-logos-logo-h);
}

/* -------------------------------------------------------------------------
 * Carousel (seamless auto-scrolling marquee)
 * --------------------------------------------------------------------- */

/* The slider sits flush — no bottom margin on the carousel container. */
.aj-logos--carousel {
	margin-bottom: 0;
}

.aj-logos--carousel .aj-logos__viewport {
	overflow: hidden;
	/* Isolate the (very wide, max-content) track from ancestor sizing. Without
	 * this, a flex container around the carousel (e.g. a page-builder column
	 * whose flex items default to min-width:auto) refuses to shrink below the
	 * track's intrinsic width — so on mobile the carousel forces its column
	 * wider than the screen (overflow) and, being wider than the viewport, the
	 * marquee goes static (no scroll). contain:inline-size makes the viewport's
	 * width depend only on its container, fixing both. */
	contain: inline-size;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.aj-logos--carousel .aj-logos__track {
	display: flex;
	width: max-content;
	animation: aj-logos-marquee var(--aj-logos-speed) linear infinite;
	will-change: transform;
}

.aj-logos--carousel .aj-logos__items {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--aj-logos-gap);
	padding-left: calc(var(--aj-logos-gap) / 2);
	padding-right: calc(var(--aj-logos-gap) / 2);
}

.aj-logos--carousel .aj-logos__item {
	flex: 0 0 auto;
}

/* In the carousel the logo height becomes a *max* and we cap the width too, so
 * wide wordmarks shrink instead of stretching the marquee. The frame sizes to
 * the (capped) logo rather than filling the row. */
.aj-logos--carousel .aj-logos__frame {
	height: var(--aj-logos-logo-h);
	width: auto;
}

.aj-logos--carousel .aj-logos__img {
	/* Keep the base rule's DEFINITE height — `height:auto` collapses SVGs that
	 * only declare a viewBox (no intrinsic size) to 0×0. We just cap the width
	 * so wide wordmarks don't sprawl; the base object-fit:contain letterboxes
	 * them inside the uniform-height box. Fallback cap: compact on mobile,
	 * larger on desktop (see the min-width rule below). */
	max-width: var(--aj-logos-logo-max-w, 120px);
}

@media (min-width: 1024px) {
	.aj-logos--carousel .aj-logos__img {
		max-width: var(--aj-logos-logo-max-w, 180px);
	}
}

/* Pause on hover / keyboard focus within the track. */
.aj-logos--carousel .aj-logos__viewport:hover .aj-logos__track,
.aj-logos--carousel .aj-logos__viewport:focus-within .aj-logos__track {
	animation-play-state: paused;
}

@keyframes aj-logos-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* When JS detects the row isn't wide enough to scroll, centre it instead. */
.aj-logos--carousel.is-static .aj-logos__track {
	animation: none;
	width: 100%;
	justify-content: center;
}

.aj-logos--carousel.is-static .aj-logos__items--clone {
	display: none;
}

/* -------------------------------------------------------------------------
 * Editor / empty state
 * --------------------------------------------------------------------- */

.aj-logos__empty {
	padding: 1rem 1.25rem;
	border: 1px dashed currentColor;
	border-radius: 6px;
	opacity: 0.7;
	font-size: 0.9rem;
}

/* -------------------------------------------------------------------------
 * Responsive — cap the effective column count on smaller screens. Using min()
 * means we never *increase* a smaller chosen count (e.g. 2 stays 2). The grid
 * reads --aj-logos-cols-eff via calc(); masonry needs a literal column-count,
 * so it gets explicit steps.
 * --------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.aj-logos {
		--aj-logos-cols-eff: min(4, var(--aj-logos-cols));
	}
	.aj-logos--masonry .aj-logos__items {
		column-count: 4;
	}
}

@media (max-width: 782px) {
	.aj-logos {
		--aj-logos-cols-eff: min(3, var(--aj-logos-cols));
	}
	.aj-logos--masonry .aj-logos__items {
		column-count: 3;
	}
}

@media (max-width: 560px) {
	.aj-logos {
		--aj-logos-cols-eff: min(2, var(--aj-logos-cols));
	}
	.aj-logos--masonry .aj-logos__items {
		column-count: 2;
	}
}

/* Respect reduced-motion: stop the auto-scroll. Rather than making the wide
 * track horizontally scrollable (which overflows and looks broken on phones),
 * wrap the logos into centred rows — a tidy static showcase, no overflow. */
@media (prefers-reduced-motion: reduce) {
	.aj-logos--carousel .aj-logos__viewport {
		overflow: hidden;
		-webkit-mask-image: none;
		mask-image: none;
	}
	.aj-logos--carousel .aj-logos__track {
		animation: none;
		width: 100%;
		flex-wrap: wrap;
	}
	.aj-logos--carousel .aj-logos__items {
		flex: 1 1 100%;
		flex-wrap: wrap;
		justify-content: center;
		row-gap: var(--aj-logos-gap);
	}
	.aj-logos--carousel .aj-logos__items--clone {
		display: none;
	}
}