/*
 * AQ Realizacje – fixed gallery layout for the Elementor Pro "Gallery" widget.
 * Pattern (repeats every 3 images):
 *   [        wide        ]
 *   [ narrow ] [ narrow  ]
 *
 * Usage: Gallery widget → Layout: Grid, Columns: 2 →
 *        Advanced → CSS Classes: aq-realizacje-gallery
 *
 * Ratios are CSS variables, tunable per widget in Advanced → Custom CSS:
 *   selector { --aq-wide-ratio: 21 / 9; --aq-narrow-ratio: 1 / 1; }
 */

.aq-realizacje-gallery {
	--aq-wide-ratio: 16 / 9;
	--aq-narrow-ratio: 4 / 3;
}

/* Force a 2-column grid regardless of breakpoint column settings. */
.aq-realizacje-gallery .e-gallery-grid {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/*
 * Every 1st image of each triplet spans the full width.
 * Incomplete last triplet: a lone narrow image (count % 3 === 2) also goes full width,
 * so the grid never ends with an empty half-cell. count % 3 === 1 is covered by 3n+1.
 */
.aq-realizacje-gallery .e-gallery-item:nth-child(3n + 1),
.aq-realizacje-gallery .e-gallery-item:nth-child(3n + 2):last-child {
	grid-column: 1 / -1;
}

/* Height driven by aspect-ratio instead of the widget's padding-bottom hack. */
.aq-realizacje-gallery .e-gallery-item .e-gallery-image {
	height: auto !important;
	padding-bottom: 0 !important;
	aspect-ratio: var(--aq-narrow-ratio);
	background-size: cover;
	background-position: center;
}

.aq-realizacje-gallery .e-gallery-item:nth-child(3n + 1) .e-gallery-image,
.aq-realizacje-gallery .e-gallery-item:nth-child(3n + 2):last-child .e-gallery-image {
	aspect-ratio: var(--aq-wide-ratio);
}