/*
 * Event cards — the two shapes an event takes on a listing.
 * Loaded on every page (see functions.php enqueue()): the home page uses them
 * in its carousels, the events archive in its grids.
 *
 *   .event-card   upcoming: poster, date, venue, summary, price, ticket button
 *   .past-card    finished: poster with a pill and the title across the bottom
 */

/* ── Upcoming ──────────────────────────────────────────────────────────── */
.event-card {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            16px;
    height:         100%;
    padding:        10px 10px 24px;
    background-color: var(--color-bg);
    border:         1px solid rgba(208, 179, 107, .3);
}

.event-card__media {
    position: relative;
    width:    100%;
    height:   320px;
}

.event-card__image {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

/* Darkens the bottom third so the seat strip and the card edge read cleanly.
   ::before, not ::after: it still paints over the static image, but stays
   under the seat strip, which comes later in the markup. */
.event-card__media::before {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     linear-gradient(180deg, rgba(22, 22, 27, 0) 60%, rgba(22, 22, 27, .6) 100%);
    pointer-events: none;
}

.event-card__seats {
    position:        absolute;
    left:            0;
    right:           0;
    bottom:          0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin:          0;
    padding:         2px 4px;
    background-color: var(--color-primary);
    font-family:     var(--font-body);
    font-weight:     500;
    font-size:       13px;
    line-height:     1.2;
    color:           #000;
    text-align:      center;
}

.event-card__body {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            14px;
    width:          100%;
    /* Pushes the button to the bottom edge on the shorter cards in a row. */
    flex:           1 0 auto;
}

.event-card__head {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            9px;
    width:          100%;
}

.event-card__date,
.event-card__venue,
.event-card__text {
    margin:      0;
    font-family: var(--font-body);
    font-weight: 400;
    font-size:   14px;
    color:       rgba(255, 255, 255, .7);
    text-align:  center;
}

.event-card__date,
.event-card__venue {
    line-height: 1.2;
}

.event-card__text {
    /* Two lines, as the design shows — the summaries vary in length and an
       uneven card grid reads as a bug. */
    display:            -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:           hidden;
    line-height:        1.4;
}

.event-card__title {
    margin:         0;
    font-family:    var(--font-heading);
    font-weight:    400;
    font-size:      18px;
    line-height:    1;
    text-transform: uppercase;
    color:          var(--color-primary);
    text-align:     center;
}

.event-card__title a {
    color:           inherit;
    text-decoration: none;
}

.event-card__title a:hover,
.event-card__title a:focus-visible {
    color: var(--color-accent);
}

.event-card__price {
    margin:      0;
    font-family: var(--font-body);
    font-weight: 600;
    font-size:   14px;
    line-height: 1.4;
    color:       var(--color-text);
    text-align:  center;
}

.event-card__btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    margin-top:      auto;
    height:          38px;
    padding:         10px 24px;
    border:          1px solid var(--color-primary);
    border-radius:   80px;
    background:      linear-gradient(90deg, #c09c4d 0%, #e6ba59 100%);
    font-family:     var(--font-body);
    font-weight:     600;
    font-size:       15px;
    line-height:     1.4;
    letter-spacing:  .75px;
    text-transform:  uppercase;
    color:           var(--color-bg);
    text-decoration: none;
    white-space:     nowrap;
    transition:      filter var(--transition);
}

.event-card__btn:hover,
.event-card__btn:focus-visible {
    filter: drop-shadow(0 0 8px rgba(215, 189, 137, .5));
}

.event-card__btn-icon {
    flex-shrink: 0;
}

/* Same trailing-letter-space fix as the hero's buttons. */
.event-card__btn-label {
    margin-right: -.05em;
}
/* The hairline inside the card — the same 100px gradient the sections use. */
.event-card__rule {
    width:      100px;
    height:     1px;
    background: linear-gradient(90deg,
                    rgba(157, 136, 82, 0) 0%,
                    #d0b46d 49.8%,
                    rgba(106, 92, 56, 0) 100%);
}

/* ── Past ──────────────────────────────────────────────────────────────── */
.past-card {
    position:        relative;
    display:         flex;
    flex-direction:  column;
    justify-content: flex-end;
    align-items:     center;
    height:          390px;
    padding:         12px 16px 45px;
    overflow:        hidden;
    text-decoration: none;
}

.past-card__image {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.past-card:hover .past-card__image,
.past-card:focus-visible .past-card__image {
    transform: scale(1.04);
}

.past-card__badge {
    position:         absolute;
    top:              12px;
    right:            8px;
    padding:          4px 13px;
    border:           1px solid rgba(255, 255, 255, .1);
    border-radius:    100px;
    background-color: var(--color-bg-alt);
    font-family:      var(--font-body);
    font-weight:      400;
    font-size:        10px;
    line-height:      1.4;
    color:            rgba(255, 255, 255, .5);
    white-space:      nowrap;
}

.past-card__title {
    position:    relative;
    margin:      0;
    font-family: var(--font-heading);
    font-weight: 400;
    font-size:   16px;
    line-height: 1.125;
    color:       var(--color-text);
    text-align:  center;
    /* The poster is busy behind the title; a soft shadow keeps it legible
       without dimming the whole picture the way an overlay would. */
    text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
}
/* ── Phone ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    .event-card__media {
        height: 290px;
    }

    .past-card {
        height: 350px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .past-card__image {
        transition: none;
    }
}