/* --------------------------------------------------------------------------------
   Human Capital — FY26 printed pages 52-65.
   Only the pieces this chapter needs; layout, type and spacing utilities come from
   reset.css / common.css / color.css, and .shadowBoxDk from capitals.css.
-------------------------------------------------------------------------------- */

.capital-human{

    .imgWrap img{
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center center;
    }

    /* Runs of body copy that carry no figure or image alongside them are set
       full width. Splitting them in two only worked on the printed spread,
       where both halves were filled; on one scrolling column the shorter side
       leaves a dead half-page. */
    .textBlock{
        p:last-child,
        ul:last-child{
            margin-bottom: 0;
        }
    }

    /* ---- opener: the three figures run across the foot of the page, divided by
       hairlines, exactly as they are set in print ---- */
    .humStatRow{
        display: flex;
        flex-wrap: wrap;

        .humStat{
            flex: 1 1 0;
            padding: 0 40px;
            border-left: 1px solid #ffffff66;

            &:first-child{
                padding-left: 0;
                border-left: none;
            }
        }
    }

    /* ---- the six highlight cards facing the opener ---- */
    .humHighlights{
        .row{
            row-gap: 30px;
        }
        .humCard{
            height: 100%;
            background-color: var(--blue);

            /* the printed card sets a short rule between icon and title */
            h4{
                padding-top: 20px;
                margin-bottom: 15px;
                position: relative;

                &::before{
                    content: "";
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 90px;
                    height: 1px;
                    background-color: #ffffff8c;
                }
            }
        }
        .humCardIcon{
            width: 70px;
            margin-bottom: 25px;
        }
    }

    /* ---- learning & development ----
       The print carries this chapter across a spread in three dense columns with
       the figures dropped in wherever they fit. That reads as clutter once it is
       one scrolling column, so the figures are collected into a single strip and
       the rest becomes a vertical rhythm of full-width blocks. Same copy, same
       images, same components - just given room. */
    .humFigures{
        display: flex;
        flex-wrap: wrap;
        padding: 40px;

        .humFigure{
            flex: 1 1 0;
            padding: 0 40px;
            border-left: 1px solid #cfe3f0;

            &:first-child{
                padding-left: 0;
                border-left: none;
            }
            &:last-child{
                padding-right: 0;
            }
        }

    }

    /* the 9,000+ icon, set beside the technician copy as the report has it */
    .humBadgeIcon{
        width: 76px;
        padding: 13px;
    }

    /* the use case panel runs its photograph full-bleed against the copy */
    .humUseCase{
        .no_gutter{
            margin-left: 0;
            margin-right: 0;

            > [class*="col-"]{
                padding-left: 0;
                padding-right: 0;
            }
        }
        .humUseCaseImg img{
            height: 100%;
            min-height: 320px;
            object-fit: cover;
        }
        .humUseCaseText{
            padding: 40px;
        }
    }

    /* pale panel used for the cyber-security and leadership-development blocks */
    .humPaleBox{
        background-color: #e1e7f5;
    }

    /* ---- key benefits to service technicians ---- */
    .humBenefits{
        display: flex;
        flex-wrap: wrap;
        gap: 30px;

        .humBenefit{
            flex: 1 1 260px;
            display: flex;
            align-items: center;
            gap: 20px;
        }
        .humBenefitIcon{
            width: 80px;
            padding: 14px;
            flex: 0 0 auto;
            background-color: #fff;
        }
    }

    /* ---- leadership communication ---- */
    .humEnergy,
    .humWorkplace{
        background-color: #edeff2;
    }

    /* the vertical rule the print sets beside a standalone figure */
    .humRule{
        padding-left: 30px;
        border-left: 2px solid var(--teal);
    }

    /* ---- Shabaash ---- */
    .humShabaash{
        text-align: center;

        .imgWrap{
            max-width: 380px;
            margin: 0 auto;
        }
    }

    /* ---- eurochamp categories: 2 x 2, hairline cross between them ---- */
    .humChamps{
        display: flex;
        flex-wrap: wrap;

        .humChamp{
            width: 50%;
            padding: 30px 40px;
            display: flex;
            align-items: center;
            gap: 20px;
            border-right: 1px solid #ffffff59;
            border-bottom: 1px solid #ffffff59;

            &:nth-child(2n){
                border-right: none;
                padding-right: 0;
            }
            &:nth-child(2n+1){
                padding-left: 0;
            }
            &:nth-child(1), &:nth-child(2){
                padding-top: 0;
            }
            &:nth-last-child(1), &:nth-last-child(2){
                border-bottom: none;
                padding-bottom: 0;
            }
        }
        .humChampText{
            flex: 1 1 0;
            min-width: 0;
        }
        .humChampIcon{
            width: 95px;
            flex: 0 0 auto;
        }
    }

    /* ---- recognition clubs ---- */
    .row_clubs{
        row-gap: 30px;
    }
    .humClub{
        height: 100%;
        display: flex;
        flex-direction: column;

        .imgWrap{
            flex: 0 0 auto;
        }
        .humClubText{
            flex: 1 1 auto;
        }
    }

    /* ---- health & safety ---- */
    .humSafetyIcon{
        max-width: 260px;
        margin: 0 auto;
    }
    .humZero{
        .numMain{
            line-height: 1;
        }
    }

    /* ---- ethical & inclusive workplace ---- */
    .row_stats{
        row-gap: 30px;
    }
    /* these three icons are drawn in white, so the tile behind them carries the
       gradient - as printed on page 65 */
    .humStatIconImg{
        width: 84px;
        padding: 14px;
        margin-bottom: 20px;
        background: linear-gradient(to bottom, #56b6c5 0%, #0075b8 100%);
    }
    .humList{
        padding-left: 0;
        list-style: none;

        li{
            position: relative;
            padding-left: 26px;
            margin-bottom: 14px;

            /* the report bullets this list with a plus, matching its icon set */
            &::before{
                content: "+";
                position: absolute;
                left: 0;
                top: -2px;
                font-weight: 700;
                color: var(--blue);
            }
        }
    }
}
.iconCount{
    display: flex;
    flex-wrap: wrap;
    .eachIconH{
        width: calc(100% - 100px);
        padding-left: 20px;
    }
}
.unlessingWrap{
    width: 100%;
    background-size: 100%;
    padding-bottom:640px;
    background-position: center bottom;
}
.chamImgWrap{
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
}
.borderCount{
    .eachIconH{
        position: relative;
        padding-bottom: 20px;
        &::after{
            width: 50%;
            height: 2px;
            position: absolute;
            left: 0;
            bottom: 0;
            content: "";
            background: linear-gradient(90deg, #0075b8 0%, #56b6c5 100%);
        }
    }
}

.humZeroWrap{
    display: flex;
    flex-wrap: wrap;
    .humZeroCounter{
        width: 350px;
        border-right:1px solid #fff;
    }
    .humZeroText{
        width: calc(100% - 350px);
        padding-left: 50px;
    }
}
/* .textWrap is used as a column in a few places without carrying a col-* class,
   so it has no gutter padding and any .row nested inside it pushes its -15px
   margins straight past the container edge */
.capital-human .row > .textWrap{
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

/* ------------------------------------------------------------------ tablet -- */

/* the 640px reserve is sized for the champions photo at full container width;
   the image scales with the viewport but the reserve does not, so it leaves
   several hundred pixels of empty gradient under it. 40% is that same image's
   aspect ratio, which lands on ~640px at desktop and tracks down from there */
@media (max-width: 1199px){
    .unlessingWrap{
        padding-bottom: 40%;
    }
}

@media (max-width: 991px){
    /* the copy is sized around a fixed 350px counter, which leaves it a sliver
       wide once the viewport is the same order of size */
    .humZeroWrap{
        .humZeroCounter{
            width: 100%;
            padding-bottom: 25px;
            margin-bottom: 25px;
            border-right: none;
            border-bottom: 1px solid #fff;
        }
        .humZeroText{
            width: 100%;
            padding-left: 0;
        }
    }

    .section_1{
        .row_1{
            .col-lg-7{
                margin-bottom: 20px;
            }
        }
    }
    .section_3 {
        .textBlock_1{
            .col-lg-7{
                margin-bottom: 20px;
            }
        }
        .revRow{
            .col-lg-6{
                &:not(:last-child){
                    margin-bottom: 20px;
                }
            }
        }
    }

    .section_5{
        .row {
            .col-lg-4{
                margin-bottom: 20px;
            }
        }
    }

    .section_7{
        .unlessingWrap{
            .col-lg-7{
                margin-bottom: 20px;
            }
        }
    }

    .section_8{
        .col-lg-7{
            margin-bottom: 20px;
        }
        .textWrap_2{
            .col-lg-6{
                &:not(:last-child){
                    margin-bottom: 20px;
                }
            }
        }
        .textBlock{
            .col-lg-8{
                margin-bottom: 20px;
            }
        }
    }

    .section_9{
        .row_1{
            .col-lg-7{
                margin-bottom: 20px;
            }
        }
    }

    .section_12{
        .col-lg-3{
            margin-bottom: 20px;
        }
    }

    .section_13{
        .mb_50{
            margin-bottom: 20px !important;
        }
    }

    .capital-human{
        .humStatRow .humStat{
            flex: 1 1 100%;
            padding: 20px 0 0;
            margin-top: 20px;
            border-left: none;
            border-top: 1px solid #ffffff66;

            &:first-child{
                padding-top: 0;
                margin-top: 0;
                border-top: none;
            }
        }
        .humChamps .humChamp{
            width: 100%;
            padding: 30px 0;
            border-right: none;

            &:nth-child(2){
                padding-top: 30px;
            }
            &:nth-last-child(2){
                border-bottom: 1px solid #ffffff59;
                padding-bottom: 30px;
            }
        }
        .humFigures{
            padding: 30px;

            .humFigure{
                flex: 1 1 100%;
                padding: 25px 0 0;
                margin-top: 25px;
                border-left: none;
                border-top: 1px solid #cfe3f0;

                &:first-child{
                    padding-top: 0;
                    margin-top: 0;
                    border-top: none;
                }
            }
        }
        .humUseCase .humUseCaseImg img{
            min-height: 0;
        }
    }
}

/* ------------------------------------------------------------------ mobile -- */
@media (max-width: 767px){
    .section_4{
        .row{
            .col-md-5{
                margin-bottom: 20px;
            }
        }
    }

    .section_6{
        .row{
            .col-md-6{
                &:not(:last-child){
                    margin-bottom: 20px;
                }
            }
        }
    }

    .section_7{
        .row_1 {
            .row{
                .col-md-4{
                    &:not(:last-child){
                        margin-bottom: 20px;
                    } 
                }
            }
        }
    }

    .capital-human{
        .humHighlights .humCardIcon{
            width: 60px;
            margin-bottom: 18px;
        }
        .humBenefits{
            gap: 20px;

            .humBenefit{
                flex: 1 1 100%;
            }
            .humBenefitIcon{
                width: 64px;
                padding: 12px;
            }
        }
        .humFigures{
            padding: 25px;
        }
        .humBadgeIcon{
            width: 64px;
            padding: 11px;
        }
        .humUseCase .humUseCaseText{
            padding: 25px;
        }
        .humChamps .humChampIcon{
            width: 100px;
        }
        .humRule{
            padding-left: 20px;
        }
        .humSafetyIcon{
            max-width: 180px;
            margin-bottom: 20px;
        }
        .humStatIconImg{
            width: 70px;
        }
    }

    .iconCount{
        .externalIcon{
            width: 80px;
            height: 80px;
            padding: 12px;
            border-radius: 16px;
        }
        .eachIconH{
            width: calc(100% - 80px);
            padding-left: 15px;
        }
    }
}