/**
 * Layout entry: Hero e Inline
 * Sezioni fluide (full-width); sfondo a tutta larghezza; content in container.
 *
 * @package Fullstack
 */

/* Hero: sezione fluida, sfondo occupa tutto lo spazio */
.fullstack-entry-hero {
	position: relative;
	width: 100%;
	min-height: 60vh;
	overflow: hidden;
	background: #f5f5f5;
}
.fullstack-entry-hero-bg {
	position: absolute;
	inset: 0;
}
.fullstack-entry-hero-bg-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.fullstack-entry-hero-bg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Switch video desktop/mobile in base alla viewport */
.fullstack-entry-hero-bg-video-mobile {
	display: none;
}
@media (max-width: 767px) {
	.fullstack-entry-hero-bg-video-desktop {
		display: none;
	}
	.fullstack-entry-hero-bg-video-mobile {
		display: block;
	}
}
.fullstack-entry-hero-overlay {
	position: absolute;
	inset: 0;
}
/* Container overlay: max-width come il resto del sito */
.fullstack-entry-hero-overlay-container {
	position: relative;
	width: 100%;
	height: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1rem;
	box-sizing: border-box;
	display: flex;
	align-items: stretch;
}

/* Modalità colonne: due colonne affiancate */
.fullstack-hero-mode-columns .fullstack-entry-hero-overlay-container {
	align-items: stretch;
}
.fullstack-entry-hero-columns {
	display: flex;
	width: 100%;
}
.fullstack-entry-hero-col {
	flex: 1 1 0;
	display: flex;
}
.fullstack-entry-hero-col-inner {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.fullstack-entry-hero-col-inner.is-empty {
	display: none;
}

/* Su mobile: layout a singola colonna, con colonna 1 sopra colonna 2 */
@media (max-width: 767px) {
	.fullstack-entry-hero-columns {
		flex-direction: column;
	}
	.fullstack-entry-hero-col {
		width: 100%;
	}
}

/* Allineamento verticale delle colonne: la colonna è flex, l'inner segue il contenuto */
.fullstack-hero-col-v-top {
	align-items: flex-start;
}
.fullstack-hero-col-v-center {
	align-items: center;
}
.fullstack-hero-col-v-bottom {
	align-items: flex-end;
}

/* Modalità centrata: blocco unico centrato verticalmente/orizzontalmente */
.fullstack-hero-mode-center .fullstack-entry-hero-overlay-container {
	justify-content: center;
	align-items: center;
}
.fullstack-entry-hero-center {
	max-width: 60ch;
	width: 100%;
}
.fullstack-entry-hero-block {
	max-width: 60ch;
}
.fullstack-entry-hero-title .entry-title {
	margin: 0;
	/* Il colore del testo è gestito dal container (colonna). */
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
h1.entry-title {
    line-height: 45px;
}
.fullstack-entry-hero-excerpt {
	/* Il colore del testo è gestito dal container (colonna). */
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.fullstack-entry-hero--no-image .fullstack-entry-hero-title .entry-title,
.fullstack-entry-hero--no-image .fullstack-entry-hero-excerpt {
	/* Niente override di colore: usa quello del container; solo rimuoviamo l'ombra. */
	text-shadow: none;
}
.fullstack-entry-hero-excerpt .entry-summary {
	margin: 0;
}

/* Inline: sezione fluida, contenuto in container */
.fullstack-entry-inline {
	display: block;
	width: 100%;
	padding: 2rem 0;
}
.fullstack-entry-inline-container {
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1rem;
	box-sizing: border-box;
}
.fullstack-entry-inline .site-main-inner {
	padding-top: 0;
}
.fullstack-entry-inline-image {
	margin-bottom: 1rem;
}
.fullstack-entry-inline-img {
	display: block;
	height: auto;
	max-width: 100%;
}
.fullstack-entry-inline-title .entry-title {
	margin: 0 0 0.5rem;
}
.fullstack-align-left {
	text-align: left;
}
.fullstack-align-center {
	text-align: center;
}
.fullstack-align-right {
	text-align: right;
}
.fullstack-align-center .fullstack-entry-inline-img {
	margin-left: auto;
	margin-right: auto;
}
.fullstack-align-right .fullstack-entry-inline-img {
	margin-left: auto;
}

/* Hero Separator: featured media + section separatore */
.fullstack-entry-hero-separator-media {
	position: relative;
	width: 100%;
	min-height: 50vh;
	overflow: hidden;
	background: #f5f5f5;
}
.fullstack-entry-hero-separator-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.fullstack-entry-hero-separator-img {
	display: block;
	width: 100%;
	height: auto;
	min-height: 50vh;
	object-fit: cover;
	object-position: center;
}

/* Switch video desktop/mobile per hero-separator */
.fullstack-entry-hero-separator-video-mobile {
	display: none;
}
@media (max-width: 767px) {
	.fullstack-entry-hero-separator-video-desktop {
		display: none;
	}
	.fullstack-entry-hero-separator-video-mobile {
		display: block;
	}
}

/* Section separatore */
.fullstack-entry-hero-separator {
	position: relative;
	width: 100%;
	min-height: 30vh;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem 1rem;
	box-sizing: border-box;
}
.fullstack-entry-hero-separator-inner {
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
	z-index: 1;
}
.fullstack-entry-hero-separator-title {
	margin: 0;
	color: #fff;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

@media (max-width: 767px) {
	.fullstack-entry-hero-separator-media {
		min-height: 40vh;
	}
	.fullstack-entry-hero-separator {
		min-height: 25vh;
		padding: 2rem 1rem;
	}
}

/* Immagine hero colonna */
.fullstack-entry-hero-image {
	width: 100%;
}
.fullstack-hero-col-img {
	display: block;
	max-width: 100%;
	height: auto;
}
