/*
 * Topo das páginas internas (produto, modalidade, produtos e institucionais).
 * Original: fundo azul, imagem "contain" alinhada à direita e degradê azul → transparente.
 * A imagem é um <img> (não background) para respeitar a CSP sem estilo inline.
 */

@layer components {
  .hero {
    --hero-min: 450px;
    --hero-pad-topo: 80px;
    --hero-pad-base: 100px;
    --hero-degrade: linear-gradient(90deg, var(--cor-primaria) 56%, rgb(242 41 91 / 0%) 100%);

    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--hero-min);
    padding-block: var(--hero-pad-topo) var(--hero-pad-base);
    overflow: hidden;
    background: var(--cor-primaria);
    color: var(--cor-branco);
  }

  .hero__imagem {
    position: absolute;
    inset: 0 0 0 auto;
    width: auto;
    max-width: none;
    height: 100%;
    object-fit: contain;
    object-position: right center;
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: var(--hero-degrade);
  }

  .hero__conteudo {
    position: relative;
    z-index: 2;
  }

  .hero__conteudo > * {
    max-width: 60%;
  }

  .hero__breadcrumb {
    margin-bottom: var(--esp-4);
    font-size: var(--texto-base); /* 16px, medido no original */
  }

  /* Verde como no original (links e separador). */
  .hero__breadcrumb,
  .hero__breadcrumb a {
    color: var(--cor-secundaria);
    text-decoration: none;
  }

  .hero__breadcrumb a:hover,
  .hero__breadcrumb a:focus-visible {
    color: var(--cor-branco);
    text-decoration: underline;
  }

  .hero__rotulo {
    margin-bottom: var(--esp-2);
    color: var(--cor-secundaria);
    font-weight: var(--peso-medio);
  }

  .hero__titulo {
    color: var(--cor-branco);
  }

  .hero__subtitulo {
    margin-top: 20px;
  }

  .hero--modalidade {
    --hero-degrade: linear-gradient(90deg, var(--cor-primaria) 60%, rgb(242 41 91 / 0%) 100%);
  }

  /* Produto (template 225): colunas de 60% e 50% encolhem juntas, o texto fica com 60/110 da largura
     (~698px a 1440px; "Seguro Garantia Estendida" quebra em duas linhas, como no original). */
  @media (min-width: 1025px) {
    .hero--produto .hero__conteudo > * {
      max-width: calc(100% * 60 / 110);
    }
  }

  @media (max-width: 1440px) {
    .hero {
      --hero-min: 350px;
    }
  }

  /* Tablet: texto em cima, imagem embaixo com degradê vertical. */
  @media (max-width: 1024px) {
    .hero {
      --hero-min: 600px;
      --hero-pad-topo: 64px;
      --hero-pad-base: 240px;
      --hero-degrade: linear-gradient(180deg, var(--cor-primaria) 40%, rgb(242 41 91 / 0%) 80%);

      align-items: flex-start;
    }

    .hero--modalidade,
    .hero--lista {
      --hero-pad-base: 180px;
      --hero-degrade: linear-gradient(180deg, var(--cor-primaria) 50%, rgb(242 41 91 / 0%) 100%);
    }

    .hero__imagem {
      inset: auto 0 0;
      width: 100%;
      height: auto;
      max-height: 100%;
      object-position: bottom center;
    }

    .hero__conteudo > * {
      max-width: none;
    }
  }

  @media (max-width: 767px) {
    .hero {
      --hero-min: 450px;
      --hero-pad-base: 180px;
      --hero-degrade: linear-gradient(180deg, var(--cor-primaria) 65%, rgb(242 41 91 / 0%) 100%);
    }

    .hero--modalidade {
      --hero-degrade: linear-gradient(180deg, var(--cor-primaria) 60%, rgb(242 41 91 / 0%) 100%);
    }

    /* Original a 390px (templates 121 e institucionais): 48px no topo e 180px na base; o subtítulo
       (editor de texto) deixa 15px abaixo e o rótulo 14px antes do título. */
    .hero--lista {
      --hero-pad-topo: 48px;
    }

    .hero--lista .hero__rotulo {
      margin-bottom: 14px;
    }

    .hero--lista .hero__subtitulo {
      margin-bottom: 15px;
    }
  }
}