/*
 * Lakeart — Visual Showcase: moodboard/showreel vivo.
 * Cuadrícula CSS pura (sin librería de masonry): cada pieza declara su
 * tamaño (normal/ancho/grande/vertical) desde wp-admin y el grid decide
 * dónde encaja. Depende de los tokens de style.css (enqueue con
 * dependencia 'hello-lakeart-style', igual que portfolio.css). Sin
 * @layer a propósito — ver la nota al principio de style.css.
 */



    .lakeart-showcase-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: 220px;
        gap: var(--space-md);
    }

    .lakeart-showcase-item--normal {
        grid-column: span 1;
        grid-row: span 1;
    }

    .lakeart-showcase-item--ancho {
        grid-column: span 2;
        grid-row: span 1;
    }

    .lakeart-showcase-item--grande {
        grid-column: span 2;
        grid-row: span 2;
    }

    .lakeart-showcase-item--vertical {
        grid-column: span 1;
        grid-row: span 2;
    }

    .lakeart-showcase-media {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-radius: var(--radius-md);
        background: var(--color-cream-deep);
    }

    .lakeart-showcase-media img,
    .lakeart-showcase-media video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform var(--duration-slow) var(--ease-premium);
    }

    .lakeart-showcase-item:hover .lakeart-showcase-media img,
    .lakeart-showcase-item:hover .lakeart-showcase-media video {
        transform: scale(1.03);
    }

    .lakeart-showcase-caption {
        display: block;
        margin-top: 8px;
        color: var(--color-text-muted);
        font-size: 12px;
        letter-spacing: 0.04em;
    }

    @media (max-width: 900px) {
        .lakeart-showcase-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            grid-auto-rows: 200px;
        }

        .lakeart-showcase-item--grande {
            grid-column: span 2;
            grid-row: span 2;
        }
    }

    @media (max-width: 560px) {
        .lakeart-showcase-grid {
            grid-template-columns: 1fr;
            grid-auto-rows: 260px;
        }

        .lakeart-showcase-item--normal,
        .lakeart-showcase-item--ancho,
        .lakeart-showcase-item--grande,
        .lakeart-showcase-item--vertical {
            grid-column: span 1;
            grid-row: span 1;
        }

        .lakeart-showcase-item--grande,
        .lakeart-showcase-item--vertical {
            height: 340px;
        }
    }