/*===================================================
    Tyre brand details page (JK Tyre - ASEPL)
    (shared inner-hero styles live in common.css)
===================================================*/

/*===inner hero - long crumbs wrap, the brand's logo on the right===*/
.innerHeroSec{
    .breadcrumbList{
        flex-wrap: wrap;
        white-space: normal;
        max-width: 190px;
    }
    .innerHeroRow {
        gap: 40px;
    }
    .tagHolder{
        max-width: 100%;
    }
    .tagPill {
        left: var(--tag-x, 30%);
    }
    .innerHeroCont{
        flex: 1;
        .innerHeroSub{
            max-width: 100%;
        }
    }
    /*===the maker's mark on a white plate - the same device the group
         cards use, so a coloured logo reads cleanly on the pale hero===*/
    .heroBrandLogo{
        flex: 0 0 260px;
        max-width: 260px;
        padding: 20px 26px;
        background-color: #fff;
        border-radius: 18px;
        box-shadow: 0 6px 20px rgb(11 51 85 / 8%);
        img{
            display: block;
            width: 100%;
            max-height: 96px;
            object-fit: contain;
        }
    }
}
.brandRepSec{
    img[style*="--logo-k"]{
        height: auto !important;
    }
}
@media (max-width: 991px){
    .innerHeroSec{
        .heroBrandLogo{
            flex-basis: auto;
            max-width: 220px;
            margin-top: 6px;
            padding: 16px 20px;
            img{
                max-height: 72px;
            }
        }
    }
}

/*===about brand - copy & checklist left, tyres art right===*/
.aboutBrandSec{
    .aboutPanel{
        background-color: #e8eef8;
    }
    .aboutCont{
        .tagHolder{
            max-width: 100%;
        }
        p{
            margin: 0 0 20px;
            color: #1d2a36;
            font-size: 15px;
            line-height: 1.7;
            letter-spacing: 0.2px;
            &:first-of-type{
                margin-top: 26px;
            }
        }
        .aboutPoints{
            display: flex;
            flex-direction: column;
            gap: 14px;
            margin: 0 0 30px;
            max-width: 520px;
            li{
                display: flex;
                align-items: center;
                gap: 16px;
                padding: 15px 22px;
                background-color: #fff;
                border-radius: 14px;
                box-shadow: 0 8px 20px rgb(11 51 85 / 6%);
                .pointIcon{
                    flex-shrink: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    background-color: #e8eef8;
                    i,
                    svg{
                        font-size: 13px;
                        width: 1em;
                        height: auto;
                        color: var(--blue);
                        fill: currentColor;
                    }
                }
                p{
                    margin: 0;
                    font-size: 14px;
                    line-height: 1.5;
                }
            }
        }
        .aboutBtnWrap{
            ul{
                display: flex;
                flex-wrap: wrap;
                gap: 12px;
                margin: 0;
                li{
                    a{
                        padding: 13px 26px;
                        font-size: 14px;
                        background-color: #fff;
                        border-color: #d4dbe4;
                        &:hover{
                            background-color: var(--blue);
                            border-color: var(--blue);
                        }
                        &.blueBtn{
                            background-color: var(--blue);
                            border-color: var(--blue);
                        }
                    }
                }
            }
        }
    }
    .aboutBrandImg{
        display: flex;
        justify-content: center;
        padding-left: 30px;
        img{
            max-width: 100%;
            height: auto;
        }
    }
}
/*===the tyre artwork stays in view beside a long About column, like the
     product-portfolio art on brand pages; the image column has to stretch
     to the row's height (the row centres by default) to give it room===*/
@media (min-width: 992px){
    .aboutBrandSec{
        .aboutPanel .row > .col-lg-6:last-child{
            align-self: stretch;
        }
        .aboutBrandImg{
            position: sticky;
            top: 120px;
        }
    }
}
@media (max-width: 991px){
    .aboutBrandSec{
        .aboutBrandImg{
            padding-left: 0;
            margin-top: 40px;
        }
    }
}

