/* concerts-landing-style.css */

/* Font */
body.page-template-page-concerts-landing,
.concert-header,
.concert-header .cta-button {
    font-family: "Raleway", sans-serif;
}

/* General Body Styles */
body.page-template-page-concerts-landing {
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    margin: 0;
    padding: 0;
    color: #333333; /* Standard dark gray for text */
    line-height: 1.6;

}

.concerts-page-container {
    --main-bg-color: #FFFCEE;
    margin: 0 auto;
    padding: 0; /* Container itself has no padding, sections will handle it */
    /* box-shadow: 0 0 20px rgba(0,0,0,0.08); Removed, reference is flatter */
    background-color: var(--main-bg-color); /* Reference uses a white background mostly */

}

/* Page Error Message Styling */
.page-error-message {
    background-color: #ffebee; /* Light red */
    color: #c62828; /* Dark red */
    padding: 15px 20px;
    margin: 20px;
    border: 1px solid #ef9a9a; /* Lighter red border */
    border-radius: 4px;
    text-align: center;
}


/* Header Styles */
.concert-header {
    text-align: center;
    padding: 50px 20px 30px 20px; /* More padding top */
    background-color: #fdc40b;
    color: #333; /* Text color on light bg */
    border-bottom: 1px solid #e0e0e0;
    font-weight: bold;
}

.concert-header .event-title {
    font-size: 2.6em; /* Slightly adjusted */
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: 700; /* Bold */
    color: black; /* Darker title */
    line-height: normal;
}

.concert-header .event-date-location {
    font-size: 1.15em; /* Adjusted */
    margin-bottom: 25px;
    color: black; /* Softer than pure black */
    line-height: 1.5;
}
.concert-header .event-date-location a {
    color: black; /* Popsical Orange for links */
    text-decoration: none;
}
.concert-header .event-date-location a:hover {
    text-decoration: underline;
}
.concert-header .countdown-container {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Countdown Styles */


/* CTA Button Styles */
.cta-button {
    display: inline-block;
    padding: 14px 35px; /* Adjusted padding */
    margin-top: 10px; /* Reduced margin-top */
    background-color: #ff6f00; /* Popsical Orange */
    color: #fff;
    text-decoration: none;
    font-size: 1.2em; /* Adjusted */
    font-weight: bold;
    border-radius: 30px; /* Pill shape like reference */
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, transform 0.2s ease;
}

.cta-button:hover, .cta-button:focus {
    background-color: #e66000; /* Darker orange */
    transform: translateY(-2px);
}
.cta-button.disabled {
    background-color: #ccc;
    cursor: not-allowed;
    transform: none;
}


/* Main Content Section Styles */
.main-content-area {
    padding: 30px 0; /* Consistent padding for mobile */
}

.about-event-flex {
    display: flex;
    flex-direction: row; /* Side by side */
    justify-content: center;
    align-items: flex-start;
    gap: 40px; /* Space between the two divs */
    margin-bottom: 30px;
}
.about-event-flex img {
    width: 100%; /* Full width on small screens */
    max-width: 600px; /* Limit max width */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Subtle shadow */
    margin-bottom: 20px; /* Space below image */
}

.special-features {
    display: flex;
    flex-direction: row; /* Side by side */
    justify-content: center;
    align-items: flex-start;
    gap: 40px; /* Space between the two divs */
    margin-bottom: 30px;
}

.special-features-text li {
    color: black; /* Text color */
}

.special-features-video {
    flex: 1; /* Take equal space */
    max-width: 600px; /* Limit max width */
    margin-bottom: 20px; /* Space below video */
}

.section {
    margin: 50px 15px; /* Increased spacing between sections */
}

.section-title {
    font-size: 2.2em; /* Larger section titles */
    color: #333;
    margin-bottom: 25px;
    padding-bottom: 15px;
    text-align: center;
    font-weight: 600;
    border-bottom: 3px solid #ff6f00; /* Popsical Orange underline */
    display: inline-block; /* To make border only as wide as text */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}


.section p, .section ul {
    font-size: 18px; /* Slightly smaller base paragraph text */
    line-height: 1.7; /* More line spacing */
    color: black;
    font-weight: 600;
    max-width: 750px; /* Content width for readability */
    margin-left: auto;
    margin-right: auto;
}
.section p + p {
    margin-top: 15px;
}

.section ul {
    list-style: none;
    padding-left: 0; /* Remove default padding */
}

.section ul li {
    padding: 10px 0 10px 30px; /* Space for icon */
    position: relative; /* For icon positioning */
    border-bottom: 1px dashed #ddd; /* Dashed border like reference */
}
.section ul li:last-child {
    border-bottom: none;
}

.section ul li:before {
    content: '✔'; /* Checkmark or other icon */
    position: absolute;
    left: 0;
    top: 10px;
    margin-right: 10px;
    color: #ff6f00; /* Popsical Orange for icons */
    font-size: 1.2em;
}

/* Event Highlight Image */
.event-highlight-image {
    width: 100%;
    max-width: 700px; /* Limit image width */
    height: auto;
    border-radius: 10px; /* Rounded corners */
    margin: 0 auto 30px auto; /* Center image */
    display: block;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}


/* Concert List Styling (for main list of events) */
.concerts-list-section {
    /* background-color: #f9f9f9; /* Subtle bg for this section if needed */
    /* padding-top: 40px; padding-bottom: 40px; */
}
.concerts-list-title {
    /* Inherits .section-title styles, specific overrides if needed */
}

.concerts-list {
    border-top: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid */
    gap: 25px;
    margin-top: 30px;
}

.concert-item {
    background-color: #412476;
    border: 1px solid #e9e9e9;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
    font-weight: bold;
    text-align: center;
}

.concert-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.concert-item h2 {
    margin-top: 0;
    margin-bottom: 12px;
    min-height: 100px;
    font-size: 1.5em; /* Slightly larger */
    color: white;
}

.concert-item .concert-location,
.other-concert-item .concert-location,
.concert-item .concert-date-time {
    font-size: 0.95em; /* Slightly larger */
    color: #fdc40b;
    margin-bottom: 8px;
    line-height: 1.4;
}


/* Eventbrite Widget Area */
#eventbrite-widget-area {
    margin-top: 50px;
    padding: 40px 20px; /* Add padding around widget area */
    border-top: 1px solid #e0e0e0;
    background-color: #fdfdfd; /* Very light grey background */
}

