/* 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 clips to two lines, which would hide an outline on the link
   itself, so the keyboard focus ring goes on the card. */
.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): never wrap, so the title
   stays level; the genre pill gives way with an ellipsis instead. */
.event-card-pills--single-line {
    flex-wrap: nowrap;
}

.event-card-pills--single-line .badge-genre:not(.badge-under-18s) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.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 is clamped to two lines with an ellipsis; the clamp sits on the
   link (or span) inside so the bar, drawn after it, is never clipped. The
   heading keeps two lines plus the bar of height whatever the title's
   length, so titles and the rows below them 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: break-word;
    min-height: calc((1.2rem + 2px) * 1.2 * 2 + 8px);
}

.event-title > a,
.event-title > span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.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;
}