/* =========================================================
   BANNER DO TOPO: os desenhos novos da campanha (Views/Home/_Banner.cshtml)
   O desenho de sempre (amarelo, personagem e número) continua todo no home.css (.promo).
   Aqui ficam só:
   - .promo--foto     imagem cobrindo o banner, película (--veu, 0 a .8), texto escuro ou claro (.promo--claro),
                      à esquerda ou no centro (.promo--centro);
   - .promo--produto  um produto/pack num "palco" de cartolina, com o adesivo de economia ou de esgotado.
   Os dois ficam dentro de .promo-caixa, que mede a própria largura (container query "banner"): o banner se ajeita
   pela largura DELE, e não da janela. Assim a prévia do admin (uma caixa estreita) mostra o mesmo que o celular.
   As regras de celular repetem as propriedades que o home.css muda no @media (max-width: 720px), com uma classe a
   mais, para valer tanto no celular de verdade quanto na prévia.
   ========================================================= */

.promo-caixa {
  container: banner / inline-size;
}

/* faixa da prévia (só o admin vê, pelo "Ver prévia na loja") */
.promo-previa {
  margin: 0 auto var(--s3);
  width: fit-content;
  max-width: 100%;
  padding: 0.45rem 1rem;
  border: 2.5px dashed var(--navy);
  border-radius: var(--r-pill);
  background: var(--sun-soft, #fff3c4);
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 600;
  text-align: center;
}

/* =========================================================
   1. IMAGEM DE FUNDO
   ========================================================= */

.promo.promo--foto {
  --sun-ink: var(--navy);
  --sun-ink-2: #2a3350;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-height: clamp(21rem, 15rem + 12cqi, 28rem);
  /* enquanto a foto carrega */
  background: var(--sky-soft);
}

.promo--foto .promo__fundo,
.promo--foto .promo__fundo img,
.promo--foto .promo__veu {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.promo--foto .promo__fundo {
  z-index: 0;
}

.promo--foto .promo__fundo img {
  object-fit: cover;
  object-position: center;
}

/* película: com texto escuro ela CLAREIA a foto, com texto claro ela ESCURECE (o dono escolhe quanto) */
.promo--foto .promo__veu {
  z-index: 1;
  background: rgb(255 255 255 / var(--veu, 0));
  pointer-events: none;
}

.promo--foto .promo__copy {
  max-width: min(40rem, 62%);
}

.promo--foto .promo__title {
  font-size: clamp(2.5rem, 1.4rem + 4.4cqi, 4.5rem);
}

/* texto branco (fotos escuras): tinta clara + sombrinha para descolar da foto */
.promo.promo--claro {
  --sun-ink: #fff;
  --sun-ink-2: rgb(255 255 255 / 0.92);
  background: var(--navy);
}

.promo--claro .promo__veu {
  background: rgb(42 23 71 / var(--veu, 0));
}

.promo--claro .promo__title,
.promo--claro .promo__lede,
.promo--claro .promo__price {
  text-shadow: 0 2px 14px rgb(42 23 71 / 0.55);
}

.promo--claro .promo__more {
  text-decoration-color: rgb(255 255 255 / 0.6);
}

.promo--claro .promo__more:hover {
  text-decoration-color: #fff;
}

.promo--claro :focus-visible {
  outline-color: #fff;
}

.promo--claro .promo__go {
  background: var(--sun);
  color: var(--navy);
}

/* texto no centro */
.promo--centro .promo__copy {
  align-items: center;
  max-width: min(46rem, 100%);
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 0.75rem + 3cqi, 3.5rem);
  text-align: center;
}

.promo--centro .promo__lede {
  max-width: 36ch;
}

.promo--centro .promo__facts,
.promo--centro .promo__cta {
  justify-content: center;
}

/* =========================================================
   2. PRODUTO OU PACK EM DESTAQUE
   ========================================================= */

.promo__art--produto {
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 1rem + 2cqi, 2.75rem);
}

/* o "palco": cartolina branca com contorno de nanquim, torta como um adesivo colado */
.promo__palco {
  position: relative;
  z-index: 2;
  width: min(86%, 22rem);
  aspect-ratio: 1;
  border-radius: 1.75rem;
  background: #fff;
  outline: var(--ink, 2.5px solid var(--navy));
  outline-offset: -2.5px;
  box-shadow: 0 7px 0 var(--navy);
  rotate: 3deg;
}

