/* One die, anchored in Ohio's subtitle slot. Only its own Y axis rotates. */
.ohio-widget.banner .subtitle:has(.mad-banner-die) {
  line-height: 0;
  margin-bottom: 12px;
}

.mad-banner-die {
  --mad-die-size: 34px;
  --mad-die-depth: calc(var(--mad-die-size) / 2);
  --mad-die-edge: var(--mad-bg-light, #f5f5f5);
  --mad-die-pip: var(--mad-bg-light, #f5f5f5);
  --mad-cube-angle-x: -25deg;
  --mad-cube-angle-y: 35deg;
  --mad-cube-angle-z: 0deg;
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  vertical-align: middle;
  perspective: 500px;
  pointer-events: none;
}

/* Smaller card cube; its layout slot stays unchanged. */
.mad-story-card .mad-banner-die {
  --mad-die-size: 30px;
}

.dark-scheme .mad-banner-die,
.dark .mad-banner-die {
  --mad-die-edge: var(--mad-bg, #141414);
  --mad-die-pip: #171717;
}

.mad-banner-die__cube {
  display: block;
  position: relative;
  width: var(--mad-die-size);
  height: var(--mad-die-size);
  transform-style: preserve-3d;
  transform: rotateZ(var(--mad-cube-angle-z)) rotateX(var(--mad-cube-angle-x)) rotateY(var(--mad-cube-angle-y));
  animation: mad-banner-die-spin 24s linear infinite;
}

.mad-banner-die.is-still .mad-banner-die__cube {
  animation: none;
}

.mad-banner-media {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}

.mad-banner-media .mad-banner-die,
.mad-banner-media .mad-audio-player {
  flex: 0 0 auto;
}

.mad-banner-has-audio {
  position: relative;
}

.mad-banner-has-audio > .mad-banner-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.mad-banner-has-audio .overlay-details,
.mad-banner-has-audio > .card-details {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

/* Ohio overlay positioning and Equal Height stay in charge of the card. */
.mad-banner-has-audio .image-holder > .overlay-details {
  position: absolute;
}

.mad-banner-media .mad-audio-player {
  margin-left: auto;
  pointer-events: auto;
  line-height: 1;
}

.mad-banner-media .audio-button {
  min-height: 44px;
  z-index: auto;
}

.mad-banner-card-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@keyframes mad-banner-die-spin {
  from { transform: rotateZ(var(--mad-cube-angle-z)) rotateX(var(--mad-cube-angle-x)) rotateY(var(--mad-cube-angle-y)); }
  to { transform: rotateZ(var(--mad-cube-angle-z)) rotateX(var(--mad-cube-angle-x)) rotateY(calc(var(--mad-cube-angle-y) + 360deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .mad-banner-die__cube { animation: none; }
}