/**
 * Gallery Listing — Style 5: Featured Metro
 *
 * A dense mosaic where the first image is promoted to a large 2×2 feature tile and
 * the rest fill in around it. Bold and editorial — ideal for a hero gallery.
 *
 * @package captain-widgets-kit
 * @since   1.5.0
 */

.captwiki-gallery.captwiki-style-5 .captwiki-gallery__grid {
	display: grid;
	grid-template-columns: repeat( var( --captwiki-gallery-cols ), minmax( 0, 1fr ) );
	grid-auto-rows: 200px;
	grid-auto-flow: dense;
	gap: var( --captwiki-gallery-gap );
}

.captwiki-gallery.captwiki-style-5 .captwiki-gallery__item {
	height: 100%;
}

/* Promote the first tile, and every 7th after, to a 2×2 feature. */
.captwiki-gallery.captwiki-style-5 .captwiki-gallery__item:first-child,
.captwiki-gallery.captwiki-style-5 .captwiki-gallery__item:nth-child( 7n + 1 ) {
	grid-column: span 2;
	grid-row: span 2;
}

.captwiki-gallery.captwiki-style-5 .captwiki-gallery__link,
.captwiki-gallery.captwiki-style-5 .captwiki-gallery__media {
	height: 100%;
}

.captwiki-gallery.captwiki-style-5 .captwiki-gallery__media {
	position: relative;
}

.captwiki-gallery.captwiki-style-5 .captwiki-gallery__img {
	position: absolute;
	inset: 0;
}

/* Caption overlays the tile, revealed on hover. */
.captwiki-gallery.captwiki-style-5 .captwiki-gallery__overlay {
	background: linear-gradient( to top, rgba( 12, 14, 24, 0.78 ) 0%, rgba( 12, 14, 24, 0.05 ) 60%, transparent 100% );
	align-items: flex-start;
	justify-content: flex-end;
	flex-direction: column;
	padding: 16px;
}

.captwiki-gallery.captwiki-style-5 .captwiki-gallery__icon {
	position: absolute;
	top: 14px;
	right: 14px;
}

.captwiki-gallery.captwiki-style-5 .captwiki-gallery__caption {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;
	padding: 16px;
	opacity: 0;
	transform: translateY( 12px );
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.captwiki-gallery.captwiki-style-5 .captwiki-gallery__title {
	color: #ffffff;
}

.captwiki-gallery.captwiki-style-5 .captwiki-gallery__desc {
	color: rgba( 255, 255, 255, 0.82 );
}

.captwiki-gallery.captwiki-style-5 .captwiki-gallery__item:hover .captwiki-gallery__caption,
.captwiki-gallery.captwiki-style-5 .captwiki-gallery__link:focus-visible .captwiki-gallery__caption {
	opacity: 1;
	transform: none;
}

/* On small screens drop back to simple stacked tiles. */
@media ( max-width: 767px ) {

	.captwiki-gallery.captwiki-style-5 .captwiki-gallery__grid {
		grid-auto-rows: 220px;
	}

	.captwiki-gallery.captwiki-style-5 .captwiki-gallery__item:first-child,
	.captwiki-gallery.captwiki-style-5 .captwiki-gallery__item:nth-child( 7n + 1 ) {
		grid-column: span 1;
		grid-row: span 1;
	}
}
