/* =========================================================
   LeCorch Photo · Home · Index portfolio (2-col wide)
   ========================================================= */

@layer plugins {

    .fp-portfolio-index {
        background: var(--color-fondo);
    }

    /* Grid 2-col wide — todas las cards iguales, aspect 4:3 */
    .ad-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(16px, 1.5vw, 24px);
        padding: 0;
        margin: 0;
    }
    .ad-grid--two-col,
    .ad-grid--asymmetric-8 {
        grid-template-columns: repeat(2, 1fr);
    }

    @media (max-width: 1024px) {
        .ad-grid { gap: 12px; }
    }
    @media (max-width: 600px) {
        .ad-grid { grid-template-columns: 1fr; }
    }

    .ad-grid__item {
        position: relative;
        margin: 0;
        overflow: hidden;
        background: var(--color-fondo-arena);
        aspect-ratio: 4 / 3;
        grid-column: span 1;
        grid-row: span 1;
    }

    .ad-grid__link {
        position: absolute;
        inset: 0;
        display: block;
        text-decoration: none;
        color: inherit;
    }
    .ad-grid__media {
        position: absolute;
        inset: 0;
        overflow: hidden;
    }
    .ad-grid__media .ad-picture {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
    }
    .ad-grid__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 1100ms var(--ease), filter var(--d-med) var(--ease);
    }

    .ad-grid__overlay {
        position: absolute;
        inset: auto 0 0 0;
        z-index: 2;
        padding: clamp(20px, 2.5vw, 40px);
        color: #FFFFFF;
        background: linear-gradient(to top,
            rgba(15, 47, 68, 0.92) 0%,
            rgba(15, 47, 68, 0.55) 50%,
            transparent 100%);
    }

    @media (hover: hover) and (pointer: fine) {
        .ad-grid__link:hover .ad-grid__media img,
        .ad-grid__link:focus-visible .ad-grid__media img {
            transform: scale(1.04);
            filter: brightness(1.05);
        }
    }

    .ad-grid__caption {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
    }

    .ad-grid__title {
        margin: 0;
        font-family: var(--font);
        font-weight: var(--peso-medium);
        font-size: clamp(20px, 2vw, 30px);
        line-height: 1.1;
        letter-spacing: 0.01em;
        text-transform: uppercase;
    }

    .ad-grid__hint {
        font-family: var(--font);
        font-size: var(--fs-eyebrow);
        text-transform: uppercase;
        letter-spacing: 0.25em;
        color: var(--color-dorado);
        font-weight: var(--peso-medium);
        white-space: nowrap;
        transition: transform var(--d-med) var(--ease);
    }
    .ad-grid__link:hover .ad-grid__hint {
        transform: translateX(8px);
    }

    .ad-grid__desc {
        margin: 8px 0 0;
        font-family: var(--font);
        font-weight: var(--peso-light);
        font-size: clamp(13px, 1vw, 14px);
        line-height: 1.5;
        max-width: 36ch;
        opacity: 0.88;
    }

    /* Focus visible custom */
    .ad-grid__link:focus-visible {
        outline: 3px solid rgba(255, 255, 255, 0.9);
        outline-offset: -3px;
    }

    @media (prefers-reduced-motion: reduce) {
        .ad-grid__media img,
        .ad-grid__hint {
            transition: none;
        }
        .ad-grid__link:hover .ad-grid__media img,
        .ad-grid__link:hover .ad-grid__hint {
            transform: none;
        }
    }

}