/* Officina EPS – Reel Instagram (Proposta B) */
.oeps-reels {
	--oeps-navy: #023450;
	--oeps-blue: #44A6D5;
	--oeps-soft: #BFD6E6;
	--oeps-card-w: 250px;
	--oeps-card-h: 444px;
	--oeps-active-w: 290px;
	--oeps-active-h: 516px;
	--oeps-gap: 20px;
	--oeps-curve: 100px;
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 100%;
	padding: 120px 0 calc(var(--oeps-curve) + 70px);
	/* navy area; the last 100px stay transparent and host the bottom curve */
	background: linear-gradient(var(--oeps-navy), var(--oeps-navy)) top / 100% calc(100% - var(--oeps-curve)) no-repeat;
	color: #fff;
	overflow-x: clip;
	font-family: "Inter", sans-serif;
	-webkit-font-smoothing: antialiased;
}
.oeps-reels *,
.oeps-reels *::before,
.oeps-reels *::after { box-sizing: border-box; }

/* top blue curve (continues the "Prodotti in Evidenza" section) + bottom navy curve */
.oeps-reels::before,
.oeps-reels::after {
	content: "";
	position: absolute;
	left: -30%;
	width: 160%;
	border-radius: 50%;
	pointer-events: none;
}
.oeps-reels::before { top: -110px; height: 160px; background: var(--oeps-blue); }
.oeps-reels::after { bottom: 0; height: 220px; background: var(--oeps-navy); z-index: -1; }

.oeps-reels__inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 80px;
	/* aligned with the homepage content box (100px at 1440, 137px at 1920) */
	padding-left: max(24px, 7.1vw, calc((100vw - 1632px) / 2));
}
/* soft blue glow behind the carousel */
.oeps-reels__inner::before {
	content: "";
	position: absolute;
	left: 38.9%;
	top: 50%;
	width: 900px;
	height: 700px;
	transform: translateY(-50%);
	background: radial-gradient(closest-side, rgba(68, 166, 213, .35), rgba(68, 166, 213, 0));
	pointer-events: none;
	z-index: -1;
}

/* ---- intro ---- */
.oeps-reels__intro { flex: 0 0 400px; max-width: 400px; }
.oeps-reels__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border-radius: 50px;
	background: var(--oeps-blue);
	font: 700 12px/1.2 "Inter", sans-serif;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #fff;
}
.oeps-reels__badge i { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.oeps-reels .oeps-reels__eyebrow {
	margin: 18px 0 0;
	font: 900 22px/1.2 "Archivo Narrow", sans-serif;
	color: var(--oeps-blue);
}
.oeps-reels .oeps-reels__title {
	margin: 18px 0 0;
	font: 900 54px/58px "Archivo Narrow", sans-serif;
	letter-spacing: 0;
	text-transform: none;
	color: #fff;
}
.oeps-reels__line { display: block; width: 160px; height: 4px; margin-top: 18px; background: var(--oeps-blue); }
.oeps-reels .oeps-reels__text {
	margin: 18px 0 0;
	font: 500 17px/26px "Inter", sans-serif;
	color: var(--oeps-soft);
}
.oeps-reels__profile {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
	padding: 8px 20px 8px 8px;
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 50px;
	background: rgba(255, 255, 255, .06);
	color: #fff;
	text-decoration: none;
	transition: background .2s;
}
.oeps-reels__profile:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.oeps-reels__avatar {
	display: grid;
	place-items: center;
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border: 2px solid var(--oeps-blue);
	border-radius: 50%;
	background: var(--oeps-blue);
	overflow: hidden;
}
.oeps-reels__avatar img { width: 80%; height: 80%; object-fit: contain; }
.oeps-reels__who { display: flex; flex-direction: column; }
.oeps-reels__who strong { font: 900 18px/1.2 "Archivo Narrow", sans-serif; }
.oeps-reels__who small { font: 500 12px/1.3 "Inter", sans-serif; color: var(--oeps-soft); }

.oeps-reels__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border-radius: 50px;
	background: var(--oeps-blue);
	font: 500 17px/1.2 "Archivo Narrow", sans-serif;
	color: #fff;
	text-decoration: none;
	transition: background .2s, transform .2s;
}
.oeps-reels__btn:hover,
.oeps-reels__btn:focus-visible { background: #3591be; color: #fff; }
.oeps-reels__btn--desktop { margin-top: 18px; }
.oeps-reels__btn--mobile { display: none; }

/* ---- carousel ---- */
.oeps-reels__carousel { flex: 1 1 auto; min-width: 0; }
.oeps-reels__viewport {
	height: 530px;
	overflow: hidden;
	touch-action: pan-y;
	cursor: grab;
}
.oeps-reels__viewport.is-dragging { cursor: grabbing; }
.oeps-reels__track {
	display: flex;
	align-items: center;
	gap: var(--oeps-gap);
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform .45s cubic-bezier(.42, 0, .58, 1);
	will-change: transform;
}
.oeps-reels__card {
	flex: 0 0 auto;
	width: var(--oeps-card-w);
	height: var(--oeps-card-h);
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 22px;
	overflow: hidden;
	background: #BFD6E6;
	transition: width .45s cubic-bezier(.42, 0, .58, 1), height .45s cubic-bezier(.42, 0, .58, 1);
}
.oeps-reels__card::marker { content: none; }
.oeps-reels__card.is-active { width: var(--oeps-active-w); height: var(--oeps-active-h); }
.oeps-reels__card > a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	color: #fff;
	text-decoration: none;
	-webkit-user-drag: none;
}
.oeps-reels__card video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
	background: #9fb9c9;
}
.oeps-reels__shade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 45%;
	background: linear-gradient(rgba(2, 30, 51, 0), rgba(2, 30, 51, .85));
}
.oeps-reels__play {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 64px;
	height: 64px;
	transform: translate(-50%, -50%);
	transition: transform .25s, opacity .25s;
}
.oeps-reels__play svg { display: block; }
.oeps-reels__card > a:hover .oeps-reels__play { transform: translate(-50%, -50%) scale(1.08); }
.oeps-reels__card.is-playing .oeps-reels__play { opacity: .75; }
.oeps-reels__caption {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 22px;
	display: flex;
	align-items: center;
	gap: 8px;
	font: 700 16px/1.2 "Archivo Narrow", sans-serif;
	color: #fff;
}
.oeps-reels__caption svg { flex: 0 0 18px; }
.oeps-reels__caption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.oeps-reels__controls {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
	padding-right: 24px;
}
.oeps-reels__progress {
	position: relative;
	flex: 0 1 640px;
	height: 3px;
	margin-right: 48px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .15);
	overflow: hidden;
}
.oeps-reels__progress span {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 25%;
	border-radius: 2px;
	background: var(--oeps-blue);
	transition: width .45s cubic-bezier(.42, 0, .58, 1);
}
.oeps-reels .oeps-reels__arrow {
	display: block;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	line-height: 0;
	transition: transform .2s, opacity .2s;
}
.oeps-reels .oeps-reels__arrow:hover { transform: scale(1.06); background: transparent; }
.oeps-reels .oeps-reels__arrow:disabled { opacity: .35; cursor: default; transform: none; }
.oeps-reels .oeps-reels__arrow:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.oeps-reels__dots { display: none; }

