/* Reels — facade (click-to-play) + lightbox. No third-party JS until click. */

.reel-strip{
	display:flex;flex-wrap:wrap;gap:1.25rem;justify-content:center;margin-top:1.5rem;
}
/* Sotto i 768px 3 riquadri da 200px non ci stanno affiancati: invece di
   andare a capo (uno sotto l'altro), scorrono in orizzontale come carosello. */
@media(max-width:767px){
	.reel-strip{
		flex-wrap:nowrap;
		justify-content:flex-start;
		overflow-x:auto;
		scroll-snap-type:x mandatory;
		-webkit-overflow-scrolling:touch;
		scrollbar-width:none;
		margin-inline:calc(clamp(1.25rem,5vw,2.5rem) * -1);
		padding-inline:clamp(1.25rem,5vw,2.5rem);
		padding-bottom:.5rem;
	}
	.reel-strip::-webkit-scrollbar{display:none}
	.reel-strip .reel-facade{
		flex:0 0 auto;
		width:42vw;
		scroll-snap-align:start;
	}
}

.reel-facade{
	position:relative;display:block;width:100%;max-width:200px;aspect-ratio:9/16;
	border:none;padding:0;border-radius:14px;overflow:hidden;cursor:pointer;
	background:#2c2415;box-shadow:0 4px 16px rgba(44,36,21,.15);
	transition:transform .25s ease,box-shadow .25s ease;
}
.reel-facade:hover,.reel-facade:focus-visible{transform:translateY(-3px);box-shadow:0 10px 28px rgba(44,36,21,.28)}
.reel-facade:focus-visible{outline:3px solid #d4a853;outline-offset:3px}
.reel-facade__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.reel-facade:hover .reel-facade__img{transform:scale(1.05)}
.reel-facade__img--ph{background:linear-gradient(135deg,#4a6741,#2c2415)}
.reel-facade__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(44,36,21,.78) 0%,rgba(44,36,21,.05) 45%,rgba(44,36,21,.18) 100%)}
.reel-facade__play{
	position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
	width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.92);
	display:flex;align-items:center;justify-content:center;color:#8b5e3c;
	transition:transform .25s ease,background .25s ease;
}
.reel-facade:hover .reel-facade__play{transform:translate(-50%,-50%) scale(1.08);background:#fff}
.reel-facade__play svg{margin-left:3px}
.reel-facade__badge{
	position:absolute;top:.6rem;right:.6rem;display:inline-flex;align-items:center;gap:4px;
	padding:.2rem .55rem;border-radius:9999px;background:rgba(44,36,21,.55);color:#fff;
	font-size:.7rem;font-weight:700;letter-spacing:.04em;backdrop-filter:blur(4px);
}
.reel-facade__badge svg{width:13px;height:13px}
.reel-facade__label{
	position:absolute;left:.75rem;right:.75rem;bottom:.7rem;color:#fff;font-size:.8rem;
	font-weight:700;line-height:1.25;text-align:left;text-shadow:0 1px 4px rgba(0,0,0,.45);
}

/* Variante nello step Fattoria (sotto l'immagine) */
.reel-facade--farm{max-width:230px;margin:1.25rem auto 0}

/* Lightbox modal (creato via JS) */
.fp-reel-modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s ease}
.fp-reel-modal.is-open{opacity:1}
.fp-reel-modal__backdrop{position:absolute;inset:0;background:rgba(44,36,21,.92);cursor:pointer}
.fp-reel-modal__box{position:relative;z-index:1;width:clamp(300px,92vw,400px);height:min(90vh,720px);background:#000;border-radius:14px;overflow:hidden;box-shadow:0 16px 48px rgba(0,0,0,.45)}
.fp-reel-modal__iframe{width:100%;height:100%;border:0;background:#fff;display:block}
.fp-reel-modal__spinner{position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:fpReelSpin .8s linear infinite;z-index:0}
@keyframes fpReelSpin{to{transform:rotate(360deg)}}
.fp-reel-modal__close{position:absolute;top:-3rem;right:0;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:1.7rem;line-height:1;display:flex;align-items:center;justify-content:center;z-index:2;transition:background .15s ease}
.fp-reel-modal__close:hover{background:rgba(255,255,255,.3)}
@media(max-width:520px){.fp-reel-modal__close{top:.5rem;right:.5rem;background:rgba(0,0,0,.5)}}