/* v96 - balanced Documents Needed card layout */

.documents-section .document-cards{
    display:grid !important;
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    gap:20px !important;
    align-items:stretch !important;
}

/* Employment always occupies the complete first row */
.documents-section .document-cards > .doc-card:first-child{
    grid-column:1 / -1 !important;
}

/*
Pages WITHOUT Down Payment:
Property + Rental + Identification + Others
become a balanced 2 x 2 grid.
*/
.documents-section .document-cards:not(:has([data-doc-extra="down-payment"]))
> .doc-card:not(:first-child){
    grid-column:span 3 !important;
}

/*
Pages WITH Down Payment:
Property + Rental + Identification = 3 columns.
Down Payment + Others = two equal cards below.
*/
.documents-section .document-cards:has([data-doc-extra="down-payment"])
> .doc-card:not(:first-child):not([data-doc-extra]){
    grid-column:span 2 !important;
}

.documents-section .document-cards
> [data-doc-extra="down-payment"],
.documents-section .document-cards
> [data-doc-extra="others"]{
    grid-column:span 3 !important;
}

/* Make the cards visually consistent */
.documents-section .doc-card{
    width:auto !important;
    height:100% !important;
    box-sizing:border-box !important;
}

/* Tablet */
@media (max-width: 980px){
    .documents-section .document-cards{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

    .documents-section .document-cards > .doc-card,
    .documents-section .document-cards:has([data-doc-extra="down-payment"])
    > .doc-card:not(:first-child):not([data-doc-extra]),
    .documents-section .document-cards
    > [data-doc-extra="down-payment"],
    .documents-section .document-cards
    > [data-doc-extra="others"]{
        grid-column:span 1 !important;
    }

    .documents-section .document-cards > .doc-card:first-child{
        grid-column:1 / -1 !important;
    }
}

/* Mobile */
@media (max-width: 680px){
    .documents-section .document-cards{
        grid-template-columns:1fr !important;
    }

    .documents-section .document-cards > .doc-card,
    .documents-section .document-cards > .doc-card:first-child{
        grid-column:1 !important;
    }
}