/**
 * Banner Destaque Responsivo — Estilos do front-end.
 *
 * Convenções:
 * - .bdr-banner: wrapper de um único banner (usado sozinho ou como slide).
 * - .bdr-banner--fullwidth: aplica a técnica "full-bleed" (100vw) para
 *   o banner ignorar o container/largura máxima do tema.
 * - .bdr-banner--height-full|auto|custom: controla a altura do banner.
 * - .bdr-banner--kenburns: aplica um zoom lento e contínuo na imagem.
 * - .bdr-slider: wrapper do carrossel com vários banners.
 * - .bdr-slider__footer: agrupa bolinhas + contador numérico no rodapé.
 *
 * Propriedades customizadas:
 * --bdr-height            Altura usada apenas no modo "custom" (por banner).
 * --bdr-mobile-fit        object-fit aplicado à imagem SOMENTE em telas mobile.
 * --bdr-mobile-position   object-position aplicado à imagem SOMENTE em telas mobile.
 * --bdr-transition-speed  Duração da transição entre slides (definida no slider).
 * --bdr-accent            Cor de destaque (setas, bolinhas, contador) (definida no slider).
 */

/* ---------------------------------------------------------------------
 * Banner individual
 * ------------------------------------------------------------------- */

.bdr-banner {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	background-color: #111;
	isolation: isolate;
}

.bdr-banner--height-full {
	height: 100vh;
	max-height: 100vh;
}

.bdr-banner--height-auto {
	height: auto;
}

.bdr-banner--height-custom {
	height: var( --bdr-height, 400px );
}

/* Técnica "full-bleed": faz o elemento ocupar 100vw mesmo dentro de um
 * container com largura máxima/padding, sem gerar barra de rolagem
 * horizontal (o overflow-x:hidden fica a cargo do body, ver abaixo). */
.bdr-banner--fullwidth,
.bdr-slider--fullwidth {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	max-width: 100vw;
}

/* Evita barra de rolagem horizontal causada pela técnica acima em
 * navegadores onde a largura da viewport difere da largura do
 * documento (por conta da scrollbar). */
html:has( .bdr-banner--fullwidth ),
html:has( .bdr-slider--fullwidth ) {
	overflow-x: hidden;
}

.bdr-banner__link {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
	outline-offset: -3px;
}

.bdr-banner__picture {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 0;
	overflow: hidden;
}

.bdr-banner--height-auto .bdr-banner__picture {
	height: auto;
}

.bdr-banner__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	transform: scale( 1 );
	transition: transform 0.6s ease-out;
}

.bdr-banner--height-auto .bdr-banner__img {
	height: auto;
}

/* ---------------------------------------------------------------------
 * Efeito Ken Burns — zoom lento e contínuo na imagem do slide ativo.
 * A duração longa (16s) evita que o movimento pareça abrupto mesmo em
 * banners que ficam pouco tempo em tela; o JS reinicia a animação a
 * cada troca de slide para que o zoom recomece do início.
 * ------------------------------------------------------------------- */
@keyframes bdr-kenburns {
	0% {
		transform: scale( 1 ) translate3d( 0, 0, 0 );
	}
	100% {
		transform: scale( 1.12 ) translate3d( -1%, -1%, 0 );
	}
}

.bdr-banner--kenburns .bdr-banner__img {
	animation: bdr-kenburns 16s ease-out infinite alternate;
}

/* Quando o próprio JS controla o Ken Burns via GSAP (classe aplicada
 * dinamicamente por slide ativo), desativamos a animação CSS para
 * evitar dois motores de animação competindo na mesma propriedade. */
.bdr-banner--kenburns[data-bdr-gsap-kenburns="1"] .bdr-banner__img {
	animation: none;
}

/* A configuração de "ajuste" (fit) e "posição do foco" definida para a
 * postagem só é aplicada em telas mobile — em telas maiores a imagem
 * desktop sempre cobre 100% da área com object-fit:cover. */
@media ( max-width: 767px ) {
	.bdr-banner--height-full .bdr-banner__img,
	.bdr-banner--height-custom .bdr-banner__img {
		object-fit: var( --bdr-mobile-fit, cover );
		object-position: var( --bdr-mobile-position, center center );
	}
}

.bdr-banner__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 0.5em;
	padding: clamp( 1.25rem, 4vw, 4rem );
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.55 ) 0%, rgba( 0, 0, 0, 0.15 ) 45%, rgba( 0, 0, 0, 0 ) 75% );
	color: #fff;
	pointer-events: none;
	text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.6 );
}

.bdr-banner__title,
.bdr-banner__subtitle,
.bdr-banner__cta {
	opacity: 1;
	transform: translateY( 0 );
}

