/* =====================================================================
   MAVIS PORTFOLIO — front-end
   Prefisso: .mvf-pf
   Palette Mavis: crema #f3ede1 · dark #2b2b26 · verde #2e362c
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=EB+Garamond:wght@400;500;600&display=swap');

/* ---------- VARIABILI ---------- */
.mvf-pf,
.mvf-pf-lightbox {
	--mvf-cream: #f3ede1;
	--mvf-dark: #2b2b26;
	--mvf-green: #2e362c;
	--mvf-head: 'Playfair Display', Georgia, serif;
	--mvf-body: 'EB Garamond', Georgia, serif;
	--mvf-pf-gap: 40px;
}

/* ---------- RESET SCOPED ---------- */
.mvf-pf,
.mvf-pf * {
	box-sizing: border-box !important;
}

.mvf-pf *:not(template) {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	float: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
}

/* ---------- CONTENITORE ---------- */
.mvf-pf {
	display: flex !important;
	flex-direction: column !important;
	gap: var(--mvf-pf-gap) !important;
	width: 100% !important;
	max-width: 100% !important;
	overflow-x: clip !important;
	font-family: var(--mvf-body) !important;
	background: transparent !important;
	-webkit-font-smoothing: antialiased;
}

.mvf-pf--full {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

/* ---------- CARD ---------- */
.mvf-pf .mvf-pf-card {
	position: relative !important;
	width: 100% !important;
	max-width: 100% !important;
	background: var(--mvf-dark) !important;
}

/* reveal on scroll (attivato solo via JS) */
.mvf-pf--reveal .mvf-pf-card {
	opacity: 0 !important;
	transform: translateY(26px) !important;
	transition: opacity .8s ease, transform .8s ease !important;
}

.mvf-pf--reveal .mvf-pf-card.is-visible {
	opacity: 1 !important;
	transform: translateY(0) !important;
}

/* ---------- MEDIA ---------- */
.mvf-pf .mvf-pf-media {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	height: clamp(360px, 29vw, 560px) !important;
	overflow: hidden !important;
	background: var(--mvf-green) !important;
}

.mvf-pf .mvf-pf-media.mvf-pf-trigger {
	cursor: pointer !important;
}

.mvf-pf .mvf-pf-media:focus-visible {
	outline: 2px solid var(--mvf-cream) !important;
	outline-offset: -6px !important;
}

.mvf-pf .mvf-pf-img {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	object-position: center !important;
	transform: scale(1) !important;
	transition: transform 1.2s cubic-bezier(.22, .61, .36, 1) !important;
}

.mvf-pf .mvf-pf-media.mvf-pf-trigger:hover .mvf-pf-img {
	transform: scale(1.045) !important;
}

.mvf-pf .mvf-pf-shade {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	background: linear-gradient(180deg, rgba(43, 43, 38, .10) 0%, rgba(43, 43, 38, 0) 38%, rgba(43, 43, 38, .48) 100%) !important;
	pointer-events: none !important;
}

/* ---------- PLAY ---------- */
.mvf-pf .mvf-pf-play {
	position: absolute !important;
	left: 6% !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: clamp(92px, 9vw, 168px) !important;
	height: clamp(92px, 9vw, 168px) !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, .80) !important;
	backdrop-filter: blur(2px) !important;
	-webkit-backdrop-filter: blur(2px) !important;
	transition: background .35s ease, transform .35s ease !important;
	pointer-events: none !important;
	z-index: 2 !important;
}

.mvf-pf .mvf-pf-play svg {
	width: 38% !important;
	height: 38% !important;
	display: block !important;
	fill: var(--mvf-dark) !important;
	opacity: .78 !important;
	margin-left: 6% !important;
}

.mvf-pf .mvf-pf-media.mvf-pf-trigger:hover .mvf-pf-play {
	background: rgba(255, 255, 255, .95) !important;
	transform: translateY(-50%) scale(1.06) !important;
}

/* ---------- CAPTION ---------- */
.mvf-pf .mvf-pf-caption {
	position: absolute !important;
	left: 6% !important;
	bottom: 9% !important;
	max-width: 60% !important;
	text-align: left !important;
	z-index: 2 !important;
	pointer-events: none !important;
}

.mvf-pf .mvf-pf-title {
	font-family: var(--mvf-head) !important;
	font-weight: 700 !important;
	font-size: clamp(26px, 2.5vw, 46px) !important;
	line-height: 1.1 !important;
	letter-spacing: .2px !important;
	color: #fff !important;
	text-transform: none !important;
}

.mvf-pf .mvf-pf-sub {
	font-family: var(--mvf-head) !important;
	font-weight: 600 !important;
	font-size: clamp(14px, 1.05vw, 20px) !important;
	line-height: 1.4 !important;
	letter-spacing: .6px !important;
	color: rgba(255, 255, 255, .92) !important;
	margin-top: 6px !important;
	padding-left: 4px !important;
}

/* ---------- CTA ---------- */
.mvf-pf .mvf-pf-cta {
	position: absolute !important;
	right: 6% !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: min(400px, 26vw) !important;
	padding: 20px 42px !important;
	background: rgba(43, 43, 38, .58) !important;
	color: #fff !important;
	font-family: var(--mvf-head) !important;
	font-weight: 500 !important;
	font-size: clamp(16px, 1.15vw, 22px) !important;
	letter-spacing: .4px !important;
	line-height: 1.2 !important;
	text-align: center !important;
	text-decoration: none !important;
	cursor: pointer !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	border-radius: 0 !important;
	transition: background .35s ease, color .35s ease !important;
	z-index: 3 !important;
}

