/* assets/css/overzicht-genre.css
 *
 * De opmaak van de overzichtspagina's per genre: sprekers, dagvoorzitters,
 * presentatoren. Stond als twee <style>-blokken midden in de PHP; hier is
 * het te vinden, wordt het door de browser bewaard en geldt het voor alle
 * drie de pagina's tegelijk.
 */

body {
    background-color: #fbfbfd;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.text-blue { color: #103856; }

.btn-outline-blue {
    color: #103856;
    border-color: #103856;
    font-weight: 600;
}

.btn-outline-blue:hover {
    background-color: #103856;
    color: #fff;
}

/* ---------------------------------------------------------------------------
 *  De kop
 * ------------------------------------------------------------------------- */
.hsb-kop {
    background: rgb(255 255 255 / .8) !important;
    backdrop-filter: blur(10px);
}

/* ---------------------------------------------------------------------------
 *  De filterbalk
 * ------------------------------------------------------------------------- */
.sticky-wrapper {
    position: sticky;
    top: 90px;
    z-index: 1000;
    padding: 0;
}

.glass-container {
    background: rgb(255 255 255 / .8);
    backdrop-filter: blur(20px) saturate(180%);
    border-radius: 2.5rem;
    border: 1px solid rgb(255 255 255 / .4);
    box-shadow: 0 10px 30px rgb(0 0 0 / .05);
}

.main-search-input {
    background: #fff;
    border: 1px solid #d6dee8;
    border-radius: 1.5rem;
    padding: 1rem 1.5rem;
    font-weight: 500;
}

.filter-select {
    background: #fff;
    border: 1px solid #d6dee8;
    border-radius: 1.5rem;
    padding: .7rem 1.2rem;
    color: #103856;
    font-weight: 600;
    font-size: .8rem;
    text-align: left;
}

.dropdown-menu {
    border: none !important;
    box-shadow: 0 20px 40px rgb(0 0 0 / .1) !important;
    border-radius: 1.5rem !important;
    padding: 1.5rem !important;
    min-width: 260px;
}

.filter-dropdown-scroll {
    max-height: 250px;
    overflow-y: auto;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    background: #103856;
    color: #fff;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: .75rem;
    margin-right: 8px;
    margin-bottom: 2px;
}

/* De zoekterm krijgt oranje, zodat hij opvalt tussen de filters. */
.filter-chip--zoek {
    background: #ff8c00;
}

.filter-chip i {
    cursor: pointer;
    margin-left: 8px;
}

.hidden { display: none; }

/* ---------------------------------------------------------------------------
 *  Het raster
 * ------------------------------------------------------------------------- */
#items-grid {
    transition: opacity .25s ease;
}

.grid-loading {
    opacity: .4;
    pointer-events: none;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.card-fade-in {
    animation: fadeIn .3s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
    .card-fade-in { animation: none; }
}

/* ---------------------------------------------------------------------------
 *  De kaart
 * ------------------------------------------------------------------------- */
.kaart-foto {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.kaart-prijs { z-index: 5; }
.kaart-ster  { z-index: 10; }

.prijs-badge {
    font-size: .72rem;
    color: #103856;
    background-color: rgb(255 255 255 / .7);
    backdrop-filter: blur(10px);
    border: 1px solid rgb(255 255 255 / .3);
}

.wishlist-btn-round {
    width: 36px;
    height: 36px;
    border-radius: 50% !important;
    border: none !important;
    background: rgb(255 255 255 / .9);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgb(0 0 0 / .15);
    transition: .2s;
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
 *  Opdrachtgevers
 * ------------------------------------------------------------------------- */
.logo-section {
    padding: 80px 0;
    background-color: #fff;
    text-align: center;
}

.logo-scroller-wrapper {
    overflow-x: auto;
    padding-bottom: 20px;
    scrollbar-width: none;
}

.logo-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    padding: 0 20px;
}

.client-logo {
    width: auto;
    max-width: 140px;
    height: 60px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .4;
    transition: .5s;
}

.client-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.08);
}

@media (max-width: 768px) {
    .sticky-wrapper { top: 70px; }
    .logo-grid { justify-content: flex-start; gap: 40px; }
}