/*===================================================
    News listing page
    (shared inner-hero styles live in common.css)
===================================================*/

/*===inner hero===*/
.innerHeroSec{
    .innerHeroCont{
        flex: 1;
        .innerHeroSub{
            max-width: 990px;
        }
    }
}

/*===blog listing - filters, cards & pagination===*/
.blogListSec{
    .headingWrap{
        .tagHolder{
            max-width: 100%;
        }
    }
    .blogListSub{
        max-width: 992px;
        margin: 20px 0 40px;
        color: #1d2a36;
        font-size: 15px;
        line-height: 1.7;
        letter-spacing: 0.2px;
    }
    /*===category filter pills===*/
    .blogFilterTabs{
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        margin: 0 0 50px;
        li{
            /*===a button on the news page, a link to the category on the blog===*/
            button,
            a{
                display: inline-block;
                padding: 15px 32px;
                font-family: inherit;
                font-size: 15px;
                letter-spacing: 0.2px;
                color: #1d2a36;
                background-color: transparent;
                border: 1px solid #a4a4a4;
                border-radius: 92px;
                cursor: pointer;
                transition: all .3s ease;
                &:hover{
                    border-color: var(--blue);
                    color: var(--blue);
                }
            }
            &.is-active{
                button,
                a{
                    background-color: var(--blue);
                    border-color: var(--blue);
                    color: #fff;
                }
            }
        }
    }
    /*===article cards===*/
    .blogGrid{
        .row{
            row-gap: 50px;
        }
        .blogCard{
            display: flex;
            flex-direction: column;
            height: 100%;
            .blogImg{
                display: block;
                border-radius: 20px;
                overflow: hidden;
                margin-bottom: 20px;
                img{
                    width: 100%;
                    height: 320px;
                    object-fit: cover;
                    transition: transform .5s ease;
                }
                &:hover img{
                    transform: scale(1.06);
                }
            }
            .blogMeta{
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                margin: 0 0 12px;
                li{
                    display: flex;
                    align-items: center;
                    gap: 7px;
                    font-size: 13px;
                    letter-spacing: 0.2px;
                    color: #1d2a36;
                    &:not(:last-child){
                        padding-right: 12px;
                        margin-right: 12px;
                        border-right: 1px solid #c6d4e4;
                    }
                    i,
                    svg{
                        font-size: 14px;
                        width: 1em;
                        height: auto;
                        color: var(--blue);
                        fill: currentColor;
                    }
                }
            }
            .blogTitle{
                display: block;
                max-width: 360px;
                margin-bottom: 18px;
                font-size: 22px;
                font-weight: 600;
                line-height: 1.35;
                color: var(--blue);
                transition: color .3s ease;
                &:hover{
                    color: #0d4d80;
                }
            }
            .blogMore{
                display: inline-flex;
                align-items: center;
                gap: 12px;
                margin-top: auto;
                font-size: 15px;
                font-weight: 600;
                color: #1d2a36;
                .moreArrow{
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    width: 32px;
                    height: 32px;
                    border-radius: 50%;
                    background-color: var(--blue);
                    transition: transform .3s ease;
                    i,
                    svg{
                        font-size: 12px;
                        width: 1em;
                        height: auto;
                        color: #fff;
                        fill: currentColor;
                        transform: rotate(-45deg);
                        transition: transform .3s ease;
                    }
                }
                &:hover{
                    color: var(--blue);
                    .moreArrow{
                        transform: translateX(4px);
                        i,
                        svg{
                            transform: rotate(0deg);
                        }
                    }
                }
            }
        }
    }
    /*===pagination circles===*/
    .blogPagination{
        display: flex;
        /*===a run of 42px circles plus 17px gaps outgrows a phone
             once there are more than about six pages, so let the
             row break instead of pushing the page sideways===*/
        flex-wrap: wrap;
        justify-content: center;
        gap: 17px;
        margin: 60px 0 0;
        li{
            /*===WordPress prints a link per page and a span for the current one===*/
            button,
            .page-numbers{
                display: flex;
                align-items: center;
                justify-content: center;
                width: 42px;
                height: 42px;
                border-radius: 50%;
                font-family: inherit;
                font-size: 19px;
                font-weight: 500;
                color: #1d2a36;
                background-color: transparent;
                border: 1px solid #c6d4e4;
                cursor: pointer;
                transition: all .3s ease;
                &:hover{
                    border-color: var(--blue);
                    color: var(--blue);
                }
            }
            &.is-active{
                button,
                .page-numbers{
                    background-color: var(--blue);
                    border-color: var(--blue);
                    color: #fff;
                }
            }
        }
    }
}
@media (max-width: 767px){
    .blogListSec{
        .blogFilterTabs{
            gap: 10px;
            li button,
            li a{
                padding: 11px 22px;
                font-size: 13px;
            }
        }
        .blogGrid{
            .blogCard{
                .blogImg img{
                    height: 220px;
                }
                .blogTitle{
                    font-size: 18px;
                }
            }
        }
    }
}