@import (reference) "variables.less";
@import "evento.less";

body {

	.relatore-popover-wrapper {
		position: relative;
		display: inline-block;

		.relatore-popover {
			display: none;
			position: absolute;
			bottom: calc(100% + 0.5rem);
			left: 50%;
			transform: translateX(-50%);
			z-index: 200;
			width: 260px;
			background: #fff;
			color: var(--bs-gray-700);
			border-radius: 0.75rem;
			box-shadow: 0 4px 20px rgba(0,0,0,0.18);
			padding: 1rem;
			pointer-events: none;

			.relatore-foto-wrapper {
				flex-shrink: 0;
				width: 80px;
				margin-right: 0.75rem;
			}

			.relatore-foto {
				width: 80px;
				height: 80px;
				object-fit: cover;
				border-radius: var(--bs-border-radius);
			}

			&::after {
				content: '';
				position: absolute;
				top: 100%;
				left: 50%;
				transform: translateX(-50%);
				border: 6px solid transparent;
				border-top-color: #fff;
			}
		}

		&:hover .relatore-popover {
			display: flex;
		}
	}

} //body

// Small devices (landscape phones, 576px and up)
@media (min-width:768px) { 
	
	body {

		
	} //body

} //@media (min-width: 768px)