/*
 * Revised event2.css for Bootstrap 5 Integration
*/

/* --- 1. Full-Page Background Image (for pages with 'has-full-page-background' class) --- */
/* This creates the fixed, blurred, semi-transparent background image. */
body.has-full-page-background {
    background-color: transparent; /* Ensure body itself is transparent to see ::before */
    /* background-attachment: fixed; <-- Moved this to inline style for dynamic control */
}

body.has-full-page-background::before {
    content: "";
    position: fixed; /* Ensures it stays in place relative to viewport */
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center center;
    z-index: -1;
    filter: blur(3px); /* A slight blur effect */
    opacity: 0.15; /* Makes the background subtle */
    /* For true parallax where the image moves relative to scroll,
       you'd typically apply `background-attachment: fixed;` here.
       However, if the content is scrolling *over* the fixed background,
       that IS the parallax effect you asked for! */
    /* If you want the image to move with the scroll, but slower, you'd use JS.
       For a simpler "content scrolls over fixed image" parallax,
       `position: fixed` on the ::before element combined with `background-attachment: fixed` on the body
       (or even the ::before itself) works. */
}

/* --- 2. Content Panels --- */
/* This new class provides the semi-transparent white background for content areas. */
.content-panel {
    background: rgba(255, 255, 255, 0.9);
    padding: 1.5rem;
    border-radius: 0.5rem; /* Matches Bootstrap's styling */
    margin-bottom: 1.5rem;
}

/* --- Dark Mode Version --- */
[data-bs-theme="dark"] .content-panel {
    background: rgba(33, 37, 41, 0.9); /* Bootstrap's dark color */
    color: #f8f9fa; /* Light text */
    border: 1px solid #495057; /* A slightly lighter border for dark mode */
}

/* --- 3. Hero Title Section (with Cover Image) --- */
/* This styles the banner at the top of the main column. */
.event-title-background {
    position: relative;
    color: whitesmoke;
    height: 350px; /* Adjust height as needed */
    width: 100%;
    background-size: cover; /* This will be set by an inline style */
    background-position: center center;
    border-radius: 0.5rem;
    display: flex; /* Helps vertically align the title */
    align-items: flex-end; /* Aligns title to the bottom */
    padding: 2rem;
}
.event-title-background::after {
    /* This adds the dark gradient overlay */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0.5rem;
    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));
}

@import url('https://fonts.googleapis.com/css?family=Ubuntu:700&subset=cyrillic,cyrillic-ext,latin,latin-ext');
.event-title {
    font-size: 3rem; /* Adjust font size */
    font-family: 'Ubuntu', sans-serif;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
    position: relative; /* Brings title above the gradient overlay */
    z-index: 2;
    word-break: break-word; /* Allows long titles to wrap */
}