/* Nova Banner — CSS responsivo ao tamanho do elemento Bubble */

.nb-banner,
.nb-banner * {
  box-sizing: border-box;
}

/*
 * O Bubble é a única fonte de largura e altura.
 * O plugin nunca redimensiona ancestrais ou o canvas.
 */
.nb-banner {
  --nb-radius-local: 28px;
  --nb-transition-local: 700ms;
  --nb-ease: cubic-bezier(.2, .8, .2, 1);
  --nb-accent: #b8ff5a;

  /* Variáveis atualizadas pelo ResizeObserver do initialize.js */
  --nb-element-width: 900px;
  --nb-element-height: 500px;
  --nb-pad-x: 40px;
  --nb-pad-y: 24px;
  --nb-content-bottom: 104px;
  --nb-content-max-width: 720px;
  --nb-title-size: 52px;
  --nb-description-size: 16px;
  --nb-eyebrow-size: 11px;
  --nb-button-font-size: 13px;
  --nb-button-height: 46px;
  --nb-control-size: 42px;
  --nb-icon-size: 16px;
  --nb-gap: 16px;

  position: absolute;
  inset: 0;
  display: block;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  overflow: hidden;
  isolation: isolate;
  border: 0;
  border-radius: var(--nb-radius-local);
  background: transparent;
  box-shadow: none;
  outline: none;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
}


/*
 * Quando o elemento Bubble não possui altura válida, o componente fica
 * contido na própria caixa em vez de transbordar ou tentar aumentar a página.
 */
.nb-banner[data-size-valid="false"] {
  box-shadow: none;
}

.nb-banner[data-size-valid="false"] .nb-slide,
.nb-banner[data-size-valid="false"] .nb-chrome,
.nb-banner[data-size-valid="false"] .nb-video-badge {
  visibility: hidden;
}

.nb-banner:focus-visible {
  outline: 3px solid color-mix(
    in srgb,
    var(--nb-accent) 42%,
    transparent
  );
  outline-offset: -3px;
}

/* Slides */
.nb-slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  transition:
    opacity var(--nb-transition-local) var(--nb-ease),
    transform var(--nb-transition-local) var(--nb-ease),
    filter var(--nb-transition-local) var(--nb-ease);
  will-change: transform, opacity, filter;
}

.nb-slide.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.nb-banner[data-transition="fade"] .nb-slide {
  transform: none;
}

.nb-banner[data-transition="slide"] .nb-slide {
  transform: translate3d(7%, 0, 0);
}

.nb-banner[data-transition="slide"] .nb-slide.is-active {
  transform: translate3d(0, 0, 0);
}

.nb-banner[data-transition="zoom"] .nb-slide {
  transform: scale(1.08);
}

.nb-banner[data-transition="zoom"] .nb-slide.is-active {
  transform: scale(1);
}

.nb-banner[data-transition="blur"] .nb-slide {
  transform: scale(1.025);
  filter: blur(18px);
}

.nb-banner[data-transition="blur"] .nb-slide.is-active {
  transform: scale(1);
  filter: blur(0);
}

/* Mídia */
.nb-media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.001);
}

.nb-slide.is-active .nb-media {
  animation: nb-kenburns var(--nb-active-duration, 6500ms) linear both;
}

.nb-slide[data-media-type="video"].is-active .nb-media {
  animation: none;
}

@keyframes nb-kenburns {
  from { transform: scale(1.001); }
  to { transform: scale(1.05); }
}

.nb-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(5, 7, 11, .82) 0%,
      rgba(5, 7, 11, .38) 48%,
      rgba(5, 7, 11, .08) 100%
    ),
    linear-gradient(
      0deg,
      rgba(5, 7, 11, .88) 0%,
      rgba(5, 7, 11, .12) 68%,
      transparent 100%
    );
}

.nb-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .14;
  mix-blend-mode: soft-light;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

/* Conteúdo: todos os tamanhos vêm do próprio elemento, não da viewport */
.nb-content {
  position: absolute;
  left: var(--nb-pad-x);
  right: var(--nb-pad-x);
  bottom: var(--nb-content-bottom);
  z-index: 4;
  width: auto;
  max-width: min(var(--nb-content-max-width), calc(100% - (var(--nb-pad-x) * 2)));
  min-width: 0;
  overflow: visible;
}

.nb-eyebrow,
.nb-title,
.nb-description,
.nb-actions {
  opacity: 0;
  transform: translateY(18px);
}

