/*!
 * Interlake Gallery — Tiles layout
 *
 * Only applies to `.e-tiles`; the grid / justified / masonry layouts are left
 * to the e-gallery library exactly as Elementor Pro ships them.
 */

.elementor-gallery__container.e-tiles {
	--tile-columns: 4;
	--tile-row: 260px;
	--tile-gap: 16px;

	display: grid;
	grid-template-columns: repeat(var(--tile-columns), minmax(0, 1fr));
	grid-auto-rows: var(--tile-row);
	gap: var(--tile-gap);

	/* e-gallery-container is flex; grid has to win */
	flex-wrap: nowrap;
	height: auto;
	padding-bottom: 0;
}

.elementor-gallery__container.e-tiles > .e-gallery-item {
	position: relative;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	transform: none;
	overflow: hidden;
}

/* the library positions items absolutely for the JS layouts — undo that here */
.elementor-gallery__container.e-tiles > .e-gallery-item[style*="translate"] {
	transform: none !important;
}

.elementor-gallery__container.e-tiles > .e-gallery-item.e-tile--wide {
	grid-column: span 2;
}

.elementor-gallery__container.e-tiles > .e-gallery-item.e-tile--tall {
	grid-row: span 2;
}

/* filtering: e-gallery-item--hidden only scales to zero, which leaves a hole */
.elementor-gallery__container.e-tiles > .e-gallery-item.e-tile--hidden {
	display: none;
}

.elementor-gallery__container.e-tiles .e-gallery-image {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
}

/*
 * No breakpoint reset here on purpose: the pattern controls are per-device, so
 * a tall tile on mobile is a deliberate choice. A `span 2` column request is
 * clamped by the grid when only one column exists, so it is safe either way.
 */

/* the tile wrapper clips the background image; keep the radius in sync */
.elementor-gallery__container.e-tiles > .e-gallery-item {
	border-radius: var( --image-border-radius, 0 );
}

/*
 * Filter bar spacing.
 *
 * Pro spaces the items with `margin-inline-end` on every item but the last,
 * which has no vertical counterpart. Switch to a real flex gap and neutralise
 * the margin so the two do not stack.
 */
.elementor-gallery__titles-container {
	column-gap: var( --filter-column-gap, 10px );
	row-gap: var( --filter-row-gap, 8px );
	max-width: var( --filter-max-width, none );
	margin-inline: auto;
}

.elementor-gallery__titles-container .elementor-gallery-title:not( :last-child ) {
	margin-inline-end: 0;
}

/* keep the capped bar on the side the alignment control asks for */
.elementor-gallery--filter-align-left .elementor-gallery__titles-container {
	margin-inline: 0 auto;
}

.elementor-gallery--filter-align-right .elementor-gallery__titles-container {
	margin-inline: auto 0;
}

/*
 * Scrolling filter bar.
 *
 * The wrap / scroll switch itself is emitted by the Overflow control (it is
 * per-device). These rules are what makes the scrolling state usable.
 */
.elementor-gallery__titles-container .elementor-gallery-title {
	flex: 0 0 auto;          /* never squash items into unreadable slivers */
	white-space: nowrap;
	scroll-snap-align: start;
}

/* a capped bar cannot also be a full-bleed scroller */
.elementor-gallery__titles-container {
	-webkit-overflow-scrolling: touch;
}

/*
 * When the bar scrolls, the container's trailing padding is dropped by every
 * browser's flex overflow implementation. A zero-width spacer restores it so
 * the last pill is not glued to the right edge at the end of the scroll.
 */
.elementor-gallery__titles-container::after {
	content: "";
	flex: 0 0 auto;
	width: 0;
}