#eventbrite-widget-container {
    min-height: 650px; /* Adjusted */
    border: none; /* Remove border, let it blend */
    border-radius: 8px; /* Keep if you prefer a contained look */
    overflow: hidden;
    /* box-shadow: 0 0 15px rgba(0,0,0,0.1); /* Optional shadow for widget container */
}

.hidden {
    display: none !important;
}


/* Media Gallery */
.media-gallery-section {
    background-color: #de037e;
    margin: 0 auto; /* Center the section */
}
.media-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Smaller min for more items per row */
    gap: 10px; /* Tighter gap */
    margin: 30px 0; /* Margin top after title */
    padding: 20px 0;
}

.media-item img { /* Removed video styling for now */
    width: 100%;
    height: 180px; /* Fixed height for uniformity */
    object-fit: cover; /* Ensure image covers the area */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}
.media-item img:hover {
    transform: scale(1.05);
}

/* Other Concerts Section */
.other-concerts-section {
    padding: 40px 15px; /* Match main content padding */
}

.other-concerts-title {
    /* Inherits .section-title styles */
}

.other-concerts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* Adjusted minmax */
    gap: 20px; /* Slightly reduced gap */
}

.other-concert-item {
    background-color: #412476;;
    border: 1px solid #e9e9e9;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Space out content */
    font-weight: bold;
}

.other-concert-item:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transform: translateY(-3px);
}

.other-concert-item .date-box, .concert-item .date-box, .concert-header .date-box {
    background-color: #ff6f00; /* Popsical Orange */
    color: #fff;
    padding: 8px 12px; /* Adjusted padding */
    border-radius: 6px; /* Slightly less rounded */
    margin: 0 auto 15px auto; /* Center the box */
    display: inline-block;
    line-height: 1.2;
}

