/* Loomah Banners — carrossel de destaque (1.0.0).
 *
 * Desktop e tablet: proporção 1920 × 600 (3,2 : 1), no máximo 600 px de
 * altura. Celular (< 768 px): arte própria em 4 : 5. A arte ocupa o quadro
 * inteiro (cover); só corta quando a tela é mais larga que 1920 px.
 * Tokens do DS com reservas para funcionar sem ele.
 *
 * Fora de @layer de propósito: regra sem camada vence qualquer camada, e o
 * CSS de botão dos temas (sem camada) apagava o fundo e o ícone das setas.
 * Os seletores começam por .lbn para ganhar em especificidade do tema.
 */

.lbn {
  --lbn-proporcao: 1920 / 600;
  --lbn-altura-max: 600px;
  --lbn-controle-fundo: rgb(0 0 0 / 0.55);
  --lbn-controle-cor: #fff;
  position: relative;
  display: block;
  background: var(--lm-surface-sunken, #eee);
  overflow: hidden;
}

/* Largura total: sai do contêiner do tema. --lbn-barra (definida pelo
   script) desconta a barra de rolagem, que o 100vw inclui. Temas de blocos
   prendem os filhos do conteúdo com "margin: auto !important" e max-width;
   aqui o seletor é mais específico. */
.lbn.lbn-total {
  inline-size: calc(100vw - var(--lbn-barra, 0px)) !important;
  max-inline-size: none !important;
  margin-inline: calc(50% - (100vw - var(--lbn-barra, 0px)) / 2) !important;
}
.lbn.lbn-conteudo { border-radius: var(--lm-radius-lg, 12px); }
/* Respiro abaixo do banner; o fluxo dos temas de blocos zera a margem. */
.lbn.lbn-total,
.lbn.lbn-conteudo { margin-block-end: var(--lm-space-10, 2.5rem) !important; }

.lbn .lbn-trilho {
  display: flex;
  aspect-ratio: var(--lbn-proporcao);
  max-block-size: var(--lbn-altura-max);
  inline-size: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.lbn .lbn-trilho::-webkit-scrollbar { display: none; }

.lbn .lbn-slide {
  position: relative;
  flex: 0 0 100%;
  block-size: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.lbn .lbn-slide picture,
.lbn .lbn-link { display: block; inline-size: 100%; block-size: 100%; }
.lbn .lbn-img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
  object-position: center;
}
.lbn .lbn-link:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 var(--lm-focus-width, 3px) var(--lm-focus-ring-color, #2563eb);
}
.lbn .lbn-link:focus-visible .lbn-img { opacity: 0.92; }

@media (max-width: 47.9375rem) {
  .lbn { --lbn-proporcao: 4 / 5; --lbn-altura-max: none; }
}

/* ---------- Controles ---------- */
.lbn [hidden] { display: none !important; }

.lbn .lbn-seta,
.lbn .lbn-pausa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--lm-radius-full, 999px);
  background: var(--lbn-controle-fundo);
  color: var(--lbn-controle-cor);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background-color var(--lm-duration-fast, 120ms) var(--lm-ease-standard, ease);
}
.lbn .lbn-seta:hover,
.lbn .lbn-pausa:hover { background: rgb(0 0 0 / 0.75); }
.lbn .lbn-seta:focus-visible,
.lbn .lbn-pausa:focus-visible,
.lbn .lbn-ponto:focus-visible {
  outline: var(--lm-focus-width, 3px) solid #fff;
  outline-offset: 2px;
}

.lbn .lbn-seta {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.lbn .lbn-seta-ant  { inset-inline-start: var(--lm-space-4, 1rem); }
.lbn .lbn-seta-prox { inset-inline-end: var(--lm-space-4, 1rem); }
.lbn .lbn-seta:disabled { opacity: 0.4; cursor: default; }

.lbn .lbn-controles {
  position: absolute;
  inset-block-end: var(--lm-space-4, 1rem);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--lm-space-2, 0.5rem);
  padding: var(--lm-space-1, 0.25rem);
  padding-inline-end: var(--lm-space-3, 0.75rem);
  border-radius: var(--lm-radius-full, 999px);
  background: var(--lbn-controle-fundo);
  backdrop-filter: blur(6px);
}
.lbn .lbn-controles .lbn-pausa {
  inline-size: 2rem;
  block-size: 2rem;
  font-size: 1rem;
  background: transparent;
}
.lbn .lbn-controles .lbn-pausa:hover { background: rgb(255 255 255 / 0.15); }

.lbn .lbn-pontos { display: flex; align-items: center; gap: var(--lm-space-1, 0.25rem); }
/* Área de toque de 24 px, com o ponto visível menor dentro. */
.lbn .lbn-ponto {
  position: relative;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--lm-radius-full, 999px);
  background: transparent;
  cursor: pointer;
}
.lbn .lbn-ponto::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: inherit;
  background: rgb(255 255 255 / 0.55);
  transform: translate(-50%, -50%);
  transition: inline-size var(--lm-duration-base, 200ms) var(--lm-ease-standard, ease), background-color var(--lm-duration-base, 200ms);
}
.lbn .lbn-ponto[aria-current="true"]::after { inline-size: 1.25rem; background: #fff; }

/* Celular: sem setas (desliza com o dedo); controles menores. */
@media (max-width: 47.9375rem) {
  .lbn .lbn-seta { display: none !important; }
  .lbn .lbn-controles { inset-block-end: var(--lm-space-3, 0.75rem); }
}

@media (prefers-reduced-motion: reduce) {
  .lbn .lbn-ponto::after, .lbn .lbn-seta, .lbn .lbn-pausa { transition: none; }
}

@media print {
  .lbn .lbn-controles, .lbn .lbn-seta { display: none !important; }
  .lbn .lbn-trilho { overflow: hidden; }
}