.event-cover {
    --cover-a: #315f52;
    --cover-b: #b8d0c5;
    --cover-c: #f4efe1;
    position: relative;
    isolation: isolate;
    display: flex;
    min-height: 100%;
    flex-direction: column;
    justify-content: flex-end;
    padding: 18px 20px;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    background:
        radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--cover-b) 78%, transparent), transparent 31%),
        linear-gradient(135deg, var(--cover-a), color-mix(in srgb, var(--cover-a) 66%, #111));
}

.event-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .18;
    background-image:
        linear-gradient(115deg, transparent 0 45%, #fff 45% 46%, transparent 46% 100%),
        linear-gradient(25deg, transparent 0 65%, #fff 65% 66%, transparent 66% 100%);
}

.event-cover__brand,
.event-cover__label {
    position: relative;
    z-index: 2;
}

.event-cover__brand {
    margin-bottom: 4px;
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .78;
}

.event-cover__label {
    max-width: 72%;
    font-size: clamp(1.05rem, 2vw, 1.45rem);
    font-weight: 850;
    line-height: 1.04;
    letter-spacing: -.035em;
}

.event-cover__art {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.event-cover__art i {
    position: absolute;
    display: block;
    border: 2px solid color-mix(in srgb, var(--cover-c) 84%, transparent);
    opacity: .72;
}

.event-cover__art i:nth-child(1) {
    width: 38%;
    aspect-ratio: 1;
    right: -5%;
    top: -13%;
    border-radius: 50%;
}

.event-cover__art i:nth-child(2) {
    width: 23%;
    aspect-ratio: 1;
    right: 13%;
    top: 19%;
    border-radius: 10px;
    transform: rotate(36deg);
}

.event-cover__art i:nth-child(3) {
    width: 48%;
    height: 18%;
    right: -5%;
    bottom: 15%;
    border-radius: 999px;
    transform: rotate(-17deg);
}

/* These themes are deliberately owned CSS artwork. Later we can replace any of
   them with locally generated static artwork without changing templates. */
.event-cover--theatre { --cover-a: #6d2434; --cover-b: #d3a46d; --cover-c: #fff0d7; }
.event-cover--cinema,
.event-cover--movie { --cover-a: #202a44; --cover-b: #8ea4d6; --cover-c: #eef2ff; }
.event-cover--concert,
.event-cover--music { --cover-a: #4c286e; --cover-b: #d083d0; --cover-c: #f6e9ff; }
.event-cover--exhibition,
.event-cover--museum,
.event-cover--art { --cover-a: #7b4a24; --cover-b: #e0ba77; --cover-c: #fff2d2; }
.event-cover--lecture,
.event-cover--education { --cover-a: #244f66; --cover-b: #83c0cf; --cover-c: #e5f8ff; }
.event-cover--workshop,
.event-cover--masterclass { --cover-a: #65501e; --cover-b: #d9bd60; --cover-c: #fff8d6; }
.event-cover--sport { --cover-a: #1f5a3e; --cover-b: #78c68d; --cover-c: #e9ffe9; }
.event-cover--festival { --cover-a: #8a3d2a; --cover-b: #f0a061; --cover-c: #fff0df; }
.event-cover--children,
.event-cover--kids { --cover-a: #31658b; --cover-b: #e9a4a4; --cover-c: #fff5df; }
.event-cover--club,
.event-cover--nightlife,
.event-cover--cafe { --cover-a: #272632; --cover-b: #ab6f95; --cover-c: #f6e7ef; }
.event-cover--nature,
.event-cover--travel,
.event-cover--route { --cover-a: #2f654a; --cover-b: #9dc77a; --cover-c: #eff8de; }
.event-cover--adult,
.event-cover--18plus { --cover-a: #54232b; --cover-b: #a8616d; --cover-c: #f4dfe3; }

.detail__image--fallback {
    min-height: min(52vw, 460px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    aspect-ratio: 16 / 8;
}

.detail__image--fallback .event-cover__brand {
    font-size: .82rem;
}

.detail__image--fallback .event-cover__label {
    font-size: clamp(1.5rem, 4vw, 3rem);
}

@media (max-width: 640px) {
    .event-cover {
        padding: 15px 16px;
    }

    .event-cover__label {
        font-size: 1.05rem;
    }

    .detail__image--fallback {
        min-height: 220px;
        border-radius: 16px;
        aspect-ratio: 16 / 10;
    }
}