/*
 * AH Logo Marquee. Place it in a full-width container with no side padding.
 * The rows run LTR in both languages so the loop math is the same; the track holds the set twice
 * and moves by half. Reduced motion: a still, wrapped grid without the copies.
 */
.ah-lm {
	--ah-lm-gap: 14px;
	--ah-lm-h: 92px;
	min-width: 0;
	font-family: var(--ah-f-body);
	line-height: 1.75;
	color: var(--ah-ink);
}
.ah-lm .ah-lm__wall {
	direction: ltr;
	display: grid;
	gap: var(--ah-lm-gap);
	overflow: hidden;
	/* room for the hover lift and shadow inside the clipped area */
	padding-block: 8px 18px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ah-lm .ah-lm__row { min-width: 0; }
.ah-lm .ah-lm__track {
	display: flex;
	gap: var(--ah-lm-gap);
	width: max-content;
	/* the gap after the last logo makes the two halves exactly equal, so the loop never jumps */
	padding-inline-end: var(--ah-lm-gap);
}
.ah-lm .ah-lm__logo {
	flex: none;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	height: var(--ah-lm-h);
	min-width: 150px;
	padding: 0 26px;
	border: 1px solid var(--ah-line);
	border-radius: 16px;
	background: var(--ah-paper);
	transition: transform .45s var(--ah-spring), border-color .3s, box-shadow .4s;
}
.ah-lm .ah-lm__logo .ah-lm__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 150px;
	max-height: 54px;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	filter: grayscale(1) contrast(1.1);
	opacity: .85;
	transition: filter .4s, opacity .4s;
}
.ah-lm .ah-lm__logo:hover {
	transform: translateY(-5px) rotate(-1.5deg);
	border-color: var(--ah-gold);
	box-shadow: 0 18px 30px -22px rgba(15, 27, 60, .55);
}
.ah-lm .ah-lm__logo:hover .ah-lm__img,
.ah-lm.ah-lm--colour .ah-lm__logo .ah-lm__img { filter: none; opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
	.ah-lm .ah-lm__track { animation: ah-lm-loop var(--ah-lm-dur, 80s) linear infinite; will-change: transform; }
	.ah-lm .ah-lm__row--rev .ah-lm__track { animation-direction: reverse; }
	.ah-lm .ah-lm__wall:hover .ah-lm__track,
	.ah-lm.is-paused .ah-lm__track,
	.ah-lm.is-off .ah-lm__track { animation-play-state: paused; }
}
@keyframes ah-lm-loop { to { transform: translateX(-50%); } }

/* caption and pause button, lined up with the page container */
.ah-lm .ah-lm__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	box-sizing: border-box;
	max-width: var(--ah-container);
	margin: 0 auto;
	margin-top: calc(14px - 18px);
	padding-inline: var(--ah-gutter);
}
.ah-lm .ah-lm__cap {
	margin: 0;
	font-family: var(--ah-f-body);
	font-size: .8rem;
	line-height: 1.6;
	color: var(--ah-soft);
}
.ah-lm .ah-lm__cap-touch { display: none; }
@media (hover: none) {
	.ah-lm .ah-lm__cap-mouse { display: none; }
	.ah-lm .ah-lm__cap-touch { display: inline; }
}
.ah-lm .ah-lm__pause.ah-lm__pause {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid var(--ah-line);
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: var(--ah-muted);
	font: inherit;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: border-color .3s, color .3s, background-color .3s;
}
.ah-lm .ah-lm__pause.ah-lm__pause:hover,
.ah-lm .ah-lm__pause.ah-lm__pause:focus { border-color: var(--ah-gold); background: transparent; color: var(--ah-ink); }
.ah-lm .ah-lm__pause.ah-lm__pause:focus-visible { outline: 2px solid var(--ah-gold); outline-offset: 3px; }
.ah-lm .ah-lm__pause[hidden] { display: none; }
.ah-lm .ah-lm__pause svg { display: block; width: 14px; height: 14px; }
.ah-lm .ah-lm__pause .ah-lm__i-pause { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ah-lm .ah-lm__pause .ah-lm__i-play { display: none; fill: currentColor; }
.ah-lm .ah-lm__pause[aria-pressed="true"] .ah-lm__i-pause { display: none; }
.ah-lm .ah-lm__pause[aria-pressed="true"] .ah-lm__i-play { display: inline; }

/* dark background */
.ah-lm.ah-on-dark { color: var(--ah-on-navy); }
.ah-lm.ah-on-dark .ah-lm__logo { border-color: var(--ah-line-navy); }
.ah-lm.ah-on-dark .ah-lm__logo:hover { border-color: var(--ah-gold-hi); box-shadow: 0 18px 30px -20px rgba(0, 0, 0, .7); }
.ah-lm.ah-on-dark .ah-lm__cap { color: var(--ah-on-navy-muted); }
.ah-lm.ah-on-dark .ah-lm__pause.ah-lm__pause { border-color: var(--ah-line-navy); color: var(--ah-on-navy-muted); }
.ah-lm.ah-on-dark .ah-lm__pause.ah-lm__pause:hover,
.ah-lm.ah-on-dark .ah-lm__pause.ah-lm__pause:focus { border-color: var(--ah-gold-hi); color: var(--ah-on-navy); }

/* editor notice when there are no clients */
.ah-lm-empty {
	padding: 18px 20px;
	border: 1px dashed var(--ah-ink-gold);
	border-radius: 8px;
	font: 14px/1.6 var(--ah-f-body);
	color: var(--ah-ink-gold);
	background: rgba(255, 255, 255, .6);
}

@media (max-width: 767px) {
	.ah-lm { --ah-lm-h: 70px; --ah-lm-gap: 12px; }
	.ah-lm .ah-lm__logo { min-width: 116px; padding: 0 16px; border-radius: 12px; }
	.ah-lm .ah-lm__logo .ah-lm__img { max-width: 112px; max-height: 38px; }
	.ah-lm .ah-lm__logo:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	/* one still, centred grid of all logos in reading order */
	.ah-lm .ah-lm__wall {
		direction: inherit;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding-inline: var(--ah-gutter);
		-webkit-mask-image: none;
		mask-image: none;
	}
	.ah-lm .ah-lm__row,
	.ah-lm .ah-lm__track { display: contents; }
	.ah-lm .ah-lm__logo--dup { display: none; }
	.ah-lm .ah-lm__logo,
	.ah-lm .ah-lm__logo .ah-lm__img { transition: none; }
	.ah-lm .ah-lm__logo:hover { transform: none; }
	.ah-lm .ah-lm__pause.ah-lm__pause { display: none; }
}