/* ==========================================================================
   HERO BACEN — Cópia completa e autônoma do section-hero.css
   Remove: vídeo, picture, page-specific body classes, hero-rating.
   Adiciona: background da variante Bacen via .hero-card--bacen.
   Design: https://www.figma.com/design/6iw7arggcNMOEZ486sdbPr/Global-384?node-id=554-1675
   ========================================================================== */

/* --------------------------------------------------------------------------
   BASE — .hero-section e .hero-card (igual ao section-hero.css)
   -------------------------------------------------------------------------- */

/**
 * @element .hero-section
 * @description Wrapper da seção hero. Mobile: altura fixa de 684px.
 *              Desktop (≥1024px): altura automática com min-height 100svh.
 */
.hero-section {
  padding-top: 88px;
  height: 684px;
  display: flex;
  align-items: stretch;
  font-family: 'Google Sans Flex', 'Geist', sans-serif;
}

/**
 * @element .hero-card
 * @description Card principal do hero. Mobile: largura quase total.
 *              Desktop: min(calc(100% - 160px), 1760px) — idêntico à home.
 * @docblocker DocBlocker: unified all corners to have the same curve,
 *             removing the bottom-right flat corner.
 */
.hero-card {
  position: relative;
  width: min(calc(100% - 32px), 1760px);
  margin: 8px auto 16px;
  border-radius: var(--radius-card);
  corner-shape: squircle;
  overflow: hidden;
  background: #000;
  flex: 1;
}

/**
 * @element .hero-overlay
 * @description Overlay de gradiente sobre a imagem/vídeo de fundo.
 *              Na variante Bacen (.hero-card--bacen) é ocultado pois
 *              o background já inclui o gradiente de opacidade.
 */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(17, 24, 52, .82) 0%, rgba(17, 24, 52, .56) 35%, rgba(17, 24, 52, .2) 66%, rgba(17, 24, 52, .28) 100%),
    radial-gradient(ellipse at center, rgba(0, 0, 0, .04) 0%, rgba(0, 0, 0, .52) 100%);
}

/**
 * @element .hero-content
 * @description Container do conteúdo textual. Mobile: padding compacto,
 *              alinhado ao rodapé. Desktop: padding 96px/160px, gap 66px.
 */
.hero-content {
  position: relative;
  z-index: 3;
  padding: 40px 24px 90px;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-end;
  gap: 28px;
}

/**
 * @element .hero-copy, .hero-actions
 * @description Grupos de conteúdo em coluna, alinhados à esquerda.
 */
.hero-copy,
.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-copy {
  gap: 24px;
}

.hero-actions {
  gap: 28px;
}

/**
 * @element .hero-title
 * @description Título principal do hero. Mobile: clamp de 28–38px.
 *              Desktop: 42px, weight 600, uppercase.
 */
.hero-title {
  font-size: clamp(28px, 7vw, 38px);
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  line-height: 1.35;
  letter-spacing: .5px;
}

/**
 * @element .hero-desc
 * @description Parágrafo(s) descritivos. Oculto no mobile,
 *              visível no desktop (display:block sobrescrito em @min-width 1024px).
 */
.hero-desc {
  display: none;
  color: rgba(255, 255, 255, .88);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0;
  max-width: 520px;
}

/**
 * @element .hero-stats
 * @description Linha de stats: 384 / 17 anos / 100%. Mobile: gap 28px,
 *              apenas 2 itens visíveis. Desktop: todos visíveis, gap 34px.
 */
.hero-stats {
  display: flex;
  gap: 28px;
  color: #fff;
}

/**
 * @docblocker DocBlocker: Mobile oculta 3º e posteriores stats.
 *             Desktop sobrescreve para display:block.
 */
.hero-stats > div:nth-child(n+3) {
  display: none;
}

/**
 * @element .stat-number
 * @description Número do indicador. Mobile: 30px. Desktop: 48px.
 */
.stat-number {
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
}

/**
 * @element .stat-label
 * @description Label do indicador. Mobile: 10px. Desktop: 16px.
 */
