/* ================================================================
   Audaxco Hero Slider
   @version 1.6.2
   @changelog
     1.6.2 — Suporte a banner inteiro clicável via .audaxco-hero__link.
     1.6.1 — Setas mobile simétricas (esq. 52px = dir. 52px);
             dots: fundo escuro (#0d1b2e) + borda branca — visível em qualquer fundo.
     1.6.0 — TEMPORÁRIO: contain + fundo branco (banners sem área segura definida);
             mobile height clamp(300px,56.25vw,500px); seta esq. 32px mobile.
             REVERTER PARA COVER: ver seção de reversão no final do arquivo.
     1.5.0 — Setas trocadas para chevron FontAwesome (\f053 / \f054) via ::before
     1.4.0 — Elimina faixa branca no carregamento
     1.2.0 — object-fit: cover; área segura documentada
     1.1.0 — Fix height chain; setas afastadas

   Como ativar:
     Na seção BeBuilder que contém o shortcode, adicione a classe
     CSS "audaxco-hero-section" (seção > General > Custom CSS Class)
     e zere os paddings/margins da seção e da coluna via BeBuilder.
   ================================================================ */

/* ---------------------------------------------------------------
   Seção BeBuilder — começa logo após o header, preenche o restante
   da viewport sem rolagem.
   --header-height é exposto pelo framework via header.misc.js.
   Fallback 98px cobre o layout padrão caso o JS ainda não rodou.
   --------------------------------------------------------------- */
/* Invisível até JS medir o header e adicionar a classe --ready.
   Evita a faixa branca causada pelo fallback do --header-height antes do JS. */
.audaxco-hero-section {
	height: calc(100vh - var(--header-height, 98px)) !important;
	min-height: unset !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: var(--header-height, 98px) !important;
	overflow: hidden;
	opacity: 0;
}

.audaxco-hero-section.--ready {
	opacity: 1;
	transition: opacity 0.2s ease;
}

/* bt_bb_port herda a altura da seção */
.audaxco-hero-section > .bt_bb_port {
	height: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
}

/* Row, Column e shortcode wrapper propagam a altura */
.audaxco-hero-section .bt_bb_row,
.audaxco-hero-section .bt_bb_row_inner,
.audaxco-hero-section .bt_bb_column,
.audaxco-hero-section .bt_bb_column_inner,
.audaxco-hero-section .bt_bb_column_content,
.audaxco-hero-section .bt_bb_column_content_inner,
.audaxco-hero-section .bt_bb_shortcode {
	height: calc(100vh - var(--header-height, 98px)) !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* ---------------------------------------------------------------
   Container principal do slider
   --------------------------------------------------------------- */
.audaxco-hero {
	position: relative;
	width: 100%;
	height: calc(100vh - var(--header-height, 98px));
	overflow: hidden;
	/* TEMPORÁRIO: branco para contain (trocar para #0d1b2e ao voltar para cover) */
	background: #fff;
	outline: none;
}

.audaxco-hero:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -3px;
}

/* ---------------------------------------------------------------
   Track — posicionamento relativo para os slides absolutos
   --------------------------------------------------------------- */
.audaxco-hero__track {
	position: relative;
	width: 100%;
	height: 100%;
}

/* ---------------------------------------------------------------
   Slides — fade entre imagens
   --------------------------------------------------------------- */
.audaxco-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.7s ease;
	pointer-events: none;
}

.audaxco-hero__slide.--active {
	opacity: 1;
	pointer-events: auto;
}

.audaxco-hero__link {
	display: block;
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.audaxco-hero__link:focus-visible {
	outline: 3px solid #0d1b2e;
	outline-offset: -6px;
}

/* TEMPORÁRIO: contain — exibe a imagem inteira enquanto a cliente não tem banners
   com área segura definida. Para reverter: trocar contain → cover e remover background.
   Quando voltar para cover: background do .audaxco-hero pode ser #0d1b2e novamente. */
.audaxco-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center center;
}

