/* ============================================================================
   BLOG / INSIGHTS AND UPDATES - STANDALONE DEMO PAGE
   ----------------------------------------------------------------------------
   Companion to blog.php. Nothing in the rest of the project is referenced or
   changed by this file, and this file changes nothing anywhere else.

   EVERY VALUE HERE WAS MEASURED, NOT GUESSED
   The equivalent block on index.php was measured live at a 1585px viewport and
   again at 375px, computed styles and box metrics both, and the two readings
   are the two tiers below. Where they differ the value steps between them, so
   this page matches what the site already renders rather than introducing a
   third design. The readings, for reference:

       property                     1585px        375px
       section background           #F1F5FE       #F1F5FE
       section padding              48px 0        48px 0
       container width              1380px        345px      (102.4 / 15.0 gutters)
       heading                      35px/43.75    35px/43.75  weight 800, #0B1F4D
       heading accent span          #6D4DFF       #6D4DFF
       description                  16px/28       13px/21     #666, max 620px
       rule                         42x4 #2868E8  same       dot 7px #6655FF
       cards block margin-top       40px          25px
       card                         444px wide    345px wide  radius 18px, #FFF
       card border                  #E4EAF8       #E4EAF8
       card shadow                  0 8px 20px rgba(16,42,90,.06)
       image                        220px         210px       object-fit cover
       tag background               #E7EEFE       #E7EEFE     #0D6EFD text
       tag padding                  7px 13px      6px 11px    radius 0 8px 8px 0
       tag overhang below image     37px          35px
       card body padding            16px 18px 0   15px 17px 0
       card heading                 20px/26       17px/22.1   #0B1F4D, weight 800
       card paragraph               15px/23.25    13.5px/20.9 #5B6B85
       card foot padding            18px          17px
       read more                    13px #0D6EFD  same        weight 800
       circle arrow                 38px          36px        border #4169E8
       cta background               #F8FAFF       #F8FAFF
       cta padding                  18px 25px     17px        radius 16px / 14px
       cta icon                     48px #E9F0FF 44px        #2864DC
       cta heading                  18px          16px        #101D42, weight 750
       cta paragraph                14px/22       13px/21     #667085
       cta button                   14px 12px 22  13px 11px 18 #1859DF
       dot grid                     100px @ .55   70px @ .35
       three card heights           429 429 429   404 404 404   equal at both

   THE WIDTH LADDER
   The same four steps the header and footer use, so this page's content sits on
   exactly the same left and right edges as they do:

       width 92%, max-width 1380px, centred, no inner padding
       94% at 1199px and below, 90% at 767px and below, 92% at 480px and below

   Measured against the live header at 1585px: both report 102px left and 103px
   right. At 375px both report 15px each side.

   WHY h3 AND h4 CARRY !important
   global-typography.css sets, at the top level and again at four breakpoints:

       h3 { font-size: 30px !important; line-height: 1.3 !important; }
       h4 { font-size: 25px !important; line-height: 1.35 !important; }

   all !important. The card heading measures 20px and the call-to-action heading
   18px on the live site, which means the page stylesheet out-specifies those
   bare element selectors. A bare h3 here would be 30px, so these two rules are
   written as .blg-body h3 and .blg-cta-txt h4 - more specific than h3 and h4 -
   and also marked !important, which is what specificity plus importance means
   in practice. Every value in this file that meets a global heading rule is
   written that way rather than relying on load order.

   The section heading is left alone deliberately: it measures 35px, which is
   exactly the site scale, so it needs no override.

   THE CARD GRID
   CSS grid, three across, then two, then one. index.php uses Bootstrap columns
   with a 24px gutter and -12px row margins, and the arithmetic checks out
   against the measurement: 1380 = 3 x 444 + 2 x 24. Here the gap is simply 24px
   and the columns are 1fr, which gives the same result without depending on
   Bootstrap's negative margins.

   EQUAL CARD HEIGHTS
   The grid stretches its rows by default and .blg-card is a flex column with
   .blg-body set to flex-grow 1, so the three cards are the same height at every
   width. Measured equal at both tiers on the live page - 429/429/429 at 1585px
   and 404/404/404 at 375px - and that is reproduced here rather than being a
   fixed height, so a longer title cannot push one card out of line.
   ============================================================================ */


/* =========================================================
   1. THE BAND AND THE TWO DOT GRIDS
   ========================================================= */

.blg-section {
    position: relative;
    overflow: hidden;
    background: #F1F5FE;
    padding: 48px 0;
    font-family: Arial, Helvetica, sans-serif;
}

