/*==================== EVENT DETAIL PAGE STYLES ======================*/
:root{
    --event-dark-bg: light-dark(#0D0D0D, #f7f7f7);
    --event-panel-bg: light-dark(#191920, #f1f1f1);
    --event-tile-bg: light-dark(#262626, #e8e8e8);
}
:where(.page-event-detail) .bg-event-dark {background-color: var(--event-dark-bg) !important;}
:where(.page-event-detail) .bg-event-panel {background-color: var(--event-panel-bg) !important;}

/*-------------------- PAGE BANNER --------------------*/
:where(.page-event-detail) .event-banner {
    display: flex;
    align-items: center;
    overflow: hidden;
}

/*-------------------- FEATURED EVENT --------------------*/
:where(.page-event-detail) .featured-event {background-color: var(--event-panel-bg);}
:where(.page-event-detail) .featured-event-body {padding: 48px 40px;}
.page-event-detail .featured-event-media {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: 280px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--event-tile-bg);
}
@media screen and (min-width: 992px) {
    .page-event-detail .featured-event-media {
        aspect-ratio: auto;
        align-self: stretch;
        height: auto;
        min-height: 100%;
    }
}
.page-event-detail .featured-event-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center;
}
:where(.page-event-detail) .goh-badge {
    min-width: 56px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--event-tile-bg);
}

/*-------------------- AT A GLANCE --------------------*/
:where(.page-event-detail) .glance-box {background-color: var(--event-dark-bg);border: 1px solid var(--border-color-light);}
:where(.page-event-detail) .glance-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--border-color-light);
}
:where(.page-event-detail) .glance-row:last-child {border-bottom: 0;}

/*-------------------- VENUE --------------------*/
:where(.page-event-detail) .venue-img-wrap {position: relative;overflow: hidden;}
.page-event-detail .venue-img {
    display: block;
    width: 100% !important;
    height: 400px !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center;
}
:where(.page-event-detail) .venue-meta-label {min-width: 70px;}

/*-------------------- CITY EVENT CALENDAR --------------------*/
:where(.page-event-detail) .event-card {
    background-color: var(--color-white-same);
    border: 1px solid var(--color-white-same);
    height: 100%;
    overflow: hidden;
}
.page-event-detail .event-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--event-tile-bg);
    flex-shrink: 0;
}
.page-event-detail .event-card-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center;
}
:where(.page-event-detail) .event-card-body {padding: 24px 16px 28px 16px;}
:where(.page-event-detail) .event-card-body * {color: var(--color-black-same);}
:where(.page-event-detail) .past-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--border-color-light);
}
.page-event-detail .past-row-media {
    position: relative;
    flex-shrink: 0;
    width: 140px;
    min-width: 140px;
    height: 100px;
    overflow: hidden;
    background-color: var(--event-tile-bg);
}
.page-event-detail .past-row-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center;
}

/*-------------------- REQUEST AN INVITATION --------------------*/
:where(.page-event-detail) .invite-form-box {border: 1px solid var(--border-color-light);padding: 32px;}
:where(.page-event-detail) .event-form input.form-control::placeholder {color: var(--color-content);}
:where(.page-event-detail) .event-form .form-label {color: var(--color-content) !important;}

/*-------------------- FAQ --------------------*/
:where(.page-event-detail) .faq-item {border-bottom: 1px solid var(--border-color-light);}
:where(.page-event-detail) .faq-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    background-color: transparent;
    border: 0;
    text-align: left;
    outline: none !important;
    box-shadow: none !important;
}
:where(.page-event-detail) .faq-toggle {color: var(--color-golden);line-height: 1;}
:where(.page-event-detail) .faq-body {display: none;padding-bottom: 20px;}
:where(.page-event-detail) .faq-item.active .faq-body {display: block;}

/*-------------------- ICONS --------------------*/
/* style.css sets `color` on every element, which breaks `currentColor` inside SVG */
svg, svg * {color: inherit;}

/*-------------------- MEDIA QUERY --------------------*/
@media screen and (max-width: 1200px) {
    :where(.page-event-detail) .featured-event-body {padding: 36px 28px;}
    .page-event-detail .venue-img {height: 340px !important;}
}
@media screen and (max-width: 991px) {
    .page-event-detail .venue-img {height: 320px !important;}
}
@media screen and (max-width: 767px) {
    :where(.page-event-detail) .featured-event-body {padding: 24px 20px;}
    :where(.page-event-detail) .invite-form-box {padding: 20px;}
    .page-event-detail .venue-img {height: 260px !important;}
    :where(.page-event-detail) .past-row {flex-wrap: wrap;}
    .page-event-detail .past-row-media {min-width: 84px;width: 84px;height: 64px;}
}