/*
 * ntw_application_grid — port of `.a-apps` / `.a-app`, a 12-column mosaic designed
 * for five cards: one tall lead card and four beside and below it.
 *
 * A sixth card and beyond take half a row each, so a longer list still tiles rather
 * than leaving a ragged gap.
 */

.ntw-apps { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.ntw-app { position: relative; display: block; border-radius: var(--r); overflow: hidden; min-height: 300px; isolation: isolate; grid-column: span 6; }
.ntw-app:nth-child(1) { grid-column: span 7; grid-row: span 2; min-height: 620px; }
.ntw-app:nth-child(2), .ntw-app:nth-child(3) { grid-column: span 5; }
.ntw-app:nth-child(4), .ntw-app:nth-child(5) { grid-column: span 6; }
.ntw-app img {
	position: absolute; inset: -8% 0; z-index: -2; width: 100%; height: 116%; object-fit: cover;
	transform: translate3d(0, var(--py, 0px), 0) scale(1.02); transition: scale 1.2s var(--ease);
}
.ntw-app:hover img { scale: 1.06; }
.ntw-app::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(13, 17, 14, .88), rgba(13, 17, 14, .05) 55%); }
.ntw-app__cap { position: absolute; inset: auto 0 0; padding: 24px 26px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.ntw-app__cap h3 { margin: 0; font: 500 clamp(1.15rem, 1.7vw, 1.55rem)/1.3 var(--f-display); }
.ntw-app__cap p { margin: 6px 0 0; font-size: 13.5px; }
.ntw-app__go {
	flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
	border: 1px solid var(--line-2); color: var(--mist);
	transition: background-color .3s, color .3s, border-color .3s, transform .4s var(--ease);
}
.ntw-app:hover .ntw-app__go { transform: rotate(-45deg); }

@media (max-width: 960px) {
	.ntw-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ntw-app:nth-child(n) { grid-column: span 1; grid-row: auto; min-height: 280px; }
	.ntw-app:nth-child(1) { grid-column: span 2; min-height: 380px; }
}
@media (max-width: 720px) {
	.ntw-apps { grid-template-columns: minmax(0, 1fr); }
	.ntw-app:nth-child(n) { grid-column: auto; min-height: 260px; }
}
@media (prefers-reduced-motion: reduce) {
	.ntw-app img { transform: none !important; }
}