/* ==========================================================================
   Eventi – Griglia di card  [eventi]
   Shortcode: [eventi]
   Palette:   rosso #EA3C47 · grigio #23232D
   ========================================================================== */

/* --------------------------------------------------------------------------
   Wrapper + variabili tema (sovrascrivibili per rifinire gli stili)
   -------------------------------------------------------------------------- */
.assidim-events {
    --ae-red:          #EA3C47;
    --ae-grey:         #23232D;
    --ae-card-bg:      #ffffff;
    --ae-border:       #ececef;
    --ae-card-radius:  4px;
    --ae-gap:          24px;
    --ae-cols:         3;

    box-sizing: border-box;
}

.assidim-events *,
.assidim-events *::before,
.assidim-events *::after {
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Griglia
   -------------------------------------------------------------------------- */
.assidim-events__grid {
    display: grid;
    grid-template-columns: repeat(var(--ae-cols, 3), minmax(0, 1fr));
    gap: var(--ae-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* La cella della griglia: si estende per uniformare l'altezza delle card */
.assidim-events__item {
    display: flex;
    margin: 0;
    padding: 0;
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */
.event-card {
    position: relative;
    display: flex;
    flex-direction: column;     /* corpo in alto, footer in basso          */
    width: 100%;
    height: 100%;               /* tutte le card alte uguali               */
    background: var(--ae-card-bg);
    border: 1px solid var(--ae-border);
    border-radius: var(--ae-card-radius);
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}

.event-card:hover {
    box-shadow: 0 12px 28px rgba(35, 35, 45, .14);
    transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Corpo della card (titolo + excerpt) — occupa lo spazio disponibile
   -------------------------------------------------------------------------- */
.event-card__body {
    flex: 1 1 auto;
    padding: 28px 30px 22px;
}

/* --- Titolo --- */
.event-card__title {
    margin: 0 0 14px;
    font-size: 1.15rem;
    line-height: 1.3;
    text-transform: uppercase;
}

.event-card__link {
    color: var(--ae-red);
    font-weight: 700;
    text-decoration: none;
}

.event-card__link:hover,
.event-card__link:focus-visible {
    text-decoration: underline;
}

/* Stretched link: rende cliccabile l'intera card.
   Rimuovi questa regola se vuoi rendere cliccabile solo il titolo. */
.event-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* --- Excerpt / riassunto --- */
.event-card__excerpt {
    margin: 0;
    color: var(--ae-grey);
    font-size: .95rem;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Footer della card (data • orario inizio | orario fine)
   -------------------------------------------------------------------------- */
.event-card__footer {
    margin-top: auto;           /* spinge il footer in fondo alla card     */
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    padding: 16px 30px;
    border-top: 1px solid var(--ae-border);
    color: var(--ae-red);
    font-size: .9rem;
    font-weight: 600;
}

.event-card__date {
    text-transform: capitalize; /* "22 maggio, 2026" -> "22 Maggio, 2026"  */
}

.event-card__bull {
    color: var(--ae-red);
}

.event-card__time {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.event-card__time-start,
.event-card__time-end {
    white-space: nowrap;
}

.event-card__time-divider {
    font-weight: 400;
    opacity: .5;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .assidim-events__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .assidim-events__grid {
        grid-template-columns: 1fr;
    }
}