/* ---- tablet: tighter desktop ---- */
@media (max-width: 1240px) {
	.oeps-reels__inner { gap: 48px; }
	.oeps-reels__intro { flex-basis: 340px; max-width: 340px; }
	.oeps-reels .oeps-reels__title { font-size: 46px; line-height: 50px; }
}

/* ---- mobile / tablet portrait: swipe ---- */
@media (max-width: 1024px) {
	.oeps-reels {
		padding: 72px 0 48px;
		background: var(--oeps-navy);
	}
	.oeps-reels::after,
	.oeps-reels__inner::before { display: none; }
	.oeps-reels::before { top: -40px; height: 70px; left: -40%; width: 180%; }
	.oeps-reels__inner { flex-direction: column; align-items: stretch; gap: 24px; padding-left: 0; }
	.oeps-reels__intro { flex: none; max-width: none; padding: 0 20px; }
	.oeps-reels__badge,
	.oeps-reels .oeps-reels__text,
	.oeps-reels__btn--desktop,
	.oeps-reels__controls { display: none; }
	.oeps-reels .oeps-reels__eyebrow { margin-top: 0; font-size: 18px; }
	.oeps-reels .oeps-reels__title { margin-top: 12px; font-size: 34px; line-height: 38px; max-width: 520px; }
	.oeps-reels__line { width: 120px; height: 3px; margin-top: 12px; }
	.oeps-reels__profile { margin-top: 16px; }
	.oeps-reels__avatar { flex-basis: 40px; width: 40px; height: 40px; }

	.oeps-reels__viewport {
		height: auto;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 20px;
		scrollbar-width: none;
		touch-action: pan-x pan-y;
		cursor: auto;
		-webkit-overflow-scrolling: touch;
	}
	.oeps-reels__viewport::-webkit-scrollbar { display: none; }
	.oeps-reels__track {
		gap: 14px;
		height: auto;
		padding: 0 20px;
		transform: none !important;
		transition: none;
	}
	.oeps-reels__track::after { content: ""; flex: 0 0 6px; }
	.oeps-reels__card,
	.oeps-reels__card.is-active {
		width: var(--oeps-card-w);
		height: var(--oeps-card-h);
		scroll-snap-align: start;
		transition: none;
	}
	.oeps-reels__dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
	.oeps-reels__dots button {
		width: 7px;
		height: 7px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 4px;
		background: rgba(255, 255, 255, .3);
		cursor: pointer;
		transition: width .3s, background .3s;
	}
	.oeps-reels__dots button.is-active { width: 22px; background: var(--oeps-blue); }
	.oeps-reels__btn--mobile { display: flex; margin: 0 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.oeps-reels__track,
	.oeps-reels__card,
	.oeps-reels__progress span { transition: none; }
}