/* ============================================================
   site_clean.css
   Stili estratti dagli attributi style="..." inline di index.html
   + Override layout (deco-mask-sx, title_upsx, col2-mask, p, h4)
   + Media query responsive 6 breakpoint su device target

   Caricato per ultimo nell'head per avere precedenza sul cascading.
   ============================================================ */


/* ============================================================
   PARTE 1 — Classi estratte dagli inline styles
   ============================================================ */

/* ===== Slide Istruzioni (pagina 0/1) ===== */

/* Icona "istruzioni" in alto a destra sulla slide home */
.instruction-icon {
	position: absolute;
	top: 30px;
	right: 48px;
	border: 0;
}

/* Le 4 tab illustrative della slide Istruzioni */
.istruzioni-tab-01 {
	position: absolute;
	top: 4%;
	left: 20%;
	border: 0;
}
.istruzioni-tab-02 {
	position: absolute;
	top: 27%;
	left: 10px;
	border: 0;
}
.istruzioni-tab-03 {
	position: absolute;
	bottom: 30px;
	left: 5%;
	border: 0;
}
.istruzioni-tab-09 {
	position: absolute;
	bottom: 30px;
	right: 2%;
	border: 0;
}

/* ===== Sottopagine "I Numeri" e "CV Metro" (verticali di About Me) ===== */

/* Modificatore: centra il contenuto dentro un col2-mask.
   Usato nelle slide Numeri e CV Metro. Non tocca l'uso standard
   di #col2-mask nelle altre sezioni. */
#col2-mask.col2-mask--center,
.col2-mask--center {
	text-align: center;
}

/* Sottotitolo introduttivo delle sottopagine */
.sub-title {
	font-size: 0.7em;
	margin-bottom: 20px;
}

/* Variante più compatta (usata nella CV Metro) */
.sub-title--compact {
	font-size: 0.7em;
	margin-bottom: 15px;
}

/* Didascalia piccola sotto all'immagine */
.sub-caption {
	font-size: 0.55em;
	color: #888;
	margin-top: 15px;
	font-style: italic;
}

/* Variante ancora più piccola (usata nella CV Metro) */
.sub-caption--small {
	font-size: 0.5em;
	color: #888;
	margin-top: 10px;
	font-style: italic;
}

/* Immagine del catalogo mostrata nelle sottopagine */
.catalog-image {
	max-width: 95%;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Variante "CV Metro": full-width e cliccabile per zoom */
.catalog-image--full {
	max-width: 100%;
	height: auto;
	cursor: zoom-in;
	border-radius: 4px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* ===== Slide Contatti ===== */

/* Foto "foto_io.png" posizionata in alto a destra nella slide contatti */
.contatti-foto {
	position: absolute;
	top: 30px;
	right: 30px;
	border: 0;
}


/* ============================================================
   PARTE 2 — Override layout (desktop standard 1367-1920px)
   Applicati dopo reveal.min.css per il cascading.
   ============================================================ */

/* --- #deco-mask-sx: allargato a 65vw (era 58%) --- */
.reveal .slides > section #deco-mask-sx {
	width: 65vw;
}

/* --- #col2-mask: si adatta al nuovo deco-mask-sx --- */
.reveal .slides > section #col2-mask {
	width: 90%;
	left: 5%;
	top: 8vh;
	background-color: none;
}

/* --- #title_upsx: dimensioni baseline per desktop standard
       (screenshot di riferimento 11.19.05 con proporzioni perfette).
       z-index alto per stare sopra deco-mask-sx --- */
.reveal .slides > section #title_upsx {
	width: 30vW;              /* era 65% */
	height: 150px;
	 /*background-color: red;           era 180px */
	z-index: 100;
}

.reveal .slides > section #title_upsx h1,
.reveal .slides > section #title_upsx h1-w {
	font-size: 2.4em;        /* era 3.6em */
	right: 134px;            /* era 200px 
	background-color: green;  */
}

.reveal .slides > section #title_upsx h2 {
	font-size: 1.4em;        /* era 2.1em */
	right: 149px;            /* era 223px 
	background-color: orange;  */
}

.reveal .slides > section #title_upsx img {
	top:15px;
	width: 130px;            /* era 165px */
	right: 18px;             /* era 27px 
	background-color: cyan;  */
}


/* --- Titoli servizi (h4): margin bottom maggiore per staccarli
       dal paragrafo sottostante, più display:block+clear:both per
       forzare il <p> successivo ad andare su nuova riga --- */
.reveal .slides > section h4 {
	position: relative;
	font-size: 1.5em;
	margin-top: 10px;       /* era 0.8em, più spazio sopra */
	bottom: 20px;      /* era 0.2em, più spazio sotto */
	color: #fff;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	display: block;          /* il <h4> occupa tutta la riga */
	clear: both;             /* nessun elemento a fianco */
	background-color: none;
}

