/* base/tiles.css
   Image tiles and their aspect ratios.

   Part of assets/css/. The load order lives in
   inc/setup.php - add new files there, not with @import. */

.tile {
	position: relative;
	display: flex;
	align-items: flex-end;
	padding: 14px;
	overflow: hidden;
	background: #EEF0F5;
}

.tile.is-ph {
	background: repeating-linear-gradient(135deg, #EEF0F5 0 12px, #E4E7EF 12px 24px);
}

.tile-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ratio-4x3 { aspect-ratio: 4 / 3; }

.ratio-1x1 { aspect-ratio: 1 / 1; }

.ratio-16x7 { aspect-ratio: 16 / 7; }

.ratio-16x10 { aspect-ratio: 16 / 10; }

.ratio-21x9 { aspect-ratio: 21 / 9; }

.ph-label {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 10.5px;
	line-height: 1.4;
	color: var(--mute);
}

a.tile { cursor: zoom-in; display: block; }

a.tile .tile-img { transition: transform 0.45s ease; }

a.tile:hover .tile-img { transform: scale(1.04); }

a.tile::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(14, 16, 48, 0.55), transparent 55%);
	opacity: 0;
	transition: opacity 0.25s;
}

a.tile:hover::after,
a.tile:focus-visible::after { opacity: 1; }

.tile-zoom {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--navy);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.25s, transform 0.25s;
}

a.tile:hover .tile-zoom,
a.tile:focus-visible .tile-zoom { opacity: 1; transform: translateY(0); }

.tile-caption {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 12px;
	z-index: 2;
	font-size: 12.5px;
	line-height: 1.45;
	font-weight: 500;
	color: #fff;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.25s, transform 0.25s;
}

a.tile:hover .tile-caption,
a.tile:focus-visible .tile-caption { opacity: 1; transform: translateY(0); }

a.tile:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }