.po-portfolio {
    /* volg de breedte van de Avada container (100% binnen de rij) */
    width: 100%;
    margin: 0;
    padding: 24px 0 8px;
}

.po-portfolio-grid {
    /* 3 kolommen: 1 links (breed), 1 midden (smaller), rechts gestapeld */
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1.5fr) minmax(0, 1.5fr);
    grid-template-rows: repeat(2, minmax(220px, auto)); /* boven + onder */
    gap: 20px;
    width: 100%;
    max-width: 100%;
    padding: 0;
    align-items: stretch;
}

.po-portfolio-card.po-overige-dienst-card {
    /* kaarten vullen de grid-cel i.p.v. vaste aspect-ratio */
    height: 100% !important;
    aspect-ratio: unset !important;
    margin: 0 !important;
    border-radius: 15px !important; /* alle hoeken afgerond, ook rechtsonder */
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.1);
    min-height: 0;
}

/* 1: links, over beide rijen */
.po-portfolio-grid .po-portfolio-card:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}

/* 2: midden, ook over beide rijen */
.po-portfolio-grid .po-portfolio-card:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
}

/* 3: rechtsboven */
.po-portfolio-grid .po-portfolio-card:nth-child(3) {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}

/* 4: rechtsonder, onder 3 */
.po-portfolio-grid .po-portfolio-card:nth-child(4) {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}

/* Titelgrootte: eerste project behoudt standaardgrootte uit diensten-CSS,
   projecten 2, 3 en 4 krijgen kleinere titel (20px) */
.po-portfolio-grid .po-portfolio-card:nth-child(2) .po-portfolio-title,
.po-portfolio-grid .po-portfolio-card:nth-child(3) .po-portfolio-title,
.po-portfolio-grid .po-portfolio-card:nth-child(4) .po-portfolio-title {
    font-size: 20px !important;
}

/* Veiligheid: verberg eventuele overgebleven portfolio-button elementen */
.po-portfolio-button,
.po-portfolio-button-icon {
    display: none !important;
}

/* Tablet-breakpoint: 2 kolommen onder elkaar, automatische volgorde */
@media (max-width: 1200px) {
    .po-portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: auto;
        max-width: 100%;
        padding: 0 8px;
    }

    .po-portfolio-card.po-overige-dienst-card {
        height: auto !important;
    }

    .po-portfolio-grid .po-portfolio-card:nth-child(1),
    .po-portfolio-grid .po-portfolio-card:nth-child(2),
    .po-portfolio-grid .po-portfolio-card:nth-child(3),
    .po-portfolio-grid .po-portfolio-card:nth-child(4) {
        grid-column: auto;
        grid-row: auto;
    }
}

/* Mobiel: alles onder elkaar in 1 kolom */
@media (max-width: 900px) {
    .po-portfolio-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        max-width: 720px;
        padding: 0 16px;
    }

    .po-portfolio-card.po-overige-dienst-card {
        aspect-ratio: 392.67 / 276;
        height: auto;
    }

    .po-portfolio-grid .po-portfolio-card:nth-child(1),
    .po-portfolio-grid .po-portfolio-card:nth-child(2),
    .po-portfolio-grid .po-portfolio-card:nth-child(3),
    .po-portfolio-grid .po-portfolio-card:nth-child(4) {
        grid-column: auto;
        grid-row: auto;
    }
}