/* Dentro de um slider, o texto de cada slide começa "escondido" (fallback
 * CSS, sem GSAP) e é revelado com um leve deslocamento vertical quando o
 * slide se torna ativo — tanto no carregamento inicial quanto a cada
 * troca de slide feita pelo JS (que remove/adiciona a classe
 * is-active). */
.bdr-slider__slide .bdr-banner__title,
.bdr-slider__slide .bdr-banner__subtitle,
.bdr-slider__slide .bdr-banner__cta {
	opacity: 0;
	transform: translateY( 24px );
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.bdr-slider__slide.is-active .bdr-banner__title {
	opacity: 1;
	transform: translateY( 0 );
}

.bdr-slider__slide.is-active .bdr-banner__subtitle {
	opacity: 1;
	transform: translateY( 0 );
	transition-delay: 0.08s;
}

.bdr-slider__slide.is-active .bdr-banner__cta {
	opacity: 1;
	transform: translateY( 0 );
	transition-delay: 0.16s;
}

/* Quando o GSAP assume a animação de revelação do texto, o JS marca o
 * slider com este atributo para que o CSS não faça a mesma transição
 * "por cima" (o GSAP controla opacity/transform via inline styles). */
.bdr-slider[data-bdr-gsap-text="1"] .bdr-banner__title,
.bdr-slider[data-bdr-gsap-text="1"] .bdr-banner__subtitle,
.bdr-slider[data-bdr-gsap-text="1"] .bdr-banner__cta {
	transition: none;
}

.bdr-banner__title {
	margin: 0;
	font-size: clamp( 1.5rem, 4vw, 3rem );
	line-height: 1.15;
	font-weight: 700;
}

.bdr-banner__subtitle {
	margin: 0;
	font-size: clamp( 1rem, 2vw, 1.375rem );
	max-width: 46em;
}

.bdr-banner__cta {
	margin-top: 0.5em;
	display: inline-block;
	padding: 0.65em 1.4em;
	border-radius: 999px;
	background: #fff;
	color: #111;
	font-weight: 600;
	font-size: 1rem;
}

/* ---------------------------------------------------------------------
 * Slider / carrossel
 * ------------------------------------------------------------------- */

.bdr-slider {
	position: relative;
	width: 100%;
	overflow: hidden;
	--bdr-accent: #111111;
}

.bdr-slider .bdr-banner {
	width: 100%;
}

.bdr-slider__track {
	position: relative;
	display: flex;
	width: 100%;
	height: 100%;
	will-change: transform;
}

.bdr-slider[data-effect="slide"] .bdr-slider__track {
	transition: transform var( --bdr-transition-speed, 600ms ) cubic-bezier( 0.65, 0, 0.35, 1 );
}

.bdr-slider[data-effect="slide"] .bdr-slider__slide {
	flex: 0 0 100%;
	width: 100%;
}

.bdr-slider[data-effect="fade"] .bdr-slider__track {
	display: block;
}

.bdr-slider[data-effect="fade"] .bdr-slider__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity var( --bdr-transition-speed, 600ms ) ease-in-out;
	z-index: 1;
}

.bdr-slider[data-effect="fade"] .bdr-slider__slide.is-active {
	opacity: 1;
	visibility: visible;
	position: relative;
	z-index: 2;
}

/* Quando o GSAP controla a transição entre slides (autodetectado pelo
 * JS), ele anima diretamente via inline styles/transform — desligamos
 * a transição CSS equivalente para não haver dois motores competindo. */
.bdr-slider[data-bdr-gsap-transition="1"][data-effect="slide"] .bdr-slider__track {
	transition: none;
}

.bdr-slider[data-bdr-gsap-transition="1"][data-effect="fade"] .bdr-slider__slide {
	transition: none;
}

.bdr-slider__slide {
	position: relative;
}

/* -----------------------------------------------------------------
 * Setas de navegação — círculo com borda tracejada, ícone de linha
 * longa e efeito de preenchimento radial no hover (inspirado no estilo
 * de botões de navegação encontrado em jovemdeexpressao.com.br).
 * --------------------------------------------------------------- */

.bdr-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 63px;
	height: 63px;
	padding: 0;
	margin: 0;
	border: 1.5px dashed rgba( 255, 255, 255, 0.85 );
	border-radius: 50%;
	background: rgba( 17, 17, 17, 0.25 );
	backdrop-filter: blur( 3px );
	color: #fff;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	transition: border-color 0.3s ease, transform 0.3s ease, color 0.35s ease;
}

