/* ============================================================
   BEINC — Service Detail Page Projects Grid (Section CSS)
   ============================================================
   Black2 section that follows the features divider. Two-column
   grid of project cards on desktop, two cols on tablet, one col
   on mobile. Reuses the existing .project-card component for the
   card markup and interactions.

   Depends on: global.css, components/project-card.css
   ============================================================ */


.sdp-projects {
    position: relative;
    background: var(--color-black2);
    color: var(--color-white);
    /* Above .sdp-connector (z-index 1) so the connector section sits
       BEHIND the grid. Combined with the connector's negative margin-top
       this creates the "reveal behind" parallax effect — as user scrolls
       past the grid, the grid leaves the viewport upward and the connector
       below is revealed. */
    z-index: 2;
    padding: var(--space-10) 0;
    /* Always at least one viewport tall so the parallax reveal has scroll
       room even when the grid renders only 1–2 cards. With 5+ cards (2+ rows)
       the natural grid height takes over and this min-height is a no-op. */
    min-height: 100vh;
}


/* ── 2-col grid (desktop & tablet) ── */
.sdp-projects__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-7);
    padding: 0 var(--pad-x);
}


/* ============================================================
   MOBILE (≤767px) — single column.
   ============================================================ */
@media (max-width: 767px) {
    .sdp-projects {
        padding: var(--space-9) 0;
    }
    .sdp-projects__grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
}

/* ============================================================
   EMPTY STATE — shown by project-grid-renderer when zero
   projects match the filter.
   ============================================================ */
.sdp-projects__empty {
    grid-column: 1 / -1;
    background: var(--color-black2);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: var(--space-9) var(--space-6);
    text-align: center;
}

.sdp-projects__empty-text {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.01em;
}