/* ---------------------------------------------------------------
   Setas — prev / next
   --------------------------------------------------------------- */
.audaxco-hero__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.6);
	background: rgba(0, 0, 0, 0.25);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}

/* Ícone chevron via FontAwesome (carregado pelo tema) */
.audaxco-hero__arrow span::before {
	font: normal 22px/1 FontAwesome;
	display: block;
}

.audaxco-hero__arrow.--prev span::before {
	content: "\f053"; /* chevron-left */
	margin-right: 2px; /* ajuste óptico de centralização */
}

.audaxco-hero__arrow.--next span::before {
	content: "\f054"; /* chevron-right */
	margin-left: 2px;  /* ajuste óptico de centralização */
}

.audaxco-hero__arrow:hover,
.audaxco-hero__arrow:focus-visible {
	background: rgba(0, 0, 0, 0.55);
	border-color: #fff;
	outline: none;
}

/* 72px: afasta da borda direita (botão "QUERO COMPRAR" ~40px) e da esquerda */
.audaxco-hero__arrow.--prev { left: 72px; }
.audaxco-hero__arrow.--next { right: 72px; }

/* ---------------------------------------------------------------
   Dots — navegação direta por slide
   --------------------------------------------------------------- */
.audaxco-hero__dots {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 10px;
}

.audaxco-hero__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	/* Fundo escuro + borda branca: visível tanto sobre imagem escura quanto sobre fundo branco (contain) */
	background: rgba(13, 27, 46, 0.45);
	border: 2px solid rgba(255, 255, 255, 0.85);
	padding: 0;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.audaxco-hero__dot.--active,
.audaxco-hero__dot:hover {
	background: #0d1b2e;
	transform: scale(1.3);
}

.audaxco-hero__dot:focus-visible {
	outline: 2px solid #0d1b2e;
	outline-offset: 3px;
}

/* ---------------------------------------------------------------
   Mobile — altura baseada na proporção da imagem (16:9)
   56.25vw = 9/16 × 100vw = altura exata para imagem 16:9 sem barras
   clamp(300px, 56.25vw, 500px): mínimo 300px, proporcional, máx 500px
   --------------------------------------------------------------- */
@media (max-width: 991px) {
	/* Seção e wrappers: height auto — slider dita a altura */
	.audaxco-hero-section,
	.audaxco-hero-section .bt_bb_row,
	.audaxco-hero-section .bt_bb_row_inner,
	.audaxco-hero-section .bt_bb_column,
	.audaxco-hero-section .bt_bb_column_inner,
	.audaxco-hero-section .bt_bb_column_content,
	.audaxco-hero-section .bt_bb_column_content_inner,
	.audaxco-hero-section .bt_bb_shortcode {
		height: auto !important;
	}

	.audaxco-hero {
		height: clamp(300px, 56.25vw, 500px);
	}

	.audaxco-hero__arrow {
		width: 40px;
		height: 40px;
	}

	.audaxco-hero__arrow span::before {
		font-size: 18px;
	}

	.audaxco-hero__arrow.--prev { left: 52px; } /* simétrico ao --next */
	.audaxco-hero__arrow.--next { right: 52px; } /* desvia do botão verde */

	.audaxco-hero__dots {
		bottom: 16px;
	}
}

/* ================================================================
   COMO REVERTER PARA COVER (quando a cliente tiver banners com área segura)
   ================================================================
   1. hero-slider.css:
      a) .audaxco-hero__img: object-fit: contain → object-fit: cover
      b) .audaxco-hero: background: #fff → background: #0d1b2e
      c) Mobile .audaxco-hero: height: clamp(300px, 56.25vw, 500px)
         → height: calc(100svh - var(--header-height, 60px))
      d) Mobile section/wrappers: remover o bloco height: auto
      e) Bump de versão (1.6.0 → 1.7.0)
   2. audaxco-hero-slider.php: atualizar versão do wp_register_style
   3. Gerar novo ZIP e fazer upload
   ================================================================ */