/* ───────────────────────────────────────────────────────────────
   LEARNING OUTCOMES – Document Control Module
   Parent class: .document-control-learning-outcomes
   ─────────────────────────────────────────────────────────────── */

/* Force the row to use flexbox and disable WPBakery’s float hacks */
.document-control-learning-outcomes.vc_row-fluid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 18px 13px !important;          /* row-gap column-gap */
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: center !important;
}

/* Reset column floats and widths – let flex handle sizing */
.document-control-learning-outcomes .vc_col-sm-4 {
    float: none !important;
    width: auto !important;
    flex: 0 0 calc(33.333% - 19px) !important;  /* account for gap */
    max-width: calc(33.333% - 19px) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;              /* remove WPBakery’s default padding */
}

/* Card styling – each column becomes a card */
.document-control-learning-outcomes .wpb_column {
    background: #ffffff;
    border-radius: 20px;
    padding: 28px 24px 32px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.05);
    border: 1px solid #eef2f6;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    height: 100%;                       /* equal height cards */
    display: flex;
    flex-direction: column;
    min-height: 800px;
    margin-bottom : 24px;
}

.document-control-learning-outcomes .wpb_column:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.document-control-learning-outcomes .wpb_text_column:first-child p:first-child {
    display: block !important;
    display: inline-block;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 16px;
    border-radius: 100px;
    margin: 13px auto;
    /* align-self: flex-start; */
    width: 100px;
}

/* ── Module Title ── */
.document-control-learning-outcomes .wpb_text_column:first-child p:last-child {
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 16px 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

/* Optional highlight inside title (if you use  or ) */
.document-control-learning-outcomes .wpb_text_column:first-child p:last-child strong,
.document-control-learning-outcomes .wpb_text_column:first-child p:last-child em {
    color: #2563eb;
    font-style: normal;
    font-weight: 700;
}

/* ── Icon Image ── */
.document-control-learning-outcomes .wpb_single_image {
    margin: 0 0 18px 0;
}

.document-control-learning-outcomes .wpb_single_image .vc_single_image-wrapper {
    display: inline-block;
}

.document-control-learning-outcomes .wpb_single_image img {
    max-width: 84px !important;        /* force small icon size */
    height: auto;
    width: auto;
    display: block;
}

/* ── Learning Outcomes List ── */
.document-control-learning-outcomes .wpb_text_column:last-child {
    margin-top: 0;
}

.document-control-learning-outcomes .wpb_text_column:last-child ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.document-control-learning-outcomes .wpb_text_column:last-child ul li {
    position: relative;
    padding-left: 24px !important;
    margin-bottom: 10px;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #1e293b;
    list-style: none !important;
}

.document-control-learning-outcomes .wpb_text_column:last-child ul li:last-child {
    margin-bottom: 0;
}

/* Custom bullet – arrow */
.document-control-learning-outcomes .wpb_text_column:last-child ul li::before {
    content: "▹";
    position: absolute;
    left: 0;
    top: 0;
    color: #2563eb;
    font-weight: 700;
    font-size: 1.05rem;
}


.document-control-learning-outcomes .wpb_text_column:last-child ul li:last-child::before {
    color: #2563eb;
}

.document-control-materials-included .vc_row{
    padding: 0px 41px;
}

.document-control-materials-included.wpb_column.vc_column_container.vc_col-sm-12
{
    padding: 30px 96px;
    text-align: center;
    font-size: 38px !important;
    font-weight: bold;
    background: #153877;
    color: #fff !important;
}

document-control-materials-included h3 {
    color: #fff;
    font-size: 30px;
}

/* ── Responsive ── */

/* Tablet */
@media (max-width: 992px) {
    .document-control-learning-outcomes.vc_row-fluid {
        gap: 20px !important;
    }
    .document-control-learning-outcomes .vc_col-sm-4 {
        flex: 0 0 calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .document-control-learning-outcomes {
        padding: 20px 12px 12px;
    }
    .document-control-learning-outcomes.vc_row-fluid {
        gap: 18px !important;
    }
    .document-control-learning-outcomes .vc_col-sm-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .document-control-learning-outcomes .wpb_column {
        padding: 22px 18px 26px;
    }
    .document-control-learning-outcomes .wpb_text_column:first-child p:last-child {
        font-size: 1.15rem;
    }
    .document-control-learning-outcomes .wpb_text_column:last-child ul li {
        font-size: 0.88rem;
        padding-left: 22px !important;
    }
    .document-control-learning-outcomes .wpb_single_image img {
        max-width: 40px !important;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .document-control-learning-outcomes .wpb_column {
        padding: 18px 14px 22px;
    }
    .document-control-learning-outcomes .wpb_text_column:first-child p:last-child {
        font-size: 1.05rem;
    }
    .document-control-learning-outcomes .wpb_text_column:last-child ul li {
        font-size: 0.84rem;
        padding-left: 20px !important;
        margin-bottom: 8px;
    }
}