/* The rail is layout-transparent on desktop, preserving the existing grid. */
.studio-metrics__rail {
  display: contents;
}

.studio-metrics__controls {
  display: none;
}

@media (max-width: 767px) {
  .studio-metrics.studio-metrics--carousel {
    --voice-accent: var(--brand-purple);
    display: block;
    padding-inline: 0;
  }

  .studio-metrics__rail {
    position: relative;
    display: flex;
    gap: 12px;
    width: 100%;
    /* Extra end space lets the last card snap to the same left edge. */
    padding-inline: var(--site-mobile-gutter, 12px) 36px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--site-mobile-gutter, 12px);
    scrollbar-width: none;
    touch-action: pan-x pan-y pinch-zoom;
  }

  .studio-metrics__rail::-webkit-scrollbar {
    display: none;
  }

  .studio-metrics__rail > .studio-metric {
    --studio-metric-padding: 24px;
    --studio-metric-background: #e1e1df;
    flex: 0 0 calc(100vw - var(--site-mobile-gutter, 12px) - 12px - 24px);
    aspect-ratio: 1;
    min-height: 240px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Keep the 24px preview visible before its number/copy entrance plays.
     Match the authoritative reveal rule's !important without changing desktop. */
  html.metric-motion-ready .studio-metrics__rail > .studio-metric {
    opacity: 1 !important;
  }

  .studio-metrics__rail .studio-metric__footer {
    gap: 24px;
  }

  .studio-metrics__controls {
    display: flex;
    margin: 24px var(--site-mobile-gutter, 12px) 0;
  }

  .studio-metrics__controls .client-voices__button {
    color: #110f14;
    background: linear-gradient(100deg, #f7f6f4, #e9e7e3) padding-box;
    border-color: rgba(17, 15, 20, 0.2);
  }

  .studio-metrics__controls .client-voices__button:not(:disabled):is(:hover, :focus-visible) {
    background: #09090c;
    border-color: var(--voice-accent);
  }

  .studio-metrics__controls .client-voices__button:disabled {
    background: linear-gradient(100deg, #f7f6f4, #e9e7e3) padding-box;
    border-color: rgba(17, 15, 20, 0.14);
    opacity: 1;
    cursor: default;
  }

  .studio-metrics__controls .client-voices__button:disabled img {
    filter: none;
    opacity: 0.35;
  }

  .studio-metrics__rail:focus-visible,
  .studio-metrics__controls .client-voices__button:focus-visible {
    outline: 2px solid var(--voice-accent);
    outline-offset: -2px;
  }

  .studio-metrics__status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}