/*===tyre solutions - product cards & challenger panel===*/
.tyreSolSec{
    .tyreSolSub{
        max-width: 760px;
        margin: 20px auto 50px;
        color: #4b5a66;
        font-size: 15px;
        letter-spacing: 0.2px;
    }
    .tyreCardGrid{
        .row{
            row-gap: 26px;
        }
        .tyreCard{
            display: flex;
            flex-direction: column;
            height: 100%;
            padding: 24px 22px 0;
            background-color: #eef3f8;
            border: 1px solid #e3eaf2;
            border-radius: 18px;
            overflow: hidden;
            transition: transform .4s ease, box-shadow .4s ease;
            &:hover{
                transform: translateY(-5px);
                box-shadow: 0 16px 34px rgb(11 51 85 / 12%);
                .tyreCardImg img{
                    transform: scale(1.05);
                }
            }
            .tyreCardTitle{
                display: block;
                font-size: 20px;
                font-weight: 700;
                color: #1d2a36;
                margin-bottom: 8px;
            }
            p{
                margin: 0 0 16px;
                font-size: 13px;
                line-height: 1.6;
                letter-spacing: 0.2px;
                color: #4b5a66;
            }
            .tyreCardImg{
                margin-top: auto;
                display: flex;
                justify-content: center;
                img{
                    max-width: 100%;
                    height: 170px;
                    object-fit: contain;
                    transition: transform .5s ease;
                }
            }
        }
    }
    /*===challenger range callout===*/
    .challengerPanel{
        margin-top: 40px;
        padding: 60px;
        background-color: var(--blue);
        .challengerText{
            margin: 0;
            max-width: 380px;
            color: #fff;
            font-size: 24px;
            font-weight: 600;
            line-height: 1.5;
            letter-spacing: 0.2px;
        }
        .challengerPoints{
            display: flex;
            flex-direction: column;
            gap: 14px;
            margin: 0;
            li{
                display: flex;
                align-items: center;
                gap: 16px;
                padding: 14px 22px;
                background-color: #fff;
                border-radius: 14px;
                .pointIcon{
                    flex-shrink: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    background-color: #e8eef8;
                    i,
                    svg{
                        font-size: 13px;
                        width: 1em;
                        height: auto;
                        color: var(--blue);
                        fill: currentColor;
                    }
                }
                p{
                    margin: 0;
                    font-size: 14px;
                    line-height: 1.5;
                    letter-spacing: 0.2px;
                    color: #1d2a36;
                }
            }
        }
    }
}
@media (max-width: 991px){
    .tyreSolSec{
        .challengerPanel{
            padding: 40px 30px;
            border-radius: 30px;
            .challengerText{
                max-width: 100%;
                margin-bottom: 26px;
                font-size: 20px;
            }
        }
    }
}

/*===tyre finder - light panel with dark blue enquiry card===*/
.partFinderSec{
    .finderPanel{
        background-color: #e8eef8;
    }
    .finderCont{
        .tagHolder{
            max-width: 100%;
        }
        p{
            max-width: 520px;
            margin: 26px 0 24px;
            color: #1d2a36;
            font-size: 15px;
            line-height: 1.7;
            letter-spacing: 0.2px;
        }
        .finderLabel{
            display: block;
            max-width: 520px;
            margin-bottom: 18px;
            font-size: 15px;
            font-weight: 600;
            letter-spacing: 0.2px;
            color: #1d2a36;
        }
        .finderPoints{
            display: flex;
            flex-direction: column;
            gap: 14px;
            margin: 0;
            max-width: 560px;
            li{
                display: flex;
                align-items: center;
                gap: 16px;
                padding: 16px 22px;
                background-color: #fff;
                border-radius: 14px;
                box-shadow: 0 8px 20px rgb(11 51 85 / 6%);
                .pointIcon{
                    flex-shrink: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    background-color: #e8eef8;
                    i,
                    svg{
                        font-size: 13px;
                        width: 1em;
                        height: auto;
                        color: var(--blue);
                        fill: currentColor;
                    }
                }
                p{
                    margin: 0;
                    max-width: none;
                    font-size: 14px;
                    line-height: 1.5;
                }
            }
        }
    }
    .finderFormCard{
        padding: 45px 40px;
        background-color: var(--blue);
        border-radius: 24px;
        .formGroup{
            position: relative;
            margin-bottom: 28px;
            input,
            select{
                width: 100%;
                background-color: transparent;
                border-bottom: 1px solid rgb(255 255 255 / 45%);
                padding: 10px 0;
                font-size: 15px;
                font-family: inherit;
                color: #fff;
                border-radius: 0;
                &::placeholder{
                    color: rgb(255 255 255 / 85%);
                }
                &:focus{
                    border-bottom-color: #fff;
                }
            }
            select{
                appearance: none;
                -webkit-appearance: none;
                cursor: pointer;
                &:invalid{
                    color: rgb(255 255 255 / 85%);
                }
                option{
                    color: #1d2a36;
                }
            }
            .selectArrow{
                position: absolute;
                right: 5px;
                top: 14px;
                width: 9px;
                height: 9px;
                border-right: 2px solid #fff;
                border-bottom: 2px solid #fff;
                transform: rotate(45deg);
                pointer-events: none;
            }
        }
        .finderBtnWrap{
            display: flex;
            justify-content: flex-end;
            margin-top: 36px;
        }
        .finderBtn{
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding: 14px 28px;
            border-radius: 30px;
            background-color: #fff;
            border: 1px solid #fff;
            color: #1d2a36;
            font-size: 15px;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: all .3s ease;
            i,
            svg{
                font-size: 14px;
                width: 1em;
                height: auto;
                color: #1d2a36;
                fill: currentColor;
                transform: rotate(-45deg);
                transition: transform .3s ease, color .3s ease;
            }
            &:hover{
                background-color: transparent;
                color: #fff;
                i,
                svg{
                    color: #fff;
                    transform: rotate(0deg);
                }
            }
        }
    }
}
@media (max-width: 991px){
    .partFinderSec{
        .finderFormCard{
            margin-top: 40px;
        }
    }
}
@media (max-width: 767px){
    .partFinderSec{
        .finderFormCard{
            padding: 30px 22px;
        }
    }
}

