/*
 * Archivo: custom-styles.css
 * Estilos personalizados para HOM Architects
 * Portfolio Grid, Ancho completo, y otros estilos globales
 */

/* ===================================================
   1. COLOR SECTION - ANCHO COMPLETO
   =================================================== */
#ancho-completo .container {
    width: 100% !important;
    min-width: 100%;
    padding: 0 20px;
    margin: 0;
}

/* ===================================================
   2. PORTFOLIO GRID - MÁRGENES Y ESPACIADO
   =================================================== */
/* Margen de 20px entre items del portfolio (4 columnas) */
.grid-sort-container.no_margin-container .grid-entry {
    margin: 0 10px 20px 10px !important;
    width: calc(25% - 20px) !important;
}

/* Primer item de cada fila sin margen izquierdo extra */
.grid-sort-container.no_margin-container .grid-entry.first {
    margin-left: 0 !important;
}

/* Cada 4to item (último de cada fila) sin margen derecho extra */
.grid-sort-container.no_margin-container .grid-entry:nth-child(4n) {
    margin-right: 0 !important;
}

/* Ajustar el contenedor de isotope */
.grid-sort-container.no_margin-container {
    margin: 0 -10px !important;
}

/* ===================================================
   3. PORTFOLIO GRID - HOVER EFFECTS
   =================================================== */
/* Asegurar que el contenedor tenga position relative */
.grid-entry {
    position: relative;
    overflow: hidden;
}

/* Ocultar contenido por defecto */
.grid-entry .grid-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color:rgba(0,0,0,0.6) !important;
    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0.1) 100%);
    padding: 20px;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 10;
}

/* Mostrar al hacer hover */
.grid-entry:hover .grid-content {
    opacity: 1;
}

/* Estilos del título */
.grid-entry .grid-entry-title a {
    background-color: #000 !important;
    background-size: 0;
    padding: 5px 0;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 1.2em;
    margin-bottom: 5px;
    display: block;
}

/* Estilos del excerpt */
.grid-entry .grid-entry-excerpt {
    color: #fff !important;
    font-size: 0.9em;
    opacity: 1;
}

/* Ocultar la flecha */
.grid-entry .avia-arrow {
    display: none;
}

/* Zoom suave en la imagen al hover */
.grid-entry .grid-image img {
    transition: transform 0.4s ease;
}

.grid-entry:hover .grid-image img {
    transform: scale(1.05);
    transition: transform 0.4s ease;
}

/* ===================================================
   4. PORTFOLIO GRID - QUITAR OVERLAY ENFOLD
   =================================================== */
#top .grid-sort-container .grid-entry .image-overlay {
    display: none !important;
    opacity: 0 !important;
}

#top .grid-sort-container .grid-entry:hover .image-overlay .image-overlay-inside {
    animation: none !important;
    -webkit-animation: none !important;
}