@charset "utf-8";
/* Smartphone e tablet in verticale (caricato solo sotto i 960px di larghezza) */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
	font-size: 16px;
	line-height: 1.55;
	background: #fff;
}

*, *::before, *::after { box-sizing: border-box; }

img { max-width: 100%; height: auto; }

h1 { font-size: 21px; line-height: 1.25; }
h2 { font-size: 17px; line-height: 1.3; }

/* Tutti i contenitori a larghezza fissa diventano fluidi */
#contenitore, #top, #main-menu, #sub-menu, #sub-menu div, #immagine,
#testimonials-box, #main-content-area, #contenuto, #btn, #btn a,
#boxes, #box1, #box2, #box3, #secondary-content, #sub-nav, #pic,
#footer, #left, #right, #subfooter,
.row, .blocco-cv, .titolo, .modulotitolo, .modulobox {
	width: auto !important;
	max-width: 100%;
	height: auto;
	float: none;
	display: block;
}

#contenitore [style*="width"] {
	width: auto !important;
	max-width: 100% !important;
	height: auto !important;
	float: none !important;
}

table { max-width: 100%; display: block; overflow-x: auto; }

/* Menu principale: voci a tutta larghezza, facili da toccare */
#main-menu {
	background: #222;
	display: block;
}
#main-menu ul { display: flex; flex-wrap: wrap; }
#main-menu li { float: none; margin: 0; flex: 1 1 auto; }
#main-menu li a {
	height: auto;
	min-height: 44px;
	padding: 11px 14px;
	font-size: 16px;
	text-align: center;
	margin: 0;
	border-right: 1px solid #383838;
	border-bottom: 1px solid #383838;
}

/* Sottomenu: mostra solo quello della sezione corrente, sotto il menu */
#sub-menu { position: static; }
#sub-menu div {
	position: static;
	display: none;
	padding: 4px 6px;
	font-size: 15px;
	background-image: none;
}
#sub-menu div[style*="visible"] { display: block; }
#sub-menu div ul { margin: 0; display: flex; flex-wrap: wrap; align-items: center; }
#sub-menu div li {
	float: none;
	height: auto;
	padding: 0 2px;
	margin: 0;
}
#sub-menu div li a {
	float: none;
	height: auto;
	display: block;
	padding: 10px 6px;
	min-height: 44px;
}

/* Logo */
#logo {
	position: static;
	width: 100% !important;
	height: 75px;
	background-position: center;
	border-bottom: 1px solid #ddd;
}
#logo a { display: block; text-align: center; }

/* Immagine di testata */
#immagine {
	aspect-ratio: 704 / 213;
	min-height: 150px;
	background-size: cover !important;
	background-position: center !important;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 10px 14px;
	position: relative;
}
#immagine::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(0,0,0,0) 35%, rgba(0,0,0,.7));
}
#immagine h1, #immagine h2 {
	position: relative;
	z-index: 1;
	margin: 0;
	color: #fff !important;
	text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
#immagine h1 { font-size: 17px; }
#immagine h2 { font-size: 15px; }

/* Citazione */
#testimonials-box {
	background: #3a3a3a;
	padding: 16px;
	font-size: 16px;
	text-align: center;
}
#testimonials-box br + br { display: none; }

/* Contenuto */
#contenuto {
	padding: 16px;
	border-left: 0;
	overflow: visible;
}
#contenuto p { margin: 0 0 14px; }
#contenuto ul { margin: 0 0 14px 20px; }

#btn { border-left: 0; margin: 0 0 16px; }
#btn a {
	background: #2e2e2e;
	font-size: 17px;
	padding: 14px 16px;
	min-height: 48px;
	height: auto;
}
#btn a:hover { background: #444; }

/* Banner "Lavori in corso" / "Dicono di noi" (immagini sprite 701x340) */
#lavori, #dicono {
	width: 100% !important;
	height: auto;
	aspect-ratio: 701 / 170;
	background-size: 100% auto !important;
	margin-bottom: 8px;
}
a#lavori:hover, a#dicono:hover { background-position: 0 0; }

/* Liste di collegamenti (box in home, menu laterali) */
#boxes { border-top: 0; }
#box1, #box2, #box3 { min-height: 0; border-left: 0; margin-bottom: 8px; }
.titolo-sezione a, #sub-nav .titolo-sezione a {
	float: none;
	width: auto;
	text-align: left;
	margin: 16px 0 8px;
	padding: 0 16px;
	font-size: 17px;
}
#box1 ul, #box2 ul, #box3 ul, #sub-nav ul { display: block; }
#box1 li, #box2 li, #box3 li, #sub-nav li { float: none; margin: 0 0 1px; }
#box1 li a, #box2 li a, #box3 li a, #sub-nav li a, #sub-list li a {
	float: none;
	display: block;
	width: auto;
	height: auto;
	min-height: 44px;
	margin: 0;
	padding: 11px 16px;
	text-align: left;
	font-size: 16px;
}

/* Immagini della colonna laterale: due per riga */
#secondary-content { padding: 0 8px; }
#sub-nav, #pic { margin: 0; text-align: center; }
#sub-nav img, #pic img {
	float: none;
	margin: 4px;
	width: calc(50% - 12px);
	display: inline-block;
	vertical-align: top;
}
#pic br, #sub-nav > br { display: none; }

/* Curricula, schede, moduli didattici */
.avatar { float: left; clear: left; width: 80px; margin: 12px 12px 0 0; }
.row { margin: 12px 0; padding: 12px; overflow: hidden; min-height: 80px; }
.titolo { font-size: 17px; margin-bottom: 8px; }
.small-btn { margin: 8px 12px 8px 0; font-size: 15px; }
#archeosperiment .row { height: auto; width: auto; float: none; margin: 8px 0; }
.modulo { position: static; }
.modulotitolo, .modulobox { float: none; height: auto; }

/* Piè di pagina */
#footer {
	margin-top: 24px;
	padding: 20px 16px 24px;
	font-size: 14px;
	line-height: 1.6;
}
#left, #right { padding: 0; margin-bottom: 12px; }
#subfooter {
	height: auto;
	padding: 10px 16px;
	font-size: 13px;
	color: #222;
}

/* Tablet: colonna centrata di larghezza leggibile */
@media (min-width: 600px) {
	body { background: #ccc; }
	#contenitore { max-width: 720px !important; margin: 0 auto; }
	#immagine { min-height: 218px; }
}