.projects-grid {
    display: grid;
    /* Vytvoří sloupce o min. šířce 400px, které se automaticky přizpůsobí */
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    padding: 4rem 0;
}

.project-card {
    /* Vzhled a hover efekt přebírá z globální třídy .card-style */
    display: flex;
    flex-direction: column; /* Uspořádá obsah pod sebe */
    
    /* Přidání animace */
    opacity: 0;
    animation: fadeInDown 0.8s ease-out forwards;
}

/* Postupné načítání karet - Waterfall efekt */
/* Můžete si přidat více řádků pro více projektů */
.project-card:nth-child(1) { animation-delay: 0.2s; }
.project-card:nth-child(2) { animation-delay: 0.3s; }
.project-card:nth-child(3) { animation-delay: 0.4s; }
.project-card:nth-child(4) { animation-delay: 0.5s; }
.project-card:nth-child(5) { animation-delay: 0.6s; }
.project-card:nth-child(6) { animation-delay: 0.7s; }

.project-card h2 {
    color: var(--accent);
    font-size: 1.8em;
    margin-bottom: 1rem;
}

.project-card p {
    color: var(--fg-muted);
    flex-grow: 1; /* Tento řádek zajistí, že popis zabere všechen volný prostor a metadata budou vždy na spodu karty */
    margin-bottom: 1.5rem;
}

.project-meta {
    margin-top: auto; /* Odsune metadata na spodek karty */
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.status-line, .link-line {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    color: var(--fg);
}

.status-line img {
    width: 18px;
    height: 18px;
}

.status-line span {
    font-weight: 600;
}
/* Barevné odlišení statusů */
.status-line.active span { color: #4caf50; } /* Zelená */
.status-line.offline span { color: #f44336; } /* Červená */
.status-line.testing span, .status-line.wip span { color: #ff9800; } /* Oranžová */

@media (max-width: 480px) {
    .projects-grid {
        grid-template-columns: 1fr; /* Na malých mobilech jen jeden sloupec */
    }
}