/* Events archive (/events): featured events block (see template-parts/components/featured-events.php) and regular event cards */

.featured-events {
    margin: 10px 0 30px;
    padding: 30px;
    background-color: #ececec;
    border-radius: 15px;
}

.featured-events h2 {
    margin-bottom: 20px;
    text-align: center;
}

/*
 * Desktop: the template splits the cards into (at most) 2 rows, the shorter one on top (1-4 on one row; e.g. 7 = 3 + 4).
 * Cards share their row equally but are never wider than in a row of 3; narrower rows are centered.
 */
.featured-events__grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.featured-events__row {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.featured-event {
    display: block;
    flex: 1 1 0;
    max-width: calc((100% - 2 * 20px) / 3);
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    transition: transform .2s ease-out, box-shadow .2s ease-out;
}

.featured-event:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
}

.featured-event article {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.featured-event figure {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.featured-event figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s ease-out;
}

.featured-event:hover figure img {
    transform: scale(1.04);
}

.featured-event__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    background-color: #333;
    color: #fff;
    border-radius: 15px;
    font-size: 12px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.featured-event__content {
    padding: 10px 15px 20px;
}

/* Alone on its row (only 1 featured): picture on the left, text on the right.
   The picture is capped like the other cards (a third of the row) and the text takes one more third. */
@media screen and (min-width: 801px) {
    .featured-events__row .featured-event:only-child { max-width: calc((100% - 2 * 20px) / 3 * 2 + 20px); }
    .featured-events__row .featured-event:only-child article { flex-direction: row; }
    .featured-events__row .featured-event:only-child figure { flex: 0 0 50%; }
    .featured-events__row .featured-event:only-child .featured-event__content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 20px 30px;
    }
}

/* Small screens: rows are flattened into one 2-per-row grid; an odd count leaves the first card alone on top */
@media screen and (max-width: 800px) {
    .featured-events__grid { flex-direction: row; flex-wrap: wrap; }
    .featured-events__row { display: contents; }
    .featured-event { flex: 1 1 calc((100% - 20px) / 2); max-width: none; }
    .featured-events__grid.odd .featured-events__row:first-child .featured-event:first-child { flex-basis: 100%; }
}

@media screen and (min-width: 551px) and (max-width: 800px) {
    .featured-events__grid.odd .featured-events__row:first-child .featured-event:first-child article { flex-direction: row; }
    .featured-events__grid.odd .featured-events__row:first-child .featured-event:first-child figure { flex: 0 0 50%; }
    .featured-events__grid.odd .featured-events__row:first-child .featured-event:first-child .featured-event__content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 20px 30px;
    }
}

@media screen and (max-width: 550px) {
    .featured-events { padding: 20px 15px; }
}

/*
 * Card text matches the home page cards (.post .post-content) at every width: 18px bold title, 16px text.
 * Sizes in px: the Customizer's Additional CSS sets html { font-size: 1em }, so the theme's rem values are 16px-based, not 10px.
 */
.featured-event .featured-event__content h3 { padding-bottom: 10px; line-height: 1.3; }
.featured-event .featured-event__content p { letter-spacing: .05em; line-height: 1.3; }

@media screen and (max-width: 550px) {
    .featured-event .featured-event__content { padding: 10px; }
}

/* The theme enlarges archive card text below 450px (1.6rem = ~26px); keep the home page sizes instead */
@media screen and (max-width: 450px) {
    .archive.events .posts .post .post-content h3 { font-size: 18px; }
    .archive.events .posts .post .post-content p { font-size: 16px; }
}