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

@media (max-width: 991px) {
  /*
   * Hero home — metade superior amarela (selo);
   * KV na metade inferior, deslocada ~95% da altura do box de login
   * para o card não ficar tão em cima da foto.
   */
  .hero:not(.hero--flow):not(.hero--hub-collapsed) {
    --hero-login-box-h: 18rem;
    --hero-kv-nudge: calc(var(--hero-login-box-h) * 0.95);
    min-height: max(100dvh, 112rem);
    padding-top: var(--hero-stack-h);
    overflow-x: clip;
    overflow-y: visible;
    max-width: 100%;
    background: #a5fa00;
  }

  .hero:not(.hero--flow):not(.hero--hub-collapsed) .hero__media {
    position: absolute;
    top: calc(50% + var(--hero-stack-h) / 2 + var(--hero-kv-nudge));
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    overflow: hidden;
    background: transparent;
  }

  .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 center;
  }

  .hero:not(.hero--flow):not(.hero--hub-collapsed) .hero__overlay {
    display: none;
  }

  .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: max(calc(100dvh - var(--hero-stack-h)), 100rem);
    padding-bottom: 12rem;
    box-sizing: border-box;
    overflow: visible;
  }

  /* Hub fechado — KV na metade inferior (mesmo nudge do box aberto) */
  .hero.hero--hub-collapsed .hero__media {
    overflow: hidden;
    background: transparent;
    top: calc(50% + var(--hero-stack-h) / 2 + var(--hero-kv-nudge, calc(18rem * 0.95)));
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto;
  }

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

  /* Fluxo cadastro — bkg no mobile */
  .hero.hero--flow .hero__media {
    background: #a5fa00;
    overflow: hidden;
  }

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

  .hero.hero--logged .hero__media {
    background: transparent;
  }

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

  .hero.hero--flow .hero__overlay {
    display: none;
  }

  /* 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;
  }
}