/*
 * Mission 0 interactive containers (CONVENTIONS §4.13, §12): m0-slides, m0-swap-list, m0-stack-cards, m0-hscroll,
 * m0-marquee, m0-cursor-media. Structural rules use enough specificity to hold; cosmetic defaults (dots, arrows,
 * frame, progress, counter, float) sit in :where() so a site skin overrides them with any selector.
 * Each root also matches its canvas form ([data-m0-editor-ui]: the children sit directly in the root there).
 * Logical properties throughout (RTL-safe).
 */

/* ===================== m0-slides ===================== */
.m0-slides > .m0-slides__track,
.m0-slides.m0-slides[data-m0-editor-ui] {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}
.m0-slides > .m0-slides__track > *,
.m0-slides[data-m0-editor-ui] > .m0-slide {
	grid-area: 1 / 1;
	min-inline-size: 0;
}
.m0-slides[data-m0-editor-ui] > .m0-slides__dots {
	grid-area: 2 / 1;
}
/* Inactive slides: opacity + visibility with a visibility delay, never display:none (a site may set
   .m0-slide{display:contents} and fade the parts itself: visibility still inherits). */
.m0-slides > .m0-slides__track > .m0-slide:not(.is-on),
.m0-slides[data-m0-editor-ui] > .m0-slide:not(.is-on) {
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--m0-slides-duration, 900ms) ease, visibility 0s linear var(--m0-slides-duration, 900ms);
}
.m0-slides > .m0-slides__track > .m0-slide.is-on,
.m0-slides[data-m0-editor-ui] > .m0-slide.is-on {
	opacity: 1;
	visibility: visible;
	z-index: 1;
	transition: opacity var(--m0-slides-duration, 900ms) ease, visibility 0s linear 0s;
}
/* transition: slide (the runtime sets --m0-slides-from: 1 = next, -1 = previous, mirrored in RTL) */
.m0-slides--slide > .m0-slides__track {
	overflow: hidden;
}
.m0-slides--slide > .m0-slides__track > .m0-slide:not(.is-on) {
	opacity: 1;
	transform: translateX(calc(var(--m0-slides-from, 1) * 100%));
	transition: transform var(--m0-slides-duration, 900ms) cubic-bezier(.65, 0, .35, 1), visibility 0s linear var(--m0-slides-duration, 900ms);
}
.m0-slides--slide > .m0-slides__track > .m0-slide.was-on {
	transform: translateX(calc(var(--m0-slides-from, 1) * -100%));
}
.m0-slides--slide > .m0-slides__track > .m0-slide.is-on {
	transform: none;
	transition: transform var(--m0-slides-duration, 900ms) cubic-bezier(.65, 0, .35, 1), visibility 0s linear 0s;
}
/* transition: none, reduced motion (.is-instant) and the editor canvas: instant switches */
.m0-slides.m0-slides--none > .m0-slides__track > .m0-slide,
.m0-slides.is-instant > .m0-slides__track > .m0-slide,
.m0-slides[data-m0-editor-ui] > .m0-slide {
	transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
	.m0-slides > .m0-slides__track > .m0-slide {
		transition: none !important;
	}
}
:where(.m0-slides__dots) {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-block-start: 16px;
}
:where(.m0-slides__dot) {
	inline-size: 10px;
	block-size: 10px;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	opacity: .5;
	cursor: pointer;
}
:where(.m0-slides__dot.is-on) {
	background: currentColor;
	opacity: 1;
}
:where(.m0-slides__prev, .m0-slides__next) {
	position: absolute;
	inset-block-start: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .85);
	color: #111;
	transform: translateY(-50%);
	cursor: pointer;
}
:where(.m0-slides__prev) {
	inset-inline-start: 12px;
}
:where(.m0-slides__next) {
	inset-inline-end: 12px;
}
.m0-slides__next svg,
.m0-slides__prev:dir(rtl) svg {
	transform: scaleX(-1);
}
.m0-slides__next:dir(rtl) svg {
	transform: none;
}
:where(.m0-slides__prev, .m0-slides__next)[disabled] {
	opacity: .35;
	cursor: default;
}
:where(.m0-slides__dot, .m0-slides__prev, .m0-slides__next, .m0-slides__pause):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}
/* Pause / play toggle (round 4, G35): text-free, drawn in currentColor (two bars; a triangle while paused).
   Neutral defaults in :where() so a site skin restyles it with any selector; [hidden] always wins. */
.m0-slides__pause[hidden] {
	display: none !important;
}
:where(.m0-slides__pause) {
	position: relative;
	display: block;
	inline-size: 32px;
	block-size: 32px;
	margin-block-start: 12px;
	margin-inline: auto;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
}
:where(.m0-slides__pause)::before,
:where(.m0-slides__pause)::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: 3px;
	block-size: 10px;
	background: currentColor;
	transform: translate(-150%, -50%);
}
:where(.m0-slides__pause)::after {
	transform: translate(50%, -50%);
}
:where(.m0-slides__pause[aria-pressed="true"])::before {
	inline-size: 0;
	block-size: 0;
	border-block: 6px solid transparent;
	border-inline-start: 10px solid currentColor;
	background: none;
	transform: translate(-35%, -50%);
}
:where(.m0-slides__pause[aria-pressed="true"])::after {
	display: none;
}