.blg-dots {
    position: absolute;
    top: 45px;
    width: 100px;
    height: 100px;
    background-image: radial-gradient(circle, #C4D5FF 2px, transparent 2px);
    background-size: 11px 11px;
    opacity: .55;
    pointer-events: none;
}

.blg-dots-l { left: 20px; }
.blg-dots-r { right: 20px; }


/* =========================================================
   2. THE WIDTH LADDER - the header and footer's four steps
   ========================================================= */

.blg-wrap {
    width: 92%;
    max-width: 1380px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}

@media (max-width: 1199px) {
    .blg-wrap { width: 94%; }
}

@media (max-width: 767px) {
    .blg-wrap { width: 90%; }
}

@media (max-width: 480px) {
    .blg-wrap { width: 92%; }
}


/* =========================================================
   3. SECTION HEADER
   ========================================================= */

.blg-head {
    text-align: center;
}

.blg-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    padding: 0;
    border: 0;
    color: #0D6EFD;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 1px;
}

.blg-badge i {
    font-size: 12px;
    line-height: 1;
}

.blg-title {
    /* 35px / 43.75px comes from global-typography.css and is already correct,
       so no font-size is declared here on purpose */
    margin: 0 0 22px;
    color: #0B1F4D;
    font-weight: 800;
}

.blg-title span {
    color: #6D4DFF;
}

.blg-desc {
    max-width: 620px;
    margin: 0 auto;
    color: #666;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
}

/* the short rule and its dot, centred as a pair */
.blg-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 7px;
    margin-top: 15px;
}

.blg-rule::before {
    content: "";
    display: block;
    width: 42px;
    height: 4px;
    border-radius: 50px;
    background: #2868E8;
}

.blg-rule span {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6655FF;
}


/* =========================================================
   4. THE CARD GRID
   ========================================================= */

/* Flex with wrapping, not grid. The reason is card height, and it is worth
   setting out because grid looked like the obvious choice.

   The three cards must be the same height. In a three-across grid all three
   land in one row, so the row stretches them and they match. Change the
   columns to two and the third card lands on a row of its own, which is
   sized by its own content, and it comes out shorter than the two above it.
   The same happens at one column, where every card is its own row. Measured
   on this page before the fix:

       two columns, 885px and 753px    423, 423, 371   the third card 52px short
       one column, 375px               378, 400, 378
       one column, 465px               352, 378, 378
       one column, 345px               400, 400, 378

   A wrapping flex row does not help on its own either: align-items stretches
   within a line, and a wrapped flex container still has one line per row.

   So two things are used together. The container wraps, which puts all three
   cards in one flex context, and each card is given a min-height taken from
   the tallest state actually measured at that tier. min-height, not height, so
   a longer title can still push a card taller rather than being clipped.

   The third card is deliberately NOT widened at two columns. The homepage
   leaves it at half width there, because Bootstrap's col-md-6 does, and
   widening it was tried and left a 371px card under two 423px ones. */
.blg-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 40px;
}

.blg-card {
    flex: 0 0 calc((100% - 48px) / 3);
    min-height: 397px;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid #E4EAF8;
    border-radius: 18px;
    box-shadow: 0 8px 20px rgba(16, 42, 90, .06);
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease;
}

.blg-media {
    position: relative;
    height: 220px;
    overflow: hidden;
    flex: 0 0 auto;
}

.blg-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .5s ease;
}

/* the category pill straddles the foot of the image: measured 37px of it
   hangs below the picture on a desktop and 35px on a phone */
.blg-tag {
    position: absolute;
    left: 0;
    bottom: -37px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 0 8px 8px 0;
    background: #E7EEFE;
    color: #0D6EFD;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.blg-tag i {
    font-size: 12px;
    line-height: 1;
}

.blg-body {
    /* the pill hangs into this space, so the top padding matches it */
    padding: 16px 18px 0;
    flex: 1 1 auto;
}

.blg-body h3 {
    /* see the note on !important in the header of this file */
    margin: 0 0 8px;
    color: #0B1F4D;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 26px !important;
}

.blg-body p {
    margin: 0;
    color: #5B6B85;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 23.25px;
}

.blg-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px;
}

.blg-more {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #0D6EFD;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.blg-more i {
    font-size: 12px;
    transition: transform .2s ease;
}

.blg-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 1px solid #4169E8;
    border-radius: 50%;
    background: #FFFFFF;
    color: #245BD9;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.blg-arrow i {
    font-size: 14px;
    line-height: 1;
}

/* hover is on the pointer devices only, so a tap on a phone does not
   leave the card in a hovered state */
