/**
 * Hero compacto para páginas internas - XSALT
 * Imagem de fundo, altura menor, título centralizado.
 */

.hero--page {
  position: relative;
  min-height: 42vh;
  min-height: 42dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-height) + var(--space-2xl)) var(--space-lg) var(--space-2xl);
  overflow: hidden;
  background-image: url("../../imgs/pages-header.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero--page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35),
    rgba(0, 0, 0, 0.2)
  );
  pointer-events: none;
  z-index: 1;
}

.hero--page::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
  z-index: 1;
}

.hero--page .hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--container-max-width);
  margin: 0 auto;
  text-align: center;
}

.hero--page .hero__title {
  margin-bottom: 0;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.hero--page .hero__title span {
  color: var(--color-secondary);
}