.mvf-pf .mvf-pf-cta:hover,
.mvf-pf .mvf-pf-cta:focus {
	background: rgba(43, 43, 38, .88) !important;
	color: var(--mvf-cream) !important;
	text-decoration: none !important;
}

.mvf-pf .mvf-pf-cta:focus-visible {
	outline: 2px solid var(--mvf-cream) !important;
	outline-offset: 3px !important;
}

/* =====================================================================
   TABLET
   ===================================================================== */
@media (max-width: 1024px) {

	.mvf-pf .mvf-pf-media {
		height: clamp(320px, 42vw, 440px) !important;
	}

	.mvf-pf .mvf-pf-cta {
		min-width: 260px !important;
		padding: 16px 28px !important;
	}

	.mvf-pf .mvf-pf-caption {
		max-width: 46% !important;
	}
}

/* =====================================================================
   MOBILE
   ===================================================================== */
@media (max-width: 768px) {

	.mvf-pf {
		--mvf-pf-gap: 26px;
	}

	.mvf-pf .mvf-pf-media {
		height: auto !important;
		aspect-ratio: 3 / 4 !important;
	}

	.mvf-pf .mvf-pf-play {
		left: 50% !important;
		top: 46% !important;
		transform: translate(-50%, -50%) !important;
		width: clamp(78px, 26vw, 120px) !important;
		height: clamp(78px, 26vw, 120px) !important;
	}

	.mvf-pf .mvf-pf-media.mvf-pf-trigger:hover .mvf-pf-play {
		transform: translate(-50%, -50%) scale(1.06) !important;
	}

	.mvf-pf .mvf-pf-caption {
		left: 0 !important;
		right: 0 !important;
		bottom: 8% !important;
		max-width: 100% !important;
		padding: 0 18px !important;
		text-align: center !important;
	}

	.mvf-pf .mvf-pf-title {
		font-size: clamp(24px, 7vw, 34px) !important;
	}

	.mvf-pf .mvf-pf-sub {
		font-size: clamp(14px, 4vw, 18px) !important;
		padding-left: 0 !important;
	}

	.mvf-pf .mvf-pf-cta {
		position: static !important;
		transform: none !important;
		display: block !important;
		width: 100% !important;
		min-width: 0 !important;
		padding: 16px 20px !important;
		font-size: 18px !important;
		background: rgba(43, 43, 38, .72) !important;
	}
}

/* =====================================================================
   LIGHTBOX
   ===================================================================== */
.mvf-pf-lightbox {
	position: fixed !important;
	inset: 0 !important;
	z-index: 999999 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 4vh 4vw !important;
	background: rgba(24, 24, 21, .94) !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transition: opacity .3s ease, visibility .3s ease !important;
}

.mvf-pf-lightbox.is-open {
	opacity: 1 !important;
	visibility: visible !important;
}

.mvf-pf-lightbox[hidden] {
	display: none !important;
}

.mvf-pf-lb-inner {
	position: relative !important;
	width: min(1180px, 100%) !important;
	max-height: 92vh !important;
	/* Nessun transform: su iOS crea un layer di composizione
	   che impedisce il rendering del video dentro l'iframe. */
	transform: none !important;
	-webkit-transform: none !important;
	opacity: .001 !important;
	transition: opacity .3s ease !important;
}

.mvf-pf-lightbox.is-open .mvf-pf-lb-inner {
	opacity: 1 !important;
}

.mvf-pf-lb-frame {
	position: relative !important;
	width: 100% !important;
	aspect-ratio: 16 / 9 !important;
	background: #000 !important;
	overflow: hidden !important;
	-webkit-overflow-scrolling: touch !important;
}

/* il wrapper responsive dell'embed riempie il riquadro gia' dimensionato */
.mvf-pf-lb-frame > div {
	position: absolute !important;
	inset: 0 !important;
	padding-top: 0 !important;
	margin: 0 !important;
}

.mvf-pf-lb-frame iframe {
	border: 0 !important;
	display: block !important;
	/* Fix storico iOS: Safari ignora width/height dell'iframe
	   e usa la dimensione del contenuto. */
	width: 1px !important;
	min-width: 100% !important;
	height: 1px !important;
	min-height: 100% !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
}

/* apertura istantanea su mobile: nessuna transizione sugli antenati dell'iframe */
.mvf-pf-lightbox.mvf-pf-instant,
.mvf-pf-lightbox.mvf-pf-instant .mvf-pf-lb-inner {
	transition: none !important;
}

.mvf-pf-lb-close {
	position: absolute !important;
	top: -46px !important;
	right: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 38px !important;
	height: 38px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: #f3ede1 !important;
	font-family: 'Playfair Display', Georgia, serif !important;
	font-size: 30px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	transition: transform .3s ease, opacity .3s ease !important;
	opacity: .85 !important;
}

.mvf-pf-lb-close:hover {
	opacity: 1 !important;
	transform: rotate(90deg) !important;
	background: transparent !important;
}

.mvf-pf-lb-close:focus-visible {
	outline: 2px solid #f3ede1 !important;
	outline-offset: 2px !important;
}

body.mvf-pf-lock {
	overflow: hidden !important;
}

@media (max-width: 768px) {

	.mvf-pf-lightbox {
		padding: 0 16px !important;
	}

	.mvf-pf-lb-close {
		top: -44px !important;
		right: -4px !important;
	}
}

@media (prefers-reduced-motion: reduce) {

	.mvf-pf .mvf-pf-img,
	.mvf-pf .mvf-pf-play,
	.mvf-pf .mvf-pf-cta,
	.mvf-pf .mvf-pf-card,
	.mvf-pf-lb-inner {
		transition: none !important;
	}}