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

body {
	// ===================================
	// SEZIONE RELATORI E MODERATORI
	// ===================================
	
	.relatori-content {
		

		// Category labels (Direttore scientifico, Moderatori, Relatori)
		.label {
			color: var(--bs-gray-600);
			font-weight: 700;
			font-size: 1.4rem;
			margin-top: 2rem;
			margin-bottom: 1.5rem;
			padding-bottom: 0.5rem;
			border-bottom: 2px solid var(--bs-gray-300);
		}
		
		// Relatore card
		// Mobile-first: sotto i 576px la scheda impila foto sopra e dati
		// sotto (border-radius solo in alto); da 576px in su torna
		// affiancata con la foto a sinistra (border-radius solo a
		// sinistra), vedi override piu' in basso.
		.relatore-card {
			display: flex;
			flex-direction: column;
			margin-bottom: 1.5rem;
			align-items: stretch;
			border-radius: calc(var(--bs-border-radius) * 2);
			overflow: hidden;
			background-color: var(--bs-gray-200);
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
			
			.relatore-foto-wrapper {
				flex-shrink: 0;
				width: 100%;
				height: 12em;
				margin-right: 0;
				
				.relatore-foto,
				.relatore-foto-placeholder {
					width: 100%;
					height: 12em;
					object-fit: cover;
					border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
				}
			}
			
			.relatore-info {
				flex: 1;
				padding: 1rem 1.25rem 1.25rem;
				
				.relatore-nome {
					color: var(--bs-gray-600);
					font-size: 2.5rem;
					font-weight: 600;
					margin-bottom: 0.5rem;
					margin-right: 0.5rem;
					line-height: 1.3;
				}
				
				.relatore-mansione,
				.relatore-istituto {
					color: var(--bs-gray-600);
					font-size: 1.3rem;
					line-height: 1.5;
					margin-right: 1.5rem;
					margin-bottom: 0.3rem;
				}
				
				.relatore-mansione {
					font-style: italic;
				}
			}
		}
		
		// Placeholder for missing photo
		.relatore-foto-placeholder {
			width: 150px;
			height: 150px;
			background-color: var(--bs-gray-300);
			border-radius: var(--bs-border-radius);
			display: flex;
			align-items: center;
			justify-content: center;
			
			&::before {
				content: "👤";
				font-size: 4rem;
				opacity: 0.3;
			}
		}
	}


} // body

// ===================================
// RESPONSIVE BREAKPOINTS
// ===================================

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) {
	
	body {
		
		.relatori-content {
			
			.relatore-card {
				flex-direction: row;
				align-items: flex-start;
				
				.relatore-foto-wrapper {
					width: 10em;
					height: 10em;
					margin-right: 1.5rem;
					
					.relatore-foto,
					.relatore-foto-placeholder {
						height: 10em;
						border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius);
					}
				}
				
				.relatore-info {
					padding: 1.25rem 0 0 0;
				}
			}
		}
	}

}

// Solo nella fascia 576-767px: la foto affiancata (10em) lascia poco spazio
// ai testi, che con le dimensioni "mobile" (pensate per la colonna intera)
// spaginano la card. Ridotti del 20% solo qui, non oltre i 768px dove la
// card ha gia' piu' respiro.
@media (min-width: 576px) and (max-width: 767.98px) {

	body {

		.relatori-content {

			.relatore-card {

				.relatore-info {

					.relatore-nome {
						font-size: 2rem; // 2.5rem * 0.8
					}

					.relatore-mansione,
					.relatore-istituto {
						font-size: 1.04rem; // 1.3rem * 0.8
					}
				}
			}
		}
	}

}

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) {
	
	body {
		
		#relatori-content {
			
			.relatore-card {
				.relatore-foto-wrapper {
					width: 200px;
					
					.relatore-foto {
						height: 200px;
					}
				}
				
				.relatore-info {
					.relatore-nome {
						font-size: 1.75rem;
					}
				}
			}
		}
		
	}
	
}

// Large devices (desktops, 992px and up)
@media (min-width: 992px) {
	
	body {
		
		#relatori-content {
			.relatore-card {
				.relatore-info {
					.relatore-nome {
						font-size: 2rem;
					}
					
					.relatore-mansione,
					.relatore-istituto {
						font-size: 1rem;
					}
				}
			}
		}
		
	}
	
}