/**
 * Gallery Listing — Style 3: Hover Overlay
 *
 * Equal-ratio tiles where the title and caption slide up over a gradient scrim on
 * hover / focus. Tight, modern and great for portfolios.
 *
 * @package captain-widgets-kit
 * @since   1.5.0
 */

.captwiki-gallery.captwiki-style-3 .captwiki-gallery__grid {
	display: grid;
	grid-template-columns: repeat( var( --captwiki-gallery-cols ), minmax( 0, 1fr ) );
	gap: var( --captwiki-gallery-gap );
}

.captwiki-gallery.captwiki-style-3 .captwiki-gallery__link {
	position: relative;
}

.captwiki-gallery.captwiki-style-3 .captwiki-gallery__media {
	position: relative;
	padding-bottom: var( --captwiki-gallery-ratio );
}

.captwiki-gallery.captwiki-style-3 .captwiki-gallery__img {
	position: absolute;
	top: 0;
	left: 0;
}

.captwiki-gallery.captwiki-style-3 .captwiki-gallery__overlay {
	background: linear-gradient( to top, rgba( 12, 14, 24, 0.85 ) 0%, rgba( 12, 14, 24, 0.1 ) 55%, transparent 100% );
	align-items: flex-start;
	justify-content: flex-end;
	flex-direction: column;
	padding: 18px;
}

.captwiki-gallery.captwiki-style-3 .captwiki-gallery__icon {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 40px;
	height: 40px;
	font-size: 18px;
}

/* Caption overlays the image and reveals on hover. */
.captwiki-gallery.captwiki-style-3 .captwiki-gallery__caption {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;
	padding: 18px;
	opacity: 0;
	transform: translateY( 12px );
	transition: opacity 0.32s ease, transform 0.32s ease;
}

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

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

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