.stat-label {
  font-size: 10px;
  font-weight: 300;
  opacity: .85;
  margin-top: 4px;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   BACKGROUND — Variante Bacen via .hero-card--bacen
   Camada 1 (frente): gradient horizontal navy → transparente.
   Camada 2 (fundo): hero-384.svg posicionado à direita.
   -------------------------------------------------------------------------- */

/**
 * @modifier .hero-card--bacen
 * @description Substitui o background padrão (#000) pelo fundo específico
 *              da seção Bacen: gradient de opacidade + SVG "384" dourado.
 *
 *              background-size:
 *                cover     → gradient cobre 100% do card
 *                auto 100% → SVG escala pela altura, mantém proporção
 *
 *              background-position:
 *                center       → gradient centralizado
 *                right center → SVG colado na borda direita
 */
.hero-card--bacen {
  background:
    linear-gradient(
      90deg,
      #192342                   0%,
      rgba(25, 35, 66, 0.98)   40%,
      rgba(25, 35, 66, 0.60)   70%,
      rgba(25, 35, 66, 0)     100%
    ),
    url('../../images/hero-384.svg');
  background-size:
    cover,
    auto 100%;
  background-position:
    center,
    right center;
  background-repeat:
    no-repeat,
    no-repeat;
  background-color: #192342;
}

/**
 * @modifier body:not(.page-home) .hero-card--bacen
 * @description Override de especificidade (0,2,1) para neutralizar as regras
 *              body:not(.page-home) .hero-card e body.page-sobre .hero-card
 *              definidas em section-hero.css — que sobrescreveriam o background
 *              acima por terem especificidade maior que .hero-card--bacen (0,1,0).
 *
 *              Como section-hero-bacen.css é carregado DEPOIS de section-hero.css,
 *              o empate de especificidade garante que estas regras vencem.
 *
 * @docblocker DocBlocker: Resolução de conflito de especificidade CSS.
 *             section-hero.css seta background-image via body.page-* .hero-card
 *             com especificidade 0,2,1. Este seletor tem a mesma especificidade
 *             mas carrega depois, portanto prevalece na cascata.
 */
body:not(.page-home) .hero-card--bacen,
body.page-sobre .hero-card--bacen {
  background-image:
    linear-gradient(
      90deg,
      #192342                   0%,
      rgba(25, 35, 66, 0.98)   40%,
      rgba(25, 35, 66, 0.60)   70%,
      rgba(25, 35, 66, 0)     100%
    ),
    url('../../images/hero-384.svg');
  background-size:
    cover,
    auto 100%;
  background-position:
    center,
    right center;
  background-repeat:
    no-repeat,
    no-repeat;
  background-color: #192342;
}

/**
 * @modifier .hero-card--bacen .hero-overlay
 * @description O overlay padrão é removido: o gradient do background
 *              já cumpre o papel de fade esquerda → direita.
 */
.hero-card--bacen .hero-overlay {
  display: none;
}


/* --------------------------------------------------------------------------
   DESKTOP ≥ 1024px
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  /**
   * @docblocker DocBlocker: hero-section desktop — altura automática, min-height 100svh.
   */
  .hero-section {
    padding-top: 100px;
    align-items: flex-start;
    height: auto;
    min-height: 100svh;
  }

  /**
   * @docblocker DocBlocker: applied equal curve to all corners to match top/bottom-left pattern.
   *             Largura idêntica ao hero da home: min(calc(100% - 160px), 1760px).
   */
  .hero-card {
    width: min(calc(100% - 160px), 1760px);
    min-height: 776px;
    height: auto;
    margin: 12px auto 40px;
    border-radius: 76px;
    corner-shape: squircle;
    overflow: hidden;
    background: transparent;
    flex: none;
  }

  .hero-overlay {
    display: block;
    background: linear-gradient(90deg, rgba(17, 24, 52, .78) 0%, rgba(17, 24, 52, .5) 32%, rgba(17, 24, 52, .08) 60%, rgba(17, 24, 52, .12) 100%);
    border-radius: 76px;
    corner-shape: squircle;
  }

  /**
   * @element .hero-content @desktop
   * @description Padding alinhado ao Figma: 96px top, 160px left.
   *              gap 66px entre text-group → logo → stats.
   */
  .hero-content {
    position: relative;
    padding: 96px 0 96px 160px;
    width: 100%;
    height: auto;
    justify-content: flex-start;
    gap: 66px;
    max-width: calc(693px + 160px);
  }

  .hero-copy {
    gap: 30px;
    width: 693px;
  }

  .hero-actions {
    gap: 31px;
  }

  .hero-title {
    font-size: 42px;
    font-weight: 600;
    line-height: 1.389;
    letter-spacing: .84px;
    width: 693px;
    max-width: 693px;
  }

  .hero-desc {
    display: block;
    font-size: 18px;
    line-height: 1.389;
    letter-spacing: .36px;
    max-width: 693px;
  }

  .hero-stats {
    gap: 34px;
    align-items: flex-start;
  }

  .hero-stats > div:nth-child(n+3) {
    display: block;
  }

  .stat-number {
    font-size: 48px;
    font-weight: 300;
    line-height: 48px;
  }

  .stat-label {
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    line-height: 20.8px;
    opacity: 1;
  }

  /**
   * @modifier .hero-card--bacen @desktop
   * @description Re-aplica o background Bacen no desktop (sobrescreve
   *              o background:transparent do .hero-card @1024px e os
   *              body.page-* aplicados pelo section-hero.css).
   */
  .hero-card--bacen,
  body:not(.page-home) .hero-card--bacen,
  body.page-sobre .hero-card--bacen {
    background:
      linear-gradient(
        90deg,
        #192342                   0%,
        rgba(25, 35, 66, 0.98)   40%,
        rgba(25, 35, 66, 0.60)   70%,
        rgba(25, 35, 66, 0)     100%
      ),
      url('../../images/hero-384.svg');
    background-size:
      cover,
      auto 100%;
    background-position:
      center,
      right center;
    background-repeat:
      no-repeat,
      no-repeat;
    background-color: #192342;
  }
}

/* --------------------------------------------------------------------------
   MOBILE ≤ 768px
   -------------------------------------------------------------------------- */

/**
 * @breakpoint max 768px
 * @description Variante Bacen no mobile: gradient puro sem SVG
 *              (evita o "384" comprimido em tela pequena).
 */
@media (max-width: 768px) {
  .hero-card--bacen {
    background: linear-gradient(165.25deg, #232E54 26.863%, #111937 96.563%);
    background-color: #192342;
  }
}