/*
 * Le card uguali in tutte le pagine (12/9).
 *
 * Lo stile delle targhette esisteva già, ma valeva solo dentro il contenitore
 * dei risultati: fuori di lì — scheda dell'attività, profilo del
 * professionista, carrello — le stesse targhette si vedevano diverse. Qui lo
 * stesso stile vale ovunque. Il peso dell'id serve a vincere sulle regole
 * con !important che arrivano da altri fogli.
 */

/* Targhette: una sola forma, un solo carattere, ovunque. */
html body :is(#tbp-results-container, .tbp-card-uniforme) :is(.tbp-exp-card__tag, .tbp-exp-card__place-bit, .tbp-exp-card__badge) {
	display: inline-block !important;
	margin: 0 !important;
	padding: 1px 5px !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, 0.16) !important;
	color: #fff !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	overflow-wrap: anywhere !important;
	font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	font-size: 0.64rem !important;
	font-weight: 650 !important;
	font-style: normal !important;
	line-height: 1.3 !important;
	letter-spacing: 0.01em !important;
	text-transform: none !important;
}

html body :is(#tbp-results-container, .tbp-card-uniforme) .tbp-exp-card__tags {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 4px !important;
}

/* La sfumatura scura parte dalla riga della stella: il punto lo misura
   tbp-card-uniformi.js e lo scrive in --tbp-card-scrim-start. */
html body :is(#tbp-results-container, .tbp-card-uniforme) .tbp-exp-card__info::before {
	content: "" !important;
	position: absolute !important;
	inset: var(--tbp-card-blur-cima, 100%) 0 0 !important;
	z-index: -1 !important;
	pointer-events: none !important;
	border: 0 !important;
	box-shadow: none !important;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.64) 0%, rgba(0, 0, 0, 0.30) 65%, transparent 100%) !important;
}

@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) and ((mask-image: linear-gradient(transparent, black)) or (-webkit-mask-image: linear-gradient(transparent, black))) {
	html body :is(#tbp-results-container, .tbp-card-uniforme) .tbp-exp-card__info::before {
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
		-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 100%);
		mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 100%);
	}
}

/* Il video riempie la card come la fotografia, senza bordi neri. */
html body .tbp-card-uniforme video {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

/* L'icona del professionista sta a sinistra, non in mezzo: nel riquadro
   della mappa era centrata e nel feed no (12/9). */
html body :is(#tbp-results-container, .tbp-card-uniforme) .tbp-exp-card__person {
	align-items: flex-start !important;
	text-align: left !important;
}

html body :is(#tbp-results-container, .tbp-card-uniforme) .tbp-exp-card__portrait {
	margin-left: 0 !important;
	margin-right: auto !important;
	align-self: flex-start !important;
}

html body :is(#tbp-results-container, .tbp-card-uniforme) .tbp-exp-card__person > * {
	align-self: flex-start !important;
}

/* -------------------------------------------------------------------- */
/* Card più luminose (12/9)                                              */
/*                                                                        */
/* Sembravano tetre: la fotografia veniva scurita due volte, dalla        */
/* sfumatura e dalla sfocatura. Qui la fotografia si schiarisce un po' e  */
/* si ravviva, e la sfumatura pesa meno: il testo resta leggibile ma la   */
/* card respira.                                                          */
/* -------------------------------------------------------------------- */
html body :is(#tbp-results-container, .tbp-card-uniforme) .tbp-exp-card__media img,
html body :is(#tbp-results-container, .tbp-card-uniforme) .tbp-exp-card__media video,
html body :is(#tbp-results-container, .tbp-card-uniforme) .tbp-exp-card__slide img {
	filter: brightness(1.08) saturate(1.16) contrast(1.02) !important;
}

/* La sfumatura sotto il testo: più leggera, e solo dove serve. */
html body :is(#tbp-results-container, .tbp-card-uniforme) .tbp-exp-card__info::before {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.52) 0%, rgba(0, 0, 0, 0.22) 62%, rgba(0, 0, 0, 0.06) 100%) !important;
}

@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
	html body :is(#tbp-results-container, .tbp-card-uniforme) .tbp-exp-card__info::before {
		-webkit-backdrop-filter: blur(10px) brightness(1.06) saturate(1.1);
		backdrop-filter: blur(10px) brightness(1.06) saturate(1.1);
	}
}

/* Il testo bianco su una sfumatura più chiara ha bisogno di un'ombra
   appena accennata, o si perde sulle foto chiare. */
html body :is(#tbp-results-container, .tbp-card-uniforme) .tbp-exp-card__info :is(h3, .tbp-exp-card__title, .tbp-exp-card__price, .tbp-exp-card__place, .tbp-card-rating) {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.38) !important;
}

/* -------------------------------------------------------------------- */
/* La scheda dentro la mappa resta com'era (12/9)                        */
/*                                                                        */
/* Il riquadro che si apre toccando un pin ha un impianto suo, più        */
/* stretto e con la fotografia posizionata diversamente: le regole qui    */
/* sopra lo rompevano — testo senza sfumatura, foto sfasata. Lì si torna  */
/* a quello che c'era.                                                    */
/* -------------------------------------------------------------------- */
html body :is(#tbp-map-esperienze, .tbp-map-feedcard) .tbp-map-feedcard .tbp-exp-card__info::before,
html body :is(#tbp-map-esperienze, .tbp-map-feedcard) .tbp-exp-card__info::before {
	inset: -24px 0 0 !important;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.64) 0%, rgba(0, 0, 0, 0.30) 65%, transparent 100%) !important;
}

@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
	html body :is(#tbp-map-esperienze, .tbp-map-feedcard) .tbp-map-feedcard .tbp-exp-card__info::before,
html body :is(#tbp-map-esperienze, .tbp-map-feedcard) .tbp-exp-card__info::before {
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
		-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 32%, #000 100%);
		mask-image: linear-gradient(to bottom, transparent 0%, #000 32%, #000 100%);
	}
}

html body :is(#tbp-map-esperienze, .tbp-map-feedcard) :is(.tbp-exp-card__media img, .tbp-exp-card__media video, .tbp-exp-card__slide img) {
	filter: none !important;
}