/* Hero Event Info Styling */
.hero-event-info {
    position: absolute;
    bottom: 30px; /* Lowered to avoid overlapping with CTA buttons */
    left: 0;
    width: 100%;
    z-index: 10;
    text-align: center;
    pointer-events: none; /* Allow clicks to pass through empty space */
}

.hero-event-info .event-tile {
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 15px 30px; /* Slightly reduced padding */
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    max-width: 800px;
    width: 90%;
    pointer-events: auto; /* Re-enable clicks for the tile content */
}

.hero-event-info h3 {
    color: #ffffff;
    font-size: 24px;
    margin-bottom: 10px;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    
    /* Truncate text with ellipsis if it exceeds width */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.hero-event-info .btn-link {
    color: #fae7e0;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    text-decoration: none;
    transition: 0.3s;
}

.hero-event-info .btn-link:hover {
    color: #a91928; /* Brand red */
    text-shadow: none;
}

/* Ensure the background overlay allows interaction? 
   The overlay is on ::after. It has no pointer-events by default but let's check. 
   If hero-bg-item is under container-fluid, clicks might be blocked by container-fluid unless it has pointer-events:none where empty.
   But container-fluid has content.
   Actually, .hero-bg-slideshow is z-index: 0. 
   .container-fluid (static) implies z-index: 2.
   If .hero-event-info is inside .hero-bg-slideshow, it is at z-index: 0 context with z-index: 10, so effectively local z-index.
   It might be BEHIND the .container-fluid if .container-fluid fills the screen.
   
   FIX: We need to ensure .hero-event-info is clickable.
   The .container-fluid in .hero only wraps the central row. It shouldn't block the bottom area if the row doesn't extend there.
   But standard bootstrap container fills height? No, row fills content.
   However, just in case, let's boost z-index of .hero-event-info and ensure parent context allows it.
   Actually, since .hero-bg-slideshow is position absolute top 0 left 0, it is a sibling of .container-fluid.
   If .container-fluid is on top, clicks on .hero-event-info might be intercepted if .container-fluid overlaps it.
   But .container-fluid has height auto usually.
*/

@media (max-width: 767.98px) {
    .hero-event-info {
        bottom: 30px;
    }
    .hero-event-info h3 {
        font-size: 18px;
    }
}