/**
 * Flicks Carousel — frontend styles.
 *
 * Layout: each cell is 50% of the carousel width. The selected (center)
 * cell is fully visible; the neighbouring cells are clipped by the
 * overflow-hidden viewport, so only half of them peeks in from each side.
 *
 * Motion: a simple right-to-left slide (handled by Flickity on the
 * slider element). No per-cell transforms or scaling — side cells only
 * change opacity softly, so nothing ever flies, bounces or flickers.
 */

.flicks-wrap {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.flicks-carousel {
	width: 100%;
	height: 100%;
}

.flicks-carousel .flickity-viewport {
	height: 100%;
}

/* 50% width cells, half the configured gap on each side. */
.flicks-cell {
	width: 50%;
	height: 100%;
	margin: 0 var(--flicks-gap-half, 10px);
}

/* Media fills the cell; border + radius come from the backend controls. */
.flicks-media {
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: var(--flicks-radius, 0);
	background: #000;
	opacity: 0.72;
	transition: opacity 0.35s ease;
}

.flicks-cell.is-selected .flicks-media {
	opacity: 1;
}

/* The full media is always visible, centered horizontally AND vertically
   in the cell (no cropping); letterbox space shows the cell background. */
.flicks-media img,
.flicks-media video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
}

.flicks-media iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	background: #000;
}

/* A stopped embedded player should not block carousel dragging. */
.flicks-embed-stopped {
	pointer-events: none;
}

/* ------------------------------------------------------------------
 * Arrows — square, transparent background, visible on hover only.
 * ------------------------------------------------------------------ */
.flicks-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	color: #ffffff;
	opacity: 0;
	transition: opacity 0.25s ease;
	cursor: pointer;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-tap-highlight-color: transparent;
}

.flicks-arrow svg {
	width: 28px;
	height: 28px;
	display: block;
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.65));
}

.flicks-arrow svg path {
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.flicks-prev { left: 12px; }
.flicks-next { right: 12px; }

.flicks-wrap:hover .flicks-arrow,
.flicks-arrow:focus,
.flicks-arrow:focus-visible {
	opacity: 1;
}

@media (max-width: 600px) {
	.flicks-arrow {
		width: 40px;
		height: 40px;
	}
	.flicks-arrow svg {
		width: 22px;
		height: 22px;
	}
	.flicks-prev { left: 8px; }
	.flicks-next { right: 8px; }
}