/* ===================== m0-swap-list ===================== */
.m0-swap-list > .m0-swap-list__items,
.m0-swap-list > .m0-swap-list__media {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
}
.m0-swap-list > .m0-swap-list__media {
	gap: 12px;
}
.m0-swap-list--frame-start > .m0-swap-list__media {
	order: -1;
}
/* Each item's first e-image is its media: hidden in the item, shown in the frame. */
.m0-swap-item__media {
	display: none !important;
}
:where(.m0-swap-list__frame) {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: rgba(0, 0, 0, .06);
}
.m0-swap-list__frame > img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	object-fit: cover;
	transition: opacity var(--m0-swap-duration, 900ms) ease, clip-path var(--m0-swap-duration, 900ms) cubic-bezier(.77, 0, .18, 1);
}
.m0-swap-list__frame > img:not(.is-on):not(.was-on) {
	visibility: hidden;
}
.m0-swap-list__frame > img.was-on {
	z-index: 1;
}
.m0-swap-list__frame > img.is-on {
	z-index: 2;
}
.m0-swap-list--fade .m0-swap-list__frame > img:not(.is-on):not(.was-on) {
	opacity: 0;
}
.m0-swap-list--wipe .m0-swap-list__frame > img:not(.is-on):not(.was-on) {
	clip-path: inset(100% 0 0 0);
}
.m0-swap-list--none .m0-swap-list__frame > img,
.m0-swap-list.is-instant .m0-swap-list__frame > img {
	transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
	.m0-swap-list__frame > img {
		transition: none !important;
	}
}
:where(.m0-swap-list__caption) {
	margin: 0;
	font-size: .875em;
}
.m0-swap-list__caption:empty {
	display: none;
}
:where(.m0-swap-list.is-ready .m0-swap-item) {
	transition: opacity .3s ease;
}
:where(.m0-swap-list.is-ready .m0-swap-item:not(.is-active)) {
	opacity: .55;
}
:where(.m0-swap-item):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* ===================== loop-children rule (front end) =====================
   The only child is an m0-loop / m0-field-loop: its items are the cards / panels / items, so the loop's own grid
   steps aside. The canvas keeps the loop box (it renders the card template once and must stay selectable). */
.m0-stack-cards:not([data-m0-editor-ui]) > :is(.m0-loop, .m0-field-loop):only-child,
.m0-hscroll > .m0-hscroll__track > :is(.m0-loop, .m0-field-loop):only-child,
.m0-marquee > .m0-marquee__track > :is(.m0-loop, .m0-field-loop):only-child,
.m0-cursor-media:not([data-m0-editor-ui]) > :is(.m0-loop, .m0-field-loop):only-child {
	display: contents;
}

/* ===================== m0-stack-cards ===================== */
.m0-stack-cards.is-stacking .m0-stack-card {
	position: sticky;
	transform-origin: 50% 0;
	will-change: transform;
}

/* ===================== m0-hscroll ===================== */
.m0-hscroll > .m0-hscroll__track {
	display: flex;
	flex-direction: column;
	gap: inherit; /* the root's gap (a class on m0-hscroll) spaces the panels */
}
.m0-hscroll:not(.is-static) {
	overflow: hidden;
}
.m0-hscroll:not(.is-static) > .m0-hscroll__track,
.m0-hscroll.is-swipe > .m0-hscroll__track {
	flex-direction: row;
	flex-wrap: nowrap;
}
.m0-hscroll:not(.is-static) > .m0-hscroll__track {
	inline-size: max-content;
	will-change: transform;
}
.m0-hscroll.is-swipe > .m0-hscroll__track {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}
.m0-hscroll.is-swipe.is-snap > .m0-hscroll__track {
	scroll-snap-type: x mandatory;
}
.m0-hscroll.is-swipe.is-snap .m0-hscroll__panel {
	scroll-snap-align: start;
}
:where(.m0-hscroll:not(.is-static) .m0-hscroll__panel, .m0-hscroll.is-swipe .m0-hscroll__panel) {
	flex: 0 0 auto;
	inline-size: min(85vw, 640px);
}
.m0-hscroll.is-static:not(.is-swipe) > :is(.m0-hscroll__progress, .m0-hscroll__counter) {
	display: none;
}
:where(.m0-hscroll__progress) {
	position: relative;
	block-size: 2px;
	margin-block-start: 16px;
	overflow: hidden;
	background: rgba(0, 0, 0, .12);
}
.m0-hscroll__progress > span {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: 0 50%;
}
.m0-hscroll__progress:dir(rtl) > span {
	transform-origin: 100% 50%;
}
:where(.m0-hscroll__counter) {
	margin-block-start: 8px;
	font-variant-numeric: tabular-nums;
}

/* ===================== m0-marquee ===================== */
.m0-marquee > .m0-marquee__track {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--m0-marquee-gap, 48px);
}
.m0-marquee.is-running > .m0-marquee__track {
	flex-wrap: nowrap;
	inline-size: max-content;
	will-change: transform;
}
.m0-marquee.is-running > .m0-marquee__track > *,
.m0-marquee.is-running > .m0-marquee__track > :is(.m0-loop, .m0-field-loop) > * {
	flex: 0 0 auto;
}

/* ===================== m0-cursor-media ===================== */
.m0-js .m0-cursor-media:not(.is-inline-media) .m0-cursor-media__media {
	display: none !important;
}
:where(.m0-cursor-media__float) {
	position: fixed;
	top: 0; /* physical: the runtime positions it with the pointer's clientX / clientY */
	left: 0;
	z-index: 9999;
	inline-size: 320px;
	pointer-events: none;
	opacity: 0;
	transition: opacity .25s ease;
}
:where(.m0-cursor-media__float.is-on) {
	opacity: 1;
}
.m0-cursor-media__float > img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	max-inline-size: none;
}
.m0-cursor-media__float.is-instant {
	transition: none;
}
@media (prefers-reduced-motion: reduce) {
	.m0-cursor-media__float {
		transition: none;
	}
}