/* ============================================================
   Awards Carousel — awards-carousel.css
   Targets: .sdty--awardslide (existing wrapper class)
   ============================================================ */

/* ---- Wrapper ---- */
.sdty--awardslide {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    gap: 12px;
}

/* ---- Scrolling track (injected by JS) ---- */
.awardslide__track {
    display: flex;
    align-items: center;
    gap: 40px;           /* must match data-gap default in JS */
    will-change: transform;
    flex-shrink: 0;
}

/* ---- Track overflow container (injected by JS) ---- */
.awardslide__outer {
    flex: 1;
    overflow: hidden;
    min-width: 0;
}

/* ---- Each slide item ---- */
.sdty--awardslide .slidebox {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sdty--awardslide .slidebox:hover {
   
}

/* ---- Logo image ---- */
.sdty--awardslide .slidebox img {
    
}

/* ---- CSS mask (existing .mark element) ---- */
.sdty--awardslide .slidebox .mark {
     
}

/* ---- Link wrapper ---- */
.sdty--awardslide .slidebox a {
     
}

/* ---- Prev / Next buttons (injected by JS) ---- */
.awardslide__btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #ffffff;
    color: #667085;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    user-select: none;
    padding: 0;
    position: static;
    transform: none;
}

.awardslide__btn:hover {
    background: #f2f4f7;
    color: #1a2b4a;
    border-color: #98a2b3;
}

.awardslide__btn:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* ---- Arrow-outside variant (.arrow-out) — no longer needed, kept for compat ---- */
.sdty--awardslide.arrow-out {
    padding: 0;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .awardslide__track{ gap: 24px;  /* must match data-gap default in JS */ }
}

@media (max-width: 480px) {
    .sdty--awardslide.arrow-out {
        padding: 0 38px;
    }

    .awardslide__btn {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }
}