/* ServerWeb specific CSS
 * Customer-facing styles: hero banners, event cards, public UI
 */

/* Hero banner image styling - customer site */
body.web .hero-banner-image {
    width: 100%;
    height: clamp(240px, 45vh, 440px);
    object-fit: cover;
    display: block;
    filter: brightness(0.88);
}

body.web .hero-banner-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
    color: white;
}

/* Event card placeholder images - customer event listings */
.event-card-placeholder {
    height: 140px;
    background: var(--mud-palette-background-grey);
}

.event-card-placeholder-tall {
    height: 180px;
    background: #f0f0f0;
}