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

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

		// Category labels (Direttore scientifico, Moderatori, Relatori)
		.label {
			color: var(--bs-primary);
			font-weight: 700;
			font-size: 1.1rem;
			margin-top: 2rem;
			margin-bottom: 1.5rem;
			padding-bottom: 0.5rem;
			border-bottom: 2px solid var(--bs-gray-300);
		}
		
		// Relatore card
		.relatore-card {
			display: flex;
			margin-bottom: 1.5rem;
			align-items: flex-start;
			
			.relatore-foto-wrapper {
				flex-shrink: 0;
				width: 150px;
				margin-right: 1.5rem;
				
				.relatore-foto {
					width: 100%;
					height: 150px;
					object-fit: cover;
					border-radius: var(--bs-border-radius);
					box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
				}
			}
			
			.relatore-info {
				flex: 1;
				padding-top: 0.5rem;
				
				.relatore-nome {
					color: var(--bs-gray-700);
					font-size: 1.5rem;
					font-weight: 600;
					margin-bottom: 0.5rem;
					line-height: 1.3;
				}
				
				.relatore-mansione,
				.relatore-istituto {
					color: var(--bs-gray-600);
					font-size: 0.95rem;
					line-height: 1.5;
					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 {
		
		
	}
	
}

// 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;
					}
				}
			}
		}
		
	}
	
}