/* Masonry Carousel v1.3 — fixed-height mosaic pages inside a paged carousel */

.mc-carousel {
	position: relative;
	width: 100%;
}

/* ---------- Page = fixed-height, fully-filled mosaic grid ---------- */
.mc-page {
	display: grid;
	grid-template-columns: repeat(var(--mc-cols, 4), minmax(0, 1fr));
	grid-template-rows: repeat(var(--mc-rows, 3), minmax(0, 1fr));
	grid-auto-flow: dense;
	gap: var(--mc-gap, 12px);
	height: var(--mc-height, 500px);
}

.mc-item {
	margin: 0;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	border-radius: 6px;
}

/* Featured = 2×2 block → visibly larger than the 1×1 tiles.
   --mc-fcol (set per tile in PHP) anchors it to a specific column (left or right);
   falls back to auto placement if unset. */
.mc-featured {
	grid-column: var(--mc-fcol, auto) / span 2;
	grid-row: span 2;
}

.mc-link,
.mc-img {
	display: block;
	width: 100%;
	height: 100%;
}

/* Crop to completely fill each tile. */
.mc-img {
	object-fit: cover;
}

/* ---------- Arrows: appear on hover / keyboard focus ---------- */
.mc-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 0 4px;
	opacity: 0;
	transition: opacity 0.2s ease, background 0.2s ease;
}

.mc-prev { left: 10px; }
.mc-next { right: 10px; }

.mc-carousel:hover .mc-nav,
.mc-nav:focus-visible {
	opacity: 1;
}

.mc-nav:hover {
	background: rgba(0, 0, 0, 0.8);
}

.mc-nav.mc-nav-disabled {
	opacity: 0 !important;
	pointer-events: none;
}

/* ---------- Dots below ---------- */
.mc-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: calc(var(--mc-gap, 12px) + 2px);
}

.mc-dots .swiper-pagination-bullet {
	position: static;
	width: 9px;
	height: 9px;
	margin: 0;
	background: currentColor;
	opacity: 0.3;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.mc-dots .swiper-pagination-bullet-active {
	opacity: 0.9;
	transform: scale(1.2);
}

/* ---------- Mobile portrait: fewer columns, content-sized rows ----------
   Fixed height is relaxed here (a phone can't show a 4×3 grid legibly); tiles
   keep a consistent height and the page grows to fit. Still a swipeable carousel. */
@media (max-width: 767px) {
	.mc-page {
		grid-template-columns: repeat(var(--mc-mobile-cols, 2), minmax(0, 1fr));
		grid-template-rows: none;
		grid-auto-rows: var(--mc-mobile-row-h, 160px);
		height: auto;
	}

	/* Ignore the desktop column anchor — just span 2 within the narrower grid. */
	.mc-featured {
		grid-column: span 2;
	}

	.mc-nav {
		display: none;
	}
}