/* =========================================================
   HERO WALLPAPER UPLOADS
   ========================================================= */

.hero-wallpaper-editor{
    margin:18px 0 24px;
    padding:18px;
    border:1px solid #e5e7eb;
    border-radius:18px;
    background:#fff;
}

.hero-wallpaper-heading{
    margin-bottom:14px;
}

.hero-wallpaper-heading > div{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.hero-wallpaper-heading b{
    font-size:16px;
    color:#111827;
}

.hero-wallpaper-heading small{
    color:#6b7280;
    line-height:1.45;
}

.hero-wallpaper-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.hero-wallpaper-card{
    overflow:hidden;
    border:1px solid #e5e7eb;
    border-radius:16px;
    background:#f8fafc;
}

.hero-wallpaper-preview{
    position:relative;
    width:100%;
    aspect-ratio:851 / 315;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:
        linear-gradient(135deg,var(--dp-accent-soft),#f8fafc);
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
}

.hero-wallpaper-card.mobile .hero-wallpaper-preview{
    aspect-ratio:1920 / 650;
}

.hero-wallpaper-preview > span{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    padding:18px;
    text-align:center;
    color:#64748b;
}

.hero-wallpaper-preview > span b{
    color:var(--dp-accent);
}

.hero-wallpaper-preview > span small{
    font-size:12px;
}

.hero-wallpaper-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    padding:14px;
}

.hero-wallpaper-actions > div:first-child{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.hero-wallpaper-actions > div:first-child b{
    color:#111827;
    font-size:14px;
}

.hero-wallpaper-actions > div:first-child small{
    color:#6b7280;
    font-size:12px;
}

.hero-wallpaper-actions .court-photo-button{
    border-color:var(--dp-accent) !important;
    color:var(--dp-accent) !important;
}

@media(max-width:760px){
    .hero-wallpaper-grid{
        grid-template-columns:1fr;
    }

    .hero-wallpaper-editor{
        padding:14px;
    }
}