/* =========================================================
   GOVERNANCE DETAIL PAGES
   Primary Blue: #062d5c
========================================================= */

.governance-detail {
    width: 100%;
    padding: 45px 20px 80px;
    background: #f6f9fc;
    box-sizing: border-box;
}

.governance-detail-container {
    width: min(1320px, 100%);
    margin: 0 auto;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.governance-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

    margin-bottom: 24px;

    font-size: 14px;
}

.governance-breadcrumb a {
    color: #146fe8;
    text-decoration: none;
    font-weight: 600;
}

.governance-breadcrumb span {
    color: #718096;
}


/* =========================================================
   PAGE HEADER
========================================================= */

.governance-detail-header {
    position: relative;

    padding: 45px 40px;

    margin-bottom: 25px;

    background: #ffffff;

    border-radius: 20px;

    border: 1px solid #e5edf6;

    box-shadow:
        0 10px 35px rgba(6, 45, 92, 0.07);

    text-align: center;

    overflow: hidden;
}

.governance-detail-header::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: #062d5c;
}


.governance-detail-label {
    display: block;

    margin-bottom: 10px;

    color: #146fe8;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .5px;

    text-transform: uppercase;
}


.governance-detail-header h3 {
    margin: 0;

    color: #062d5c;

    font-size: 34px;

    line-height: 1.25;

    font-weight: 700;
}


.governance-detail-line {
    width: 65px;
    height: 4px;

    margin: 16px auto;

    background: #146fe8;

    border-radius: 20px;
}


.governance-detail-header p {
    margin: 0;

    color: #42566f;

    font-size: 18px;

    font-weight: 600;
}


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

.governance-detail-content {
    padding: 40px;

    background: #ffffff;

    border: 1px solid #e5edf6;

    border-radius: 20px;

    box-shadow:
        0 10px 35px rgba(6, 45, 92, 0.06);
}


.governance-detail-content h4 {
    margin: 0 0 18px;

    color: #062d5c;

    font-size: 26px;

    line-height: 1.3;

    font-weight: 700;
}


.governance-detail-content h5 {
    margin: 30px 0 12px;

    color: #062d5c;

    font-size: 19px;

    line-height: 1.4;

    font-weight: 700;
}


.governance-detail-content p {
    margin: 0 0 18px;

    color: #42566f;

    font-size: 16px;

    line-height: 1.7;
}


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

.content-block {
    padding-top: 5px;
}


.content-block ul,
.content-block ol {
    margin: 10px 0 20px;

    padding-left: 26px;

    color: #42566f;

    font-size: 16px;

    line-height: 1.7;
}


.content-block li {
    margin-bottom: 8px;

    padding-left: 3px;
}


.content-block ol {
    margin-top: 8px;
}


.content-block strong {
    color: #304a67;

    font-weight: 700;
}


