/* File: wp-content/plugins/obra-grid-builder/assets/frontend.css */

/* Grid */
.obra-grid-wrapper {
    --ogb-item-h: 420px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

/* Items: altura fija + imagen de fondo */
.obra-grid-item {
    position: relative;
    height: var(--ogb-item-h);
    border-radius: 8px;
    overflow: hidden;
    background: #e9ecef center / cover no-repeat;
    background-image: var(--ogb-bg, none);
}

/* Spans */
.obra-grid-item.span-1 { grid-column: span 1; }
.obra-grid-item.span-2 { grid-column: span 2; }
.obra-grid-item.span-3 { grid-column: span 3; }
.obra-grid-item.span-4 { grid-column: span 4; }

/* Capa de video detrás del overlay (para type=video) */
.obra-grid-video {
    position: absolute;
    inset: 0;
    z-index: 0;           /* por debajo del hover/anchor */
    overflow: hidden;
}
.obra-grid-video iframe,
.obra-grid-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;    /* recorte para cubrir como la imagen de fondo */
    pointer-events: none; /* permite hover/clicks en la capa superior */
}

/* Anchor por encima del video/imagen */
.obra-grid-hit {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* Hover overlay */
.obra-grid-hover {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    align-items: flex-end;
    opacity: 0;
    transition: opacity .2s ease;
    z-index: 3;
}
.obra-grid-item:hover .obra-grid-hover { opacity: 1; }

.obra-grid-hover-scrim {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.6); /* blanco a 0.4 como pediste */
}

.obra-grid-hover-title {
    position: relative;
    width: 100%;
    padding: 16px 18px;
    font-family: "Montserrat", Sans-serif;
    font-size: 2rem;
    font-weight: 200;
    line-height: 1.2;
    color: var(--e-global-color-astglobalcolor2);
    text-shadow: 0 1px 0 rgba(255,255,255,.2);
}

/* Fallback sin imagen */
.obra-grid-item.no-image {
    background-image: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}

/* Responsive */
@media (max-width: 1024px) {
    .obra-grid-wrapper { grid-template-columns: repeat(3, 1fr); }
    .obra-grid-wrapper { --ogb-item-h: 340px; }
}
@media (max-width: 768px) {
    .obra-grid-wrapper { grid-template-columns: repeat(2, 1fr); }
    .obra-grid-wrapper { --ogb-item-h: 260px; }
}
@media (max-width: 480px) {
    .obra-grid-wrapper { grid-template-columns: 1fr; }
    .obra-grid-wrapper { --ogb-item-h: 220px; }
    .obra-grid-item[class*="span-"] { grid-column: span 1 !important; }
}