/* TavernWall v6.3.25 Auto-Fit Profile Banners */

/* Common profile banner shapes across the TavernWall pages */
.profile-banner,
.profile-hero-banner,
.hall-banner,
.tavern-banner,
.banner-image,
.profile-header-banner {
    width: 100% !important;
    height: clamp(170px, 24vw, 310px) !important;
    max-height: 310px !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    border: 1px solid rgba(155,119,72,.55) !important;
    background:
        radial-gradient(circle at top, rgba(255,217,85,.12), transparent 45%),
        #1a0d08 !important;
    box-sizing: border-box !important;
}

/* If the banner is an image */
.profile-banner img,
.profile-hero-banner img,
.hall-banner img,
.tavern-banner img,
.banner-image img,
.profile-header-banner img,
img.profile-banner,
img.profile-hero-banner,
img.hall-banner,
img.tavern-banner,
img.banner-image,
img.profile-header-banner {
    width: 100% !important;
    height: 100% !important;
    max-height: 310px !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}

/* If the banner is displayed as a background image */
.profile-banner[style],
.profile-hero-banner[style],
.hall-banner[style],
.tavern-banner[style],
.profile-header-banner[style] {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Profile header cards that use uploaded banners */
.profile-header.has-banner,
.profile-hero.has-banner,
.hall-header.has-banner {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    min-height: clamp(190px, 24vw, 330px) !important;
}

/* Editor note/input spacing */
input[name="banner_image_file"] + .muted {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.35;
}

/* Keep banner upload controls neat */
.profile-edit-card input[name="banner_image"],
.profile-edit-card input[name="banner_image_file"] {
    width: 100%;
}

@media (max-width: 680px) {
    .profile-banner,
    .profile-hero-banner,
    .hall-banner,
    .tavern-banner,
    .banner-image,
    .profile-header-banner {
        height: 170px !important;
        border-radius: 16px !important;
    }
}