/* ============================================================
   Woo Category Impressions – Frontend Collage
   ============================================================ */

.wc-impressions-collage {
	display: grid;
	gap: 6px;
	margin: 1.5rem 0;
	/* Default: up to 3 columns, auto-responsive */
	grid-template-columns: repeat( auto-fill, minmax( 160px, 1fr ) );
}

/* Each image item fills its grid cell completely */
.wc-impressions-item {
	display: block;
	overflow: hidden;
	border-radius: 4px;
	aspect-ratio: 1 / 1;   /* square cells; tweak if needed */
	background: #f0f0f0;
}

.wc-impressions-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.25s ease, opacity 0.2s;
}

.wc-impressions-item:hover img {
	transform: scale(1.04);
	opacity: 0.9;
}

/* ── Collage layout variants by image count ─────────────────
   The PHP class  wc-impressions-count-N  (N = 1..6+)
   controls the grid layout for nice collage compositions.
   ─────────────────────────────────────────────────────────── */

/* 1 image – full width */
.wc-impressions-count-1 {
	grid-template-columns: 1fr;
}
.wc-impressions-count-1 .wc-impressions-item {
	aspect-ratio: 16 / 7;
}

/* 2 images – side by side */
.wc-impressions-count-2 {
	grid-template-columns: 1fr 1fr;
}

/* 3 images – first image spans 2 rows (tall), two small on right */
.wc-impressions-count-3 {
	grid-template-columns: 2fr 1fr;
	grid-template-rows: 1fr 1fr;
}
.wc-impressions-count-3 .wc-impressions-item:first-child {
	grid-row: span 2;
	aspect-ratio: auto;
}
.wc-impressions-count-3 .wc-impressions-item:not(:first-child) {
	aspect-ratio: 4 / 3;
}

/* 4 images – 2×2 grid */
.wc-impressions-count-4 {
	grid-template-columns: 1fr 1fr;
}

/* 5 images – first spans 2 columns, then 3 below */
.wc-impressions-count-5 {
	grid-template-columns: 1fr 1fr 1fr;
}
.wc-impressions-count-5 .wc-impressions-item:first-child {
	grid-column: span 2;
	aspect-ratio: 16 / 9;
}

/* 6+ images – 3 columns */
.wc-impressions-count-6 {
	grid-template-columns: 1fr 1fr 1fr;
}

/* ── Responsive: collapse to 2 or 1 column on narrow screens ── */
@media ( max-width: 600px ) {
	.wc-impressions-collage,
	.wc-impressions-count-3,
	.wc-impressions-count-4,
	.wc-impressions-count-5,
	.wc-impressions-count-6 {
		grid-template-columns: 1fr 1fr;
	}
	/* Reset first-child overrides on mobile */
	.wc-impressions-count-3 .wc-impressions-item:first-child,
	.wc-impressions-count-5 .wc-impressions-item:first-child {
		grid-row: auto;
		grid-column: auto;
		aspect-ratio: 1 / 1;
	}
}

@media ( max-width: 380px ) {
	.wc-impressions-collage,
	.wc-impressions-count-2,
	.wc-impressions-count-3,
	.wc-impressions-count-4,
	.wc-impressions-count-5,
	.wc-impressions-count-6 {
		grid-template-columns: 1fr;
	}
}