/* --- Testi dei contenuti: ingrandimento per lettura a monitor,
	allineamento a sinistra invece di justify (che crea gli
	spazi enormi tra parole quando il container è largo) --- */
.reveal .slides > section p {
	position: relative;
	font-size: 0.85em;          /* era 0.7em */
	top: 20px;
	bottom:40px;;
	line-height: 1.1em;      /* era 1.2em */
	text-align: left;        /* era justify */
	background-color: none;
}


/* Il <p> immediatamente dopo un <h4> non deve risalire */
.reveal .slides > section #col2-mask h4
.reveal .slides > section #col2-mask p {
	top: -50px;
	clear: both;
}


/* ============================================================
   PARTE 3 — Responsive: 6 breakpoint normalizzati
   - 4K/UHD:           >= 2561px
   - 2K/QHD:      1921-2560px
   - Desktop:     1367-1920px  (default, regole Parte 2 sopra)
   - Tablet landsc: 1025-1366px
   - Tablet portr:  769-1024px  (nasconde foto+"mauro mazzetto")
   - Mobile L:      431-768px   (nasconde foto+"mauro mazzetto")
   - Mobile S:          <= 430px (nasconde foto+"mauro mazzetto")

   Logica:
   - Nome brand (<h1>) SEMPRE visibile
   - Foto (<img>) e "mauro mazzetto" (<h2>) hidden sotto 1024px
   - deco-mask-sx a 100vw quando title_upsx è ridotto/nascosto
   ============================================================ */

/* ===== 4K / UHD (>= 2561px) - title_upsx ingrandito ===== */
@media screen and (min-width: 2561px) {
	.reveal .slides > section #title_upsx {
		height: 220px;
	}
	.reveal .slides > section #title_upsx h1,
	.reveal .slides > section #title_upsx h1-w {
		font-size: 4.5em;
		right: 250px;
	}
	.reveal .slides > section #title_upsx h2 {
		font-size: 2.6em;
		right: 280px;
	}
	.reveal .slides > section #title_upsx img {
		width: 210px;
		right: 35px;
	}
	.reveal .slides > section h4 {
		position: relative;
		font-size: 1.8em;
		margin-top: 10px;       /* era 0.8em, più spazio sopra */
		bottom: 20px;      /* era 0.2em, più spazio sotto */
		color: #fff;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.02em;
		display: block;          /* il <h4> occupa tutta la riga */
		clear: both;             /* nessun elemento a fianco */
		background-color: none;
	}

	/* --- Testi dei contenuti: ingrandimento per lettura a monitor,
		allineamento a sinistra invece di justify (che crea gli
		spazi enormi tra parole quando il container è largo) --- */
	.reveal .slides > section p {
		position: relative;
		font-size: 1.1em;          /* era 0.7em */
		top: 20px;
		bottom:40px;;
		line-height: 1.2em;      /* era 1.2em */
		text-align: left;        /* era justify */
		background-color: none;
	}

}

/* ===== 2K / QHD (1921-2560px) - title_upsx ingrandito ===== */
@media screen and (min-width: 1921px) and (max-width: 2560px) {
	.reveal .slides > section #deco-mask-sx {
		width: 70vw;
	}
	.reveal .slides > section #title_upsx {
		height: 160px;
	}
	.reveal .slides > section #title_upsx h1,
	.reveal .slides > section #title_upsx h1-w {
		font-size: 3.2em;
		right: 180px;
	}
	.reveal .slides > section #title_upsx h2 {
		font-size: 1.9em;
		right: 200px;
	}
	.reveal .slides > section #title_upsx img {
		width: 150px;
		right: 24px;
	}

}

/* ===== Tablet landscape (1025-1366px) - title_upsx visibile,
         leggermente scalato per lo schermo più stretto ===== */
@media screen and (min-width: 1025px) and (max-width: 1366px) {
	.reveal .slides > section #deco-mask-sx {
		width: 62vw;
	}
	.reveal .slides > section #title_upsx {
		width: 50%;
	}
	.reveal .slides > section #title_upsx h2 {
		font-size: 1.5em;
		background-color: none;
	}
	.reveal .slides > section h4 {
		position: relative;
		font-size: 1.5em;
		margin-top: 10px;       /* era 0.8em, più spazio sopra */
		bottom: 20px;      /* era 0.2em, più spazio sotto */
		color: #fff;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.02em;
		display: block;          /* il <h4> occupa tutta la riga */
		clear: both;             /* nessun elemento a fianco */
		background-color: none;
	}

	/* --- Testi dei contenuti: ingrandimento per lettura a monitor,
		allineamento a sinistra invece di justify (che crea gli
		spazi enormi tra parole quando il container è largo) --- */
	.reveal .slides > section p {
		position: relative;
		font-size: 0.82em;          /* era 0.7em */
		top: 20px;
		bottom:40px;;
		line-height: 0.85em;      /* era 1.2em */
		text-align: left;        /* era justify */
		background-color: none;
	}
}

