/* ============================================================
   Global Fixes — Back to Top, Carousel Dots, Format Icons, Video
   ============================================================ */

/* ── Back to Top Button ── */
.back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-charcoal);
    color: var(--color-white);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    z-index: var(--z-sticky);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out), background var(--duration-fast);
    pointer-events: none;
    box-shadow: var(--shadow-lg);
}

.back-to-top.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.back-to-top:hover {
    background: var(--color-primary);
}

/* Shift up when sticky CTA is visible */
.sticky-cta.visible ~ .back-to-top,
body:has(.sticky-cta.visible) .back-to-top {
    bottom: 76px;
}

/* ── Carousel Dots — Larger for mobile ── */
@media (max-width: 767px) {
    .carousel-dots__dot {
        width: 14px;
        height: 14px;
    }
}

/* ── Format Icons — Remove pointer cursor (not interactive) ── */
.format-icon {
    cursor: default;
}

/* ── Video Embed Container ── */
.video-embed {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    background: var(--color-charcoal);
    aspect-ratio: 16 / 9;
}

.video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.video-embed--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--space-4);
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all var(--duration-normal);
}

.video-embed--placeholder:hover {
    color: var(--color-white);
}

.video-embed__play {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 4px 20px rgba(var(--color-primary-rgb), 0.4);
    transition: transform var(--duration-normal), box-shadow var(--duration-normal);
}

.video-embed--placeholder:hover .video-embed__play {
    transform: scale(1.1);
    box-shadow: 0 8px 30px rgba(var(--color-primary-rgb), 0.5);
}

.video-embed__text {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

/* ── Smooth section transitions ── */
.fade-in {
    transition-delay: 0.1s;
}

.fade-in:nth-child(2) { transition-delay: 0.15s; }
.fade-in:nth-child(3) { transition-delay: 0.2s; }