/**
 * Tiles con cerchio - stili modulo WPBakery custom
 *
 * Mobile-first. Breakpoint chiave del modulo:
 * - < 600         : mobile (griglia a --tcc-cols-mobile, oppure carosello)
 * - 600 -> 1024   : tablet (griglia a --tcc-cols-tablet)
 * - >= 1025       : desktop (griglia a --tcc-cols)
 */

.tcc {
	--tcc-diametro: 80px;      /* diametro massimo cerchio */
	--tcc-padding-y: 40px;     /* padding verticale tile */
	--tcc-padding-x: 24px;     /* padding orizzontale tile */
}


/* Griglia flex (sempre, sia carosello che no).
   Specificità .tcc .tcc-wrapper: deve battere .swiper-wrapper (box-sizing content-box). */
.tcc .tcc-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tcc-gap);
	box-sizing: border-box;
}


/* fw mobile */
@media(max-width:599px){
    .tcc.center-full {
        min-width: 100vw !important;
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
} 


/* Modalità carosello: la struttura Swiper è creata dal JS solo sotto i 600px
   (il wrapper diventa la root Swiper). Su desktop queste classi non esistono. */
.tcc .tcc-wrapper.swiper {
	display: block;
	overflow: hidden;
	position: relative;
	flex-wrap: nowrap;
	gap: 0;
	padding-bottom: 40px; /* spazio per i dots */
}

.tcc .tcc-wrapper.swiper > .swiper-wrapper > .swiper-slide {
	height: auto;
}

/* --- Tile ---
   Specificità .tcc .tcc-tile: deve battere .swiper-slide di Swiper
   (width: 100%, display: block, height: 100%), altrimenti quando il CSS
   di Swiper è in pagina tutte le tile vanno a piena larghezza. */
.tcc .tcc-tile {
	position: relative;
	overflow: hidden;
	display: flex;
	box-sizing: border-box;
	height: auto;
	min-height: 200px; /* altezza minima per composizione visiva */
	background: var(--color-beige-ultra-light);
	/* larghezza mobile: quando è griglia mobile-first (no carosello) */
	width: calc((100% - (var(--tcc-cols-mobile) - 1) * var(--tcc-gap)) / var(--tcc-cols-mobile));
}

/* Base mobile: padding 24px su tutti i lati.
   Da tablet in su diventa 40/24 (vedi media query >=600). */
.tcc-tile-inner {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	padding: var(--tcc-padding-x) var(--tcc-padding-x);
	z-index: 1;
}

/* Solo titolo (nessun testo): padding uniforme 24px a tutti i breakpoint.
   Specificità 0,2,0: batte anche l'override tablet di .tcc-tile-inner. */
.tcc-tile--solo-titolo .tcc-tile-inner {
	padding: var(--tcc-padding-x);
}

/* Solo titolo: tile a proporzioni quadrate. */
.tcc .tcc-tile--solo-titolo {
	aspect-ratio: 1;
}

.tcc-titolo {
	color: var(--color-testa-di-moro);
	margin: 0;
}

.tcc-testo {
	color: var(--color-testa-di-moro);
	margin-top: 12px;
}

/* --- Immagine (una sola): cerchio normale -> cover in hover ---
   Stile "soter" (come us_ibanner animation="soter"): l'immagine è un box
   quadrato in absolute, sempre della stessa geometria (nessun salto). In
   stato normale è ridotta con transform:scale (cerchio in un angolo); in hover
   cresce fino a coprire tutta la tile morphando in rettangolo. Le scale
   (rest/hover) le calcola il JS in base a larghezza/altezza della tile, così
   il cerchio resta ~85px e la copertura in hover è sempre completa. */
.tcc-immagine {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: auto;
	aspect-ratio: 1;          /* box quadrato: lato = larghezza tile */
	object-fit: cover;        /* mostra il centro dell'immagine (soggetto visibile) */
	border-radius: 50%;
	transform: scale(var(--tcc-scale-rest, 0.3));
	transition: transform 0.45s ease, border-radius 0.45s ease;
	z-index: 3;
	will-change: transform;
}

/* Stato attivo: l'immagine copre l'intera tile, sopra al testo.
   Tre modi di attivarlo:
   - hover con mouse (solo dispositivi con hover reale, per evitare lo
     "sticky hover" che su touch resterebbe attivo dopo il tap);
   - classe .is-attiva messa dal JS al primo tap sui dispositivi touch;
   - focus da tastiera su un elemento interno (link). */
.tcc-tile.is-attiva .tcc-immagine,
.tcc-tile:focus-within .tcc-immagine {
	border-radius: 0;
	transform: scale(var(--tcc-scale-hover, 2));
}

/* Il testo sfuma mentre l'immagine si espande (come "soter"). */
.tcc-testi {
	transition: opacity 0.35s ease;
}

.tcc-tile.is-attiva .tcc-testi,
.tcc-tile:focus-within .tcc-testi {
	opacity: 0;
}

@media (hover: hover) {

	.tcc-tile:hover .tcc-immagine {
		border-radius: 0;
		transform: scale(var(--tcc-scale-hover, 2));
	}

	.tcc-tile:hover .tcc-testi {
		opacity: 0;
	}
}

/* --- Link facoltativo: compare sopra all'immagine espansa ---
   Il wrap è solo un velo (pointer-events: none): cliccabile è unicamente
   l'anchor, come da richiesta. */
.tcc-link-wrap {
	position: absolute;
	inset: 0;
	z-index: 4;                          /* sopra l'immagine (z-index 3) */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--tcc-padding-x);
	background: rgba(0, 0, 0, 0.35);     /* leggero overlay per far risaltare il link */
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease;
}

