/**
 * Layout: Image Gallery — Overlay Tiles. Six-column mosaic from 768px:
 * tiles repeat 4+2 / 2+4 columns; one column on phones.
 *
 * @package GagaMuller
 */

.gm-tiles__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gm-space-16);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gm-tile {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 17rem;
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--gm-radius-card);
	background: var(--gm-color-black);
	color: var(--gm-color-white);
}

.gm-tile__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.gm-tile__media::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(16 16 16 / 0) 30%, rgb(16 16 16 / 0.82) 100%);
	content: "";
}

.gm-tile__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms var(--gm-ease), filter 900ms var(--gm-ease);
}

.gm-tile::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgb(114 21 244 / 0.12) 0%, rgb(114 21 244 / 0.55) 100%);
	content: "";
	opacity: 0;
	pointer-events: none;
	transition: opacity 500ms var(--gm-ease);
}

.gm-tile__body {
	display: grid;
	gap: var(--gm-space-6);
	padding: var(--gm-space-24);
}

.gm-tile__title {
	margin: 0;
	color: var(--gm-color-white);
	font-family: var(--gm-font-heading);
	font-size: var(--gm-text-h3);
	font-weight: var(--gm-weight-bold);
}

.gm-tile__text {
	max-width: 24rem;
	margin: 0;
	color: var(--gm-color-on-dark-strong);
	font-size: var(--gm-text-legal);
	line-height: 1.45;
}

.gm-tile .gm-tile__link,
.gm-tile .gm-tile__link:visited,
.gm-tile .gm-tile__link:hover,
.gm-tile .gm-tile__link:focus {
	color: inherit;
	text-decoration: none;
}

.gm-tile__link::after {
	position: absolute;
	inset: 0;
	content: "";
}

.gm-tile:has(.gm-tile__link:focus-visible) {
	outline: var(--gm-focus-width) solid var(--gm-focus-color);
	outline-offset: var(--gm-focus-offset);
}

@media (hover: hover) {
	.gm-tile:hover::before {
		opacity: 1;
	}

	.gm-tile:hover .gm-tile__image {
		transform: scale(1.05);
	}
}

@media (min-width: 768px) {
	.gm-tiles__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		grid-auto-rows: minmax(15rem, 20vw);
		gap: var(--gm-space-24);
	}

	.gm-tile {
		grid-column: span 3;
	}

	.gm-tile:nth-child(4n + 1),
	.gm-tile:nth-child(4n) {
		grid-column: span 4;
	}

	.gm-tile:nth-child(4n + 2),
	.gm-tile:nth-child(4n + 3) {
		grid-column: span 2;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gm-tile__image,
	.gm-tile::before {
		transition: none;
	}

	.gm-tile:hover .gm-tile__image {
		transform: none;
	}
}