/* =========================================================
   Layout overrides do hero da página inicial (Horizon).
   Centraliza textos do header e coloca os 4 cards
   abaixo, lado a lado (4 colunas).
   Aplica nos dois temas (Horizon e Amazon).
   ========================================================= */

/* O hero usa um bg arbitrário do Tailwind: bg-[#0040C1] */
section[class*="0040C1"] > div > .grid {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 4.5rem !important;
}

/* Coluna 1: textos — centralizar */
section[class*="0040C1"] > div > .grid > div.order-1,
section[class*="0040C1"] > div > .grid > div:first-child {
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 960px !important;
  margin: 0 auto !important;
}

/* h1, p e trust row dentro do hero */
section[class*="0040C1"] h1,
section[class*="0040C1"] p {
  max-width: 880px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Trust row (icones + texto): justify-start -> justify-center */
section[class*="0040C1"] .flex.flex-wrap {
  justify-content: center !important;
}

/* Coluna 2: 4 cards lado a lado em telas médias/grandes */
section[class*="0040C1"] > div > .grid > div.order-2,
section[class*="0040C1"] > div > .grid > div:last-child {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  gap: 1rem !important;
}

@media (min-width: 640px) {
  section[class*="0040C1"] > div > .grid > div.order-2,
  section[class*="0040C1"] > div > .grid > div:last-child {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1024px) {
  section[class*="0040C1"] > div > .grid > div.order-2,
  section[class*="0040C1"] > div > .grid > div:last-child {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* O hero originalmente é min-h tela cheia com flex centralizado;
   ao empilhar conteúdo, deixar respirar mais e remover essa altura forçada */
section[class*="0040C1"] {
  min-height: 0 !important;
}
section[class*="0040C1"] > div {
  padding-top: 6rem !important;
  padding-bottom: 3rem !important;
}