/**
 * MVS Slider — Renderizador Inteligente
 *
 * Layout automático 40/60 com área segura de texto e imagem inteira.
 * Consome custom properties definidas inline por slide (--mvs-i-*).
 */

.mvs-i-slide {
	position: relative;
	width: 100%;
	min-height: 600px;
	background: var(--mvs-i-bg, #1a1a1a);
	overflow: hidden;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Quando o slider inteligente está ativo, o viewport do slider não deve
   forçar altura fixa nem cortar — deixa o conteúdo definir a altura. */
.mvs-slider .mvs-i-slide {
	min-height: 600px;
}

.mvs-i-slide__inner {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	min-height: inherit;
	max-width: 1600px;
	margin: 0 auto;
}

/* ==========================================================================
   CONTEÚDO (área segura de texto)
   ========================================================================== */
.mvs-i-slide__content {
	position: relative;
	z-index: 3;
	flex: 0 0 auto;
	width: calc(100% - var(--mvs-i-img-width, 60%));
	max-width: 620px;
	padding: 48px clamp(24px, 5vw, 80px);
	box-sizing: border-box;
}

.mvs-i-slide__eyebrow {
	display: inline-block;
	font-family: var(--mvs-i-sub-font, 'Inter', sans-serif);
	font-size: var(--mvs-i-sub-size, clamp(13px, 1.4vw, 16px));
	font-weight: var(--mvs-i-sub-weight, 500);
	letter-spacing: var(--mvs-i-sub-spacing, 0.2em);
	text-transform: var(--mvs-i-sub-transform, uppercase);
	color: var(--mvs-i-subtitle, #ffffff);
	margin: 0 0 18px;
	opacity: 0.9;
}

.mvs-i-slide__title {
	font-family: var(--mvs-i-title-font, 'Cormorant Garamond', Georgia, serif);
	font-size: var(--mvs-i-title-size, clamp(40px, 5vw, 76px));
	line-height: 1.04;
	font-weight: var(--mvs-i-title-weight, 600);
	letter-spacing: var(--mvs-i-title-spacing, 0);
	text-transform: var(--mvs-i-title-transform, none);
	color: var(--mvs-i-title, #ffffff);
	margin: 0 0 20px;
}

.mvs-i-slide__title em {
	font-style: italic;
	color: var(--mvs-i-btn-bg, #c9a84c);
}

.mvs-i-slide__text {
	font-family: var(--mvs-i-text-font, 'Inter', sans-serif);
	font-size: var(--mvs-i-text-size, clamp(15px, 1.4vw, 18px));
	font-weight: var(--mvs-i-text-weight, 300);
	letter-spacing: var(--mvs-i-text-spacing, 0);
	text-transform: var(--mvs-i-text-transform, none);
	line-height: 1.6;
	color: var(--mvs-i-text, #b0b0b0);
	margin: 0 0 32px;
	max-width: 440px;
}

/* Botão CTA */
.mvs-i-slide__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: var(--mvs-i-btn-bg, #c9a84c);
	color: var(--mvs-i-btn-color, #1a1a1a);
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 16px 38px;
	border-radius: 2px;
	overflow: hidden;
	transition: transform 0.2s ease, filter 0.25s ease;
}

/* WCAG 2.4.7 — o renderer clássico já trata isso (mvs-slider.css),
   o inteligente não tinha equivalente. Mesmo padrão de cor de alto
   contraste (não é cor de marca — é indicador de foco, precisa
   funcionar contra qualquer fundo/gradiente configurado no slide). */
.mvs-i-slide__btn:focus-visible {
	outline: 3px solid #ffd700;
	outline-offset: 3px;
}

.mvs-i-slide__btn svg {
	width: 15px;
	height: 15px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	transition: transform 0.25s ease;
}

.mvs-i-slide__btn:hover {
	transform: translateY(-1px);
	filter: brightness(1.06);
}

.mvs-i-slide__btn:hover svg {
	transform: translateX(4px);
}

/* ==========================================================================
   IMAGEM (nunca background, sempre inteira)
   ========================================================================== */
.mvs-i-slide__image {
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
	align-self: stretch;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-width: 0;
	padding: 0 clamp(12px, 3vw, 48px);
}

.mvs-i-slide__image picture,
.mvs-i-slide__image img {
	display: block;
	max-width: 100%;
	max-height: 560px;
	width: auto;
	height: auto;
	/* imagem INTEIRA — nunca corta */
	object-fit: contain;
}

.mvs-i-slide__image img {
	filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.32));
}

/* posição vertical da imagem */
.mvs-i-slide--valign-top .mvs-i-slide__image { align-items: flex-start; }
.mvs-i-slide--valign-center .mvs-i-slide__image { align-items: center; }
.mvs-i-slide--valign-bottom .mvs-i-slide__image { align-items: flex-end; }

/* alinhamento do texto */
.mvs-i-slide--talign-center .mvs-i-slide__content { text-align: center; }
.mvs-i-slide--talign-right .mvs-i-slide__content { text-align: right; }

/* overlay opcional sobre a imagem */
.mvs-i-slide__overlay {
	position: absolute;
	inset: 0;
	background: #000;
	pointer-events: none;
}

/* ==========================================================================
   TEXTO À DIREITA (inverte a ordem)
   ========================================================================== */
.mvs-i-slide--text-right .mvs-i-slide__inner {
	flex-direction: row-reverse;
}

/* ==========================================================================
   BREAKPOINTS PRÓPRIOS (não depende do tema)
   ========================================================================== */

/* Notebook */
@media (max-width: 1200px) {
	.mvs-i-slide__title { font-size: clamp(36px, 5vw, 64px); }
}

/* Tablet */
@media (max-width: 1024px) {
	.mvs-i-slide__content {
		width: 46%;
		padding: 40px clamp(20px, 4vw, 48px);
	}
}

/* Mobile: imagem acima, conteúdo abaixo (spec) */
@media (max-width: 768px) {
	.mvs-i-slide {
		min-height: 0;
	}
	.mvs-i-slide__inner,
	.mvs-i-slide--text-right .mvs-i-slide__inner {
		flex-direction: column;
	}
	.mvs-i-slide__image {
		order: 1;
		width: 100%;
		padding: 32px 24px 0;
	}
	.mvs-i-slide__image picture,
	.mvs-i-slide__image img {
		max-height: 46vh;
	}
	.mvs-i-slide__content {
		order: 2;
		width: 100%;
		max-width: 100%;
		padding: 28px 24px 48px;
		text-align: center;
	}
	.mvs-i-slide__text {
		margin-left: auto;
		margin-right: auto;
	}
	.mvs-i-slide__title { font-size: clamp(32px, 8vw, 48px); }
}

/* ==========================================================================
   GRADIENTE (Fase 3) — camada sobreposta, nunca edita a imagem
   ========================================================================== */
.mvs-i-slide__gradient {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: var(--mvs-i-gradient, none);
}

/* Quando há gradiente, o conteúdo fica acima dele */
.mvs-i-slide--has-gradient .mvs-i-slide__content {
	z-index: 4;
}

/* No mobile, o gradiente ajuda a legibilidade do texto sobre a imagem */
@media (max-width: 768px) {
	.mvs-i-slide__gradient {
		background: linear-gradient(to bottom, transparent 0%, transparent 40%, var(--mvs-i-bg, #1a1a1a) 92%);
	}
}

/* ==========================================================================
   INTEGRAÇÃO com o container do slider clássico
   Libera a altura fixa/aspect-ratio para o banner inteligente respirar.
   ========================================================================== */
.mvs-slider--intelligent .mvs-slider__viewport {
	aspect-ratio: auto;
	min-height: 600px;
	height: auto;
}
.mvs-slider--intelligent .mvs-slider__track {
	height: auto;
	align-items: stretch;
}
.mvs-slider--intelligent .mvs-slide,
.mvs-slider--intelligent .mvs-i-slide {
	height: auto;
	min-height: 600px;
}
/* Slides inativos escondidos, ativo visível */
.mvs-slider--intelligent .mvs-i-slide:not(.is-active) {
	display: none;
}

/* ==========================================================================
   COMPONENTES (Fase 6) — badge, avaliações, benefício
   ========================================================================== */
.mvs-i-badge {
	display: inline-block;
	background: var(--mvs-i-btn-bg, #c9a84c);
	color: var(--mvs-i-btn-color, #1a1a1a);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 2px;
	margin-bottom: 20px;
}

.mvs-i-slide__components {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin-top: 28px;
}

.mvs-i-rating {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.mvs-i-star {
	width: 18px;
	height: 18px;
}
.mvs-i-star.is-full { fill: var(--mvs-i-btn-bg, #c9a84c); }
.mvs-i-star.is-half { fill: url(#half); }
.mvs-i-star.is-empty { fill: rgba(255,255,255,0.25); }

.mvs-i-rating__text {
	font-size: 14px;
	color: var(--mvs-i-text, #b0b0b0);
	font-weight: 500;
}

.mvs-i-benefit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 500;
	color: var(--mvs-i-subtitle, #ffffff);
}
.mvs-i-benefit svg {
	width: 16px;
	height: 16px;
	stroke: var(--mvs-i-btn-bg, #c9a84c);
	fill: none;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}