/**
 * Mobile assets (_m) — hero KV, seções index e backgrounds CSS.
 * Breakpoint alinhado ao DS: max-width 991px.
 */

@media (max-width: 991px) {
  /*
   * Hero home — background em capa; conteúdo (selo + form) em fluxo
   * para o hero crescer e o selo aparecer completo.
   */
  .hero:not(.hero--flow):not(.hero--hub-collapsed) {
    min-height: auto;
    padding-top: var(--header-h);
    overflow-x: clip;
    overflow-y: visible;
    max-width: 100%;
  }

  .hero:not(.hero--flow):not(.hero--hub-collapsed) .hero__media {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    overflow: hidden;
    background: var(--color-black);
  }

  .hero:not(.hero--flow):not(.hero--hub-collapsed) .hero__image--home,
  .hero:not(.hero--flow):not(.hero--hub-collapsed) picture.hero__image--home {
    width: 100%;
    height: 100%;
    min-height: 100%;
  }

  .hero:not(.hero--flow):not(.hero--hub-collapsed) .hero__image--home img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center top;
  }

  .hero:not(.hero--flow):not(.hero--hub-collapsed) .hero__overlay {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, 0.12) 0%, transparent 22%),
      linear-gradient(
        to top,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.2) 28%,
        transparent 55%
      );
  }

  .hero:not(.hero--flow):not(.hero--hub-collapsed) .hero__content {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: calc(100dvh - var(--header-h) - var(--promo-encerrada-h, 0px) - var(--countdown-h, 0px));
    overflow: visible;
  }

  /* Hub fechado — KV fixo abaixo do header, arte inteira visível */
  .hero.hero--hub-collapsed .hero__media {
    overflow: hidden;
    background: var(--color-black);
  }

  .hero.hero--hub-collapsed .hero__image--home img,
  .hero.hero--hub-collapsed picture.hero__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
  }

  /* Fluxo cadastro — background mobile */
  .hero.hero--flow .hero__media {
    background: var(--color-black);
    overflow: hidden;
  }

  .hero.hero--flow .hero__image--cadastro img,
  .hero.hero--flow picture.hero__image--cadastro img {
    object-fit: contain;
    object-position: center top;
  }

  .hero.hero--logged .hero__media {
    background: var(--color-black);
  }

  .hero.hero--logged .hero__image--home img,
  .hero.hero--logged picture.hero__image img {
    object-fit: contain;
    object-position: center top;
  }

  .hero.hero--flow .hero__overlay {
    /* background: linear-gradient(to bottom, rgba(26, 0, 2, 0.38) 0%, rgba(26, 0, 2, 0.18) 40%, rgba(26, 0, 2, 0.32) 100%); */
  }

  /* Seções KV — imagem mobile full-width sem crop */
  .index-kv-section {
    overflow: hidden;
    isolation: isolate;
  }

  .index-kv-section picture,
  .index-kv-section img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center top;
  }
}