/* Presa press logos -- [presa_press_logos]
   Three layout modes on one markup, switched by .press-strip--{mode}:
     grid     -- wraps onto responsive rows (CSS only)
     carousel -- paged horizontal scroll with arrows + dots (press-logos.js)
     ticker   -- continuous marquee, duplicated set (CSS only)
   Sizing is driven by custom properties set inline on .press-strip:
     --cols / --cols-t / --cols-m   logos per row (grid) or per page (carousel)
     --logo-h                       max logo height
     --logo-gap                     space between logos
     --ticker-speed / --ticker-dir  marquee timing + direction
   Image rules are scoped under .press-strip__row so they out-specify Beaver
   Builder's own `.fl-ds-block img { height:auto; max-width:100% }` (0,1,1);
   a bare `.press-strip__img` (0,1,0) loses and the logos draw full size. */

.press-strip {
	text-align: center;
	--cols: 6;
	--cols-t: 4;
	--cols-m: 2;
	--logo-h: 42px;
	--logo-gap: clamp(1.5rem, 4vw, 3rem);
	--ticker-speed: 30s;
	--ticker-dir: normal;
}

.press-strip__label {
	margin: 0 0 clamp(1rem, 2.5vw, 1.75rem);
	font-family: var(--ds-font-heading, inherit);
	font-size: var(--ds-text-sm, 0.85rem);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ds-color-ink-60, #5b6270);
}

/* Shared item + image */
.press-strip__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}
.press-strip__row .press-strip__img {
	display: block;
	height: var(--logo-h);
	width: auto;
	max-width: 100%;
	object-fit: contain;
}
.press-strip.is-grayscale .press-strip__img {
	filter: grayscale(1);
	opacity: 0.62;
	transition: opacity 0.2s ease, filter 0.2s ease;
}
.press-strip.is-grayscale.has-reveal .press-strip__item:hover .press-strip__img,
.press-strip.is-grayscale.has-reveal .press-strip__item:focus-visible .press-strip__img {
	filter: grayscale(0);
	opacity: 1;
}

/* ---- GRID ---------------------------------------------------- */
.press-strip--grid .press-strip__row {
	display: grid;
	grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
	gap: var(--logo-gap);
	align-items: center;
	justify-items: center;
}
.press-strip--grid .press-strip__item { width: 100%; }
.press-strip--grid.align-left { text-align: left; }
.press-strip--grid.align-left .press-strip__row { justify-items: start; }
@media (max-width: 980px) {
	.press-strip--grid .press-strip__row { grid-template-columns: repeat(var(--cols-t), minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.press-strip--grid .press-strip__row { grid-template-columns: repeat(var(--cols-m), minmax(0, 1fr)); }
}

/* ---- CAROUSEL ------------------------------------------------ */
.press-strip--carousel .press-strip__viewport {
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.press-strip--carousel .press-strip__viewport::-webkit-scrollbar { display: none; }
.press-strip--carousel .press-strip__row {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--logo-gap);
	align-items: center;
}
.press-strip--carousel .press-strip__item {
	flex: 0 0 calc((100% - (var(--cols) - 1) * var(--logo-gap)) / var(--cols));
	scroll-snap-align: start;
}
@media (max-width: 980px) {
	.press-strip--carousel .press-strip__item { flex-basis: calc((100% - (var(--cols-t) - 1) * var(--logo-gap)) / var(--cols-t)); }
}
@media (max-width: 600px) {
	.press-strip--carousel .press-strip__item { flex-basis: calc((100% - (var(--cols-m) - 1) * var(--logo-gap)) / var(--cols-m)); }
}

.press-strip__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: clamp(1rem, 2.5vw, 1.5rem);
}
.press-strip__btn {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	border: 1px solid var(--ds-color-ink-20, #d5d8de);
	background: transparent;
	color: var(--ds-color-ink-60, #5b6270);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.press-strip__btn:hover,
.press-strip__btn:focus-visible {
	border-color: var(--ds-color-accent, #7a1f3d);
	color: var(--ds-color-accent, #7a1f3d);
}
.press-strip__dots { display: inline-flex; gap: 0.5rem; }
.press-strip__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ds-color-ink-20, #d5d8de);
	cursor: pointer;
	transition: background 0.2s ease;
}
.press-strip__dot.is-active { background: var(--ds-color-accent, #7a1f3d); }

/* ---- TICKER -------------------------------------------------- */
.press-strip--ticker .press-strip__viewport { overflow: hidden; }
.press-strip--ticker .press-strip__row {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	gap: 0;                       /* trailing gap lives on the item (below) so */
	align-items: center;          /* the two duplicated sets tile seamlessly   */
	animation: presa-ticker var(--ticker-speed) linear infinite;
	animation-direction: var(--ticker-dir);
}
.press-strip--ticker .press-strip__item { flex: 0 0 auto; margin-inline-end: var(--logo-gap); }
.press-strip--ticker.pause-hover .press-strip__row:hover { animation-play-state: paused; }
@keyframes presa-ticker {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ---- Fade edges (carousel + ticker) -------------------------- */
.press-strip.has-fade .press-strip__viewport {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* ---- Reduced motion: freeze ticker but keep it scrollable ---- */
@media (prefers-reduced-motion: reduce) {
	.press-strip--ticker .press-strip__row { animation: none; width: auto; }
	.press-strip--ticker .press-strip__viewport { overflow-x: auto; scrollbar-width: none; }
	.press-strip__img { transition: none !important; }
}