/**
 * W47 - "Bekannt aus den Medien".
 *
 * A compact full-width band between the studies section and the customer
 * voices - about 190px tall on desktop, which is the point: the review
 * section below it used to eat a whole viewport and this one must not
 * repeat that.
 *
 * WHY THE BAND IS LIGHT AND NOT CHARCOAL
 * --------------------------------------
 * It was charcoal first, and the first screenshot killed the idea. The
 * eighteen logos were measured: only FOUR carry real transparency
 * (Positiv 75% transparent, TV Nova 56%, Překvapení 24%, Čas jen pro mě
 * 2%). The other fourteen are opaque rectangles of dark ink on white -
 * Medicina.cz is 83% white, Jóga dnes 81%, Pro ženy 78%. On a dark band
 * every one of those painted a light-grey slab, and the brightness lift
 * that made dark ink visible turned the palest of them into a blank box.
 *
 * A light band plus `mix-blend-mode: multiply` solves it for both kinds
 * at once, without touching the assets:
 *
 *   white background x light band  = the band. The slab disappears.
 *   dark ink         x light band  = dark ink. The logo survives.
 *   transparent                     = unaffected, composites as before.
 *
 * The result is one uniform set of grey artwork on one ground, which is
 * what a press strip is supposed to look like, and it is honest about
 * what the source files actually are rather than fighting them.
 *
 * The band is `surface` rather than white so it still reads as a seam
 * between the white sections above and below it, with a hairline at each
 * edge.
 *
 * MOTION LIVES HERE, NOT IN THE SCRIPT. The auto-advance is a CSS
 * animation on a duplicated track, so `prefers-reduced-motion` can stop it
 * without any JavaScript running, and so a paused strip is still a fully
 * scrollable one.
 */

.mitode-media-strip {
	--mitode-media-h: 34px;
	--mitode-media-gap: clamp(2rem, 4vw, 3.5rem);
	background: var(--wp--preset--color--surface, #f5f6f8);
	color: var(--wp--preset--color--contrast, #0f0f0f);
	border-block: 1px solid var(--wp--preset--color--border, #dcdfe5);
	padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
	overflow: hidden; /* the band clips the rail, the document never scrolls */
}

.mitode-media-strip__inner {
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 2vw, 1.5rem);
}

.mitode-media-strip__title {
	margin: 0;
	text-align: center;
	font-size: var(--mitode-fs-eyebrow, .75rem);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-3, #767676);
}

/* --- rail ---------------------------------------------------------- */

.mitode-media-strip__rail {
	position: relative;
	display: flex;
	align-items: center;
	gap: .25rem;
	min-width: 0;
}

.mitode-media-strip__viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/*
	 * No scroll-snap. The track is a continuous marquee, and snapping
	 * would fight the animation into a stutter on every frame the
	 * browser decides a point has passed.
	 */
}

.mitode-media-strip__viewport::-webkit-scrollbar { display: none; }

.mitode-media-strip__viewport:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast, #0f0f0f);
	outline-offset: 4px;
	border-radius: 4px;
}

.mitode-media-strip__list {
	display: flex;
	align-items: center;
	gap: var(--mitode-media-gap);
	margin: 0;
	padding: .25rem 0;
	list-style: none;
	width: max-content;
}

.mitode-media-strip__item {
	flex: 0 0 auto;
	margin: 0;
}

.mitode-media-strip__link {
	display: block;
	text-decoration: none;
	border-radius: 6px;
}

.mitode-media-strip__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast, #0f0f0f);
	outline-offset: 6px;
}

/*
 * W48 - THE BREATHING ROOM LIVES HERE, NOT IN THE FILES.
 *
 * Every asset is now cropped to its ink (tools/w48/media-normalize.php),
 * so `height` on the image is the height a reader SEES - which it was not
 * before: the ink inside the eighteen files filled between 25 % and 100 %
 * of the file, so one CSS height produced glyphs three times apart. The
 * margin that keeps a wordmark off its neighbour is a single padding
 * here, identical for all eighteen by construction.
 */
.mitode-media-strip__frame {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--mitode-media-h);
	width: auto;
	padding-inline: .5rem;
	box-sizing: content-box;
}