@media (hover: hover) and (pointer: fine) {
    .blg-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 30px rgba(16, 42, 90, .11);
    }
    .blg-card:hover .blg-media img { transform: scale(1.05); }
    .blg-card:hover .blg-arrow {
        background: #245BD9;
        color: #FFFFFF;
    }
    .blg-more:hover { text-decoration: underline; }
}

/* keyboard users still need to see where they are */
.blg-more:focus-visible,
.blg-arrow:focus-visible,
.blg-cta-btn:focus-visible {
    outline: 2px solid #1769e0;
    outline-offset: 3px;
    border-radius: 4px;
}


/* =========================================================
   5. BOTTOM CALL TO ACTION
   ========================================================= */

.blg-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-top: 30px;
    padding: 18px 25px;
    background: #F8FAFF;
    border: 1px solid #E4EAF8;
    border-radius: 16px;
}

.blg-cta-l {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.blg-cta-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #E9F0FF;
    color: #2864DC;
    font-size: 21px;
}

.blg-cta-txt { min-width: 0; }

.blg-cta-txt h4 {
    /* see the note on !important in the header of this file */
    margin: 0 0 5px;
    color: #101D42;
    font-weight: 750;
    font-size: 18px !important;
    line-height: 1.35 !important;
}

.blg-cta-txt p {
    margin: 0;
    color: #667085;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 22px;
}

.blg-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex: 0 0 auto;
    padding: 12px 22px;
    border-radius: 8px;
    background: #1859DF;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 7px 16px rgba(24, 89, 223, .18);
    transition: background-color .2s ease;
}

.blg-cta-btn i {
    font-size: 13px;
    line-height: 1;
}

