/* ============================================================
   MM Cimitero Virtuale — Frontend styles
   Usa le variabili CSS di Bootstrap già caricate dal tema.
   ============================================================ */

/* --- Griglia archivio --- */
.mm-memorial-grid .mm-card {
	border: 1px solid rgba(0, 0, 0, .08);
	transition: box-shadow .2s ease, transform .2s ease;
}
.mm-memorial-grid .mm-card:hover {
	box-shadow: 0 4px 16px rgba(26, 46, 74, .15);
	transform: translateY(-2px);
}
.mm-card__thumb img,
.mm-card__thumb .mm-card__placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mm-card__placeholder {
	min-height: 120px;
}


/* ============================================================
   PAGINA SINGOLA — layout hero 2 colonne
   ============================================================ */

.mm-single__info {
	font-size: 1rem;
}

.mm-single__name {
	color: #1a2e4a;
}

.mm-single__dates {
	font-size: 1.1rem;
	color: #4a4a52;
	letter-spacing: .02em;
}

.mm-single__dates-sep {
	color: #aaa;
}

.mm-single__testo-body {
	font-size: 1.05rem;
	line-height: 1.75;
	color: #4a4a52;
}


/* ============================================================
   SLIDER
   ============================================================ */

/* Wrapper carousel: aspect-ratio fisso per evitare layout shift */
.mm-slider {
	border-radius: .5rem;
	overflow: hidden;
	background: #1a1a1a;
	position: relative;
}

/* Immagine del carousel: riempie il wrapper con aspect ratio 4/3 */
.mm-slider .carousel-inner {
	aspect-ratio: 1 / 1;
}

.mm-slider .carousel-inner .carousel-item {
	height: 100%;
}

.mm-slider__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Ombra sui controlli per leggibilità su sfondi chiari */
.mm-slider .carousel-control-prev,
.mm-slider .carousel-control-next {
	width: 10%;
	opacity: .8;
}
.mm-slider .carousel-control-prev:hover,
.mm-slider .carousel-control-next:hover {
	opacity: 1;
}

/* Indicatori posizione in basso */
.mm-slider .carousel-indicators [data-bs-slide-to] {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: none;
}

/* Icona zoom sull'hover del trigger lightbox */
.mm-slider .carousel-item a {
	display: block;
	position: relative;
	cursor: zoom-in;
	height: 100%;
}

.mm-slider__zoom-icon {
	position: absolute;
	bottom: .6rem;
	right: .6rem;
	font-size: 1.1rem;
	color: #fff;
	background: rgba(0, 0, 0, .45);
	border-radius: .3rem;
	padding: .15rem .35rem;
	line-height: 1;
	pointer-events: none;
	opacity: 0;
	transition: opacity .2s;
}
.mm-slider .carousel-item a:hover .mm-slider__zoom-icon,
.mm-slider .carousel-item a:focus .mm-slider__zoom-icon {
	opacity: 1;
}

/* Stato vuoto (nessuna immagine) */
.mm-slider__empty {
	aspect-ratio: 4 / 3;
	background: #f0f4f8;
	border-radius: .5rem;
	border: 2px dashed #cdd8e3;
	font-size: .9rem;
}


/* --- Thumbnails strip --- */
.mm-slider__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-top: .5rem;
}

.mm-slider__thumb-btn {
	padding: 0;
	border: 2px solid transparent;
	border-radius: .25rem;
	background: none;
	cursor: pointer;
	transition: border-color .15s, opacity .15s;
	opacity: .6;
	flex-shrink: 0;
}

.mm-slider__thumb-btn:hover {
	opacity: .85;
	border-color: #6b93bc;
}

.mm-slider__thumb-btn.active {
	border-color: #2d5382;
	opacity: 1;
}

.mm-slider__thumb-img {
	display: block;
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: .15rem;
}

/* Su mobile le thumb sono leggermente più piccole */
@media ( max-width: 575.98px ) {
	.mm-slider__thumb-img {
		width: 48px;
		height: 48px;
	}
}


