/* ============================================================
   JB Renovations & Landscaping — Projects Page
   Reuses .jb-work-card / .jb-filter-tabs / grid patterns from
   home.css, and the filter logic already in home.js
   ============================================================ */

.jb-projects-intro {
    background: var(--paper);
    padding: 90px 0 40px;
}

.jb-projects-grid-section {
    background: var(--paper);
    padding: 0 0 110px;
}

.jb-projects-filter-bar {
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
}

.jb-projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

/* Slightly taller cards than the homepage teaser grid */
.jb-projects-grid .jb-work-card { aspect-ratio: 4/3.4; }

.jb-projects-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--ink-muted);
    font-size: 1rem;
    display: none;
}
.jb-projects-empty.visible { display: block; }

@media (max-width: 1080px) {
    .jb-projects-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    .jb-projects-grid { grid-template-columns: 1fr; }
    .jb-projects-intro { padding: 60px 0 30px; }
    .jb-projects-grid-section { padding: 0 0 70px; }
    .jb-projects-filter-bar { justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; }
}