.nb-slide.is-active .nb-eyebrow,
.nb-slide.is-active .nb-title,
.nb-slide.is-active .nb-description,
.nb-slide.is-active .nb-actions {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 620ms var(--nb-ease),
    transform 620ms var(--nb-ease);
}

.nb-slide.is-active .nb-title {
  transition-delay: 55ms;
}

.nb-slide.is-active .nb-description {
  transition-delay: 110ms;
}

.nb-slide.is-active .nb-actions {
  transition-delay: 165ms;
}

.nb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin: 0 0 clamp(8px, 2%, 15px);
  overflow: hidden;
  color: rgba(255, 255, 255, .78);
  font-size: var(--nb-eyebrow-size);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.nb-eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: clamp(18px, 6%, 28px);
  height: 1px;
  background: var(--nb-accent);
}

.nb-title {
  display: -webkit-box;
  max-width: min(
    var(--nb-content-max-width),
    calc(100% - var(--nb-pad-x))
  );
  margin: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  color: #fff;
  font-size: var(--nb-title-size);
  font-weight: 750;
  line-height: .96;
  letter-spacing: -.055em;
  text-wrap: balance;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.nb-description {
  max-width: min(100%, 560px);
  margin: clamp(10px, 2.8%, 20px) 0 0;
  overflow-wrap: anywhere;
  color: rgba(255, 255, 255, .72);
  font-size: var(--nb-description-size);
  line-height: 1.48;
}

.nb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(7px, 1.4%, 10px);
  margin-top: clamp(12px, 3.2%, 26px);
}

.nb-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: var(--nb-button-height);
  max-width: 100%;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  padding: 0 clamp(12px, 2.3%, 18px);
  overflow: hidden;
  background: rgba(255, 255, 255, .10);
  color: #fff;
  font-size: var(--nb-button-font-size);
  font-weight: 760;
  line-height: 1;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(12px);
  transition: transform 180ms ease, background 180ms ease;
}

.nb-cta:hover {
  transform: translateY(-2px);
}

.nb-cta--primary {
  border-color: transparent;
  background: var(--nb-accent);
  color: #0a0c10;
}

/* Navegação inferior */
.nb-chrome {
  position: absolute;
  left: var(--nb-pad-x);
  right: var(--nb-pad-x);
  bottom: var(--nb-pad-y);
  z-index: 6;
  display: grid;
  grid-template-columns: auto minmax(80px, 1fr) auto;
  gap: var(--nb-gap);
  align-items: center;
  min-width: 0;
}

.nb-counter {
  min-width: 48px;
  color: rgba(255, 255, 255, .72);
  font-size: clamp(10px, var(--nb-description-size), 12px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.nb-progress {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1%, 7px);
  min-width: 0;
  overflow: hidden;
}

.nb-progress__item {
  position: relative;
  flex: 1 1 0;
  min-width: 8px;
  height: 3px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: rgba(255, 255, 255, .22);
  cursor: pointer;
}

.nb-progress__fill {
  position: absolute;
  inset: 0;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
}

.nb-progress__item.is-complete .nb-progress__fill {
  transform: scaleX(1);
}

.nb-controls {
  display: flex;
  align-items: center;
  gap: clamp(5px, 1%, 8px);
  min-width: 0;
}

.nb-control {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: var(--nb-control-size);
  height: var(--nb-control-size);
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 50%;
  padding: 0;
  background: rgba(10, 12, 17, .40);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: background 180ms ease, transform 180ms ease;
}

.nb-control:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .14);
}

.nb-control svg {
  width: var(--nb-icon-size);
  height: var(--nb-icon-size);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nb-control--play svg {
  fill: currentColor;
  stroke: none;
}

.nb-video-badge {
  position: absolute;
  top: var(--nb-pad-y);
  right: var(--nb-pad-x);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - (var(--nb-pad-x) * 2));
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 999px;
  padding: clamp(5px, 1.4%, 8px) clamp(7px, 1.8%, 10px);
  overflow: hidden;
  background: rgba(10, 12, 17, .35);
  color: rgba(255, 255, 255, .78);
  font-size: clamp(8px, var(--nb-eyebrow-size), 10px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(12px);
}

.nb-video-badge::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nb-accent);
}

.nb-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

/* Limites de título por densidade do elemento */
.nb-banner[data-layout="wide"] .nb-title {
  line-height: .94;
  -webkit-line-clamp: 2;
}

.nb-banner[data-layout="medium"] .nb-title {
  line-height: .96;
  -webkit-line-clamp: 2;
}

