/* v1.0 - 2026-09-16 */
/* Faelles kalender-styles til tydelig kort intro, eventbilleder og admin-preview. */
/* v1.1 - 2026-09-16 */
/* Eventbilleder vises nu uden beskaering; hele motivet bevares og brede billeder maa gerne blive smallere end kortet. */
/* v1.2 - 2026-09-16 */
/* Hvert eventbillede kan vaelge mellem hele billedet og bannerbeskaering med individuelt fokuspunkt. */
/* v1.3 - 2026-09-16 */
/* Beskaaret visning er nu et tydeligt lavt banner i fuld kortbredde, saa valget adskiller sig klart fra naturligt billedformat. */
/* v1.4 - 2026-09-16 */
/* Banneret bruger fast billedforhold i stedet for fast pixelhoejde, saa admin-preview og offentlig visning beskaerer ens ved forskellig bredde. */
/* v1.5 - 2026-09-16 */
/* Dato og klokkeslaet brydes paa hver sin linje paa mobil, men forbliver paa samme linje paa desktop. */

.event-intro {
    margin-bottom: 0.25rem;
}

.event-intro p {
    font-size: 1.06rem;
    line-height: 1.68;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 0.85rem;
}

.event-card.past .event-intro p {
    color: #3E4B3D;
}

.event-image {
    width: fit-content;
    max-width: 100%;
    margin: 0.2rem auto 1.25rem;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--rule);
    background: var(--green-pale);
}

.event-image img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: contain;
}

.event-image.event-image-cover {
    width: 100%;
    aspect-ratio: 18 / 5;
}

.event-image.event-image-cover img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
}

.event-description {
    margin-top: 0.15rem;
}

.event-time::before {
    content: " · ";
}

.event-card .hero-cta {
    margin-top: 1rem;
}

@media (max-width: 640px) {
    .event-meta .event-date,
    .event-meta .event-time {
        display: block;
    }

    .event-time::before {
        content: "";
    }

    .event-intro p {
        font-size: 1rem;
    }

    .event-image img {
        max-height: 260px;
    }

    .event-image.event-image-cover {
        aspect-ratio: 12 / 5;
    }
}