/*===service strength - blue panel with icon cards, middle featured===*/
.svcStrengthSec{
    .strengthPanel{
        background-color: #1667a6;
    }
    .headingWrap{
        .tagHolder{
            max-width: 100%;
        }
    }
    .strengthGrid{
        .row{
            row-gap: 26px;
        }
        .strengthCard{
            height: 100%;
            padding: 28px 26px;
            border: 1px solid rgb(255 255 255 / 35%);
            border-radius: 18px;
            transition: all .4s ease;
            .strengthIcon{
                display: flex;
                align-items: center;
                justify-content: center;
                width: 54px;
                height: 54px;
                margin-bottom: 30px;
                background-color: #fff;
                border-radius: 12px;
                transition: background .4s ease;
                i,
                svg{
                    font-size: 22px;
                    width: 1em;
                    height: auto;
                    color: var(--blue);
                    fill: currentColor;
                    transition: color .4s ease;
                }
            }
            p{
                margin: 0;
                font-size: 16px;
                font-weight: 600;
                line-height: 1.6;
                letter-spacing: 0.2px;
                color: #fff;
                transition: color .4s ease;
            }
            &.is-active,
            &:hover{
                background-color: #fff;
                border-color: #fff;
                box-shadow: 0 18px 40px rgb(6 32 56 / 30%);
                .strengthIcon{
                    background-color: var(--blue);
                    i,
                    svg{
                        color: #fff;
                    }
                }
                p{
                    color: var(--blue);
                }
            }
        }
    }
}

/*===our commitment - numbered cards with tyre art===*/
.commitSec{
    .commitHead{
        margin-bottom: 50px;
        .tagHolder{
            max-width: 100%;
            .SecH{
                max-width: 720px;
            }
        }
        .commitLede{
            max-width: 560px;
            margin: 26px 0 0;
            color: #1d2a36;
            font-size: 15px;
            line-height: 1.7;
            letter-spacing: 0.2px;
        }
        .commitImg{
            position: absolute;
            right: 0;
            top: 0;
            width: 420px;
            img{
                width: 100%;
                height: auto;
            }
        }
    }
    .commitGrid{
        .row{
            row-gap: 24px;
        }
        .commitCard{
            height: 100%;
            padding: 30px 28px;
            background-color: #eef3f8;
            border-radius: 18px;
            transition: transform .4s ease, box-shadow .4s ease;
            &:hover{
                transform: translateY(-5px);
                box-shadow: 0 16px 34px rgb(11 51 85 / 10%);
            }
            .commitNum{
                position: relative;
                display: inline-block;
                padding-left: 14px;
                margin-bottom: 20px;
                font-size: 38px;
                font-weight: 800;
                line-height: 1;
                color: #1d2a36;
                &::before{
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 4px;
                    bottom: 4px;
                    width: 3px;
                    background-color: var(--blue);
                }
            }
            p{
                margin: 0;
                font-size: 16px;
                font-weight: 600;
                line-height: 1.5;
                letter-spacing: 0.2px;
                color: var(--blue);
            }
        }
    }
}
@media (max-width: 1199px){
    .commitSec{
        .commitHead{
            .commitImg{
                width: 320px;
            }
        }
    }
}
@media (max-width: 767px){
    .commitSec{
        .commitHead{
            .commitImg{
                position: static;
                width: 260px;
                margin-top: 20px;
            }
        }
    }
}