.integrity-note {
    margin-top: 25px !important;

    padding: 18px 20px;

    background: #eef6ff;

    border-left: 4px solid #146fe8;

    border-radius: 0 10px 10px 0;

    color: #304a67 !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 768px) {

    .governance-detail {
        padding: 30px 15px 55px;
    }

    .governance-detail-header {
        padding: 35px 22px;
        border-radius: 16px;
    }

    .governance-detail-header h1 {
        font-size: 28px;
    }

    .governance-detail-header p {
        font-size: 16px;
    }

    .governance-detail-content {
        padding: 28px 22px;
        border-radius: 16px;
    }

    .governance-detail-content h2 {
        font-size: 23px;
    }

    .governance-detail-content h3 {
        font-size: 18px;
    }

    .governance-detail-content p,
    .content-block ul,
    .content-block ol {
        font-size: 16px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

    .governance-detail {
        padding: 25px 12px 45px;
    }

    .governance-breadcrumb {
        font-size: 13px;
        margin-bottom: 18px;
    }

    .governance-detail-header {
        padding: 30px 18px;
    }

    .governance-detail-label {
        font-size: 11px;
    }

    .governance-detail-header h1 {
        font-size: 25px;
    }

    .governance-detail-header p {
        font-size: 15px;
        line-height: 1.5;
    }

    .governance-detail-content {
        padding: 25px 18px;
    }

    .governance-detail-content h2 {
        font-size: 22px;
    }

    .governance-detail-content h3 {
        font-size: 18px;
        margin-top: 25px;
    }

    .governance-detail-content p,
    .content-block ul,
    .content-block ol {
        font-size: 16px;
        line-height: 1.65;
    }

    .content-block ul,
    .content-block ol {
        padding-left: 22px;
    }

}



/* ==========================================================================
   VERIFICATION: KEY RESPONSIBILITIES AS FOUR CARDS
   -------------------------------------------------------------------------

   The four steps were a nested numbered list, so they read as one long
   column of sentences with arrows in them. They are four things at four
   different levels of the organisation, laid out here as four cards across,
   each with the mark that belongs to it, the step's name, and the body that
   used to follow the arrow.

   --------------------------------------------------------------------------
   NO COLOUR IS ADDED, PER THE BRIEF

   The cards are white, and that is the only background they have. There is no
   tinted card, no quarter-circle in the corner, no coloured strip along the
   bottom, and no per-card pastel scheme - the four cards are identical, which
   is the point of not colouring them.

   Every value below is a token this file already uses, so nothing new enters
   the page:

       #062d5c   the heading colour already used on .governance-detail-content
       #146fe8   the accent already used on the label and the rule
       #42566f   the body colour already used on .governance-detail-content p
       #e5edf6   the border already used on both cards in this file
       #eef6ff   the pale fill already used on .integrity-note, for the icon
       #ffffff   the card white already used twice in this file

   The reference this follows had four differently tinted cards. That is the
   one thing about it that is deliberately not copied.

   --------------------------------------------------------------------------
   THE MARKS

   bi-mortarboard-fill    a learner
   bi-bank                 a centre being inspected
   bi-file-earmark-check   a review being carried out
   bi-shield-check         oversight and enforcement

   All four are Bootstrap Icons, the same set the rest of the site uses, and
   all four are confirmed present in the 1.11.3 font this page loads.

   --------------------------------------------------------------------------
   THE WORDS ARE THE PAGE'S OWN

   The arrows are gone and the four pairs are the four cards. Nothing is
   reworded: 'ALC / Skill or Training Centre', 'RCO', 'NCO' and 'ODLC' are
   what the list already said, and the four titles are its own bold text.

   --------------------------------------------------------------------------
   ONLY THIS PAGE IS AFFECTED

   Every rule here is named vrcard*, and those names appear in no other file
   in the project. The five pages that share this stylesheet keep the nested
   list exactly as it is, and .content-block ul, .content-block ol and the
   other existing rules are not edited or removed.
========================================================================== */

.vrcards-h {
    margin: 30px 0 6px;

    color: #062d5c;

    font-size: 26px;

    line-height: 1.3;

    font-weight: 700;
}

.vrcards-lead {
    margin: 0;

    color: #42566f;

    font-size: 16px;

    line-height: 1.7;
}

.vrcards {
    display: grid;

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

    gap: 18px;

    margin: 22px 0 6px;
}

.vrcard {
    position: relative;

    padding: 26px 22px 24px;

    background: #ffffff;

    border: 1px solid #e5edf6;

    border-radius: 16px;

    box-shadow:
        0 10px 35px rgba(6, 45, 92, 0.06);
}

/* the small ring that sits in the gap between two cards */

.vrcards .vrcard:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 50%;

    right: -14px;

    transform: translateY(-50%);

    width: 10px;

    height: 10px;

    border: 2px solid #e5edf6;

    border-radius: 50%;

    background: #ffffff;

    box-sizing: border-box;
}

.vrcard-ico {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 46px;

    height: 46px;

    margin-bottom: 16px;

    border-radius: 50%;

    background: #eef6ff;

    color: #146fe8;

    font-size: 20px;
}

.vrcard h4 {
    margin: 0 0 8px;

    color: #062d5c;

    font-size: 16px;

    line-height: 1.35;

    font-weight: 700;
}

.vrcard p {
    margin: 0;

    color: #42566f;

    font-size: 14px;

    line-height: 1.55;
}

@media (max-width: 1100px) {
    .vrcards {
        grid-template-columns: repeat(2, 1fr);
    }

    .vrcards .vrcard::after {
        display: none;
    }
}

@media (max-width: 640px) {
    .vrcards {
        grid-template-columns: 1fr;
    }
}