/* ==========================================================================
   Entregaveis — carrossel de cards numerados
   ========================================================================== */

.ai-ent {
  position: relative;
  padding: 60px 0;
  font-family: var(--font-sans, "Archivo", system-ui, sans-serif);
}

.ai-ent__container {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (min-width: 1024px) { .ai-ent__container { padding: 0 2rem; } }

/* --- Header ------------------------------------------------------------- */

.ai-ent__header { max-width: 48rem; margin: 0 auto; text-align: center; }

.ai-ent__eyebrow {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.ai-ent__headline {
  font-family: var(--font-display, "Archivo Black", system-ui, sans-serif);
  margin: 1rem 0 0;
  font-size: 1rem;
  line-height: 1.1;
  font-weight: 700;
  overflow-wrap: break-word;
  word-break: break-word;
}

@media (max-width: 639px) {
  .ai-ent__header { text-align: left; }
  .ai-ent__headline { text-align: left !important; font-size: 1rem !important; }
}
@media (min-width: 480px) and (max-width: 639px) { .ai-ent__headline { font-size: 1.25rem !important; } }
@media (min-width: 640px) { .ai-ent__headline { font-size: var(--ai-headline-size, 3rem); } }

.ai-ent__subheadline {
  margin: 1rem auto 0;
  max-width: 42rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(15, 23, 42, 0.65);
}

.ai-ent__subheadline p { margin: 0; }

/* --- Carousel ----------------------------------------------------------- */

.ai-ent__carousel-wrap { margin-top: 4rem; }

.ai-ent__stage {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Clip horizontally while letting hover lift and shadow overflow vertically */
.ai-ent__clip {
  flex: 1;
  min-width: 0;
  /* top: allow translateY(-3px); right: small shadow bleed; bottom: full shadow */
  clip-path: inset(-6px -20px -56px 0);
}

.ai-ent__track {
  display: flex;
  gap: 1.25rem;
  will-change: transform;
  transition: transform 450ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* --- Card sizing (JS sets explicit px width; these are fallbacks) -------- */

.ai-ent__card { flex: 0 0 auto; }

/* --- Card visual -------------------------------------------------------- */

.ai-ent__card {
  padding: 1.5rem;
  border-radius: 1.25rem; /* overridden by inline style */
  /* border set via inline style from fields */
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  overflow: hidden; /* clip image to card border-radius */
  transition:
    transform   300ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow  300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ai-ent__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 48px -12px rgba(15, 23, 42, 0.15);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ai-ent__card { background-color: rgba(255, 255, 255, 0.92) !important; }
}

.ai-ent__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.ai-ent__num {
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1;
}

.ai-ent__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 0.5rem;
}

.ai-ent__icon-wrap svg {
  width: 1.25rem;
  height: 1.25rem;
}

.ai-ent__title {
  font-family: var(--font-display, "Archivo Black", system-ui, sans-serif);
  margin: 1rem 0 0;
  font-size: 1.125rem;
  line-height: 1.3;
  font-weight: 700;
}

.ai-ent__desc {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  line-height: 1.55;
}

/* --- Card image --------------------------------------------------------- */

.ai-ent__card-image img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
}

/* Topo: image sangra até a borda superior e laterais do card */
.ai-ent__card-image--top {
  margin: -1.5rem -1.5rem 1.25rem;
}

/* Centro: contida dentro do padding */
.ai-ent__card-image--center {
  margin: 0.875rem 0;
  border-radius: 0.625rem;
  overflow: hidden;
}

/* Rodapé: image sangra até a borda inferior e laterais do card */
.ai-ent__card-image--bottom {
  margin: 1.25rem -1.5rem -1.5rem;
}

/* --- Nav buttons -------------------------------------------------------- */

.ai-ent__nav {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(15, 23, 42, 0.14); /* fallback — overridden by inline style */
  background: #ffffff;                        /* fallback — overridden by inline style */
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
  transition: filter 200ms, opacity 200ms;
}

/* CSS chevron — color via --nav-arrow custom property set inline from fields */
.ai-ent__nav::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-top:   2.5px solid var(--nav-arrow, rgba(15, 23, 42, 0.65));
  border-right: 2.5px solid var(--nav-arrow, rgba(15, 23, 42, 0.65));
  flex-shrink: 0;
}

.ai-ent__nav--prev::before { transform: rotate(225deg); }
.ai-ent__nav--next::before { transform: rotate(45deg);  }

.ai-ent__nav:hover:not(:disabled) { filter: brightness(0.88); }

.ai-ent__nav:disabled { opacity: 0.35; cursor: default; }

/* --- Dots --------------------------------------------------------------- */

.ai-ent__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.75rem;
}

.ai-ent__dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  border: none;
  padding: 0;
  background: rgba(15, 23, 42, 0.18);
  cursor: pointer;
  transition: background 250ms, width 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ai-ent__dot--active {
  width: 24px;
  background: rgba(15, 23, 42, 0.65);
}

/* --- Mobile: setas abaixo do carrossel ---------------------------------- */

@media (max-width: 639px) {
  .ai-ent__stage {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 1.25rem;
  }

  /* Clip ocupa linha inteira; sem bleed lateral direito (evita peek do card seguinte) */
  .ai-ent__clip {
    order: 0;
    flex: 0 0 100%;
    clip-path: inset(-6px 0 -56px 0);
  }

  /* Setas descem para a linha seguinte, ficam centralizadas pelo justify-content */
  .ai-ent__nav {
    order: 1;
  }
}

/* --- Motion safe -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ai-ent__track { transition: none; }
  .ai-ent__card  { transition: box-shadow 200ms; transform: none !important; }
  .ai-ent__dot   { transition: none; }
}