/* Brands Carousel - Frontend styles
 *
 * All customizable values are CSS custom properties, defaulted here and
 * overridden at runtime by inline CSS injected from the admin settings
 * (see class-brands-shortcode.php). Fallbacks keep the carousel working
 * even if the inline CSS fails to load.
 */

.brands-carousel {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	padding: 1rem 0;
	/* CSS variables (defaults). Overridden by inline style from settings. */
	--bc-arrow-bg: #ffffff;
	--bc-arrow-color: #333333;
	--bc-arrow-border: #dddddd;
	--bc-arrow-shadow-rgb: 0,0,0;
	--bc-arrow-shadow-blur: 6px;
	--bc-arrow-size: 40px;
	--bc-arrow-radius: 50%;
	--bc-arrow-gap: 8px;
	--bc-dot-active: #333333;
	--bc-dot-inactive: #cccccc;
	--bc-slide-height: 80px;
	--bc-slide-gap: 24px;
}

/* Stage: flex row that lays out the prev arrow, the viewport, and the next
   arrow. Arrows live in the flow (no absolute positioning) so they never
   overlap the slides and are vertically centered on the track via
   align-items: center. */
.brands-carousel__stage {
	display: flex;
	align-items: center;
	gap: var(--bc-arrow-gap);
	width: 100%;
}

/* Viewport: the clipping window for the slides. overflow: hidden here (not on
   the container) so overflowing slides are clipped at the track edge, BEFORE
   the arrow zone. This prevents slides from appearing behind the arrows. */
.brands-carousel__viewport {
	overflow: hidden;
	flex: 1 1 auto;
	min-width: 0;
}

.brands-carousel__track {
	display: flex;
	gap: var(--bc-slide-gap);
	transition: transform 0.6s ease;
	will-change: transform;
	max-width: 100%;
}

.brands-carousel__slide {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--bc-slide-height);
	overflow: hidden;
}

.brands-carousel__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
	transition: opacity 0.2s ease;
	max-width: 100%;
	max-height: 100%;
}

.brands-carousel__link:hover,
.brands-carousel__link:focus-visible {
	opacity: 0.7;
}

.brands-carousel__link--disabled {
	cursor: default;
}

.brands-carousel__image {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	display: block;
	object-fit: contain;
	min-width: 0;
}

.brands-carousel__name {
	font-size: 1rem;
	font-weight: 500;
	color: #333;
	line-height: 1.2;
	text-align: center;
}

/* Arrows — in the flex flow, sized via CSS variables. */
.brands-carousel__arrow {
	background: var(--bc-arrow-bg);
	border: 1px solid var(--bc-arrow-border);
	padding: 0;
	margin: 0;
	border-radius: var(--bc-arrow-radius);
	width: var(--bc-arrow-size);
	height: var(--bc-arrow-size);
	min-width: var(--bc-arrow-size);
	min-height: var(--bc-arrow-size);
	max-width: var(--bc-arrow-size);
	max-height: var(--bc-arrow-size);
	flex: 0 0 var(--bc-arrow-size);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--bc-arrow-color);
	transition: background 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
	box-shadow: 0 2px var(--bc-arrow-shadow-blur) rgba(var(--bc-arrow-shadow-rgb), 0.12);
	user-select: none;
	-webkit-user-select: none;
}

.brands-carousel__arrow span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	line-height: 1;
}

.brands-carousel__arrow:hover {
	background: var(--bc-arrow-bg);
	box-shadow: 0 4px var(--bc-arrow-shadow-blur) rgba(var(--bc-arrow-shadow-rgb), 0.18);
}

.brands-carousel__arrow[disabled] {
	opacity: 0.25;
	cursor: not-allowed;
	transform: scale(0.85);
	pointer-events: none;
}

/* Dots */
.brands-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1rem;
}

.brands-carousel__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--bc-dot-inactive);
	border: none;
	cursor: pointer;
	padding: 0;
	transition: background 0.2s ease;
}

.brands-carousel__dot--active {
	background: var(--bc-dot-active);
}

/* Responsive - default mobile (2 per view).
   Gap comes from the --bc-slide-gap variable; convert to rem-equivalent via
   calc so the percentage widths account for it. */
.brands-carousel__slide {
	width: calc((100% - var(--bc-slide-gap)) / 2);
}

@media (min-width: 600px) {
	.brands-carousel__slide {
		width: calc((100% - 3 * var(--bc-slide-gap)) / 4);
	}
}

@media (min-width: 1024px) {
	.brands-carousel__slide {
		width: calc((100% - 5 * var(--bc-slide-gap)) / 6);
	}
}

/* Hide arrows when not enabled */
.brands-carousel--no-arrows .brands-carousel__arrow {
	display: none;
}