/* Bento Box Tacca — stili base (le personalizzazioni sono gestite dai controlli di stile di Elementor) */

.tacca-bento {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	grid-auto-rows: 260px;
	gap: 20px;
}

.tacca-bento--dense-yes .tacca-bento {
	grid-auto-flow: dense;
}

.tacca-bento__item {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	min-width: 0;
	/* Evita che lo zoom dell'immagine "esca" dagli angoli arrotondati su Safari */
	isolation: isolate;
}

.tacca-bento__media {
	position: absolute;
	inset: 0;
}

.tacca-bento__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 0.6s ease, filter 0.3s ease;
}

.tacca-bento--zoom-yes .tacca-bento__item:hover .tacca-bento__media img {
	transform: scale( 1.06 );
}

.tacca-bento__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.6 ), rgba( 0, 0, 0, 0 ) 60% );
	transition: background 0.3s ease;
}

.tacca-bento__name {
	margin: 0;
	color: #fff;
	transition: color 0.2s ease;
}

.tacca-bento__link,
.tacca-bento__link:hover,
.tacca-bento__link:focus {
	color: inherit;
	text-decoration: none;
}

.tacca-bento--underline-yes .tacca-bento__item:hover .tacca-bento__link {
	text-decoration: underline;
}

/* Rende cliccabile l'intero box tramite lo pseudo-elemento del link del nome */
.tacca-bento--stretched-yes .tacca-bento__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.tacca-bento--stretched-yes .tacca-bento__item:has( .tacca-bento__link ) {
	cursor: pointer;
}

.tacca-bento__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}