/* Aviiva — página Home */

/* ============ Banners ============ */

/* Um banner principal com três de apoio abaixo. Duas regras governam a altura:
   1. a seção inteira cabe na tela, sem rolagem;
   2. o banner de apoio tem metade da altura do principal.

   Daí: seção = 2·padding + 2S (principal) + gap + S (apoio) + controles,
   logo S = (altura disponível - paddings - gap - controles) / 3.
   O min() com 300px mantém as medidas originais de 600/300px como teto em
   monitores altos, em vez de esticar os banners indefinidamente. */
.banners {
  /* Barra fixa acima da seção (topbar + header + categorias). Medido no
     navegador: 160px; vira 182px abaixo de 520px, onde a topbar quebra em
     duas linhas. Se a altura de qualquer uma dessas barras mudar, ajuste aqui. */
  --banners-chrome: 160px;
  --banners-pad: var(--space-8);
  --banners-gap: var(--space-6);
  --banners-controles: 0px; /* espaço dos controles do carrossel — só no mobile */
  --banners-vh: 100vh;

  --banner-support-h: min(
    300px,
    calc(
      (
        var(--banners-vh) - var(--banners-chrome) - 2 * var(--banners-pad)
        - var(--banners-gap) - var(--banners-controles)
      ) / 3
    )
  );

  padding-block: var(--banners-pad);
}

/* svh = viewport com a barra do navegador expandida: garante que caiba no
   mobile mesmo antes de a barra de endereço recolher. */
@supports (height: 100svh) {
  .banners { --banners-vh: 100svh; }
}

.banners__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--banners-gap);
}

/* No desktop os wrappers do carrossel desaparecem da árvore de layout e os três
   banners de apoio viram itens diretos da grade. */
.banners__support,
.banners__track { display: contents; }

.banner {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--surface-sunken);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--duration-standard) var(--ease-standard),
              transform var(--duration-standard) var(--ease-standard);
}
/* Só os de apoio são links — o principal é um contêiner com um botão dentro,
   então não deve reagir ao hover como se fosse clicável por inteiro. */
.banner--support:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* O principal atravessa as três colunas da grade. */
.banner--main {
  grid-column: 1 / -1;
  height: calc(var(--banner-support-h) * 2);
}

.banner--support { height: var(--banner-support-h); }

/* O <picture> é só um contêiner de troca de fonte: precisa virar bloco de altura
   cheia para o height:100% da imagem continuar resolvendo contra a caixa do banner. */
.banner__media {
  display: block;
  width: 100%;
  height: 100%;
}

.banner__img {
  display: block;
  width: 100%;
  height: 100%;
  /* cover preenche a caixa por completo. Isso só é seguro porque as artes são
     exportadas a partir do gabarito (assets/gabarito-banner-*.jpg): logotipo,
     título e CTA ficam dentro da "área segura" central, que o cover nunca corta
     em nenhuma proporção de tela prevista. Arte nova sem seguir o gabarito
     pode ter texto cortado — reexporte usando o gabarito como guia. */
  object-fit: cover;
  object-position: center;
  transition: transform var(--duration-standard) var(--ease-standard);
}
.banner--support:hover .banner__img { transform: scale(1.03); }

/* ---- Sobreposição do banner principal ---- */

.banner__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-12);
  /* Escurece a arte para o texto branco manter contraste AA em qualquer ponto
     da imagem — inclusive sobre as áreas mais claras do fundo. */
  background: rgba(0, 0, 0, 0.55);
  text-align: start;
}

.banner__title {
  max-width: 20ch;
  /* clamp porque a altura do banner varia muito: em janela baixa o título
     precisa encolher para o bloco inteiro continuar cabendo. */
  font-size: clamp(var(--size-heading-md), 3.4vw, var(--size-display-md));
  font-weight: var(--weight-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-white);
  text-wrap: balance;
}

.banner__subtitle {
  max-width: 44ch;
  font-size: clamp(var(--size-body-sm), 1.5vw, var(--size-body-lg));
  line-height: var(--lh-body);
  color: var(--color-gray-300);
}

/* Botão mais compacto que o padrão .btn: aqui ele divide espaço com o título
   dentro do banner, então não deve competir em peso visual. */
.banner__cta {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--size-body-sm);
}

/* ---- Controles do carrossel (criados por main.js, só no mobile) ---- */

.banners__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

/* Alvo de toque de 24px com o ponto desenhado no ::before. */
.banners__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.banners__dot::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--color-gray-300);
  border-radius: var(--radius-pill);
  transition: width var(--duration-standard) var(--ease-standard),
              background-color var(--duration-standard) var(--ease-standard);
}

.banners__dot[aria-current="true"]::before {
  width: 20px;
  background: var(--brand-primary);
}

@media (prefers-reduced-motion: reduce) {
  .banner,
  .banner__img,
  .banners__dot::before { transition: none; }
  .banner:hover { transform: none; }
  .banner:hover .banner__img { transform: none; }
}

/* ============ Faixa de destaques ============ */

.highlights {
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-default);
  padding-block: var(--space-10);
}

.highlights__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
}

.highlight {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.highlight__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--brand-primary);
}

.highlight__title {
  font-size: var(--size-body-md);
  font-weight: var(--weight-medium);
  line-height: var(--lh-heading);
  color: var(--text-primary);
}

.highlight__text {
  margin-top: var(--space-1);
  font-size: var(--size-body-sm);
  color: var(--text-secondary);
}

/* ============ Responsivo ============ */

@media (max-width: 1080px) {
  .highlights__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile: coluna única e os banners de apoio viram carrossel — um por vez,
   então a conta de altura continua valendo (principal + um apoio). */
@media (max-width: 760px) {
  .banners {
    --banners-gap: var(--space-4);
    --banners-controles: 32px; /* pontos (24px) + margem (8px) */
  }

  .banners__grid { grid-template-columns: minmax(0, 1fr); }

  .banners__support {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
  }

  .banners__track {
    display: flex;
    /* 400ms: mais longo que --duration-standard, que é curto demais
       para uma troca de slide de largura inteira. */
    transition: transform 400ms var(--ease-standard);
  }

  .banners__track > .banner {
    flex: 0 0 100%;
  }

  /* Sem elevação no toque: o card ficaria "preso" no estado de hover. */
  .banner--support:hover {
    transform: none;
    box-shadow: none;
  }
  .banner--support:hover .banner__img { transform: none; }

  .banner__overlay {
    gap: var(--space-3);
    padding: var(--space-6);
  }
}

@media (max-width: 520px) {
  .banners { --banners-chrome: 182px; }
  .highlights__grid { grid-template-columns: minmax(0, 1fr); }

  .banner__overlay { padding: var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
  .banners__track { transition: none; }
}