@media (hover: hover) and (pointer: fine) {
    .blg-cta-btn:hover { background: #1348B4; }
}


/* =========================================================
   6. TWO COLUMNS - 768px to 991px
   ========================================================= */

@media (max-width: 991px) {

    .blg-cards { gap: 24px; }

    .blg-card {
        flex: 0 0 calc((100% - 24px) / 2);
        min-height: 423px;
    }
}


/* =========================================================
   7. PHONES - 767px and below
   Every value in this block is the 375px reading.
   ========================================================= */

@media (max-width: 767px) {

    .blg-section { padding: 38px 0; }

    .blg-dots {
        width: 70px;
        height: 70px;
        opacity: .35;
    }

    .blg-dots-l { left: 5px; }
    .blg-dots-r { right: 5px; }

    .blg-cards {
        gap: 18px;
        margin-top: 25px;
    }

    .blg-card {
        flex: 0 0 100%;
        min-height: 400px;
    }

    .blg-desc {
        font-size: 13px;
        line-height: 21px;
    }

    .blg-rule { margin-top: 13px; }

    .blg-media { height: 210px; }
    .blg-tag {
        bottom: -35px;
        padding: 6px 11px;
    }

    .blg-body { padding: 15px 17px 0; }

    .blg-body h3 {
        font-size: 17px !important;
        line-height: 22.1px !important;
    }

    .blg-body p {
        font-size: 13.5px;
        line-height: 20.925px;
    }

    .blg-foot { padding: 17px; }

    .blg-arrow {
        width: 36px;
        height: 36px;
    }

    /* the bar stacks: text and icon above, button below, full width */
    .blg-cta {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        margin-top: 25px;
        padding: 17px;
        border-radius: 14px;
    }

    .blg-cta-ico {
        width: 44px;
        height: 44px;
    }

    .blg-cta-txt h4 {
        font-size: 16px !important;
    }

    .blg-cta-txt p {
        font-size: 13px;
        line-height: 21px;
    }

    .blg-cta-btn {
        width: 100%;
        padding: 11px 18px;
        font-size: 13px;
    }
}

/* ==========================================================================
   BLOG: THE PAGE BANNER
   -------------------------------------------------------------------------

   blog.php opened on a section header and had no banner, which is the one
   thing every other page on the site has. This is that banner, built to the
   Legal Status page's banner.

   --------------------------------------------------------------------------
   WHERE EVERY NUMBER COMES FROM

   Not chosen. Copied off the .ls-banner rules in css/legalstatus.css, the
   same file the Legal Status banner is drawn from, so the two banners are
   the same banner. Read across as a pair:

       .ls-banner              ->  .blg-banner
       .ls-banner-content      ->  .blg-banner-content
       .ls-banner-badge        ->  .blg-banner-badge
       .ls-banner-content h1   ->  .blg-banner-content h1
       .ls-banner-line         ->  .blg-banner-line
       .ls-banner-image        ->  .blg-banner-image
       .ls-banner-photo        ->  .blg-banner-photo

   Nothing is retyped from memory. If a value here is wrong, it is wrong in
   the same way on both pages, which is fixable in one place each.

   The important ones: the #083C7C field, 52 / 48 split, 300px floor, the
   clamp(42px, 4.5vw, 68px) title, the -1.5px tracking, the #A9C7FF second
   word, the 50 x 3 rule, and the four-step left padding ladder that lines the
   text up with the 1380px measure the rest of the site uses.

   --------------------------------------------------------------------------
   WHY THE NAMES ARE blg- AND NOT ls-

   Reusing ls- would need css/legalstatus.css on this page, and that file is
   written for the sixteen policy cards that sit under the Legal Status
   banner - the equal-height clamp, the Read more script's target classes,
   the card grids. Those are dead weight here and a second thing to keep
   true. Prefixing keeps the two pages unable to reach each other's rules,
   which is the same reason the rest of blog.css is prefixed.

   The !important marks on the h1 and the p are kept exactly as the Legal
   Status banner carries them, because global-typography.css is loaded on
   both pages and would otherwise win on the type.

   --------------------------------------------------------------------------
   WHAT IS NOT TOUCHED

   The banner goes in above the existing Latest from ODLC section, which is
   not moved, restyled or edited - blog.php gains markup and loses nothing.
   The three cards, the section header, the badge, the title, the rule, the
   dots and every href are exactly as they were. No other page is opened and
   no existing rule in this file is edited or removed. No image file is
   written, cropped or deleted; images/portal1.png is a photograph already
   on the server, used here for the first time.
========================================================================== */

/* ---------- the banner ---------- */

.blg-banner {
    width: 100%;
    min-height: 300px;
    display: flex;
    align-items: stretch;
    position: relative;
    overflow: hidden;
    background: #083C7C;
    font-family: Arial, Helvetica, sans-serif;
}

.blg-banner-content {
    width: 52%;
    padding: 80px 6% 80px 4%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 5;
}

.blg-banner-badge {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    margin-bottom: 25px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .4px;
    white-space: nowrap;
}

.blg-banner-badge i {
    font-size: 15px;
    line-height: 1;
}

.blg-banner-content h1 {
    margin: 0 !important;
    max-width: 600px;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: clamp(42px, 4.5vw, 68px) !important;
    line-height: 1.08 !important;
    font-weight: 700;
    letter-spacing: -1.5px;
}

.blg-banner-content h1 span {
    color: #A9C7FF;
}

.blg-banner-line {
    width: 50px;
    height: 3px;
    margin: 25px 0 20px;
    background: #FFFFFF;
    border-radius: 5px;
}

.blg-banner-content p {
    max-width: 520px;
    margin: 0 !important;
    color: rgba(255, 255, 255, .90);
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
    text-align: left !important;
}

.blg-banner-image {
    width: 48%;
    min-height: 500px;
    position: relative;
    overflow: hidden;
}

.blg-banner-photo {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.blg-banner-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform .7s ease;
}

.blg-banner:hover .blg-banner-photo img {
    transform: scale(1.04);
}

@media (max-width: 991px) {

    .blg-banner {
        min-height: 430px;
    }

    .blg-banner-content {
        width: 52%;
        padding: 60px 35px;
    }

    .blg-banner-image {
        width: 48%;
        min-height: 430px;
    }
}

@media (max-width: 767px) {

    .blg-banner {
        flex-direction: column;
        min-height: auto;
    }

    .blg-banner-content {
        width: 100%;
        min-height: 360px;
        padding: 55px 25px 45px;
    }

    .blg-banner-content h1 {
        max-width: 100%;
        font-size: 38px !important;
        letter-spacing: -1px;
    }

    .blg-banner-content p {
        max-width: 100%;
        font-size: 15px !important;
    }

    .blg-banner-badge {
        font-size: 12px;
        padding: 8px 15px;
    }

    .blg-banner-image {
        width: 100%;
        height: 300px;
        min-height: 300px;
    }
}

@media (max-width: 480px) {

    .blg-banner-content {
        min-height: 330px;
        padding: 45px 20px 40px;
    }

    .blg-banner-content h1 {
        font-size: 32px !important;
    }

    .blg-banner-image {
        height: 250px;
        min-height: 250px;
    }
}

@media (min-width: 1500px) {
    .blg-banner-content {
        padding-left: calc((100% - 1380px) / 2);
    }
}

@media (max-width: 1199.98px) {
    .blg-banner-content {
        padding-left: 3%;
    }
}

@media (max-width: 767.98px) {
    .blg-banner-content {
        padding-left: 5%;
    }
}

@media (max-width: 480.98px) {
    .blg-banner-content {
        padding-left: 4%;
    }
}