/* =========================================================
   Little Amélie Dlaždice [lamelie_tiles] – replacement for Visual Portfolio
   Per-set values come inline from PHP: --la-cols, --la-gap, --la-overlay
   ========================================================= */
.lamelie-tiles { width: 100%; min-width: 0; }

/* Elementor flex containers size widgets by their content – the grid has
   no content width (images are absolutely positioned), so the widget would
   collapse to 0 px. Force the widget holding the tiles to full width. */
.elementor-widget:has(.lamelie-tiles),
.elementor-widget:has(.lamelie-tiles) > .elementor-widget-container,
.elementor-widget:has(.lamelie-tiles) .elementor-shortcode {
	width: 100% !important;
	max-width: 100% !important;
	flex: 1 1 100% !important;
	align-self: stretch !important;
}
/* any other flex/grid parent (Gutenberg columns, theme wrappers) */
.lamelie-tiles { flex: 1 1 100%; align-self: stretch; }

.lamelie-tiles .la-tiles {
	--la-cols: 4;
	--la-gap: 10px;
	--la-overlay: rgba(15, 48, 87, .94);
	--la-speed: .38s;
	--la-ease: cubic-bezier(.45, 0, .2, 1);

	display: grid !important;
	grid-template-columns: repeat(var(--la-cols), minmax(0, 1fr));
	grid-auto-rows: 1fr;
	grid-auto-flow: row dense;           /* fill holes after big tiles */
	gap: var(--la-gap);
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
/* several sets under each other look like one grid */
.lamelie-tiles .la-tiles + .la-tiles { margin-top: var(--la-gap) !important; }

.lamelie-tiles .la-tile {
	position: relative;
	overflow: hidden;                    /* clips the flying overlay */
	aspect-ratio: 1 / 1;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	background: #f4ecee;
}
.lamelie-tiles .la-tile::before,
.lamelie-tiles .la-tile::marker { content: none; }

/* sizes (end = span, so a fixed start position never cancels the size) */
.lamelie-tiles .la-tile--big  { grid-column-end: span 2; grid-row-end: span 2; aspect-ratio: auto; }
.lamelie-tiles .la-tile--wide { grid-column-end: span 2; aspect-ratio: auto; }
.lamelie-tiles .la-tile--tall { grid-row-end: span 2;    aspect-ratio: auto; }

/* fixed position of the big tile (left / right) */
.lamelie-tiles .la-tile[style*="--col"] { grid-column-start: var(--col); }
.lamelie-tiles .la-tile[style*="--row"] { grid-row-start: var(--row); }

.lamelie-tiles .la-tile__link {
	position: absolute;
	inset: 0;
	display: block;
	color: #fff !important;
	text-decoration: none !important;
	outline: none;
}

.lamelie-tiles .la-tile__img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	border-radius: 0 !important;
	object-fit: cover;
	transition: transform .6s var(--la-ease);
}
.lamelie-tiles .la-tile.is-hover .la-tile__img { transform: scale(1.04); }

.lamelie-tiles .la-tile__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5em;
	background: var(--la-overlay);
	transform: translateY(101%);
	transition: transform var(--la-speed) var(--la-ease);
	will-change: transform;
	pointer-events: none;
}

.lamelie-tiles .la-tile__title {
	margin: 0;
	font-family: Poppins, sans-serif;
	font-size: clamp(15px, 1.35vw, 20px);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-align: center;
	color: #fff;
}

/* keyboard */
.lamelie-tiles .la-tile__link:focus-visible .la-tile__overlay { transform: none; }
.lamelie-tiles .la-tile__link:focus-visible { box-shadow: inset 0 0 0 3px #fff; }

/* touch devices – no hover, title always visible at the bottom */
@media (hover: none) {
	.lamelie-tiles .la-tile__overlay {
		transform: none;
		inset: auto 0 0 0;
		padding: .7em 1em;
	}
	.lamelie-tiles .la-tile__title { font-size: 13px; letter-spacing: .08em; }
}

/* mobile: 2 columns, big tile on top full width */
@media (max-width: 767px) {
	.lamelie-tiles .la-tiles { --la-cols: 2 !important; grid-auto-rows: auto; }
	.lamelie-tiles .la-tile[style*="--col"] { grid-column-start: auto; }
	.lamelie-tiles .la-tile[style*="--row"] { grid-row-start: auto; }
	.lamelie-tiles .la-tiles .la-tile--big  { grid-column: 1 / -1; grid-row: auto; order: -1; aspect-ratio: 1 / 1; }
	.lamelie-tiles .la-tiles .la-tile--wide { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
	.lamelie-tiles .la-tiles--mobile-wide-small .la-tile--wide { grid-column: auto; aspect-ratio: 1 / 1; }
}

@media (prefers-reduced-motion: reduce) {
	.lamelie-tiles .la-tile__overlay,
	.lamelie-tiles .la-tile__img { transition: none !important; }
}