.mitode-media-strip__img {
	display: block;
	height: 100%;
	width: auto;
	/*
	 * W48 - THE WIDTH CAP HAD TO GO UP, OR THE HEIGHT WAS A LIE.
	 *
	 * `max-width: 160px` with `object-fit: contain` does not crop - it
	 * SHRINKS, height included. Seven of the eighteen logos are wider than
	 * 4.7:1 (Čas jen pro mě is 9:1), so at 34px tall they were all being
	 * pulled back below 34px by the cap, and the equal optical height this
	 * stage exists to produce would have been equal only for the narrow
	 * ones. The widest asset needs 305px at the desktop height; the cap is
	 * set clear of that so it binds on nothing in the catalogue and still
	 * catches a pathological future import. Width is auto, as the brief
	 * requires, and the rail scrolls - so nothing is ever clipped.
	 */
	max-width: 22rem;
	object-fit: contain;
	/*
	 * W48 - `mix-blend-mode: multiply` IS GONE, BECAUSE IT NEVER WORKED.
	 *
	 * W47 used it to make fourteen opaque white rectangles read as
	 * transparent logos over the light band. The computed style said
	 * `multiply` and the rendered page said otherwise: band #f5f6f8, logo
	 * ground #fcfdfd - which is `0.72 x 255 + 0.28 x 245`, plain alpha
	 * compositing. Multiply would have given 245. The marquee animates
	 * the track with a `transform`, that puts the track in its own
	 * stacking context, and an element blends with ITS OWN stacking
	 * context's backdrop - a transparent group - not with the band two
	 * levels up.
	 *
	 * The transparency now lives in the files
	 * (tools/w48/media-normalize.php floods the white ground away from
	 * the edges inward), so the band shows through whatever the stacking
	 * context does, on any background colour, in every browser. A
	 * declaration that describes an effect the page does not have is
	 * worse than no declaration, so it is removed rather than left as
	 * decoration.
	 *
	 * Grayscale stays: that is what makes eighteen different brand
	 * palettes read as one set, and it does work.
	 */
	filter: grayscale(1) contrast(1.05);
	opacity: .72;
	transition: opacity .25s var(--mitode-ease, ease), filter .25s var(--mitode-ease, ease);
}

.mitode-media-strip__link:hover .mitode-media-strip__img,
.mitode-media-strip__link:focus-visible .mitode-media-strip__img {
	filter: none;
	opacity: 1;
}

/* --- arrows -------------------------------------------------------- */

.mitode-media-strip__btn {
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--wp--preset--color--border, #dcdfe5);
	border-radius: 999px;
	background: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--contrast, #0f0f0f);
	cursor: pointer;
	padding: 0;
	transition: background .2s var(--mitode-ease, ease), border-color .2s var(--mitode-ease, ease);
}

.mitode-media-strip__btn:hover,
.mitode-media-strip__btn:focus-visible {
	background: var(--wp--preset--color--surface-2, #eceef2);
	border-color: var(--wp--preset--color--contrast-3, #767676);
}

.mitode-media-strip__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast, #0f0f0f);
	outline-offset: 2px;
}

.mitode-media-strip__btn svg {
	width: 1.05rem;
	height: 1.05rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --- the marquee --------------------------------------------------- */

/*
 * The script duplicates the list once and sets `--mitode-media-track` to
 * the width of ONE copy. Translating by exactly that width and looping
 * puts the copy where the original was, so the seam is invisible and the
 * loop is infinite without ever changing scrollLeft - which is what keeps
 * a user's own scroll, the arrows and the animation from fighting.
 *
 * The class is added by the script, so a strip with no JavaScript never
 * animates and is simply a scrollable list.
 */
.mitode-media-strip.is-animating .mitode-media-strip__list {
	animation: mitode-media-marquee var(--mitode-media-duration, 60s) linear infinite;
}

.mitode-media-strip.is-paused .mitode-media-strip__list {
	animation-play-state: paused;
}

@keyframes mitode-media-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(calc(-1 * var(--mitode-media-track, 0px)), 0, 0); }
}

/* --- responsive ---------------------------------------------------- */

@media (max-width: 782px) {
	.mitode-media-strip {
		--mitode-media-h: 28px;
		--mitode-media-gap: clamp(1.5rem, 7vw, 2.25rem);
	}

	.mitode-media-strip__img { max-width: 17rem; }

	/*
	 * The arrows go away on touch widths: the strip is swipeable, the
	 * buttons would eat horizontal room the logos need, and a 36px
	 * target beside a scrolling rail is a mis-tap waiting to happen.
	 */
	.mitode-media-strip__btn { display: none; }
}

@media (max-width: 380px) {
	.mitode-media-strip {
		--mitode-media-h: 24px;
		--mitode-media-gap: 1.35rem;
	}
	.mitode-media-strip__img { max-width: 14rem; }
}

/*
 * REDUCED MOTION. No animation at all - not a slower one. The strip stays
 * scrollable by swipe, wheel and keyboard, and the arrows still work,
 * so nothing is lost except the movement that was the problem.
 */
@media (forced-colors: active) {
	.mitode-media-strip__img {
		filter: none;
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mitode-media-strip.is-animating .mitode-media-strip__list {
		animation: none;
	}
	.mitode-media-strip__img { transition: none; }
}