.promo__palco .photo {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.promo__palco .photo__img {
  inset: 9%;
  width: 82%;
  height: 82%;
}

/* "Você economiza R$ X" / "Esgotou! Volta logo" */
.promo__adesivo {
  position: absolute;
  z-index: 3;
  top: 9%;
  right: 7%;
  margin: 0;
  max-width: 70%;
  font-size: clamp(0.95rem, 0.8rem + 0.5cqi, 1.125rem);
  rotate: 5deg;
  text-align: center;
}

.promo--esgotado .promo__palco .photo__img {
  filter: grayscale(0.7);
  opacity: 0.7;
}

.promo--produto .promo__price b {
  margin-left: 0;
}

.promo__old {
  margin-left: 0.6rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--sun-ink-2);
}

/* =========================================================
   3. CELULAR (ou caixa estreita na prévia do admin)
   ========================================================= */

@container banner (max-width: 1100px) {
  .promo.promo--produto {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}

@container banner (max-width: 720px) {
  .promo.promo--foto,
  .promo.promo--produto {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    border-radius: 1.5rem;
  }

  .promo--foto .promo__copy,
  .promo--produto .promo__copy {
    max-width: none;
    padding: var(--s4) var(--s5) var(--s5);
  }

  .promo--foto .promo__badge,
  .promo--produto .promo__badge {
    position: static;
    font-size: 0.9375rem;
  }

  .promo--foto .promo__title,
  .promo--produto .promo__title {
    margin-top: var(--s3);
    max-width: none;
    font-size: clamp(2rem, 1.2rem + 5cqi, 2.75rem);
  }

  .promo--foto .promo__lede,
  .promo--produto .promo__lede {
    margin-top: var(--s2);
    font-size: 1rem;
  }

  .promo--foto .promo__facts,
  .promo--produto .promo__facts {
    margin-top: var(--s4);
  }

  .promo--foto .promo__cta,
  .promo--produto .promo__cta {
    width: 100%;
    margin-top: var(--s4);
    gap: var(--s1);
  }

  .promo--foto .promo__go,
  .promo--produto .promo__go {
    width: 100%;
  }

  .promo--foto .promo__more,
  .promo--produto .promo__more {
    width: 100%;
    justify-content: center;
    font-size: 0.9375rem;
  }

  /* foto: o texto desce para a parte de baixo, a foto aparece em cima */
  .promo.promo--foto {
    align-items: end;
    min-height: 30rem;
  }

  .promo--foto .promo__copy {
    padding-top: 7rem;
  }

  /* produto: o palco vai para cima, o texto embaixo */
  .promo--produto .promo__art {
    order: -1;
    height: 15.5rem;
    min-height: 0;
    padding: var(--s4) var(--s4) var(--s1);
  }

  .promo--produto .promo__palco {
    width: auto;
    height: 100%;
  }

  .promo--produto .promo__adesivo {
    top: 1rem;
    right: 1rem;
    font-size: 0.9375rem;
  }

  .promo--produto .promo__star--a {
    top: 12%;
    bottom: auto;
    left: 8%;
  }

  .promo--produto .promo__star--c {
    top: auto;
    bottom: 14%;
    left: 10%;
    right: auto;
  }
}


/* =========================================================
   4. TÍTULO COMPRIDO (vale para os três desenhos; títulos curtos não ganham a classe)
   ========================================================= */

.promo.promo--titulo-l .promo__title {
  font-size: clamp(2.125rem, 1.3rem + 2.6vw, 3.5rem);
}

.promo.promo--titulo-xl .promo__title {
  font-size: clamp(1.875rem, 1.2rem + 1.9vw, 2.75rem);
  line-height: 1.02;
}

@container banner (max-width: 720px) {
  .promo.promo--titulo-l .promo__title {
    font-size: clamp(1.875rem, 1.1rem + 4.4cqi, 2.375rem);
  }

  .promo.promo--titulo-xl .promo__title {
    font-size: clamp(1.625rem, 1rem + 3.6cqi, 2rem);
  }
}

@media (max-width: 720px) {
  .promo.promo--titulo-l .promo__title {
    font-size: clamp(1.875rem, 1.1rem + 4.4vw, 2.375rem);
  }

  .promo.promo--titulo-xl .promo__title {
    font-size: clamp(1.625rem, 1rem + 3.6vw, 2rem);
  }
}

/* foto de fundo: o contorno de nanquim vai por cima da foto (o outline do .promo fica embaixo dela) */
.promo--foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 2.5px solid var(--navy);
  border-radius: inherit;
  pointer-events: none;
}