/* =========================================================
   Medal Ticker — medal-ticker.css
   Smooth, responsive, pure-CSS horizontal scroll ticker.
   ========================================================= */

/* ----------------------------------------------------------
   Wrapper — clips overflow and sets the stage
---------------------------------------------------------- */
.mt-ticker-wrap {
    --mt-bg:     #ffffff;
    --mt-speed:  30s;
    --mt-gap:    40px;
    --mt-height: 80px;

    position:   relative;
    width:      100%;
    overflow:   hidden;
    background: var(--mt-bg);

    /* Respect user motion preferences */
    @media (prefers-reduced-motion: reduce) {
        overflow: auto;
    }
}

/* ----------------------------------------------------------
   Optional fade mask on left + right edges
---------------------------------------------------------- */
.mt-ticker-wrap.mt-fade-edges::before,
.mt-ticker-wrap.mt-fade-edges::after {
    content:  '';
    position: absolute;
    top:      0;
    bottom:   0;
    width:    80px;
    z-index:  2;
    pointer-events: none;
}
.mt-ticker-wrap.mt-fade-edges::before {
    left:       0;
    background: linear-gradient(to right, var(--mt-bg), transparent);
}
.mt-ticker-wrap.mt-fade-edges::after {
    right:      0;
    background: linear-gradient(to left, var(--mt-bg), transparent);
}

/* ----------------------------------------------------------
   Track — flex container that holds two identical sets
   The animation moves it left by exactly 50% (one set width)
   so the second set seamlessly takes over.
---------------------------------------------------------- */
.mt-ticker-track {
    display:    flex;
    width:      max-content;   /* shrink to natural content width */
    animation:  mt-scroll var(--mt-speed) linear infinite;

    /* Respect reduced-motion */
    @media (prefers-reduced-motion: reduce) {
        animation: none;
        flex-wrap: wrap;
        width:     100%;
    }
}

/* Pause on hover */
.mt-ticker-wrap.mt-pause-hover:hover .mt-ticker-track {
    animation-play-state: paused;
}

/* ----------------------------------------------------------
   Each set of images
---------------------------------------------------------- */
.mt-ticker-set {
    display:     flex;
    align-items: center;
    gap:         var(--mt-gap);
    padding:     12px var(--mt-gap);   /* vertical breathing room + leading gap */
    flex-shrink: 0;
}

/* ----------------------------------------------------------
   Individual medal images
---------------------------------------------------------- */
.mt-ticker-set img {
    height:            var(--mt-height);
    width:             auto;           /* preserve aspect ratio */
    object-fit:        contain;
    display:           block;
    flex-shrink:       0;
    user-select:       none;
    -webkit-user-drag: none;

    /* Subtle lift on hover when pause-hover is active */
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.mt-pause-hover .mt-ticker-set img:hover {
    transform: scale(1.08);
    opacity:   0.9;
}

/* Reduced-motion: show as a plain responsive grid */
@media (prefers-reduced-motion: reduce) {
    .mt-ticker-set {
        flex-wrap: wrap;
        padding:   12px;
    }
    .mt-ticker-set img {
        height: var(--mt-height);
    }
    /* Hide the duplicate set when not animating */
    .mt-ticker-set[aria-hidden="true"] {
        display: none;
    }
}

/* ----------------------------------------------------------
   Keyframe — translate left by exactly half the track width
   (one full set), creating a seamless infinite loop.
---------------------------------------------------------- */
@keyframes mt-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ----------------------------------------------------------
   Responsive tweaks
   The CSS-variable approach means height/gap are already
   set from shortcode; these just add padding/margin polish.
---------------------------------------------------------- */

/* Tablet */
@media (max-width: 1024px) {
    .mt-ticker-wrap.mt-fade-edges::before,
    .mt-ticker-wrap.mt-fade-edges::after {
        width: 48px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .mt-ticker-wrap.mt-fade-edges::before,
    .mt-ticker-wrap.mt-fade-edges::after {
        width: 28px;
    }
}