.tcc-link {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-align: center;
	pointer-events: none;                /* cliccabile solo a tile attiva */
}

.tcc-link:hover,
.tcc-link:focus {
	color: #fff !important;
}
.tcc-link:hover{
    text-underline-offset: 7px !important;
    text-decoration: underline !important;
}

.tcc-tile.is-attiva .tcc-link-wrap,
.tcc-tile:focus-within .tcc-link-wrap {
	opacity: 1;
}

.tcc-tile.is-attiva .tcc-link,
.tcc-tile:focus-within .tcc-link {
	pointer-events: auto;
}

@media (hover: hover) {

	.tcc-tile:hover .tcc-link-wrap {
		opacity: 1;
	}

	.tcc-tile:hover .tcc-link {
		pointer-events: auto;
	}
}

/* --- Allineamento immagine: governato dal blocco genitore
   (.tcc--img-right / .tcc--img-left), vale per tutte le tile. --- */

/* Variante: immagine a DESTRA (cerchio in basso a destra) */
.tcc--img-right .tcc-tile-inner {
	flex-direction: row;
	gap: 16px;
}

.tcc--img-right .tcc-testi {
	flex: 0 0 66%;
	max-width: 66%;
}

.tcc--img-right .tcc-immagine {
	transform-origin: 90% 90%;   /* espansione da destra verso sinistra */
}

/* Variante: immagine a SINISTRA (cerchio in basso a sinistra).
   Lo spazio del cerchio sotto al testo è riservato dal padding-bottom. */
.tcc--img-left .tcc-tile-inner {
	flex-direction: column;
	padding-bottom: calc(var(--tcc-padding-y) + var(--tcc-diametro) + 20px);
}

.tcc--img-left .tcc-immagine {
	transform-origin: 10% 90%;   /* espansione da sinistra verso destra */
}

/* --- Dots carosello "smudge": trattino attivo + puntini inattivi
   (stesso stile della vc_gallery-slider-lightbox). Creati dal JS dentro la
   root Swiper. Specificità alta (0,4,0) per battere il CSS di Swiper caricato
   dopo: altrimenti forza left:0/width:100% e la mia translate spingeva i dots
   fuori schermo. --- */
.tcc .tcc-wrapper.swiper .tcc-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	width: 100%;
	transform: none;          /* annulla la translate di Swiper */
	display: flex;
	justify-content: center;  /* centra i dots senza translate */
	align-items: center;
	gap: 8px;
	margin: 0;
}

.tcc-dots .swiper-pagination-bullet {
	width: 12px;
	height: 2px;
	border-radius: 10px;
	background: var(--color-testa-di-moro);
	opacity: 0.25;
	margin: 0 !important;
	transition: width 0.25s ease, border-radius 0.25s ease, opacity 0.25s ease;
}

.tcc-dots .swiper-pagination-bullet-active {
	width: 60px;
	height: 2px;
	opacity: 1;
}

/* ============================================================
   TABLET (600 -> 1024)
   ============================================================ */
@media (min-width: 600px) {

	.tcc .tcc-tile {
		width: calc((100% - (var(--tcc-cols-tablet) - 1) * var(--tcc-gap)) / var(--tcc-cols-tablet));
	}

	.tcc-tile-inner {
		padding: var(--tcc-padding-y) var(--tcc-padding-x);
	}
    
    .vc_row.equal_height > .wpb_column > .vc_column-inner > .wpb_wrapper > .tcc[style*="tcc-cols:1"] > .tcc-wrapper {
        height: 100%;
        flex-direction: column;
        justify-content: space-between;
    } 
}

@media (min-width: 600px) and (max-width:1024px) {
    .l-section-h > .vc_row > .wpb_column.vc_col-sm-4 > .vc_column-inner > .wpb_wrapper > .tcc > .tcc-wrapper .tcc-tile,
    .l-section-h > .vc_row > .wpb_column.vc_col-sm-3 > .vc_column-inner > .wpb_wrapper > .tcc > .tcc-wrapper .tcc-tile {
        width:100%;
    }    
}
@media (min-width: 769px) and (max-width:1024px) {
    /*se è in colonna interna, ad es. pag ristoranti: */
    .vc_col-sm-5>.vc_column-inner>.wpb_wrapper>.wpb_row>.vc_col-sm-5>.vc_column-inner>.wpb_wrapper>.tcc>.tcc-wrapper .tcc-tile,
    .vc_col-sm-6>.vc_column-inner>.wpb_wrapper>.wpb_row>.vc_col-sm-5>.vc_column-inner>.wpb_wrapper>.tcc>.tcc-wrapper .tcc-tile,
    .vc_col-sm-7>.vc_column-inner>.wpb_wrapper>.wpb_row>.vc_col-sm-5>.vc_column-inner>.wpb_wrapper>.tcc>.tcc-wrapper .tcc-tile {
        width:100%;
    }
    
}

/* ============================================================
   TABLET (>= 769)
   ============================================================ */
@media (min-width: 769px) {
    
}

/* ============================================================
   DESKTOP (>= 1025)
   ============================================================ */
@media (min-width: 1025px) {

	.tcc .tcc-tile {
		width: calc((100% - (var(--tcc-cols) - 1) * var(--tcc-gap)) / var(--tcc-cols));
	}
   
    .tcc[style*="tcc-cols:1"] > .tcc-wrapper {
        gap: 60px;
    }
}