/* Events calendar (/{lang}/events).
   Same card language as the section landings (.sec-*) — white card, brand
   left rule, lifted hover — so the calendar reads as part of the site rather
   than a bolted-on module. Scoped .evt-* to stay clear of the legacy cascade. */

:root { --evt-brand: #E32D44; --evt-ink: #2c2c38; --evt-muted: #5A5A67; }

.evt-wrap {
    position: relative;
    z-index: 2;
    margin-top: -46px;
    padding-bottom: 90px;
}

/* ---------- toolbar: upcoming / past + subscribe ---------- */
.evt-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(30, 22, 40, .07);
    padding: 14px 18px;
    margin-bottom: 28px;
}

.evt-tabs { display: flex; gap: 6px; }

.evt-tab {
    padding: 9px 18px;
    border-radius: 100px;
    font-size: 15px;
    color: var(--evt-muted);
    text-decoration: none !important;
    transition: background .2s ease, color .2s ease;
}
.evt-tab:hover { background: #f4f4f7; color: var(--evt-ink); }
.evt-tab.is-active { background: var(--evt-brand); color: #fff; }
.evt-tab:focus-visible { outline: 2px solid var(--evt-brand); outline-offset: 2px; }

.evt-subscribe {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid #e2e2ea;
    border-radius: 100px;
    font-size: 14px;
    color: var(--evt-ink);
    text-decoration: none !important;
    transition: border-color .2s ease, color .2s ease;
}
.evt-subscribe:hover { border-color: var(--evt-brand); color: var(--evt-brand); }
.evt-subscribe:focus-visible { outline: 2px solid var(--evt-brand); outline-offset: 2px; }

/* ---------- month groups ---------- */
.evt-month { margin-bottom: 34px; }

.evt-month__label {
    font-size: 20px;
    color: var(--evt-ink);
    margin: 0 0 14px;
    padding-left: 14px;
    border-left: 4px solid var(--evt-brand);
    line-height: 1.2;
}

.evt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }

/* ---------- event card ---------- */
.evt-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 22px 24px;
    background: #fff;
    border: 1px solid #ebebf0;
    border-left: 4px solid var(--evt-brand);
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(30, 22, 40, .05);
    transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.evt-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(30, 22, 40, .12);
    border-color: rgba(227, 45, 68, .35);
}

/* The date tile: fixed width so every row's title starts on the same line. */
.evt-date {
    flex: 0 0 66px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 4px;
    background: #fbf3f4;
    border-radius: 12px;
    color: var(--evt-brand);
    line-height: 1.1;
}
.evt-date__day { font-size: 28px; }
.evt-date__month { font-size: 13px; text-transform: uppercase; letter-spacing: .03em; margin-top: 3px; }
.evt-date__thru { font-size: 12px; color: var(--evt-muted); margin-top: 5px; }

.evt-card__body { flex: 1 1 auto; min-width: 0; }

.evt-card__title { font-size: 19px; margin: 0 0 8px; line-height: 1.35; }
.evt-card__title a { color: var(--evt-ink); text-decoration: none !important; }
.evt-card__title a:hover { color: var(--evt-brand); }
.evt-card__title a:focus-visible { outline: 2px solid var(--evt-brand); outline-offset: 3px; }

.evt-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--evt-muted);
}
.evt-meta-bit { display: inline-flex; align-items: center; gap: 6px; }
.evt-meta-bit svg { flex: 0 0 auto; opacity: .75; }

.evt-card__text { font-size: 15px; color: var(--evt-muted); margin: 0 0 14px; line-height: 1.55; }

.evt-card__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.evt-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 100px;
    font-size: 14px;
    text-decoration: none !important;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.evt-btn--ghost { border: 1px solid #e2e2ea; color: var(--evt-ink); }
.evt-btn--ghost:hover { border-color: var(--evt-brand); color: var(--evt-brand); }
.evt-btn--solid { background: var(--evt-brand); color: #fff; border: 1px solid var(--evt-brand); }
.evt-btn--solid:hover { background: #c81f35; border-color: #c81f35; color: #fff; }
.evt-btn:focus-visible { outline: 2px solid var(--evt-brand); outline-offset: 2px; }

/* ---------- empty + pager ---------- */
.evt-empty {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(30, 22, 40, .07);
    padding: 40px 38px;
    text-align: center;
    color: var(--evt-muted);
    font-size: 16px;
}
.evt-empty a { color: var(--evt-brand); }

.evt-pager { margin-top: 28px; display: flex; justify-content: center; }

/* ---------- event meta on the detail page ---------- */
.evt-detail {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    align-items: center;
    background: #fbf3f4;
    border-radius: 14px;
    padding: 18px 22px;
    margin: 4px 0 26px;
    font-size: 15px;
    color: var(--evt-ink);
}
.evt-detail__bit { display: inline-flex; align-items: center; gap: 8px; }
.evt-detail__bit svg { flex: 0 0 auto; color: var(--evt-brand); }
.evt-detail__actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 640px) {
    .evt-card { gap: 14px; padding: 18px 16px; }
    .evt-date { flex-basis: 56px; }
    .evt-date__day { font-size: 24px; }
    .evt-card__title { font-size: 17px; }
    .evt-toolbar { justify-content: center; }
    .evt-detail__actions { margin-left: 0; width: 100%; }
}