/* =========================================
   Hero Institutional (reusa .hero do base.css)
   ========================================= */

.hero--institutional {
  /* usa o padding base do .hero; aqui só refinamos para interno */
  padding: clamp(56px, 7vw, 96px) 0;
}

.hero--institutional .hero__inner {
  /* mata o layout em 2 colunas da home e centraliza */
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

.hero--institutional .hero__left {
  max-width: 980px;
}

.hero--institutional .hero__title {
  margin: 0 0 12px;
}

/* breadcrumb (escopado para não conflitar) */
.hero--institutional .breadcrumbs {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--c-muted, rgba(11, 18, 32, 0.62));
}

.hero--institutional .breadcrumbs a {
  color: inherit;
  text-decoration: none;
}

.hero--institutional .breadcrumbs a:hover {
  color: rgba(11, 18, 32, 0.86);
}

@media (max-width: 520px) {
  .hero--institutional {
    padding: 54px 0 84px;
  }

  /* garante que o bloco da hero não estoure a tela por conteúdo longo */
  .hero--institutional .hero__left {
    width: 100%;
    min-width: 0;
  }

  .hero--institutional .breadcrumbs {
    font-size: 13px;

    display: flex;
    flex-wrap: nowrap;

    /* padrão: centraliza quando cabe */
    justify-content: center;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;

    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    padding-right: 6px; /* sem fade por padrão */
  }

  .hero--institutional .breadcrumbs::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  /* quando estoura, ancora à esquerda e mostra “tem mais” */
  .hero--institutional .breadcrumbs.is-overflow {
    justify-content: flex-start;
    padding-right: 22px;

    -webkit-mask-image: linear-gradient(
      90deg,
      #000 0%,
      #000 calc(100% - 22px),
      transparent 100%
    );
    mask-image: linear-gradient(
      90deg,
      #000 0%,
      #000 calc(100% - 22px),
      transparent 100%
    );
  }
}

/* breadcrumb link hover: gradient text */
.hero--detail .breadcrumbs a:hover,
.hero--institutional .breadcrumbs a:hover {
  color: transparent;
  background: var(--g-brand);
  -webkit-background-clip: text;
  background-clip: text;
}