/* ── Cool Gallery ─────────────────────────────────────────── */

/*
 * CSS columns provide the baseline multi-column layout. The column-count
 * is injected by PHP as an inline <style> block (immune to Elementor cache).
 * If the JS masonry engine loads, it overrides positioning to shortest-column
 * order; if it doesn't, CSS columns still show the correct number of columns.
 */
.ffcw-cg {
	overflow: hidden;
	column-count: var(--ffcw-cg-cols, 4);
	column-gap: var(--ffcw-cg-gap, 6px);
	column-fill: auto;   /* fill columns sequentially, top→bottom, left→right */
	position: relative;
	isolation: isolate;  /* contain mix-blend-mode to gallery bounds */
}

/* Each image link */
.ffcw-cg__item {
	display: block;
	break-inside: avoid; /* never split an image across two columns */
	position: relative;  /* for the hover overlay; JS overrides to absolute */
	overflow: hidden;
	cursor: pointer;
}

/* When lightbox is disabled items render as <div> — no pointer cursor */
.ffcw-cg--no-lightbox .ffcw-cg__item {
	cursor: default;
}

/* Image — full column width, natural aspect ratio */
.ffcw-cg__item img {
	display: block;
	width: 100%;
	height: auto;
}

/* Hover overlay */
.ffcw-cg__overlay {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}

.ffcw-cg__item:hover .ffcw-cg__overlay {
	opacity: 1;
}

/* Background colour / gradient overlay (mix-blend-mode via Elementor control) */
.ffcw-cg__bg-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}

/* Empty-state placeholder */
.ffcw-cg__empty {
	padding: 1em;
	text-align: center;
	opacity: 0.5;
}