/* Concerts & Shows (palm-springs-concerts.php). Scoped to #dle-concerts; the hero is .cc-hero. */

.banner-header.cc-hero {
    background-size: cover;
    background-position: center center;
    background-attachment: scroll;
}

#dle-concerts .cc-wrap { padding: 50px 0 80px; }

#dle-concerts .cc-lead {
    margin: 0 0 26px;
}
#dle-concerts .cc-lead p {
    margin: 0 0 14px;
    font-size: 17px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .7);
}

/* Filters: dates, two rows of toggle chips, the button. Checkboxes styled as the site's .dle-chip. */
#dle-concerts .cc-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 22px;
    padding: 18px 20px;
    background: #1b1b1b;
    border: 1px solid #34312d;
    border-radius: 10px;
}
#dle-concerts .cc-dates {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    cursor: pointer;
}
#dle-concerts .cc-dates span {
    font: 12px/1 'Barlow Condensed', sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #aa8453;
    white-space: nowrap;
}
#dle-concerts .cc-date-input {
    width: 230px;
    height: 38px;
    margin: 0;                          /* global inputs get margin-bottom: 15px */
    padding: 0 12px;
    background: #222;
    border: 1px solid #34312d;
    border-radius: 8px;
    color: #fff;
    font: 15px 'Barlow', sans-serif;
    text-align: center;
    cursor: pointer;
}
#dle-concerts .cc-date-input:hover,
#dle-concerts .cc-date-input:focus { border-color: #aa8453; outline: none; }
#dle-concerts .cc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
#dle-concerts .cc-chip { margin: 0; cursor: pointer; }
#dle-concerts .cc-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
#dle-concerts .cc-chip span {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 6px 14px;
    background: #222;
    border: 1px solid #34312d;
    border-radius: 8px;
    color: rgba(255, 255, 255, .75);
    font-size: 14px;
    transition: border-color .15s, background-color .15s, color .15s;
}
#dle-concerts .cc-chip:hover span { border-color: #aa8453; }
#dle-concerts .cc-chip input:checked + span { background: #2a241c; border-color: #aa8453; color: #fff; }
#dle-concerts .cc-chip input:focus-visible + span { outline: 2px solid #f2c68b; outline-offset: 2px; }

#dle-concerts .cc-go,
#dle-concerts .cc-go:hover {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 20px;
    border: 0;
    border-radius: 8px;
    background: #aa8453;
    color: #111;
    font: 600 14px 'Barlow', sans-serif;
    text-decoration: none;
    cursor: pointer;
}
#dle-concerts .cc-go:hover { background: #c99a5b; }
#dle-concerts .cc-filters .cc-go { margin-left: auto; }

#dle-concerts .cc-count { margin: 22px 0 6px; color: rgba(255, 255, 255, .5); font-size: 14px; }
#dle-concerts .cc-empty { padding: 30px; background: #1b1b1b; border-radius: 10px; color: rgba(255, 255, 255, .7); }

/* The list: a gold date line, then one row per event. */
#dle-concerts .cc-day {
    margin: 34px 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #34312d;
    font: 13px/1 'Barlow Condensed', sans-serif;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #aa8453;
}
#dle-concerts .cc-event {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 12px;
    padding: 12px;
    background: #1b1b1b;
    border: 1px solid #2c2a27;
    border-radius: 10px;
}
#dle-concerts .cc-img {
    flex: none;
    width: 176px;
    height: 99px;
    object-fit: cover;
    border-radius: 6px;
}
#dle-concerts .cc-body { flex: 1; min-width: 0; }
#dle-concerts .cc-meta { margin: 0 0 4px; font-size: 13px; color: rgba(255, 255, 255, .55); }
#dle-concerts .cc-name { margin: 0 0 8px; font-size: 22px; line-height: 1.25; color: #fff; }
#dle-concerts .cc-tags { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0; font-size: 13px; color: rgba(255, 255, 255, .5); }
#dle-concerts .cc-flag { color: #e4a853; }
#dle-concerts .cc-note { color: #aa8453; }

#dle-concerts .cc-tickets,
#dle-concerts .cc-tickets:hover {
    display: inline-flex;
    flex: none;
    align-items: center;
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid #aa8453;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    transition: background-color .15s;
}
#dle-concerts .cc-tickets:hover { background: #aa8453; color: #111; }

#dle-concerts .cc-cta {
    margin-top: 50px;
    padding: 30px;
    background: #1b1b1b;
    border-left: 3px solid #aa8453;
}
#dle-concerts .cc-cta h2 { margin: 0 0 10px; font-size: 30px; }
#dle-concerts .cc-cta p { margin: 0 0 18px; color: rgba(255, 255, 255, .7); }
#dle-concerts .cc-source { margin-top: 24px; font-size: 13px; color: rgba(255, 255, 255, .4); }

@media (max-width: 767px) {
    #dle-concerts .cc-dates { width: 100%; }
    #dle-concerts .cc-date-input { flex: 1; width: auto; min-width: 0; }
    #dle-concerts .cc-filters .cc-go { margin-left: 0; width: 100%; justify-content: center; }
    #dle-concerts .cc-event { flex-wrap: wrap; gap: 12px; align-items: flex-start; }
    #dle-concerts .cc-img { width: 104px; height: 59px; }
    #dle-concerts .cc-tickets { width: 100%; justify-content: center; }
    #dle-concerts .cc-name { font-size: 20px; }
}