/* Panoramic hero controls: keep the machinery as the visual lead. */
.oly-panorama-hero {
    --oly-panorama-panel: rgba(8, 34, 55, .86);
    --oly-panorama-line: rgba(102, 221, 237, .82);
}

.oly-panorama-slide__counter {
    right: 0;
    top: auto;
    bottom: 126px;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    min-width: 118px;
    justify-items: start;
    align-items: end;
    gap: 2px 7px;
    padding: 12px 15px 11px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 16px 16px 5px 16px;
    background: var(--oly-panorama-panel);
    color: #fff;
    box-shadow: 0 18px 44px rgba(5, 28, 47, .24);
    text-shadow: none;
    transform: none;
    backdrop-filter: blur(14px);
}

.oly-panorama-slide__counter::after {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 54%;
    height: 2px;
    content: "";
    background: linear-gradient(90deg, transparent, var(--oly-accent));
}

.oly-panorama-hero--story-right .oly-panorama-slide__counter {
    right: auto;
    left: 0;
    border-radius: 16px 16px 16px 5px;
}

.oly-panorama-slide__counter span {
    grid-column: 1 / -1;
    color: rgba(255, 255, 255, .66);
    font-size: 8px;
    letter-spacing: .16em;
}

.oly-panorama-slide__counter strong {
    font-family: var(--oly-display);
    font-size: 36px;
    line-height: .9;
    letter-spacing: -.055em;
}

.oly-panorama-slide__counter i {
    margin: 0 0 2px;
    color: rgba(255, 255, 255, .58);
    font-size: 10px;
}

.oly-panorama-slide__hotspots {
    z-index: 4;
    pointer-events: none;
}

.oly-panorama-hotspot {
    appearance: none;
    width: 44px;
    min-width: 44px;
    height: 44px;
    justify-content: flex-start;
    gap: 0;
    overflow: visible;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, .52);
    border-radius: 999px;
    background: var(--oly-panorama-panel);
    color: #fff;
    cursor: pointer;
    font: inherit;
    pointer-events: auto;
    box-shadow: 0 14px 34px rgba(5, 28, 47, .25);
    transition: width .28s ease, background-color .22s ease, transform .22s ease, box-shadow .22s ease;
}

.oly-panorama-hotspot:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(5, 28, 47, .32);
}

.oly-panorama-hotspot:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .92);
    outline-offset: 3px;
}

.oly-panorama-hotspot.is-active {
    width: min(218px, 23vw);
    padding-right: 15px;
    background: rgba(255, 255, 255, .94);
    color: var(--oly-navy);
    box-shadow: 0 0 0 3px var(--oly-accent-soft), 0 18px 42px rgba(5, 28, 47, .24);
}

.oly-panorama-hotspot i {
    width: 32px;
    min-width: 32px;
    height: 32px;
    box-shadow: 0 7px 20px rgba(18, 156, 196, .3);
}

.oly-panorama-hotspot b {
    max-width: 0;
    margin-left: 0;
    overflow: hidden;
    opacity: 0;
    white-space: nowrap;
    transition: max-width .28s ease, margin-left .28s ease, opacity .18s ease .04s;
}

.oly-panorama-hotspot.is-active b {
    max-width: 164px;
    margin-left: 9px;
    opacity: 1;
}

.oly-panorama-hotspot::after {
    left: 21px;
    height: 38px;
    background: linear-gradient(var(--oly-panorama-line), transparent);
}

.oly-panorama-hotspot::before {
    position: absolute;
    left: 18px;
    top: calc(100% + 34px);
    width: 7px;
    height: 7px;
    content: "";
    border: 2px solid rgba(255, 255, 255, .86);
    border-radius: 50%;
    background: var(--oly-accent);
    box-shadow: 0 0 0 4px rgba(29, 186, 207, .2);
}

.oly-panorama-hotspot--one { left: 63%; top: 22%; }
.oly-panorama-hotspot--two { left: 77%; top: 47%; }
.oly-panorama-hotspot--three { left: 61%; top: 66%; }

.oly-panorama-hero--story-right .oly-panorama-hotspot--one { right: 63%; left: auto; }
.oly-panorama-hero--story-right .oly-panorama-hotspot--two { right: 77%; left: auto; }
.oly-panorama-hero--story-right .oly-panorama-hotspot--three { right: 61%; left: auto; }

@media (max-width: 920px) {
    .oly-panorama-slide__counter,
    .oly-panorama-slide__hotspots {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .oly-panorama-hotspot,
    .oly-panorama-hotspot b {
        transition: none;
    }
}