.atv-mosaic {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-2-xs);
}

.atv-tile {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 11rem;
	overflow: hidden;
	color: var(--color-white);
	text-decoration: none;
	background: var(--color-black-90);
	isolation: isolate;
}

.atv-tile:focus-visible {
	outline: 3px solid var(--color-focus-outline);
	outline-offset: 3px;
}

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

.atv-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform 400ms ease;
}

/* Bottom scrim so the white label reads on any photo; the hover tint goes on background-color (animatable)
   over the same gradient. */
.atv-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: transparent;
	background-image: linear-gradient(
		180deg,
		transparent 35%,
		color-mix(in srgb, var(--atv-scrim) 45%, transparent) 65%,
		color-mix(in srgb, var(--atv-scrim) 85%, transparent) 100%
	);
	z-index: 1;
	transition: background-color 400ms ease;
}

.atv-tile__label {
	position: relative;
	z-index: 2;
	display: block;
	color: var(--color-white);
	width: 100%;
	padding: var(--spacing-s);
	font-family: var(--font-heading);
	font-size: var(--fontsize-heading-xs);
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	transform: translateY(0);
	transition: transform 400ms ease;
	box-shadow: inset 0 -3px 0 transparent;
}

.atv-tile:hover .atv-tile__media img,
.atv-tile:focus-visible .atv-tile__media img {
	transform: scale(1.04);
}

.atv-tile:hover::after,
.atv-tile:focus-visible::after {
	background-color: color-mix(in srgb, var(--color-bus) 42%, transparent);
}

.atv-tile:hover .atv-tile__label,
.atv-tile:focus-visible .atv-tile__label {
	transform: translateY(-6px);
	box-shadow: inset 0 -3px 0 var(--color-bus);
}

.atv-tile--btt,
.atv-tile--escalada,
.atv-tile--xadrez {
	background: var(--atv-scrim);
}

.atv-tile--cinema,
.atv-tile--teatro,
.atv-tile--musica {
	background: var(--color-black-80);
}

.atv-tile--static {
	cursor: default;
}

/* ---- Layout ---------------------------------------------------------------
   Both variants go to 2 columns from 360px (one long column of 11 tiles was ~2000px on a phone).
   The last tile(s) span the leftover cells, so no grid ever ends with an empty cell. */
@media (min-width: 360px) {
	.atv-mosaic {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Narrow two-column phones: smaller label so long names (EXPRESSARTE, PASSEIOS PEDESTRES) fit a half-width tile. */
@media (max-width: 575px) {
	.atv-mosaic .atv-tile {
		min-height: 9rem;
	}

	.atv-tile__label {
		padding: var(--spacing-xs);
		font-size: var(--fontsize-body-s);
		letter-spacing: 0.01em;
		overflow-wrap: normal;
		hyphens: manual;
	}
}

/* Homepage (featured): BTT is the large tile — a full row at 2 columns, 2×2 at 4 columns. */
@media (min-width: 360px) {
	.atv-mosaic--featured .atv-tile--btt {
		grid-column: span 2;
		min-height: 14rem;
	}

	/* 2 columns: BTT fills row 1, so an even number of tiles leaves one cell. */
	.atv-mosaic--featured > :last-child:nth-child(even) {
		grid-column: span 2;
	}
}

@media (min-width: 576px) {
	.atv-mosaic--featured .atv-tile--btt {
		min-height: 16rem;
	}
}

@media (min-width: 992px) {
	.atv-mosaic--featured {
		grid-template-columns: repeat(4, 1fr);
	}

	.atv-mosaic--featured .atv-tile--btt {
		grid-row: span 2;
		min-height: 22rem;
	}

	/* 4 columns with BTT as 2×2: n tiles fill n + 3 cells. Fill the last row:
	   n = 4k+2 → last tile spans the row; n = 4k+3 → last two tiles span 2 each; n = 4k → last tile spans 2
	   (the 2-column even rule already does that). */
	.atv-mosaic--featured > :last-child:nth-child(4n+2):not(:first-child) {
		grid-column: span 4;
	}

	.atv-mosaic--featured > :last-child:nth-child(4n+3),
	.atv-mosaic--featured > :nth-last-child(2):nth-child(4n+2):not(:first-child),
	.atv-mosaic--featured > :last-child:nth-child(4n+4) {
		grid-column: span 2;
	}
}

/* Even grid (Atividades, Projetos): 2 columns from 360px, 3 from 768px. Tiles carry no position classes. */
@media (min-width: 360px) {
	.atv-mosaic--grid > :last-child:nth-child(odd) {
		grid-column: span 2;
	}
}

@media (min-width: 768px) {
	.atv-mosaic--grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.atv-mosaic--grid .atv-tile {
		min-height: 14rem;
	}

	.atv-mosaic--grid > :last-child:nth-child(odd) {
		grid-column: auto;
	}

	/* 3 columns: one leftover tile spans the row, two leftovers: the last one spans 2. */
	.atv-mosaic--grid > :last-child:nth-child(3n+1):not(:first-child) {
		grid-column: span 3;
	}

	.atv-mosaic--grid > :last-child:nth-child(3n+2) {
		grid-column: span 2;
	}

	/* Exactly 4 tiles read better as 2 × 2 than 3 + 1. */
	.atv-mosaic--grid:has(> :nth-child(4):last-child) {
		grid-template-columns: repeat(2, 1fr);
	}

	.atv-mosaic--grid:has(> :nth-child(4):last-child) > :last-child {
		grid-column: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.atv-tile__media img,
	.atv-tile::after,
	.atv-tile__label {
		transition: none;
	}
}