/**
 * Ticker / Announcement Bar Widget
 * 
 * Scrollender Ticker für Highlights & Ankündigungen
 * 
 * @package CockpitOS_CM_Immo_Theme
 * @version 2.0.4
 */

/* ============================================
   Base Container
   ============================================ */
.cockpit-ticker {
    position: relative;
    width: 100%;
    background-color: var(--color-secondary, #F25363);
    overflow: hidden;
    padding: 20px 0;
}

.cockpit-ticker__track {
    display: flex;
    align-items: center;
    gap: 80px; /* Space between items */
    white-space: nowrap;
    animation: ticker-scroll 20s linear infinite;
}

/* Pause animation on hover */
.cockpit-ticker.ticker-pause:hover .cockpit-ticker__track {
    animation-play-state: paused;
}

/* ============================================
   Ticker Items
   ============================================ */
.cockpit-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 30px;
    flex-shrink: 0;
}

.cockpit-ticker__text {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: var(--font-weight-semibold);
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cockpit-ticker__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #ffffff;
    opacity: 0.8;
}

/* ============================================
   Scroll Animation (Nach Links)
   ============================================ */
@keyframes ticker-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-33.33%); /* 1/3 because we render 3x */
    }
}

/* Reverse direction (Nach Rechts) */
[data-direction="right"] .cockpit-ticker__track {
    animation-name: ticker-scroll-reverse;
}

@keyframes ticker-scroll-reverse {
    0% {
        transform: translateX(-33.33%);
    }
    100% {
        transform: translateX(0);
    }
}

/* ============================================
   Responsive Design
   ============================================ */

/* Tablets */
@media (max-width: 1024px) {
    .cockpit-ticker__track {
        gap: 60px;
    }
    
    .cockpit-ticker__item {
        gap: 24px;
    }
    
    .cockpit-ticker__text {
        font-size: 1.25rem;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .cockpit-ticker {
        padding: 15px 0;
    }
    
    .cockpit-ticker__track {
        gap: 40px;
    }
    
    .cockpit-ticker__item {
        gap: 20px;
    }
    
    .cockpit-ticker__text {
        font-size: 1rem;
    }
    
    .cockpit-ticker__icon {
        font-size: 0.875rem;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .cockpit-ticker {
        padding: 12px 0;
    }
    
    .cockpit-ticker__track {
        gap: 30px;
    }
    
    .cockpit-ticker__item {
        gap: 16px;
    }
    
    .cockpit-ticker__text {
        font-size: 0.875rem;
        letter-spacing: 0.03em;
    }
}

/* ============================================
   Accessibility
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .cockpit-ticker__track {
        animation: none;
    }
    
    /* Show scrollbar instead */
    .cockpit-ticker {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .cockpit-ticker__track {
        display: inline-flex;
        padding: 0 20px;
    }
}

/* ============================================
   Dark Mode (falls später gewünscht)
   ============================================ */
@media (prefers-color-scheme: dark) {
    .cockpit-ticker {
        background-color: var(--color-primary, var(--color-primary, #da2032));
    }
}