/* ==========================================================================
   Cases — seção full-width / full-height
   O fundo da seção é o case em destaque. Os slides são só imagem;
   a descrição vive fora deles, com menos peso.
   ========================================================================== */
.cases {
	position: relative;
	width: 100%;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: clip;
	padding-block: clamp(60px, 8vh, 100px);
	isolation: isolate;
}

/* --- fundo (o case ativo) --- */
.cases-bg { position: absolute; inset: 0; z-index: 0; }
.cases-bg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.06);
	transition: opacity 0.9s ease, transform 1.4s ease;
	will-change: opacity, transform;
}
.cases-bg-img.is-active { opacity: 1; transform: scale(1); }
.cases-scrim {
	position: absolute;
	inset: 0;
	/* Escurece o suficiente para o texto respirar, mas deixa o case aparecer:
	   o fundo da seção É o case. */
	background:
		linear-gradient(180deg, var(--bg-navy) 0%, rgba(2,6,24,0.48) 22%, rgba(2,6,24,0.55) 62%, var(--bg-navy) 100%),
		radial-gradient(ellipse at center, rgba(2,6,24,0.2) 0%, rgba(2,6,24,0.68) 100%);
	backdrop-filter: blur(2px);
}

.cases-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: clamp(24px, 3.4vh, 44px);
}

.cases-header { text-align: center; padding-inline: var(--gutter); }
.cases-header .eyebrow { margin-bottom: 16px; }

/* ==========================================================================
   Palco — slides só de imagem
   ========================================================================== */
.cases-stage {
	position: relative;
	height: clamp(260px, 34vh, 380px);
	width: 100%;
}

.case-slide {
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	width: min(620px, 84vw);
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-md);
	overflow: hidden;
	border: 1px solid rgba(255,255,255,0.14);
	box-shadow: 0 30px 70px rgba(2,6,24,0.6);
	cursor: pointer;
	will-change: transform, opacity;
}
.case-slide img { width: 100%; height: 100%; object-fit: cover; }

/* brilho sutil só no slide central */
.case-slide-glow {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(221,147,24,0);
	transition: box-shadow 0.4s ease;
	pointer-events: none;
}
.case-slide.is-active { cursor: pointer; border-color: var(--gold-border); }
.case-slide.is-active .case-slide-glow { box-shadow: inset 0 0 0 1px rgba(221,147,24,0.5); }
.case-slide.is-active:hover { box-shadow: 0 40px 90px rgba(2,6,24,0.8); }

/* ==========================================================================
   Info — fora dos slides, com menos destaque
   ========================================================================== */
.cases-info {
	position: relative;
	min-height: 190px;
	padding-inline: var(--gutter);
	text-align: center;
}
.cases-info-item {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%) translateY(10px);
	width: min(660px, 100%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.45s ease, transform 0.45s ease;
}
.cases-info-item.is-active {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
}

.cases-info .case-tags {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}
.case-tag {
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-light-80);
	border: 1px solid rgba(255,255,255,0.22);
	border-radius: 3px;
	padding: 4px 9px;
}

.cases-info .case-title {
	font-family: var(--font-head);
	font-weight: 500;
	font-size: clamp(18px, 1.7vw, 23px);
	line-height: 1.3;
	color: var(--text-light);
	margin-bottom: 10px;
}
.cases-info .case-text {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--text-light-80);
	max-width: 60ch;
	margin-inline: auto;
}
.cases-info .case-client {
	color: var(--gold-1);
	font-weight: 400;
}
.cases-info .case-client::after {
	content: " · ";
	color: var(--text-light-80);
}

.case-link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 18px;
	font-size: 14px;
	font-weight: 500;
	color: var(--text-light);
	padding-bottom: 3px;
	border-bottom: 1px solid rgba(255,255,255,0.3);
	transition: gap 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.case-link .arrow { width: 13px; height: 13px; transform: rotate(-135deg); }
.case-link:hover { gap: 15px; color: var(--gold-1); border-color: var(--gold-1); }

/* ==========================================================================
   Controles
   ========================================================================== */
.cases-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
}
.cases-nav {
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255,255,255,0.28);
	border-radius: 50%;
	display: grid;
	place-items: center;
	transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.cases-nav:hover { border-color: var(--gold-1); background: rgba(221,147,24,0.12); transform: scale(1.06); }
.cases-nav .arrow { width: 13px; height: 13px; }
[data-cases-prev] .arrow { transform: rotate(90deg); }
[data-cases-next] .arrow { transform: rotate(-90deg); }

.cases-dots { display: flex; gap: 10px; }
.cases-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255,255,255,0.3);
	transition: background 0.3s ease, width 0.3s ease;
}
.cases-dot.is-active { background: var(--gold-1); width: 26px; border-radius: 4px; }

/* ==========================================================================
   Mobile — só o slide central
   ========================================================================== */
@media (max-width: 900px) {
	.cases { min-height: 0; padding-block: 64px; }
	.cases-stage { height: clamp(190px, 30vh, 240px); }
	.case-slide { width: min(440px, 88vw); }
	.cases-info { min-height: 230px; }
	.cases-scrim {
		background: linear-gradient(180deg, var(--bg-navy) 0%, rgba(2,6,24,0.72) 30%, rgba(2,6,24,0.78) 70%, var(--bg-navy) 100%);
	}
}