/* Shared event card. Used on the events list, profile pages, and anywhere
   else event tiles render. Extracted from events.css so non-events pages
   can use the same component. */

.event-card {
    position: relative;
    background: rgba(20, 0, 30, 0.6);
    border: 1px solid rgba(255, 0, 255, 0.3);
    border-radius: 10px;
    overflow: hidden;
    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal),
        border-color var(--transition-normal);
    height: 100%;
    width: 100%;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
}

/* Bootstrap cols are flex items but not flex containers, so a child with
   height: 100% can't reliably resolve against the row's stretched height.
   Promote any col holding an .event-card to a flex container in column
   direction so the card stretches to match the tallest sibling. */
.row > [class*="col-"]:has(> .event-card),
.row > [class*="col-"]:has(> a > .event-card) {
    display: flex;
    flex-direction: column;
}

/* Hover and keyboard focus: a small lift, the magenta border glow and a
   gradient accent drawn under the title, which stays white. */
.event-card:hover,
.event-card:focus-within {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-lg);
    border-color: var(--rave-glow-strong);
}

/* The title link is the card's one target, so its keyboard focus ring goes
   round the whole card; the link's own outline is turned off below. */
.event-card:has(.event-title a:focus-visible) {
    outline: 2px solid var(--rave-secondary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .event-card,
    .event-title::after {
        transition: none;
    }

    .event-card:hover,
    .event-card:focus-within {
        transform: none;
    }
}

.event-card-media {
    position: relative;
    flex-shrink: 0;
}

.event-thumbnail {
    height: 200px;
    width: 100%;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}

/* Placeholder MUST match .event-thumbnail height so cards line up when
   some events have images and others don't (event grid uses Bootstrap
   flex row which makes cards same height — but unequal thumbnail sizes
   make the layout look broken). */
.event-thumbnail-placeholder {
    height: 200px;
    width: 100%;
    background: linear-gradient(135deg, rgba(50, 0, 100, 0.6), rgba(100, 0, 50, 0.6));
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.4);
    font-family: Arial, sans-serif;
    font-size: 0.9rem;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .event-thumbnail,
    .event-thumbnail-placeholder { height: 160px; }
    .event-thumbnail-placeholder { font-size: 0.8rem; }
    .event-card-body { padding: 0.9rem; }
    .event-title {
        font-size: calc(1rem + 2px);
        min-height: calc((1rem + 2px) * 1.2 * 2 + 8px);
    }
}

.event-card-body {
    padding: 1.25rem;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.badge-genre {
    background: linear-gradient(45deg, #ff00ff, #9900ff);
    color: #fff;
    font-size: 0.7rem;
    padding: 0.3rem 0.7rem;
    border-radius: 15px;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Orbitron', sans-serif;
    margin-bottom: 0.75rem;
    align-self: flex-start;
}

/* One row for the card's pills: genre and "Under 18s" sit side by side and
   wrap only when the card is too narrow for both. The row keeps the height
   of one pill even when empty, so a card with no genre pill keeps its title
   level with its neighbours. The pill's line-height is fixed here so that
   height is known. */
.event-card-pills {
    --event-card-pill-height: calc(0.7rem * 1.4 + 0.6rem);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    min-height: var(--event-card-pill-height);
    margin-bottom: 0.75rem;
}

.event-card-pills .badge-genre {
    line-height: 1.4;
    margin-bottom: 0;
}

/* A safety note rather than a second genre: an amber outline pill. The
   padding gives back the 1px border so it matches the genre pill's height. */
.badge-under-18s {
    background: transparent;
    border: 1px solid var(--rave-warning);
    color: var(--rave-warning);
    padding: calc(0.3rem - 1px) calc(0.7rem - 1px);
    /* "UNDER 18S" reads as "18S"; keep the words as written. */
    text-transform: none;
    flex-shrink: 0;
}

/* Narrow grids (similar events, series dates): the pills stay side by side
   and a long genre wraps inside its pill rather than being cut off. */
.event-card-pills--single-line {
    flex-wrap: nowrap;
}

.event-card-pills--single-line .badge-genre:not(.badge-under-18s) {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.badge-featured {
    background: linear-gradient(45deg, #00ffff, #00b8ff);
    color: #001e3c;
    font-size: 0.7rem;
    padding: 0.3rem 0.7rem;
    border-radius: 15px;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Orbitron', sans-serif;
    margin-bottom: 0.5rem;
    align-self: flex-start;
    font-weight: 700;
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.4);
}

/* Overlay variant: pinned to the top-left of the card image so featured
   cards don't get a taller body than non-featured siblings. Stays legible
   over arbitrary photo content via a subtle dark outline + drop shadow. */
.badge-featured--overlay {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    margin-bottom: 0;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), 0 0 8px rgba(0, 255, 255, 0.4);
    backdrop-filter: blur(2px);
}

/* The event name: real Orbitron bold ('Orbitron Card', a card-only family
   in vendor/orbitron/orbitron.css, so nothing else on the site changes), and
   a short gradient bar under it that runs the full width on hover and focus.
   The title always shows in full, wrapping onto as many lines as it needs;
   the heading reserves at least two lines plus the bar, so short titles and
   the rows below them still line up across a grid row. */
.event-title {
    font-family: 'Orbitron Card', 'Orbitron', sans-serif;
    font-size: calc(1.2rem + 2px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--rave-text-primary);
    text-shadow: 0 0 5px var(--rave-glow-medium);
    margin-bottom: 0.6rem;
    overflow-wrap: anywhere;
    min-height: calc((1.2rem + 2px) * 1.2 * 2 + 8px);
}

.event-title > a,
.event-title > span {
    display: block;
}

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

.event-title a:hover,
.event-title a:focus-visible {
    color: inherit;
    outline: none;
}

.event-title::after {
    content: '';
    display: block;
    width: 32px;
    height: 2px;
    margin-top: 6px;
    border-radius: 1px;
    background: var(--gradient-horizontal);
    transition: width var(--transition-normal);
}

.event-card:hover .event-title::after,
.event-card:focus-within .event-title::after {
    width: 100%;
}

.event-venue,
.event-date {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
    font-family: Arial, sans-serif;
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* "From £X" on our own events: a small muted label and the amount in the
   card's body white, on one baseline and level with the venue and date rows.
   No glow: the price is information, not a call to action. */
.event-price {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    font-family: var(--font-body);
    margin: 0.15rem 0 0.75rem;
}

.event-price-label {
    color: var(--rave-text-muted);
    font-size: 0.75rem;
}

.event-price-amount {
    color: var(--rave-text-primary);
    font-size: 1rem;
    font-weight: 700;
}