/**
 * Winners Display
 * A continuous, non-interactive marquee of winner cards.
 */

.acc-winners-display {
    --acc-wd-per-view: 4;
    --acc-wd-speed: 42;
    --acc-wd-card-gap: 22px;
    --acc-wd-row-gap: 26px;
    --acc-wd-card-bg: #ffffff;
    --acc-wd-border-color: rgba(17, 24, 39, 0.1);
    --acc-wd-card-radius: 20px;
    --acc-wd-content-padding: 20px 22px 22px;
    --acc-wd-image-height: 380px;
    --acc-wd-image-position: center center;
    --acc-wd-badge-bg: #ffd633;
    --acc-wd-badge-color: #111111;
    --acc-wd-name-color: #111111;
    --acc-wd-prize-color: #4b5563;
    --acc-wd-text-gap: 6px;
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: var(--acc-wd-row-gap);
    overflow: hidden;
}

.acc-winners-display__row {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    padding: 10px 0;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.acc-winners-display__row--secondary {
    display: none;
}

.acc-winners-display__track {
    display: flex;
    width: max-content;
    flex-wrap: nowrap;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    will-change: transform;
}

.acc-winners-display__group {
    display: flex;
    flex: 0 0 auto;
    gap: var(--acc-wd-card-gap);
    margin-right: var(--acc-wd-card-gap);
}

.acc-winners-display__card {
    position: relative;
    flex: 0 0 var(--acc-wd-card-width, 280px);
    width: var(--acc-wd-card-width, 280px);
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
    background: var(--acc-wd-card-bg);
    background-clip: padding-box;
    border: 1px solid var(--acc-wd-border-color);
    border-radius: var(--acc-wd-card-radius);
    box-shadow: 0 12px 32px rgba(17, 24, 39, 0.1);
}

/* In responsive two-row mode, give each row a disjoint winner pool. Keeping
 * every card in the primary row's markup means one-row breakpoints still show
 * the complete feed. */
.acc-winners-display--two-rows
    .acc-winners-display__row:not(.acc-winners-display__row--secondary)
    .acc-winners-display__card[data-winner-lane='secondary'],
.acc-winners-display--two-rows
    .acc-winners-display__row--secondary
    .acc-winners-display__card[data-winner-lane='primary'] {
    display: none;
}

.acc-winners-display__card-link {
    display: block;
    height: 100%;
    color: inherit;
    border-radius: inherit;
    outline: none;
    text-decoration: none;
}

.acc-winners-display__card-link:hover,
.acc-winners-display__card-link:focus,
.acc-winners-display__card-link:visited {
    color: inherit;
    text-decoration: none;
}

.acc-winners-display__card-link:focus-visible {
    outline: 3px solid var(--acc-wd-badge-bg);
    outline-offset: -3px;
}

.acc-winners-display__media {
    position: relative;
    width: 100%;
    height: var(--acc-wd-image-height);
    overflow: hidden;
    box-sizing: border-box;
    background: linear-gradient(145deg, #e7e9ed, #f6f7f8);
}

.acc-winners-display__media::before {
    position: absolute;
    z-index: 3;
    inset: auto 0 0;
    height: 1px;
    pointer-events: none;
    background: var(--acc-wd-border-color);
    content: '';
}

.acc-winners-display__media::after {
    position: absolute;
    z-index: 1;
    inset: auto 0 0;
    height: 28%;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.16), transparent);
    content: '';
}

.acc-winners-display__media > img.acc-winners-display__image,
.acc-winners-display__image-placeholder {
    display: block;
    width: 100%;
    height: 100%;
}

.acc-winners-display__media > img.acc-winners-display__image {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: cover;
    object-position: var(--acc-wd-image-position);
    backface-visibility: hidden;
    -webkit-user-drag: none;
}

.acc-winners-display__image-placeholder {
    display: grid;
    place-items: center;
    color: rgba(17, 24, 39, 0.42);
    font-size: clamp(1rem, 2vw, 1.35rem);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.acc-winners-display__badge {
    position: absolute;
    z-index: 4;
    top: 16px;
    left: 16px;
    display: inline-flex;
    max-width: calc(100% - 32px);
    align-items: center;
    min-height: 30px;
    padding: 7px 12px 6px;
    overflow: hidden;
    color: var(--acc-wd-badge-color);
    background: var(--acc-wd-badge-bg);
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.08em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.acc-winners-display__content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--acc-wd-text-gap);
    box-sizing: border-box;
    padding: var(--acc-wd-content-padding);
}

.acc-winners-display__name,
.acc-winners-display__prize {
    padding: 0;
    margin: 0;
}

.acc-winners-display__name {
    color: var(--acc-wd-name-color);
    font-size: clamp(1.45rem, 2.2vw, 2rem);
    font-weight: 850;
    line-height: 1.02;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.acc-winners-display__prize {
    color: var(--acc-wd-prize-color);
    font-size: clamp(1rem, 1.45vw, 1.25rem);
    font-weight: 650;
    line-height: 1.25;
    text-wrap: balance;
}

.acc-winners-display__prefix {
    opacity: 0.72;
}

.acc-winners-display__prefix:not(:last-child)::after {
    content: ' ';
}

.acc-winners-display__placeholder {
    padding: 40px 24px;
    color: #6b7280;
    background: #f8f9fa;
    border: 1px dashed #c7cbd1;
    border-radius: 12px;
    text-align: center;
}

@media (max-width: 767px) {
    .acc-winners-display__row {
        padding: 6px 0;
    }

    .acc-winners-display__badge {
        top: 12px;
        left: 12px;
        max-width: calc(100% - 24px);
    }

}