/**
 * Swivo Live Feed — layout and visual styles.
 * Uses CSS logical properties for RTL support.
 */

/* Wrapper: fill parent block height, clip overflow, position for pseudo-elements. */
[data-swf="true"] {
	position:       relative;
	overflow:       hidden;
	block-size:     100%;
	min-block-size: 200px;
}

/* Gradient fade masks — top and bottom. */
[data-swf="true"].swf-active::before,
[data-swf="true"].swf-active::after {
	content:        '';
	position:       absolute;
	inset-inline:   0;
	block-size:     var( --swf-fade-height, 20% );
	z-index:        2;
	pointer-events: none;
}

/* Top fade. */
[data-swf="true"].swf-active::before {
	inset-block-start: 0;
	background: linear-gradient(
		to bottom,
		var( --swf-fade-color, #ffffff ) 0%,
		transparent 100%
	);
}

/* Bottom fade. */
[data-swf="true"].swf-active::after {
	inset-block-end: 0;
	background: linear-gradient(
		to top,
		var( --swf-fade-color, #ffffff ) 0%,
		transparent 100%
	);
}

/* Scrolling track — inline flow, JS handles translateY. */
.swf-track {
	inline-size: 100%;
}

/* UL sets are flex children of .swf-track — reset spacing, make UL a flex column
   so li margins do NOT collapse (flex items never collapse margins). */
.swf-track .wp-block-post-template,
.swf-track .is-layout-flow {
	display:           flex !important;
	flex-direction:    column !important;
	gap:               0 !important;
	row-gap:           0 !important;
	margin-block:      0 !important;
	padding-block:     0 !important;
	margin-inline:     0 !important;
	padding-inline:    0 !important;
}

/* Half gap on top + half gap on bottom of every li.
   Because the UL is now a flex container, margins do NOT collapse.
   Within same UL: half-end + half-start = 1× gap.
   Between UL sets: last li half-end + first li half-start = 1× gap — identical. */
.swf-track .wp-block-post-template > li {
	margin-block-start: calc( var( --swf-item-gap, 16px ) / 2 ) !important;
	margin-block-end:   calc( var( --swf-item-gap, 16px ) / 2 ) !important;
}

/* Reset theme-injected bottom margins on direct card children (e.g. .wp-block-columns).
   These add extra space inside the li box that inflates effective gap. */
.swf-track .wp-block-post-template > li > * {
	margin-block-end: 0 !important;
}