/**
 * Hunet Posts Ticker stylesheet
 * Scoped and optimized for WordPress & Flatsome theme.
 */

.hpt-ticker-container {
    overflow: hidden;
    width: 100%;
    position: relative;
    background: var(--hpt-bg, #ffffff);
    border: 1px solid #eef2f6;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    padding: 12px 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;

    /* Custom CSS properties for easy scaling and responsiveness */
    --visible-desktop: 3;
    --visible-tablet: 2;
    --visible-mobile: 1;
    --visible-items: var(--visible-desktop);
    
    --original-count: 9;
    --total-count: 18;
    --scroll-speed: 25s;
    --img-size: 50px;
    
    --hpt-bg: #ffffff;
    --hpt-text: #333333;
    --hpt-hover: #0a4b9b; /* Classic dark blue hover color */
}

/* Edge shadow masks for premium look and smooth fade out */
.hpt-ticker-container::before,
.hpt-ticker-container::after {
    content: "";
    position: absolute;
    top: 0;
    width: 40px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.hpt-ticker-container::before {
    left: 0;
    background: linear-gradient(to right, var(--hpt-bg) 0%, rgba(255, 255, 255, 0) 100%);
}

.hpt-ticker-container::after {
    right: 0;
    background: linear-gradient(to left, var(--hpt-bg) 0%, rgba(255, 255, 255, 0) 100%);
}

/* Responsive Viewports */
@media (max-width: 767px) {
    .hpt-ticker-container {
        --visible-items: var(--visible-mobile);
        --scroll-speed: 12s; /* Speed up a bit relative to count on small screens */
    }
    .hpt-ticker-container::before,
    .hpt-ticker-container::after {
        width: 20px; /* Thinner fade mask on mobile */
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .hpt-ticker-container {
        --visible-items: var(--visible-tablet);
        --scroll-speed: 18s;
    }
}

@media (min-width: 992px) {
    .hpt-ticker-container {
        --visible-items: var(--visible-desktop);
    }
}

/* Outer layout wrapper */
.hpt-ticker-wrapper {
    overflow: hidden;
    width: 100%;
    display: flex;
}

/* Track holding all post items */
.hpt-ticker-track {
    display: flex;
    align-items: center;
    /* Computes the track width relative to display items and clones */
    width: calc(var(--total-count) * (100% / var(--visible-items)));
    animation: hpt-ticker-marquee var(--scroll-speed) linear infinite;
    will-change: transform;
}

/* Pause the animation on hover */
.hpt-ticker-track:hover {
    animation-play-state: paused;
}

/* Individual Post Item */
.hpt-ticker-item {
    /* Computes item width so that 'visible-items' count fits exactly in container */
    width: calc(100% / var(--total-count));
    flex: 0 0 calc(100% / var(--total-count));
    padding: 0 15px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

/* Link wrapper */
.hpt-ticker-item-link {
    display: flex;
    align-items: center;
    text-decoration: none !important;
    width: 100%;
    color: var(--hpt-text);
    transition: transform 0.2s ease, color 0.2s ease;
}

.hpt-ticker-item-link:hover {
    transform: translateY(-1px);
    color: var(--hpt-hover);
    text-decoration: none !important;
}

/* Thumbnail featured image (Square, dynamic size) */
.hpt-ticker-image {
    width: var(--img-size);
    height: var(--img-size);
    min-width: var(--img-size);
    min-height: var(--img-size);
    max-width: var(--img-size);
    max-height: var(--img-size);
    border-radius: 6px;
    object-fit: cover;
    margin-right: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
    transition: border-color 0.2s ease;
}

.hpt-ticker-item-link:hover .hpt-ticker-image {
    border-color: #cbd5e1;
}

/* Text wrapper stacking Title + Excerpt */
.hpt-ticker-text-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    overflow: hidden;
}

/* Post Title styling to fit frame beautifully */
.hpt-ticker-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

/* Post Excerpt styling */
.hpt-ticker-excerpt {
    font-size: 11px;
    color: #64748b; /* Sleek slate gray */
    margin-top: 3px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

/* Keyframe scrolling animation from right to left */
@keyframes hpt-ticker-marquee {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        /* Scrolls by exactly 50% since we duplicate items */
        transform: translate3d(-50%, 0, 0);
    }
}