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

body {

	#programma {

		h2 {
			margin-top: 2.5rem;

			&:first-child {
				margin-top: 0;
			}
		} //h2

		h3 {
			font-size: 1.5rem;
			font-weight: 600;
			margin-bottom: 0.5rem;
			color: var(--bs-primary);
			text-align: center;
		} //h3

		.row {

			min-height: 8rem;
			border-bottom: 3px solid var(--bs-grigio-300);
			color: var(--bs-grigio-500);

			&.separatore {
				min-height: 3rem;
				border-bottom: 1px solid var(--bs-grigio-300);
				background-color: var(--bs-grigio-500);
				color: var(--bs-white);
				display: flex;
				align-items: center;
			}//.separatore

			&.separatore-relatori {
				min-height: auto;
				padding-bottom: 0.5rem;
				text-align: right;

				.relatore-popover-wrapper {
					
					margin: 0.45rem 0 0.15rem 0;
				
				}//.relatore-popover-wrapper

			}//.separatore-relatori

			&.evidenziato {
				background-color:var(--bs-grigio-400);
			}//.evidenziato

			.col-2 {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 1.25rem;
				font-weight: 600;
				line-height: 4rem;

				&.freccia {
					background-image: url('../images/Freccia orario@2x.png');
					background-size: 17px 31.5px;
					background-repeat: no-repeat;
					background-position: center;
				}//.freccia

			}//.col-2

			.col-10 {

				margin-top: 1.25rem;

				b {

					font-weight: 600;
					font-size: 1.3125rem;
					line-height: 1.5rem;
				}//b

			}//.col-10

			a {

				text-decoration: none;
				color: var(--bs-grigio-400);

			}//a

			a.relatore-nome-inline,
			span.descrizione,
			span.relatore-nome-inline {

				font-style: italic;
				font-size: 1.125rem; // 18px
				line-height: 1.3125rem; // 21px
				letter-spacing: 0;
				color: var(--bs-grigio-500);

				p {
					margin-bottom: 0;
				}

			}//.relatore-nome-inline

			.relatore-info-icon {
				display: inline-block;
				text-align: center;
				margin-left: 0.25rem;
				font-size: 0.85rem;
				font-style: italic;
				font-weight: 800;
				border-radius: 50%;
				line-height: 1rem;
				width: 1rem;
				background-color: var(--bs-grigio-500);
				vertical-align: middle;
				color: var(--bs-white);
			}//.relatore-info-icon

		}//.row

		.relatore-popover-wrapper {
		position: relative;
		display: inline-block;
		margin-bottom: 1.25rem;

		.relatore-popover {
			display: flex;
			position: absolute;
			bottom: calc(100% + 0.25rem);
			left: 50%;
			transform: translateX(-50%) translateY(4px);
			z-index: 200;
			width: 320px;
			background: var(--bs-white);
			color: var(--bs-grigio-700);
			border-radius: 10px;
			box-shadow: 0 4px 20px rgba(0,0,0,0.18);
			padding: 0rem;
			pointer-events: none;
			opacity: 0;
			transition: opacity 0.15s ease, transform 0.15s ease;

			.relatore-foto-wrapper {
				flex-shrink: 0;
				width: 6.25rem; // 100px
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
				border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius);
			}

			.relatore-info {

				text-align: left;
				padding: 0.5em 1em;

				.relatore-nome {
					font-size: 1.25rem;
					font-weight: 700;
					margin-top: 0.25rem;
					margin-bottom: 0.25rem;
					line-height: 1.3;
					text-align: left;
				}//.relatore-nome

				.relatore-mansione,
				.relatore-istituto {
					font-size: 0.95rem;
					font-style: italic;
					line-height: 1.4;
					margin-bottom: 0.25rem;
					color: var(--bs-grigio-500);
				}//.relatore-mansione, .relatore-istituto

				.relatore-mansione {
					font-style: italic;
				}//.relatore-mansione

			}//.relatore-info

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

		&:hover .relatore-popover,
		&.open .relatore-popover {
			opacity: 1;
			transform: translateX(-50%) translateY(0);
		}
		}// .relatore-popover-wrapper

	} //#programma

} //body

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

	body {


	} //body

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

// Sotto i 992px (spalla a capo, contenuto largo quanto lo schermo) il popover,
// se restasse ancorato al link, potrebbe uscire dal viewport in orizzontale
// (link vicino al bordo + box da 320px) e forzare lo scroll orizzontale della
// pagina: qui diventa un box fisso centrato rispetto allo schermo, largo
// quanto il viewport meno i margini. Il breakpoint deve seguire quello della
// colonna del contenuto (col-lg-9 in programma.twig).
@media (max-width: 991.98px) {

	body {

		#programma {

			// I popover sono sempre "display:flex" (mai display:none, solo
			// opacity:0 quando chiusi) e restano centrati sul rispettivo link
			// finche' il JS non li riposiziona all'apertura: quelli vicino al
			// bordo sforerebbero comunque lo schermo anche da chiusi/invisibili,
			// allargando il viewport mobile stesso (che si adatta al contenuto
			// piu' largo). L'overflow-x qui li ritaglia invece di lasciarli
			// sforare: quello aperto, riposizionato via JS dentro lo schermo,
			// non viene toccato.
			overflow-x: hidden;

			.relatore-popover-wrapper {

				.relatore-popover {
					// Resta "position: absolute" (scorre con la pagina, non fixed):
					// solo la larghezza massima cambia, cosi' non sfora il bordo
					// dello schermo. La posizione orizzontale esatta (left/transform)
					// viene invece calcolata e impostata via JS al momento
					// dell'apertura (vedi scripts.js), perche' in CSS puro non si
					// puo' sapere quanto e' vicino al bordo il link toccato.
					max-width: calc(100vw - 2rem);
				}//.relatore-popover

			}//.relatore-popover-wrapper

		} //#programma

	} //body

} //@media (max-width: 991.98px)