/* ===== Tablet portrait (<= 1024px) - foto+nome HIDDEN ===== */
@media screen and (max-width: 1024px) {
	.reveal .slides > section #title_upsx h1,
	.reveal .slides > section #title_upsx h1-w {
		margin-top: 0;
		top: 8px;
		font-size: 1.5em;
		right: 30px;
		background-color: none;
	}
	.reveal .slides > section #title_upsx h2,
	.reveal .slides > section #title_upsx img {
		display: none;
	}
	.reveal .slides > section #deco-mask-sx {
		width: 100vw;
		margin-top: 10vh;
		background-color: none;
	}
	.reveal .slides > section #col2-mask {
		width: 94%;
		left: 3%;
		top: 10px;
	}
	.reveal .slides > section h4 {
		position: relative;
		font-size: 1.8em;
		margin-top: o0px;       /* era 0.8em, più spazio sopra */
		bottom: 20px;      /* era 0.2em, più spazio sotto */
		color: #fff;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.02em;
		display: block;          /* il <h4> occupa tutta la riga */
		clear: both;             /* nessun elemento a fianco */
		background-color: none;
	}

	/* --- Testi dei contenuti: ingrandimento per lettura a monitor,
		allineamento a sinistra invece di justify (che crea gli
		spazi enormi tra parole quando il container è largo) --- */
	.reveal .slides > section p {
		position: relative;
		font-size: 1.1em;          /* era 0.7em */
		top: 20px;
		bottom:40px;;
		line-height: 1.0em;      /* era 1.2em */
		text-align: left;        /* era justify */
		background-color: none;
	}
}

@media screen and (max-width: 860px) {
	.reveal .slides > section #deco-mask-sx {
		width: 100vw;
		margin-top: 0vh;
		background-color: none;
	}
}

/* ===== Mobile L (<= 768px) ===== */
@media screen and (max-width: 768px) {
	.reveal .slides > section #title_upsx h1,
	.reveal .slides > section #title_upsx h1-w {
		margin-top: 0;
		top: 8px;
		width: 33vw;
		font-size: 1.5em;
		right: 30px;
		background-color: none;
	}
	.reveal .slides > section #title_upsx h2,
	.reveal .slides > section #title_upsx img {
		display: none;
	}
	.reveal .slides > section #deco-mask-sx {
		width: 100vw;
		margin-top: 0vh;
		background-color: none;
	}
	.reveal .slides > section #col2-mask {
		width: 94%;
		left: 6%;
	}
	.reveal .slides > section h4 {
		font-size: 1.25em;
		margin:  10px 0 5px 0;
		padding: 0px 0 0 0;
		bottom: 0px;
		background-color: none;
	}
	.reveal .slides > section p {
		font-size: 0.9em;
		line-height: 1em;
		padding: 5px 0 5px 0;
		background-color: none;
	}
}

/* ===== Mobile S (<= 430px) ===== */
@media screen and (max-width: 430px) {
	.reveal .slides > section #title_upsx h1,
	.reveal .slides > section #title_upsx h1-w {
		right: 15px;
	}
	.reveal .slides > section #title_upsx h2,
	.reveal .slides > section #title_upsx img {
		display: none;
	}
	.reveal .slides > section #deco-mask-sx {
		width: 100vw;
	}
	.reveal .slides > section #col2-mask {
		width: 96%;
		left: 2%;
		top: 4%;
	}
	.reveal .slides > section h4 {
		position: relative;
		font-size: 1.5em;
		margin-top: 10px;       /* era 0.8em, più spazio sopra */
		bottom: 10px;      /* era 0.2em, più spazio sotto */
		color: #fff;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.02em;
		display: block;          /* il <h4> occupa tutta la riga */
		clear: both;             /* nessun elemento a fianco */
		background-color: none;
	}

	/* --- Testi dei contenuti: ingrandimento per lettura a monitor,
		allineamento a sinistra invece di justify (che crea gli
		spazi enormi tra parole quando il container è largo) --- */
	.reveal .slides > section p {
		position: relative;
		font-size: 0.9em;          /* era 0.7em */
		top: 20px;
		bottom:40px;;
		line-height: 0.7em;      /* era 1.2em */
		text-align: left;        /* era justify */
		background-color: none;
	}
}