.bdr-slider__arrow-fill {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var( --bdr-accent, #111111 );
	transform: scale( 0 );
	transform-origin: center;
	transition: transform 0.45s cubic-bezier( 0.65, 0, 0.35, 1 );
	z-index: -1;
}

.bdr-slider__arrow-icon {
	position: relative;
	z-index: 1;
	transition: transform 0.3s ease;
}

.bdr-slider__arrow--prev .bdr-slider__arrow-icon {
	transform: scaleX( -1 );
}

.bdr-slider__arrow:hover,
.bdr-slider__arrow:focus-visible {
	border-color: var( --bdr-accent, #111111 );
	color: #fff;
}

.bdr-slider__arrow:hover .bdr-slider__arrow-fill,
.bdr-slider__arrow:focus-visible .bdr-slider__arrow-fill {
	transform: scale( 1 );
}

.bdr-slider__arrow:hover .bdr-slider__arrow-icon {
	transform: translateX( 3px );
}

.bdr-slider__arrow--prev:hover .bdr-slider__arrow-icon {
	transform: scaleX( -1 ) translateX( 3px );
}

.bdr-slider__arrow:active {
	transform: translateY( -50% ) scale( 0.94 );
}

.bdr-slider__arrow--prev {
	left: clamp( 0.75rem, 3vw, 2.5rem );
}

.bdr-slider__arrow--next {
	right: clamp( 0.75rem, 3vw, 2.5rem );
}

/* -----------------------------------------------------------------
 * Rodapé do slider — agrupa bolinhas (indicadores) e contador
 * numérico moderno, lado a lado.
 * --------------------------------------------------------------- */

.bdr-slider__footer {
	position: absolute;
	left: 50%;
	bottom: clamp( 1rem, 3vw, 2.25rem );
	transform: translateX( -50% );
	z-index: 10;
	display: flex;
	align-items: center;
	gap: clamp( 1rem, 3vw, 2rem );
}

.bdr-slider__dots {
	display: flex;
	align-items: center;
	gap: 0.6em;
}

.bdr-slider__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border-radius: 50%;
	border: 1.5px solid rgba( 255, 255, 255, 0.85 );
	background: transparent;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, width 0.25s ease;
}

.bdr-slider__dot.is-active {
	background: var( --bdr-accent, #ffffff );
	border-color: var( --bdr-accent, #ffffff );
	width: 22px;
	border-radius: 999px;
}

/* Contador "01 — 04" com barra de progresso fina entre os números —
 * um formato moderno de indicar posição/total sem depender só de
 * bolinhas, muito usado em sites com carrosséis em destaque. */
.bdr-slider__counter {
	display: flex;
	align-items: center;
	gap: 0.65em;
	color: #fff;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.5 );
}

.bdr-slider__counter-current {
	position: relative;
	min-width: 1.6em;
	transition: opacity 0.25s ease;
}

.bdr-slider__counter-bar {
	position: relative;
	display: block;
	width: clamp( 48px, 8vw, 90px );
	height: 2px;
	background: rgba( 255, 255, 255, 0.3 );
	border-radius: 999px;
	overflow: hidden;
}

.bdr-slider__counter-bar-fill {
	position: absolute;
	inset: 0 auto 0 0;
	height: 100%;
	width: 25%;
	background: var( --bdr-accent, #ffffff );
	border-radius: 999px;
	transition: width var( --bdr-transition-speed, 600ms ) cubic-bezier( 0.65, 0, 0.35, 1 );
}

.bdr-slider__counter-total {
	opacity: 0.6;
	min-width: 1.6em;
}

.bdr-slider__arrow:focus-visible,
.bdr-slider__dot:focus-visible,
.bdr-banner__link:focus-visible {
	outline: 3px solid var( --bdr-accent, #4d90fe );
	outline-offset: 2px;
}

/* Telas pequenas: reduz um pouco o tamanho das setas/bolinhas e
 * reorganiza o rodapé para não apertar em telas muito estreitas. */
@media ( max-width: 599px ) {
	.bdr-slider__arrow {
		width: 46px;
		height: 46px;
	}

	.bdr-slider__arrow-icon {
		width: 22px;
		height: 8px;
	}

	.bdr-slider__footer {
		gap: 0.85rem;
	}

	.bdr-slider__counter {
		font-size: 0.75rem;
	}

	.bdr-slider__counter-bar {
		width: 40px;
	}
}

/* Respeita a preferência do usuário por menos animações. */
@media ( prefers-reduced-motion: reduce ) {
	.bdr-slider__track,
	.bdr-slider__slide,
	.bdr-slider__arrow,
	.bdr-slider__arrow-fill,
	.bdr-slider__arrow-icon,
	.bdr-slider__dot,
	.bdr-slider__counter-bar-fill,
	.bdr-banner__img,
	.bdr-banner__title,
	.bdr-banner__subtitle,
	.bdr-banner__cta {
		transition: none !important;
		animation: none !important;
	}
}