/* ==========================================================================
   BLOCK: PORTFOLIO — Latest Intelligence masonry (index.html)
   Overlay captions are grid-stacked ("stack" area) with a gradient
   scrim for contrast — no absolute positioning.
   ========================================================================== */

@scope (.block-portfolio) {
    :scope {
        padding-block: var(--space-xl);
        container-type: inline-size;
        container-name: portfolio;
    }

    .portfolio-header {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        gap: 16px;
        margin-block-end: var(--space-md);
        border-block-end: 1px solid var(--border-light);
        padding-block-end: var(--space-xs);
    }
    @container portfolio (width >= 1024px) {
        .portfolio-header { flex-direction: row; align-items: flex-end; }
    }
    .portfolio-header h2 {
        font-weight: 300;
        font-size: var(--fs-h2);
        letter-spacing: -0.03em;
        margin: 0;
        padding-block-end: 1rem;
    }

    .masonry-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }
    @container portfolio (width >= 1024px) {
        .masonry-grid { grid-template-columns: repeat(12, 1fr); grid-auto-rows: 400px; }
        .p-wide { grid-column: span 8; }
        .p-tall { grid-column: span 4; grid-row: span 2; }
        .p-std  { grid-column: span 4; }
    }

    .project-card {
        display: grid;
        grid-template-areas: "stack";
        overflow: hidden;
        min-height: 400px;
        background: #000;
        cursor: pointer;
    }
    .project-card > * { grid-area: stack; }

    .project-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(25%);
        opacity: 0.7;
        transition: transform 0.8s var(--ease-lux), filter 0.5s, opacity 0.5s;
    }
    .project-card:hover img {
        transform: scale(1.05);
        filter: grayscale(0%);
        opacity: 1;
    }

    /* Gradient scrim keeps caption contrast on any photograph */
    .project-overlay {
        z-index: 1;
        align-self: end;
        color: #fff;
        padding: 30px;
        background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
        pointer-events: none;
    }
    .proj-cat {
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        display: block;
        margin-block-end: 10px;
        color: var(--accent-lime);
        font-weight: 700;
    }
    .proj-title { font-weight: 900; font-size: 2rem; line-height: 1; }
}