/* ==========================================================
   FONTS
   ========================================================== */

@font-face {
    font-family: "Dosis";
    src: url("../../fonts/Dosis/Dosis-Regular.woff2") format("woff2"), url("Dosis-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Junigarden Swash";
    src: url("../../fonts/Junigarden/JunigardenSwash-Regular.woff2") format("woff2"),
        url("../../fonts/Junigarden/JunigardenSwash-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Junigarden Serif";
    src: url("../../fonts/Junigarden/JunigardenSerif-Regular.woff2") format("woff2"),
        url("../../fonts/Junigarden/JunigardenSerif-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Arcane Nine";
    src: url("../../fonts/ArcaneNine/Arcane_Nine.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================
   EVENT CARD
   ========================================================== */

.event-card {
    --event-card-background: #fff;
    --event-card-text: #29231f;
    --event-card-muted: #756b64;
    --event-card-accent: #d59446;
    --event-card-radius: 1.25rem;
    --event-card-shadow: 0 1rem 2.5rem rgb(35 25 20 / 12%);

    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;

    color: var(--event-card-text);
    background-color: var(--event-card-background);
    border-radius: var(--event-card-radius);
    box-shadow: var(--event-card-shadow);

    transition: transform 250ms ease, box-shadow 250ms ease;
}

.event-card:hover {
    transform: translateY(-0.35rem);
    box-shadow: 0 1.25rem 3rem rgb(35 25 20 / 18%);
}

/* ==========================================================
   MEDIA
   ========================================================== */

.event-card__media {
    position: relative;

    flex-shrink: 0;
    height: 17rem;
    margin: 0;
    overflow: hidden;

    background-color: #e8e2dc;
}

.event-card__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 400ms ease;
}

.event-card:hover .event-card__image {
    transform: scale(1.04);
}

/* ==========================================================
   CATEGORY
   ========================================================== */

.event-card__category {
    position: absolute;
    top: 1rem;
    left: 1rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    max-width: calc(100% - 2rem);
    min-height: 2rem;
    padding: 0.35rem 0.85rem;

    overflow: hidden;

    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;

    background-color: #675c55;
    border-radius: 999px;
    box-shadow: 0 0.35rem 1rem rgb(0 0 0 / 18%);

    font-family: "Arcane Nine";
}

/* ==========================================================
   CATEGORY COLORS
   ========================================================== */

.event-category--sport {
    background-color: #397555;
}

.event-category--jeux {
    background-color: #496fa8;
}

.event-category--concert {
    background-color: #9b4e73;
}

.event-category--karaoke {
    background-color: #ac5969;
}

.event-category--soiree-a-theme {
    background-color: #76579c;
}

.event-category--degustation {
    background-color: #a46a3f;
}

.event-category--quiz {
    background-color: #b18433;
}

.event-category--default {
    background-color: #675c55;
}

/* ==========================================================
   CONTENT
   ========================================================== */

.event-card__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;

    padding: 1.5rem;
}

/* ==========================================================
   META
   ========================================================== */

.event-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;

    width: 100%;
    margin-bottom: 0.8rem;

    color: var(--event-card-accent);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.event-card__date,
.event-card__time {
    display: inline-flex;
    align-items: center;

    font-family: "Arcane Nine";
}

.event-card__recurrence {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: auto 0;
    font-size: 0.9rem;
    font-family: "Arcane Nine";
}

.event-card__recurrence-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    line-height: 1.4;
}

.event-card__time::before {
    width: 0.25rem;
    height: 0.25rem;
    margin-right: 0.75rem;

    content: "";

    background-color: currentColor;
    border-radius: 50%;
}

/* ==========================================================
   TITLE
   ========================================================== */

.event-card__title {
    margin: 0 0 0.8rem;

    color: var(--event-card-text);
    font-size: clamp(1.2rem, 1rem + 0.5vw, 1.55rem);
    font-weight: 700;
    line-height: 1.2;

    font-family: "Arcane Nine";
}

/* ==========================================================
   DESCRIPTION
   ========================================================== */

.event-card__description {
    display: -webkit-box;

    margin: 0;

    overflow: hidden;

    height: 6rem;

    color: var(--event-card-muted);
    font-size: 0.95rem;
    line-height: 1.65;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

    font-family: "Dosis";
}

/* ==========================================================
   FOOTER
   ========================================================== */

.event-card__footer {
    width: 100%;
    margin-top: auto;
    padding-top: 1.4rem;
}

/* ==========================================================
   BUTTON
   ========================================================== */

.event-card__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 2.8rem;
    padding: 0.7rem 1.25rem;

    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;

    background-color: var(--event-card-accent);
    border: 1px solid var(--event-card-accent);
    border-radius: 999px;

    transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.event-card__button:hover,
.event-card__button:focus-visible {
    color: var(--event-card-accent);
    background-color: transparent;
    transform: translateY(-0.1rem);
}

.event-card__button:focus-visible {
    outline: 0.2rem solid rgb(213 148 70 / 35%);
    outline-offset: 0.2rem;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 47.99rem) {
    .event-card__media {
        height: 12rem;
    }

    .event-card__content {
        padding: 1.25rem;
    }

    .event-card__title {
        font-size: 1.25rem;
    }
}

/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    .event-card,
    .event-card__image,
    .event-card__button {
        transition: none;
    }

    .event-card:hover,
    .event-card:hover .event-card__image,
    .event-card__button:hover {
        transform: none;
    }
}