/* ============================================================
   LIGHTBOX
   ============================================================ */

.mm-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, .92);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

/* hidden attribute: Bootstrap potrebbe non applicarlo */
.mm-lightbox[hidden] {
	display: none !important;
}

/* Blocca lo scroll della pagina quando il lightbox è aperto */
body.mm-lightbox-open {
	overflow: hidden;
}

.mm-lightbox__content {
	max-width: 90vw;
	max-height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mm-lightbox__img {
	max-width: 100%;
	max-height: 88vh;
	border-radius: .3rem;
	box-shadow: 0 8px 40px rgba(0, 0, 0, .6);
	object-fit: contain;
	display: block;
}

/* Pulsante chiudi */
.mm-lightbox__close {
	position: fixed;
	top: 1rem;
	right: 1.2rem;
	background: rgba(255, 255, 255, .15);
	border: 1px solid rgba(255, 255, 255, .3);
	color: #fff;
	font-size: 1.2rem;
	line-height: 1;
	border-radius: .3rem;
	padding: .3rem .6rem;
	cursor: pointer;
	transition: background .15s;
	z-index: 1;
}
.mm-lightbox__close:hover {
	background: rgba(255, 255, 255, .3);
}

/* Pulsanti prev / next */
.mm-lightbox__nav {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .25);
	color: #fff;
	font-size: 1.4rem;
	line-height: 1;
	border-radius: .3rem;
	padding: .5rem .75rem;
	cursor: pointer;
	transition: background .15s;
	z-index: 1;
}
.mm-lightbox__nav:hover {
	background: rgba(255, 255, 255, .28);
}
.mm-lightbox__prev { left: 1rem; }
.mm-lightbox__next { right: 1rem; }

/* Su schermi piccoli sposta i nav in basso per non coprire l'immagine */
@media ( max-width: 575.98px ) {
	.mm-lightbox__nav {
		top: auto;
		bottom: 1rem;
		transform: none;
		font-size: 1.1rem;
	}
	.mm-lightbox__prev { left: 1rem; }
	.mm-lightbox__next { right: 1rem; }
}


/* ============================================================
   DEDICHE
   ============================================================ */

.mm-dedica {
	border-left: 3px solid #2d5382;
}
.mm-dedica__foto img {
	max-width: 100%;
	height: auto;
	border-radius: .25rem;
}

/* Form dediche */
.mm-dediche__form {
	background: #f8fafc;
	border-radius: .5rem;
	padding: 1.5rem;
	border: 1px solid #e8f0f8;
	position: sticky;
	top: 1.5rem; /* rimane visibile durante lo scroll della lista */
}

/* Su mobile il form sticky non ha senso */
@media ( max-width: 991.98px ) {
	.mm-dediche__form {
		position: static;
	}
}


/* ============================================================
   RICERCA ARCHIVIO
   ============================================================ */

.mm-search-form .form-control:focus {
	border-color: #2d5382;
	box-shadow: 0 0 0 .2rem rgba(45, 83, 130, .25);
}


/* ============================================================
   HONEYPOT — sempre nascosto
   ============================================================ */

input[name="mm_hp_field"] {
	display: none !important;
}


/* ============================================================
   RESPONSIVE — breakpoint riassuntivo
   ============================================================
   Bootstrap gestisce già col-lg-* (≥992px = 2 col, <992px = 1 col).
   Qui aggiungiamo solo le correzioni di spacing/sizing per mobile.
   ============================================================ */

/* Tablet e mobile (< 992px): le 2 colonne del blocco hero diventano
   una sola colonna in ordine: slider → dati → dediche → form */
@media ( max-width: 991.98px ) {
	.mm-single__hero {
		--bs-gutter-y: 1.5rem;
	}

	/* Riduce il padding del form su tablet */
	.mm-dediche__form {
		padding: 1rem;
	}
}

/* Mobile stretto (< 576px) */
@media ( max-width: 575.98px ) {
	.mm-single__name {
		font-size: 1.5rem;
	}

	.mm-dedica__foto img {
		width: 56px;
		height: 56px;
	}
}