/*
 * Work grid — new CSS Grid renderer (?grid=new).
 *
 * NEW versioned file on purpose: base/extend/mobile.css load via unversioned
 * @import behind a 1-year edge cache, so this file is fully self-contained —
 * every rule the .fd-grid markup needs lives here (tile, media, video,
 * hover overlay, taxonomy, title), adapted from extend.css/mobile.css.
 *
 * Geometry preserved from the legacy isotope grid:
 * - desktop: 4 columns, 250px rows, ~12px gaps (legacy: 24% tiles, 6px/.5% margins)
 * - double rows = 512px (legacy .two-row = 2x250 + 12px gap)
 * - <=767px: 2 columns, wide/big collapse to single column (legacy: all 48%),
 *   banners stay full width (legacy .full-column kept 99%)
 * - <=700px: 1 column; tall/big/banner-tall KEEP the double row height
 * - <=500px: overlay always visible (legacy mobile.css behaviour)
 */

.fd-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 250px;
	grid-auto-flow: dense;
	gap: 12px;
}

.fd-tile {
	position: relative;
	margin: 0;
	border-radius: 6px;
	overflow: hidden;
	background: #E7F0F5; /* pale-blue placeholder while images lazy-load / if media missing */
}

/* Spans: small 1x1 (default), wide 2x1, tall 1x2, big 2x2, banner full row, banner-tall full + 2 rows */
.fd-tile--wide {
	grid-column: span 2;
}
.fd-tile--tall {
	grid-row: span 2;
}
.fd-tile--big {
	grid-column: span 2;
	grid-row: span 2;
}
.fd-tile--banner {
	grid-column: 1 / -1;
}
.fd-tile--banner-tall {
	grid-column: 1 / -1;
	grid-row: span 2;
}

.fd-tile__link {
	display: block;
	width: 100%;
	height: 100%;
	color: #fff;
	text-decoration: none;
}

/* Media (img + video) fills the tile; CSS does the cropping */
img.fd-tile__media,
video.fd-tile__media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 6px;
}

/* Hover overlay — same content/placement as legacy .work-hover-content, with a subtle fade */
.fd-tile__overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
	padding-left: 30px;
	padding-right: 30px;
	opacity: 0;
	transition: opacity 0.25s ease;
}

/* Bottom gradient behind the text (legacy :after, matrix(-1,0,0,-1) flip baked in) */
.fd-tile__overlay:after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100px;
	background: transparent linear-gradient(0deg, #061D27 0%, rgba(6, 29, 39, 0) 100%) 0% 0% no-repeat padding-box;
	border-radius: 0 0 6px 6px;
	z-index: -1;
}

.fd-tile:hover .fd-tile__overlay,
.fd-tile__link:focus .fd-tile__overlay {
	opacity: 1;
}

.fd-tile__taxonomy {
	display: inline-block;
	width: 100%;
	font-family: acumin-pro, sans-serif;
	font-weight: bold;
	font-size: 12px;
	text-transform: uppercase;
	color: #fff;
}

.fd-tile__title {
	margin: 0;
	padding-top: 0;
	padding-bottom: 20px;
	font-family: acumin-pro, sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: normal;
	color: #fff;
}

/* Tablet: 2 columns; wide/big drop to single column (legacy made every non-full tile 48%) */
@media screen and (max-width: 767px) {
	.fd-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.fd-tile--wide,
	.fd-tile--big {
		grid-column: auto;
	}
}

/* Phone: 1 column; tall/big/banner-tall keep their 2-row height via grid-row span */
@media screen and (max-width: 700px) {
	.fd-grid {
		grid-template-columns: 1fr;
	}
	.fd-tile--banner,
	.fd-tile--banner-tall {
		grid-column: auto;
	}
}

/* Small phones: overlay always visible (matches legacy mobile.css <=500px block) */
@media screen and (max-width: 500px) {
	.fd-tile__overlay {
		opacity: 1;
	}
}