.nb-banner[data-layout="compact"] .nb-title {
  line-height: 1;
  -webkit-line-clamp: 2;
}

.nb-banner[data-layout="micro"] .nb-title {
  line-height: 1;
  -webkit-line-clamp: 1;
}

/* Layout médio: elemento menor, mas ainda com descrição e CTA */
.nb-banner[data-layout="medium"] .nb-content {
  max-width: min(78%, var(--nb-content-max-width));
}

.nb-banner[data-layout="medium"] .nb-chrome {
  grid-template-columns: minmax(70px, 1fr) auto;
}

.nb-banner[data-layout="medium"] .nb-counter {
  display: none;
}

.nb-banner[data-layout="medium"] .nb-progress {
  grid-column: 1;
}

.nb-banner[data-layout="medium"] .nb-controls {
  grid-column: 2;
}

/* Layout compacto: prioriza título, CTA principal e controles */
.nb-banner[data-layout="compact"] .nb-content {
  max-width: calc(100% - (var(--nb-pad-x) * 2));
}

.nb-banner[data-layout="compact"] .nb-description {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.nb-banner[data-layout="compact"] .nb-actions {
  flex-wrap: nowrap;
}

.nb-banner[data-layout="compact"] .nb-cta {
  flex: 0 1 auto;
}

.nb-banner[data-layout="compact"] .nb-cta:not(.nb-cta--primary) {
  display: none;
}

.nb-banner[data-layout="compact"] .nb-chrome {
  grid-template-columns: minmax(50px, 1fr) auto;
}

.nb-banner[data-layout="compact"] .nb-counter {
  display: none;
}

.nb-banner[data-layout="compact"] .nb-progress {
  grid-column: 1;
}

.nb-banner[data-layout="compact"] .nb-controls {
  grid-column: 2;
}

/* Layout mínimo: evita qualquer estouro quando o elemento fica muito pequeno */
.nb-banner[data-layout="micro"] .nb-content {
  max-width: calc(100% - (var(--nb-pad-x) * 2));
}

.nb-banner[data-layout="micro"] .nb-eyebrow,
.nb-banner[data-layout="micro"] .nb-description,
.nb-banner[data-layout="micro"] .nb-actions,
.nb-banner[data-layout="micro"] .nb-counter,
.nb-banner[data-layout="micro"] .nb-progress,
.nb-banner[data-layout="micro"] .nb-control:first-child,
.nb-banner[data-layout="micro"] .nb-control:last-child {
  display: none;
}

.nb-banner[data-layout="micro"] .nb-chrome {
  left: auto;
  right: var(--nb-pad-x);
  grid-template-columns: auto;
}

.nb-banner[data-layout="micro"] .nb-controls {
  grid-column: 1;
}

/* Elementos verticais recebem composição própria */
.nb-banner[data-orientation="portrait"] .nb-scrim {
  background:
    linear-gradient(
      0deg,
      rgba(5, 7, 11, .92) 0%,
      rgba(5, 7, 11, .42) 55%,
      rgba(5, 7, 11, .08) 100%
    );
}

.nb-banner[data-orientation="portrait"] .nb-content {
  max-width: calc(100% - (var(--nb-pad-x) * 2));
}

.nb-banner[data-orientation="portrait"] .nb-chrome {
  grid-template-columns: minmax(52px, 1fr) auto;
}

.nb-banner[data-orientation="portrait"] .nb-counter {
  display: none;
}

.nb-banner[data-orientation="portrait"] .nb-progress {
  grid-column: 1;
}

.nb-banner[data-orientation="portrait"] .nb-controls {
  grid-column: 2;
}

@media (prefers-reduced-motion: reduce) {
  .nb-slide,
  .nb-eyebrow,
  .nb-title,
  .nb-description,
  .nb-actions,
  .nb-media {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}

/* Variante sem fundo/overlay */
.nb-banner {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.nb-scrim,
.nb-grain {
  display: none !important;
}

.nb-title,
.nb-eyebrow,
.nb-description {
  text-shadow:
    0 2px 10px rgba(0, 0, 0, .72),
    0 1px 2px rgba(0, 0, 0, .9);
}

.nb-video-badge,
.nb-control,
.nb-cta:not(.nb-cta--primary) {
  background: rgba(10, 12, 17, .34);
}


/* Visibilidade automática conforme quantidade de slides e autoplay */
.nb-chrome[hidden],
.nb-counter[hidden],
.nb-progress[hidden],
.nb-controls[hidden],
.nb-control[hidden] {
  display: none !important;
}