/*===resources - doc cards & specialist callout===*/
.resourcesSec{
    .resourcesSub{
        max-width: 760px;
        margin: 20px auto 50px;
        color: #4b5a66;
        font-size: 15px;
        letter-spacing: 0.2px;
    }
    .docCards{
        display: flex;
        flex-direction: column;
        gap: 24px;
        height: 100%;
        .docCard{
            flex: 1;
            padding: 30px 28px;
            background-color: #fff;
            border: 1px solid #dfe6ee;
            border-radius: 18px;
            transition: transform .4s ease, box-shadow .4s ease;
            &:hover{
                transform: translateY(-5px);
                box-shadow: 0 16px 34px rgb(11 51 85 / 10%);
            }
            .docTitle{
                display: block;
                font-size: 21px;
                font-weight: 700;
                color: var(--blue);
                margin-bottom: 10px;
            }
            p{
                margin: 0 0 22px;
                font-size: 14px;
                line-height: 1.65;
                letter-spacing: 0.2px;
                color: #1d2a36;
            }
            .btnOne{
                font-size: 14px;
                padding: 12px 26px;
                border-color: #d4dbe4;
                &.blueBtn{
                    border-color: var(--blue);
                }
            }
        }
    }
    .specialistCard{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 45px 40px;
        background-color: var(--blue);
        border-radius: 24px;
        .specialistBadge{
            display: inline-block;
            padding: 8px 18px;
            margin-bottom: 24px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.8px;
            text-transform: uppercase;
            color: #fff;
            background-color: rgb(255 255 255 / 15%);
            border: 1px solid rgb(255 255 255 / 35%);
            border-radius: 30px;
        }
        .specialistTitle{
            display: block;
            font-size: 42px;
            font-weight: 800;
            line-height: 1.1;
            text-transform: uppercase;
            color: #fff;
            margin-bottom: 20px;
        }
        p{
            margin: 0 0 30px;
            font-size: 15px;
            line-height: 1.7;
            letter-spacing: 0.2px;
            color: rgb(255 255 255 / 88%);
        }
        .btnOne.solidWhiteBtn{
            margin-top: auto;
            padding: 13px 28px;
            font-size: 15px;
            background-color: #fff;
            border: 1px solid #fff;
            color: #000;
            &:hover{
                background-color: transparent;
                color: #fff;
            }
        }
    }
}
/*===the card keeps its own height and rides beside a long brochure list===*/
@media (min-width: 992px){
    .resourcesSec{
        .specialistCard{
            position: sticky;
            top: 120px;
        }
    }
}
@media (max-width: 1199px){
    .resourcesSec{
        .specialistCard{
            .specialistTitle{
                font-size: 34px;
            }
        }
    }
}
@media (max-width: 991px){
    .resourcesSec{
        .specialistCard{
            margin-top: 30px;
        }
    }
}
@media (max-width: 767px){
    .resourcesSec{
        .specialistCard{
            padding: 30px 24px;
            .specialistTitle{
                font-size: 27px;
            }
        }
    }
}

/*===other brands - lede under the centered heading===*/
.brandRepSec{
    .brandRepSub{
        max-width: 760px;
        margin: 20px auto 10px;
        color: #4b5a66;
        font-size: 15px;
        letter-spacing: 0.2px;
    }
}

/*===other tyre brands - a plain centred row, each brand once===*/
.brandRepSec .tyreOtherBrands{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
    .brandLogoBox{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 220px;
        height: 100px;
        padding: 18px 28px;
        background-color: #fff;
        border: 1px solid #eef1f5;
        border-radius: 14px;
        box-shadow: 0 3px 10px rgb(15 46 74 / 8%);
        transition: transform .3s ease, box-shadow .3s ease;
        &:hover{
            transform: translateY(-4px);
            box-shadow: 0 12px 26px rgb(15 46 74 / 12%);
        }
        a,
        img{
            display: block;
            max-width: 100%;
            max-height: 100%;
        }
        img{
            object-fit: contain;
        }
    }
}
@media (max-width: 575px){
    .brandRepSec .tyreOtherBrands{
        gap: 14px;
        /*===two per row. The half width goes on the <li>, the flex item:
             set on the box inside it, the percentage had nothing to resolve
             against (the li is only as wide as its box) and each card
             collapsed to its padding, squeezing the logo out===*/
        li{
            width: calc(50% - 7px);
        }
        .brandLogoBox{
            width: 100%;
            height: 84px;
            padding: 14px 18px;
        }
    }
}