/* Card text: category only, styled like the previous image title. */
.dipi_filterable_gallery .dipi-grid-item-title,
.dipi_filterable_gallery .dipi-grid-item-caption {
    display: none !important;
}

/* Use extra specificity so Divi's generated module CSS cannot restore the old red badge. */
html body .dipi_filterable_gallery .grid .grid-item .dipi-grid-item-content .dipi-grid-item-category {
    display: block !important;
    width: auto !important;
    margin: 10px !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
    font-family: "industry", sans-serif !important;
    font-size: clamp(22px, calc(1.250rem + 0.556vw), 28px) !important;
    font-weight: 700 !important;
    line-height: 110% !important;
    text-decoration: none !important;
}

html body .dipi_filterable_gallery .grid .grid-item .dipi-grid-item-content .dipi-grid-item-category::before,
html body .dipi_filterable_gallery .grid .grid-item .dipi-grid-item-content .dipi-grid-item-category::after {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Optional sitewide square crop. This affects display only, not the original image file. */
body.mmg-dpfgu-square-gallery-images .dipi_filterable_gallery .grid .grid-item .img-container {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
}

body.mmg-dpfgu-square-gallery-images .dipi_filterable_gallery .grid .grid-item .img-container > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.mmg-dpfgu-filter-toggle {
    display: none;
}

.dipi_filterable_gallery.mmg-dpfgu-dropdown-mode .mmg-dpfgu-filter-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 13px 52px 13px 16px;
    border: 1px solid #ed1c24;
    border-radius: 0;
    background: #1f1f1f;
    color: #fff;
    cursor: pointer;
    font-family: "industry", sans-serif !important;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    z-index: 3;
}

.dipi_filterable_gallery.mmg-dpfgu-dropdown-mode .mmg-dpfgu-filter-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 19px;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-65%) rotate(45deg);
    transition: transform 180ms ease;
}

.dipi_filterable_gallery.mmg-dpfgu-dropdown-mode .mmg-dpfgu-filter-toggle[aria-expanded="true"]::after {
    transform: translateY(-25%) rotate(225deg);
}

.dipi_filterable_gallery.mmg-dpfgu-dropdown-mode .mmg-dpfgu-filter-toggle:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.dipi_filterable_gallery.mmg-dpfgu-dropdown-mode .dipi-filter-bar.mmg-dpfgu-mobile-enhanced {
    display: none !important;
    width: 100% !important;
    max-height: min(62vh, 430px);
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
    overflow-y: auto;
    gap: 0 !important;
    grid-template-columns: 1fr;
    border: 1px solid #ed1c24 !important;
    border-top: 0 !important;
    background: #1f1f1f !important;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .28);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Divi Pixel may leave desktop filter positioning/translation rules on this
     * element. Reset them so the opened list begins below our toggle instead of
     * sliding its first row underneath it. */
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    float: none !important;
    clear: both;
    transform: none !important;
    translate: none !important;
    align-content: start !important;
    align-items: stretch !important;
    grid-auto-rows: minmax(46px, auto);
    z-index: 2;
}

.dipi_filterable_gallery.mmg-dpfgu-dropdown-mode .dipi-filter-bar.mmg-dpfgu-mobile-enhanced.mmg-dpfgu-open {
    display: grid !important;
}

.dipi_filterable_gallery.mmg-dpfgu-dropdown-mode .dipi-filter-bar.mmg-dpfgu-mobile-enhanced .dipi-filter-bar-item {
    display: block !important;
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    float: none !important;
    clear: none !important;
    transform: none !important;
    translate: none !important;
    width: 100% !important;
    min-height: 46px;
    margin: 0 !important;
    padding: 12px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .13) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #fff !important;
    text-align: left !important;
}

.dipi_filterable_gallery.mmg-dpfgu-dropdown-mode .dipi-filter-bar.mmg-dpfgu-mobile-enhanced .dipi-filter-bar-item:last-child {
    border-bottom: 0 !important;
}

.dipi_filterable_gallery.mmg-dpfgu-dropdown-mode .dipi-filter-bar.mmg-dpfgu-mobile-enhanced .dipi-filter-bar-item:hover,
.dipi_filterable_gallery.mmg-dpfgu-dropdown-mode .dipi-filter-bar.mmg-dpfgu-mobile-enhanced .dipi-filter-bar-item:focus-visible {
    background: rgba(237, 28, 36, .16) !important;
}

.dipi_filterable_gallery.mmg-dpfgu-dropdown-mode .dipi-filter-bar.mmg-dpfgu-mobile-enhanced .dipi-filter-bar-item.active {
    background: #ed1c24 !important;
    color: #fff !important;
}

.dipi_filterable_gallery.mmg-dpfgu-dropdown-mode .dipi-filter-bar.mmg-dpfgu-mobile-enhanced .dipi-filter-bar-item-title {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
}

.dipi_filterable_gallery.mmg-dpfgu-dropdown-mode .dipi-filter-bar.mmg-dpfgu-mobile-enhanced .dipi-filter-bar-name,
.dipi_filterable_gallery.mmg-dpfgu-dropdown-mode .dipi-filter-bar.mmg-dpfgu-mobile-enhanced .dipi-filter-bar-count,
.dipi_filterable_gallery.mmg-dpfgu-dropdown-mode .dipi-filter-bar.mmg-dpfgu-mobile-enhanced .dipi-filter-bar-item-desc {
    color: inherit !important;
}

/* Keep this after the generic dropdown-item rule so its !important display wins.
 * “All” remains active internally to show every project before a selection. */
.dipi_filterable_gallery.mmg-dpfgu-dropdown-mode .dipi-filter-bar.mmg-dpfgu-mobile-enhanced .dipi-filter-bar-item.mmg-dpfgu-all-filter {
    display: none !important;
}