.other-concert-item .date-day, .concert-item .date-day {
    display: block;
    font-size: 1.6em; /* Adjusted */
    font-weight: bold;
}

.other-concert-item .date-month-year, .concert-item .date-month-year {
    display: block;
    font-size: 0.85em; /* Adjusted */
    text-transform: uppercase;
}

.other-concert-item h3 {
    font-size: 1.3em; /* Adjusted */
    color: white;
    margin-bottom: 8px;
}

.other-concert-item p { /* For location */
    font-size: 0.95em; /* Adjusted */
    color: #fdc40b;
    margin-bottom: 15px;
    flex-grow: 1; /* Allow p to take space if title is short */
}

.other-concert-item .details-button, .concert-item .details-button {
    display: inline-block;
    padding: 9px 20px; /* Adjusted */
    background-color: #f46e1f;
    color: #fff;
    text-decoration: none;
    border-radius: 20px; /* Pill shape */
    font-size: 0.9em;
    transition: background-color 0.2s ease;
    border: 1px solid black;
    text-align: center;
    width: 150px;
    margin: 0 auto;
}

.other-concert-item .details-button:hover, .concert-item .details-button:hover {
    background-color: #b44a0d; /* Even darker on hover */
}


.other-concert-item .details-button.disabled, .concert-item .details-button.disabled {
    background-color: #ccc;
    color: #666;
    border: 1px solid #aaa;
    cursor: not-allowed;
}

.other-concert-item .details-button.disabled:hover, .concert-item .details-button.disabled:hover {
    background-color: #ccc;
}

.concert-item .details-button {
    text-align: center;
    width: 150px;
    margin: 0 auto;
}

.all-concerts-link-container {
    text-align: center;
    margin-top: 35px; /* More space above */
}

.all-concerts-link {
    display: inline-block;
    padding: 12px 30px;
    background-color: #ff6f00; /* Popsical Orange */
    color: #fff;
    text-decoration: none;
    font-size: 1.05em; /* Adjusted */
    font-weight: bold;
    border-radius: 25px; /* Pill shape */
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.all-concerts-link:hover {
    background-color: #e66000;
    transform: translateY(-2px);
}


/* Utility classes (can be expanded) */
.text-center {
    text-align: center;
}


/* Responsive Adjustments */

@media (max-width: 1200px) { /* Large Desktop */
    .other-concerts-grid {
        grid-template-columns: repeat(auto-fit, minmax(520px, 1fr)); /* Adjusted for larger screens */
    }
}

@media (max-width: 992px) { /* Tablet */
    .concert-header .event-title {
        font-size: 2.3em;
    }
    .section-title {
        font-size: 2em;
    }

    .about-event-flex,
    .special-features {
        flex-direction: column;
        gap: 20px;
        align-items: stretch;
    }

    .about-event-flex img,
    .special-features-video {
        margin-bottom: 15px;
        margin: 0 auto;
    }

    .section {
        margin: 30px 5px;
    }

    .event-highlight-image {
        max-width: 100%;
        margin-bottom: 20px;
    }

    .other-concerts-grid, .concerts-list {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .about-event-flex {
        flex-direction: column-reverse;
    }
}

@media (max-width: 768px) { /* Large Mobile / Small Tablet */
    .main-content-area {
        padding: 20px 10px; /* Reduce padding for main content area */
    }
    .concert-header {
        padding: 40px 15px 25px 15px;
    }
    .concert-header .event-title {
        font-size: 2em;
    }
    .concert-header .event-date-location {
        font-size: 1.05em;
    }
    .cta-button {
        font-size: 1.1em;
        padding: 12px 28px;
    }
    .section-title {
        font-size: 1.8em;
        padding-bottom: 10px;
    }
    .media-item img {
        height: 140px;
    }

    .about-event-flex img,
    .special-features-video {
        max-width: 100%;
        width: 100%;
    }
}

@media (max-width: 480px) { /* Small Mobile */
    .concert-header .event-title {
        font-size: 1.8em;
    }
    .concert-header .event-date-location {
        font-size: 1em;
    }
    .section-title {
        font-size: 1.6em;
    }

    .concert-header .countdown-container {
        transform: scale(.75);
    }
}