/* =========================================================
   RD3 COMPONENTS — LAYOUT
   Reusable layout and content positioning components
   ========================================================= */


/* =========================================================
   GRID
   ========================================================= */

.grid {

    display: grid;

    gap: 20px;

}


.grid-2 {

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

}


.grid-3 {

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

}


.grid-4 {

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

}


.grid-auto {

    grid-template-columns:
        repeat(auto-fit, minmax(200px, 1fr));

}


/* =========================================================
   DASHBOARD GRID
   ========================================================= */

.dashboard-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(200px, 1fr));

    gap: 20px;

    margin-top: 20px;

}


/* =========================================================
   FILE / RESOURCE LIST
   ========================================================= */

.file-list {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;

    margin: 18px 0;

}


.file-card {

    background-color: #f8fafc;

    border: 1px solid #e2e8f0;

    border-left: 4px solid #993333;

    border-radius: 0 6px 6px 0;

    padding: 14px;

}


.file-card strong {

    display: block;

    color: #993333;

    margin-bottom: 5px;

}


.file-card span {

    display: block;

    font-size: 12px;

    color: #64748b;

}


/* =========================================================
   CONTENT
   ========================================================= */

.content {

    background-color: #ffffff;

    border: 1px solid #cbd5e1;

    border-radius: 8px;

    padding: 35px;

    box-shadow: none;

}


/* =========================================================
   TABLE OF CONTENTS
   ========================================================= */

.toc {

    border-left: 4px solid #993333;

    border-radius: 0 6px 6px 0;

    padding: 20px 24px;

    margin-bottom: 35px;

    list-style: none;

   margin-left: 1%;
}


.toc-title {

    font-size: 13px;

    font-weight: 700;

    color: #993333;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin-bottom: 12px;

 

}


.toc ul {

    margin: 0;

    padding-left: 20px;

}


.toc li {

    margin-bottom: 6px;

    font-size: 14px;

}











/* =========================================================
   SECTIONS
   ========================================================= */

.section {

    margin-top: 40px;

    padding-top: 10px;

}


.section:first-child {

    margin-top: 0;

}


.section-title {

    font-size: 13px;

    font-weight: 700;

    color: #993333;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    padding-bottom: 6px;

    margin-bottom: 16px;

    border-bottom: 2px solid #CADFEC;

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {

    .container {

        padding-left: 12px;

        padding-right: 12px;

    }


    .content {

        padding: 22px;

    }


    .grid-2,
    .grid-3,
    .grid-4 {

        grid-template-columns: 1fr;

    }


    .file-list {

        grid-template-columns: 1fr;

    }

}


@media (max-width: 450px) {

    .content {

        padding: 18px;

    }


    .table-summary td:first-child {

        display: block;

        width: 100%;

        padding-bottom: 2px;

        border-bottom: none;

    }


    .table-summary td:last-child {

        display: block;

        padding-top: 0;

        padding-bottom: 12px;

    }

}