/*
 * Press strip (home hero, T45) — calm "Bekannt aus" logo row at the bottom of
 * the hero cover. Five monochrome outlet marks (assets/svg/press/, normalized
 * single-fill SVGs) rendered as one light tone on the dark hero overlay.
 *
 * Motion policy (Gilles): desktop = static row, zero motion. Only where the
 * row overflows (mobile) assets/js/press.js activates a very slow seamless
 * linear marquee (.sisa-press--marquee, ~50s/loop, pure CSS animation), pauses
 * on hover/focus, and stays fully static under prefers-reduced-motion.
 */

.sisa-press { overflow: hidden; }

/* the sets: press.js wraps the five figures into .sisa-press__set (and clones
   it once for the seamless loop). Outside marquee mode a set is transparent
   to layout (display:contents) and clones stay hidden — the block-native flex
   row wraps/centers exactly as the editor shows it. */
.sisa-press__set { display: contents; }
.sisa-press__set[aria-hidden="true"] { display: none; }

.sisa-press__row .wp-block-image { margin: 0; }
.sisa-press__row img {
	display: block;
	width: auto;
	height: 22px;
	/* monochrome: flatten any residual tone to black, invert to the hero's
	   light ink; muted opacity keeps the strip calm in light AND dark (the
	   cover overlay is the emphasis token in both themes). */
	filter: brightness(0) invert(1);
	opacity: 0.62;
}

/* uniform OPTICAL height — square/boxed marks need more geometric height than
   wide wordmarks to carry equal visual weight. */
.sisa-press__row img[src*="/press/nzz"]       { height: 19px; }
.sisa-press__row img[src*="/press/blick"]     { height: 23px; }
.sisa-press__row img[src*="/press/20minuten"] { height: 34px; }
.sisa-press__row img[src*="/press/telezueri"] { height: 32px; }

/* T45c — white-ish stripe variant (Gilles 2026-08-24): panel surface, ink
   logos. In dark the panel token flips dark, so the marks invert back to
   light — same calm opacity in every combination. */
.sisa-press--stripe-light .sisa-press__row img { filter: brightness(0); opacity: 0.55; }
[data-theme="dark"] .sisa-press--stripe-light .sisa-press__row img { filter: brightness(0) invert(1); opacity: 0.6; }

/* ------------------------------------------------------------------ marquee
   Activated by press.js ONLY when the row overflows its container (mobile
   widths) and the visitor has no reduced-motion preference. The row then
   holds two identical sets; translating by -50% (= exactly one set incl. its
   trailing gap) loops seamlessly — linear, no snapping. */
.sisa-press--marquee .sisa-press__row {
	flex-wrap: nowrap;
	justify-content: flex-start;
	width: max-content;
	gap: 0;
	animation: sisa-press-drift var(--sisa-press-loop, 50s) linear infinite;
}
.sisa-press--marquee .sisa-press__set,
.sisa-press--marquee .sisa-press__set[aria-hidden="true"] {
	display: flex;
	align-items: center;
	gap: var(--sisa-press-gap, 40px);
	padding-right: var(--sisa-press-gap, 40px);
}

@keyframes sisa-press-drift {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* calm on demand: pointer or keyboard focus halts the drift */
.sisa-press:hover .sisa-press__row,
.sisa-press:focus-within .sisa-press__row {
	animation-play-state: paused;
}

/* reduced motion: fully static (press.js also refrains from activating, this
   is the belt to that suspender) */
@media (prefers-reduced-motion: reduce) {
	.sisa-press .sisa-press__row { animation: none; }
}