/* ------------------------------------------------------------------
   Banner del primo blocco della home — Iride, settembre 2026.
   Sostituiscono il blocco che aveva il video Vimeo di sfondo.
   Quattro immagini cliccabili, due per riga.

   In Elementor ogni banner è un widget Immagine con la classe
   "tecnoriv-banner"; le due righe sono sezioni interne con la classe
   "tecnoriv-banner-riga" (per le sezioni la chiave nel database è
   "css_classes", senza trattino basso: con "_css_classes" viene ignorata).
   Qui c'è solo l'aspetto: effetto al passaggio del mouse, freccia e
   spaziature. Gli spazi sopra e sotto il blocco stanno in Elementor.
   ------------------------------------------------------------------ */

.tecnoriv-banner .elementor-widget-container {
	position: relative;
	overflow: hidden;
	border-radius: 6px;
	line-height: 0;
	background: #22262a;
	outline: 2px solid transparent;
	transition: outline-color .25s ease, box-shadow .25s ease;
}

.tecnoriv-banner img {
	width: 100%;
	height: auto;
	display: block;
	filter: brightness(.86) saturate(.95);
	transform: scale(1);
	transition: filter .3s ease, transform .45s cubic-bezier(.2, .6, .2, 1);
}

.tecnoriv-banner:hover img,
.tecnoriv-banner:focus-within img {
	filter: brightness(1) saturate(1.03);
	transform: scale(1.035);
}

.tecnoriv-banner:hover .elementor-widget-container,
.tecnoriv-banner:focus-within .elementor-widget-container {
	outline-color: #FAB401;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
}

/* Freccia in basso a destra. Resta visibile anche da fermo: su telefono
   l'effetto al passaggio del mouse non esiste, e serve capire che si clicca. */
.tecnoriv-banner .elementor-widget-container::after {
	content: "";
	position: absolute;
	right: 16px;
	bottom: 16px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .35);
	background-color: rgba(0, 0, 0, .45);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 18px 18px;
	transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
	pointer-events: none;
}

.tecnoriv-banner:hover .elementor-widget-container::after,
.tecnoriv-banner:focus-within .elementor-widget-container::after {
	background-color: #FAB401;
	border-color: #FAB401;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	transform: translateX(4px);
}

/* Spaziature fra i quattro riquadri.
   Niente margini negativi: nel primo blocco la sezione non ha bordi laterali
   e la riga sborderebbe, facendo scorrere la pagina di lato. */
/* Elementor mette 10 px di suo su ogni lato delle colonne: sommati ai miei
   davano 44 px invece dei 24 voluti. Azzero i suoi e tengo solo questi. */
.tecnoriv-banner-riga .elementor-widget-wrap.elementor-element-populated {
	padding: 0;
}

.tecnoriv-banner-riga > .elementor-container > .elementor-column {
	padding: 0 12px;
}

.tecnoriv-banner-riga {
	margin: 0 0 24px;
}

/* L'ultima riga non ha margine sotto: lo spazio verso la sezione successiva
   lo dà già lo spazio interno del blocco. */
.tecnoriv-banner-ultima {
	margin-bottom: 0;
}

/* Sotto i 900 px i banner vanno uno sotto l'altro: a due per riga
   diventerebbero troppo stretti e i testi dentro le grafiche illeggibili. */
@media (max-width: 900px) {
	.tecnoriv-banner-riga > .elementor-container > .elementor-column {
		width: 100%;
		padding: 0 0 18px;
	}

	/* lo spazio sta sulla colonna, non sul widget: sul widget Elementor
	   lo sovrascrive e i banner finiscono attaccati */
	.tecnoriv-banner-ultima > .elementor-container > .elementor-column:last-child {
		padding-bottom: 0;
	}

	.tecnoriv-banner-riga {
		margin: 0;
	}
}

@media (prefers-reduced-motion: reduce) {

	.tecnoriv-banner img,
	.tecnoriv-banner .elementor-widget-container,
	.tecnoriv-banner .elementor-widget-container::after {
		transition: none;
	}
}