/* =========================
EVENTS PAGE
========================= */

/* EVENTS HERO */

.events-hero {

/*  */
min-height: 75vh;

display: flex;

align-items: center;

justify-content: center;

text-align: center;

padding: 120px 20px 70px;

background:
    linear-gradient(
        rgba(31, 26, 23, 0.72),
        rgba(31, 26, 23, 0.9)
    ),
    url("images/events-hero.jpg");

background-size: cover;

background-position: center;

color: white;
/*  */

}

.events-hero-content {
max-width: 800px;
}

.events-hero h1 {

/*  */
font-size:
    clamp(3rem, 7vw, 6rem);

margin: 20px 0;

color: white;
/*  */

}

.events-hero p {

/*  */
color: #e7e0da;

font-size: 1.1rem;

max-width: 650px;

margin: auto;
/*  */

}

/* FEATURED EVENT */

.featured-event-section {

/*  */
padding: 120px 0;

background: var(--cream);
/*  */

}

.featured-event {

/*  */
display: grid;

grid-template-columns:
    1fr 1fr;

background: white;

box-shadow:
    0 20px 60px
    rgba(0, 0, 0, 0.08);
/*  */

}

.featured-image img {

/*  */
width: 100%;

height: 100%;

min-height: 600px;

object-fit: cover;
/*  */

}

.featured-content {

/*  */
padding: 70px;

display: flex;

flex-direction: column;

justify-content: center;
/*  */

}

.featured-label {

/*  */
color: var(--primary);

font-size: 0.75rem;

font-weight: 600;

letter-spacing: 2px;

margin-bottom: 20px;
/*  */

}

.featured-content h2 {

/*  */
font-size:
    clamp(2.2rem, 4vw, 4rem);

color: var(--dark);

margin-bottom: 25px;
/*  */

}

.featured-description {

/*  */
margin-bottom: 30px;

color: #666;
/*  */

}

/* EVENT DETAILS */

.event-details {

/*  */
display: flex;

flex-direction: column;

gap: 20px;

margin-bottom: 35px;
/*  */

}

.detail {

/*  */
display: flex;

align-items: center;

gap: 15px;
/*  */

}

.detail-icon {

/*  */
font-size: 1.4rem;

width: 45px;

height: 45px;

display: flex;

align-items: center;

justify-content: center;

background: var(--cream);
/*  */

}

.detail strong {

/*  */
display: block;

color: var(--dark);
/*  */

}

.detail p {

/*  */
margin: 0;

font-size: 0.9rem;

color: #777;
/*  */

}

/* UPCOMING EVENTS */

.upcoming-events-section {

/*  */
padding: 120px 0;

background: white;
/*  */

}

/* FILTER BUTTONS */

.event-filters {

/*  */
display: flex;

justify-content: center;

flex-wrap: wrap;

gap: 10px;

margin-bottom: 50px;
/*  */

}

.filter-btn {

/*  */
background: transparent;

border:
    1px solid
    #ddd;

padding:
    10px 20px;

cursor: pointer;

font-family: inherit;

transition: 0.3s;
/*  */

}

.filter-btn:hover,
.filter-btn.active {

/*  */
background: var(--primary);

color: white;

border-color:
    var(--primary);
/*  */

}

/* EVENTS GRID */

.events-grid {

/*  */
display: grid;

grid-template-columns:
    repeat(3, 1fr);

gap: 25px;
/*  */

}

/* PERFORMANCE CARD */

.performance-card {

/*  */
background: var(--cream);

transition: 0.3s;

overflow: hidden;
/*  */

}

.performance-card:hover {

/*  */
transform:
    translateY(-8px);

box-shadow:
    0 20px 40px
    rgba(0, 0, 0, 0.1);
/*  */

}

.performance-image {

/*  */
position: relative;
/*  */

}

.performance-image img {

/*  */
height: 250px;

object-fit: cover;
/*  */

}

.event-category {

/*  */
position: absolute;

bottom: 15px;

left: 15px;

background:
    var(--primary);

color: white;

padding:
    6px 12px;

font-size:
    0.75rem;
/*  */

}

