/* Slideshow controls shared with the BeastWorks Arcade. */
.hero-controls { display: flex; align-items: center; gap: 12px; padding-top: 10px; }
.hero-caption { margin: 0; color: #aaa; font-size: 13px; line-height: 1.5; flex: 1; }
.hero-navigation { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.hero-navigation button {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #bbb;
    font: inherit;
    cursor: pointer;
}
.hero-navigation button:hover { background: #303034; color: white; }
.hero-navigation button:focus-visible, .hero-tile:focus-visible { outline: 2px solid #ef7777; outline-offset: -2px; }
.hero-dot::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #65656b; }
.hero-dot[aria-current="true"]::after { background: #ffbf45; box-shadow: 0 0 8px #ed5b3666; }
@media (max-width: 580px) {
    .hero-controls { flex-wrap: wrap; gap: 5px; }
    .hero-caption { flex-basis: 100%; min-height: 3em; }
    .hero-navigation { margin-left: auto; }

}
@media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } }