/* Explicit opt-in: service navigation only. Desktop/tablet keep their own layout. */
@media (width < 768px) {
  body main :is(.hp-services, .svc-index-grid, .sc-formats-grid, .sp-formats-grid)[data-service-stack],
  [data-instagram-refinement] #escolha [data-service-stack] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    overflow: visible;
  }

  body main :is(.hp-services, .svc-index-grid, .sc-formats-grid, .sp-formats-grid)[data-service-stack] > * {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    height: auto;
  }

  /* The Instagram cards previously filled their grid row with height: 100%. */
  [data-instagram-refinement] #escolha [data-service-stack] > .ig-offer {
    height: auto;
  }
}

@media (width < 768px) and (prefers-reduced-motion: no-preference) {
  body main [data-service-stack][data-stack-active] {
    isolation: isolate;
    padding-bottom: 24px;
  }

  body main [data-service-stack][data-stack-active] > *,
  [data-instagram-refinement] #escolha [data-service-stack][data-stack-active] > .ig-offer {
    position: sticky;
    top: var(--service-stack-top);
    z-index: var(--service-stack-layer);
    scroll-margin-top: var(--service-stack-top);
    /* Reveal/hover transforms must not move a card away from its sticky position. */
    opacity: 1;
    transform: none;
    transition: none;
  }

  body main [data-service-stack][data-stack-active] > :hover,
  [data-instagram-refinement] #escolha [data-service-stack][data-stack-active] > .ig-offer:hover {
    transform: none;
  }

  /* A keyboard-focused card remains readable even when later cards overlap it. */
  body main [data-service-stack][data-stack-active] > :is(:focus-visible, :has(:focus-visible)),
  [data-instagram-refinement] #escolha [data-service-stack][data-stack-active] > .ig-offer:is(:focus-visible, :has(:focus-visible)) {
    z-index: calc(var(--service-stack-layer) + 10);
  }
}

@media (width < 768px) and (prefers-reduced-motion: reduce) {
  body main [data-service-stack] > * {
    position: relative;
    top: auto;
    z-index: auto;
    transform: none;
    transition: none;
  }
}