/* EVENT CONTENT */

.performance-content {

/*  */
display: flex;

gap: 20px;

padding: 25px;
/*  */

}

.performance-date {

/*  */
min-width: 65px;

height: 70px;

background: white;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;
/*  */

}

.date-day {

/*  */
font-family:
    "Playfair Display",
    serif;

font-size: 1.8rem;

color: var(--primary);

line-height: 1;
/*  */

}

.date-month {

/*  */
font-size:
    0.65rem;

letter-spacing: 1px;
/*  */

}

.performance-info h3 {

/*  */
color: var(--dark);

font-size: 1.4rem;

margin-bottom: 8px;
/*  */

}

.performance-info p {

/*  */
font-size: 0.85rem;

margin-bottom: 5px;

color: #777;
/*  */

}

/* CARD FOOTER */

.performance-footer {

/*  */
border-top:
    1px solid
    #e5ddd5;

padding:
    18px 25px;

display: flex;

justify-content:
    space-between;

font-size:
    0.8rem;
/*  */

}

.performance-footer span {

/*  */
color: #777;
/*  */

}

.performance-footer a {

/*  */
color: var(--primary);

font-weight: 600;
/*  */

}

/* PAST PERFORMANCES */

.past-performances {

/*  */
padding: 120px 0;

background: var(--dark);
/*  */

}

.past-performances
.section-heading h2 {

/*  */
color: white;
/*  */

}

.past-performances
.section-description {

/*  */
color: #aaa;
/*  */

}

.past-list {

/*  */
max-width: 900px;

margin: auto;

display: flex;

flex-direction: column;

gap: 2px;
/*  */

}

.past-performance {

/*  */
display: grid;

grid-template-columns:
    120px
    1fr
    180px;

align-items: center;

gap: 30px;

padding: 30px;

background: #292321;

transition: 0.3s;
/*  */

}

.past-performance:hover {

/*  */
background: #332c29;
/*  */

}

.past-year {

/*  */
font-family:
    "Playfair Display",
    serif;

font-size: 1.8rem;

color: var(--gold);
/*  */

}

.past-info h3 {

/*  */
color: white;

font-size: 1.4rem;

margin-bottom: 5px;
/*  */

}

.past-info p {

/*  */
color: #aaa;

font-size: 0.9rem;
/*  */

}

.past-type {

/*  */
color: var(--gold);

font-size: 0.8rem;

text-align: right;
/*  */

}

/* BOOKING */

.booking-section {

/*  */
padding: 120px 20px;

text-align: center;

background:
    linear-gradient(
        rgba(123, 30, 30, 0.94),
        rgba(75, 12, 12, 0.97)
    );
/*  */

}

.booking-section .container {

/*  */
max-width: 750px;
/*  */

}

.booking-section h2 {

/*  */
font-size:
    clamp(2.5rem, 6vw, 4.5rem);

color: white;

margin-bottom: 20px;
/*  */

}

.booking-section p {

/*  */
color: #eadede;

margin-bottom: 35px;
/*  */

}

.booking-section
.section-tag {

/*  */
color: #e8c27c;
/*  */

}

.booking-section
.secondary-btn {

/*  */
border-color: white;

color: white;
/*  */

}

.booking-section
.secondary-btn:hover {

/*  */
background: white;

color: var(--primary);
/*  */

}

/* =========================
EVENTS RESPONSIVE
========================= */

@media (max-width: 950px) {

/*  */
.events-grid {

    grid-template-columns:
        repeat(2, 1fr);
}

.featured-event {

    grid-template-columns:
        1fr;
}

.featured-image img {

    min-height: 450px;
}
/*  */

}

@media (max-width: 650px) {

/*  */
.events-grid {

    grid-template-columns:
        1fr;
}

.featured-content {

    padding: 40px 25px;
}

.featured-image img {

    min-height: 300px;
}

.past-performance {

    grid-template-columns:
        1fr;

    gap: 10px;

    text-align: left;
}

.past-type {

    text-align: left;
}

.events-hero {

    min-height: 65vh;
}
/*  */

}