/*
 Theme Name:     Divi Child – Original
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child – A Theme for WordPress
 Author:         GraVoc
 Author URI:     https://www.gravoc.com/
 Template:       Divi
 Version:        1.0.0
*/

/* Theme customization starts here...
----------------------------------------------------------------------------- */

/******************************************************************************\
*** Your Custom CSS
\******************************************************************************/

/* ==========================================================================
   PROJECT GRID CARDS
   ========================================================================== */

.filterable-posts .dmach-grid-item {
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.filterable-posts .filterable-post .et_pb_row {
    background-size: cover;
    background-position: center center;
    display: flex;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: hidden;
}

/* Fallback if aspect-ratio is ignored */
@supports not (aspect-ratio: 1 / 1) {
    .filterable-posts .filterable-post .et_pb_row {
        height: 360px !important;
    }

    @media only screen and (max-width: 767px) {
        .filterable-posts .filterable-post .et_pb_row {
            height: 90vw !important;
        }
    }
}

.filterable-posts .filterable-post .et_pb_row .et_pb_column {
    display: flex;
    flex-grow: 1;
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
}

/* Desktop hover overlay */
.filterable-posts .filterable-post .et_pb_row:hover .et_pb_column {
    opacity: 1;
    background: rgba(40, 131, 190, 0.8);
}

.filterable-posts .filterable-post h4 {
    font-family: 'Michroma', sans-serif;
    font-size: 17px !important;
}

.filterable-posts .filterable-post .dmach-acf-value {
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
}

#page-container .et_pb_section .filterable-posts .filterable-post .et_pb_button {
    margin-top: 0 !important;
    text-align: center;
}

.filterable-posts .filterable-post .et_pb_de_mach_view_button {
    background-color: #fff;
    margin-top: 1em;
}

.filterable-posts .filterable-post .et_pb_button,
.filterable-posts .filterable-post .et_pb_button:after {
    background-color: #fff;
    color: #2883be;
    border: 0 !important;
    font-size: 16px !important;
    opacity: 1;
}

.filterable-posts .filterable-post .et_pb_button:after {
    margin-left: 3px !important;
    margin-top: 7px;
    font-size: 18px;
}

.filterable-posts .filterable-post .et_pb_button {
    width: 160px;
    padding: 0.5em 2em 0.5em 0.8em !important;
    padding-right: 1.5em;
}

.filterable-posts .filterable-post .et_pb_button:hover {
    padding: 0.5em 2em 0.5em 0.8em !important;
}

/* Mobile: overlay hidden by default, shown on tap via .mobile-overlay-active */
@media only screen and (max-width: 767px) {
    .filterable-posts .filterable-post .et_pb_row .et_pb_column {
        opacity: 0 !important;
        background: rgba(40, 131, 190, 0.8);
        pointer-events: none;
    }

    .filterable-posts .filterable-post.mobile-overlay-active .et_pb_row .et_pb_column {
        opacity: 1 !important;
        pointer-events: auto;
    }

    .filterable-posts .filterable-post h4 {
        font-size: 18px !important;
    }
}

/* ==========================================================================
   FILTER BUTTONS / BLURBS
   ========================================================================== */

.gallery-filters {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 16px;
}

.gallery-filters .filter {
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.gallery-filters .filter:hover {
    transform: translateY(-2px);
}

.gallery-filters .filter:not(.active) {
    opacity: 0.7;
}

.gallery-filters .filter.active {
    opacity: 1;
}

.gallery-filters .filter.active .et-pb-icon,
.gallery-filters .filter:hover .et-pb-icon {
    color: #2883be;
}

.gallery-filters .filter.active h2,
.gallery-filters .filter:hover h2 {
    color: #000 !important;
}

.gallery-filters h2 {
    padding-bottom: 0 !important;
}

.gallery-filters .et_pb_blurb {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.gallery-filters .et_pb_blurb_content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.gallery-filters .et_pb_blurb_content .et_pb_main_blurb_image {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Tablet */
@media only screen and (max-width: 980px) {
    .gallery-filters {
        flex-wrap: wrap;
        gap: 12px;
    }
}

/* Mobile */
@media only screen and (max-width: 767px) {
    .gallery-filters {
        flex-direction: column;
        justify-content: flex-start;
        gap: 12px;
    }
}

/* ==========================================================================
   FILTER STATES / LOADING
   ========================================================================== */

.filterable-posts .dmach-grid-item.is-hidden {
    opacity: 0 !important;
    transform: scale(0.98);
    pointer-events: none;
}

.filterable-posts,
.filterable-posts .et_pb_ajax_pagination_container,
.filterable-posts .dmach-post-loop,
.filterable-posts .dmach-grid-wrapper,
.filterable-posts .dmach-grid {
    position: relative;
}

.filterable-posts.is-filtering,
.is-filtering {
    opacity: 0.72;
    transition: opacity 0.2s ease;
}

/* Dim overlay */
.filterable-posts.is-filtering::after,
.is-filtering::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.55);
    z-index: 20;
    pointer-events: all;
    backdrop-filter: blur(1px);
    -webkit