/* Styles for the ASK Events list block front‑end cards */

/* Container for each event card.  We use flexbox to lay the image and
   information side‑by‑side.  The background and border can be
   customized via site CSS or overridden by themes. */
.ask-events-card {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 1rem;
    margin-bottom: 1.5rem;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    box-sizing: border-box;
}

/* Image wrapper: take up roughly a quarter of the card width on
   larger screens and full width on small screens. */
.ask-events-card .ask-events-image {
    flex: 0 0 25%;
    max-width: 25%;
    padding-right: 1rem;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .ask-events-card .ask-events-image {
        flex-basis: 100%;
        max-width: 100%;
        padding-right: 0;
        margin-bottom: 1rem;
    }
}

/* Ensure images fill their container and do not distort. */
.ask-events-card .ask-events-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Information column occupies the remaining space. */
.ask-events-card .ask-events-info {
    flex: 1 0 75%;
    max-width: 75%;
    box-sizing: border-box;
}

.ask-events-card .ask-events-info h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

/* Description and date/time paragraphs have some spacing. */
.ask-events-card .ask-events-info p {
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
}

/* Button container: group register and details buttons together. */
.ask-events-card .ask-events-buttons {
    margin-top: 1rem;
}

.ask-events-card .ask-events-buttons .btn {
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}