/* --------------------------------------------------------------------------------
   Balanced channel mix diagram
-------------------------------------------------------------------------------- */
.channelScroll {
    img {
        width: 100%;
        display: block;
    }
}

/* --------------------------------------------------------------------------------
   Stat blocks - shared by the channel counters and the service network figures
-------------------------------------------------------------------------------- */
.omnichannel-presence {

    /* the body line-height is far too airy once the number is at .fz_60 */
    .numMain {
        line-height: 1.1;
    }

    .numText em {
        display: block;
        line-height: 1.35;
    }
}

/* --------------------------------------------------------------------------------
   Channel reach counters - the .externalIcon + .eachIconH stat block from
   capital-intellectual, laid out three across instead of stacked
-------------------------------------------------------------------------------- */
.omniCount {

    /* the column is already stretched by the row, but height:100% would not resolve
       against it - making the column a flex parent lets the divider run full height */
    .col-md-4 {
        display: flex;
    }

    .countBox {
        flex: 1 1 auto;
        padding-right: 30px;
        border-right: 1px solid #d8eef8;
    }

    /* the divider only belongs between the boxes, not on the outer edge */
    .col-md-4:last-child .countBox {
        padding-right: 0;
        border-right: none;
    }

    .col-md-4:not(:first-child) .countBox {
        padding-left: 15px;
    }

    /* the "Available at" / "Partnership with" line that leads into the number */
    .countLead {
        margin-bottom: 5px;
    }
}

/* --------------------------------------------------------------------------------
   Pan-India service network
-------------------------------------------------------------------------------- */
.networkWrap {
    .mapImg img {
        width: 100%;
        display: block;
    }
}

/* --------------------------------------------------------------------------------
   Responsive
-------------------------------------------------------------------------------- */

/* the network figures sit two-up inside an already narrow column, so .fz_60 starts
   breaking the longer ones ("14 Million+") onto a second line well before tablet */

@media (max-width: 1440px) {
    .omnichannel-presence .networkWrap .textWrap h3.blueText {
        font-size: 40px !important;
    }

    .omnichannel-presence .mapCount .numMain {
        font-size: 50px !important;
    }

    .eachIconH {
        .numMain {
            &.fz_60 {
                font-size: 50px !important;
            }
        }
    }
}

@media(max-width: 1280px) {
    .eachIconH {
        .numMain {
            &.fz_60 {
                font-size: 40px !important;
            }
        }
    }
}

@media (max-width: 1199px) {
    .omnichannel-presence .mapCount .numMain {
        font-size: 44px !important;
    }
}

@media (max-width: 991px) {

    /* the diagram carries seven labelled bubbles across 1672px of artwork, so its
       captions stop being readable well before a phone width - it scrolls rather
       than shrinks, the same way the wide tables elsewhere in the report behave */
    .channelScroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;

        img {
            min-width: 100%;
        }

        /* navigation.css only sizes the vertical bar, so a horizontal one lands at
           the browser default height in the site's green - too heavy for this panel */
        scrollbar-width: thin;
        scrollbar-color: var(--teal) rgba(255, 255, 255, 0.25);

        &::-webkit-scrollbar {
            height: 6px;
        }

        &::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.25);
        }

        &::-webkit-scrollbar-thumb {
            background: var(--teal);
        }
    }

    .eachIconH {
        .numMain {
            &.fz_60 {
                font-size: 38px !important;
            }
        }
    }

    .omniCount .externalIcon {
        width: 80px;
        height: 80px;
        padding: 12px;
        border-radius: 16px;
    }

    /* the 5/7 split leaves the copy column too narrow to hold a two-up figure grid
       at .fz_60 - past this width the map reads better above the copy than beside it */
    .networkWrap {

        .col-md-5,
        .col-md-7 {
            flex: 0 0 100%;
            max-width: 100%;
        }

        /* nothing left to scroll past once it sits above the copy, so pinning it
           just parks it over the text it is meant to sit beside */
        .mapImg.sticky {
            position: static !important;
            max-width: 420px;
            margin: 0 auto 30px;
        }
    }

    /* .fz_* carry !important and never step down on their own */
    .omnichannel-presence h3.fz_44 {
        font-size: 32px !important;
    }

    .omnichannel-presence .mapCount {
        .numMain {
            font-size: 40px !important;
        }

        .numText {
            font-size: 20px !important;
        }
    }

    .omnichannel-presence .networkWrap .textWrap h3.blueText {
        font-size: 36px !important;
    }
}

@media (max-width: 767px) {

    /* stacked, a right-hand divider makes no sense and the boxes run into each
       other without a gap of their own */
    .omniCount .countBox {
        padding-right: 0;
        padding-left: 0;
        border-right: none;
    }

    .omniCount .col-md-4:not(:last-child) .countBox {
        padding-bottom: 40px;
        margin-bottom: 40px;
        border-bottom: 1px solid #d8eef8;
    }

    .omnichannel-presence h3.fz_44 {
        font-size: 26px !important;
    }

    /* only the first two figures carry .mb_30 - the bottom pair is a last row on
       desktop, but stacked it runs straight into the block below it */
    .omnichannel-presence .mapCount .col-md-6:not(:last-child) {
        margin-bottom: 30px;
    }

    .omnichannel-presence .mapCount {
        .numMain {
            font-size: 36px !important;
        }

        .numText {
            font-size: 18px !important;
        }
    }

    .eachIconH {
        .numMain {
            &.fz_60 {
                font-size: 34px !important;
                justify-content: center;
            }
        }
        .numText {
            text-align: center;
        }
    }

    .omnichannel-presence .networkWrap .textWrap h3.blueText {
        font-size: 30px !important;
    }


    .section_2 {
        &.omniCount .externalIcon {
            margin: 0 auto;
        }
    }

}

/* the counters are the widest thing on the page once everything is single column */
@media (max-width: 575px) {
    .omniCount .numMain {
        font-size: 48px !important;
    }

    .omniCount .numText {
        font-size: 20px !important;
    }

    .networkWrap {
        .textWrap {
            text-align: center;
        }

        .blueBg {
            text-align: center;
            padding: 20px;
            border-radius: 20px;
        }
    }

    .omnichannel-presence .networkWrap .textWrap h3.blueText {
        font-size: 24px !important;
    }

    .omnichannel-presence .mapCount {
        .numMain {
            font-size: 32px !important;
        }
    }

    .omnichannel-presence .mapCount {
        text-align: center;

        .numMain {
            justify-content: center;
        }
    }

    .eachIconH {
        .numMain {
            &.fz_60 {
                font-size: 28px !important;
            }
        }
    }
}