/* ==================================== */
/* 1. Estilos del Contenedor y Buscador */
/* ==================================== */
#proyectos-water-container {
    padding: 20px 0;
    text-align: center;
}

.proyectos-water-search-wrapper {
    margin-bottom: 25px;
}

#proyecto-search-input {
    width: 100%;
    max-width: 600px;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    /* Estilos para el autocompletado (jQuery UI) - Es buena práctica customizarlos */
}

/* ============================= */
/* 2. Estilos de Tabs y Dropdown */
/* ============================= */
.proyectos-water-tabs .nav-tabs {
    border-bottom: 2px solid #000;
    margin-bottom: 50px;
    display: flex;
    flex-wrap: wrap;
    width: 60%;
    justify-content: center;
    margin-left: 20%;
    list-style-type: none;
}

.proyectos-water-tabs li.nav-item{
    position: relative;
}

.proyectos-water-tabs li.nav-item button {
    text-transform: uppercase !important;
    position: relative;
    background: transparent !important;
}

li.nav-item.dropdown button::after {
    content: "";
    background-image: url(/wp-content/uploads/2025/10/weui_arrow-filled.png);
    display: inline-block;
    border: none;
    height: 17px;
    width: 34px;
    background-repeat: no-repeat;
}

.proyectos-water-tabs li.nav-item:not(:last-child) {
    border-right: solid 2px #000;
}

.proyectos-water-tabs .nav-link {
    text-decoration: none !important;
    color: #333;
    border: none;
    border-radius: 0;
    margin-right: 5px;
    padding: 10px 15px;
    transition: all 0.3s ease;
}

.proyectos-water-tabs .nav-link:hover {
    color: #007bff;
}

.proyectos-water-tabs .nav-link.active, 
.proyectos-water-tabs .dropdown-item.active {
    color: #c2a394;
    background-color: transparent;
    border-bottom: none !important;
}

/* Dropdown */
.proyectos-water-tabs .dropdown-menu {
    background: #C2A395D9 !important;
    list-style-type: none;
    padding: 17px 0px;
    letter-spacing: 2px;
    position: absolute;
    z-index: 2;
    bottom: 0%;
    transform: translateY(100%);
    transition: all 0.3s ease;
    opacity: 0;
    text-align: left;
}

.nav-item.dropdown:hover .dropdown-menu {
    opacity: 1;
}

.proyectos-water-tabs .dropdown-item {
    width: 100%;
    display: block;
    padding: 8px 20px;
    cursor: pointer;
    text-decoration: none !important;
}

a.dropdown-item.category-filter-link.active {
    color: black !important;
}

.proyectos-water-tabs .dropdown-item:hover {
    background-color: #f8f9fa;
}

/* ================================== */
/* 3. Estilos Masonry y Tarjeta (Card)*/
/* ================================== */
.masonry-grid {
    /* Masonry JS se encarga del resto, solo definimos el contenedor */
    margin: 0 auto;
}

.proyecto-card-item {
    /* Ancho de la columna base (ej: 3 columnas en desktop) */
    width: 31.33%; 
    margin: 1%; /* Espacio entre columnas */
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #eee;
    overflow: hidden;
}

.proyecto-card-link {
    position: relative;
    text-decoration: none;
    display: block;
    color: inherit;
}

.cat_name_tit {
    position: absolute;
    top: 0%;
    width: 100%;
    transform: translateY(-60%);
}

.current-category-title {
    color: #000 !important;
    width: 100% !important;
}

.proyecto-card-img {
    width: 100%;
    height: auto;
    display: block;
}

.proyecto-card-img-placeholder {
    width: 100%;
    height: 180px; /* Altura de placeholder */
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #777;
}

.proyecto-card-content {
    padding: 15px;
    position: absolute;
    bottom: 0%;
    text-align: right;
    width: 100%;
}

.proyecto-card-content h2 {
    margin-top: 0;
    color: white !important;
    margin-bottom: 0px !important;
}

.proyecto-card-description {
    color: white;
    margin-bottom: 0px !important;
}

/* ================================== */
/* 4. Responsive (Móvil y Tablet)     */
/* ================================== */
@media (max-width: 992px) {
    /* Tablet: 2 columnas */
    .proyecto-card-item {
        width: 48%;
        margin: 1%;
    }
}
@media (max-width: 768px) {
    .proyectos-water-tabs li.nav-item:not(:last-child) {
        border-right: none !important;
    }
}

@media (max-width: 600px) {
    /* Móvil: 1 columna */
    .proyecto-card-item {
        width: 100%;
        margin: 0 0 20px 0;
    }
    
    /* Asegura que las pestañas se vean bien */
    .proyectos-water-tabs .nav-tabs {
        flex-direction: column;
    }
    .proyectos-water-tabs .nav-item {
        width: 100%;
    }
}