/* =========================================================
   BICOM / AI ASISTENTKA CLARA
   ========================================================= */


/* INTRO */

.bicom-clara-intro{
    background:var(--bicom-white);
}

.bicom-clara-intro__grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(420px,.9fr);
    gap:clamp(70px,8vw,120px);
    align-items:center;
}

.bicom-clara-intro__content{
    max-width:620px;
}

.bicom-clara-intro__lead{
    margin-top:26px;
    color:var(--bicom-navy);
    font-weight:var(--bicom-weight-bold);
}

.bicom-clara-intro__copy{
    margin-top:18px;
}

.bicom-clara-intro__actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:16px 28px;
    margin-top:30px;
}

.bicom-clara-intro__button{
    background:var(--bicom-navy);
    color:var(--bicom-white);
}

.bicom-clara-intro__visual{
    position:relative;
    width:100%;
    max-width:520px;
    aspect-ratio:1 / 1;

    margin:0 0 0 auto;
    overflow:hidden;

    background:var(--bicom-dark);
}

.bicom-clara-intro__visual img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;
}


/* PODPORA */

.bicom-clara-support{
    background:var(--bicom-dark);
}

.bicom-clara-support__grid{
    display:grid;
    grid-template-columns:minmax(320px,.78fr) minmax(0,1.22fr);
    gap:clamp(70px,8vw,120px);
    align-items:start;
}

.bicom-clara-support__heading{
    max-width:510px;
}

.bicom-clara-support__heading .bicom-lead{
    margin-top:24px;
}

.bicom-clara-support__list{
    border-top:1px solid rgba(255,255,255,.2);
}

.bicom-clara-support__item{
    display:grid;
    grid-template-columns:46px minmax(0,1fr);
    gap:18px;
    padding:18px 0;
    border-bottom:1px solid rgba(255,255,255,.2);
}

.bicom-clara-support__item > span{
    color:var(--bicom-green);
    font-size:16px;
    line-height:1.4;
    font-weight:var(--bicom-weight-bold);
}

.bicom-clara-support__item strong{
    display:block;
    color:var(--bicom-white);
    font-size:19px;
    line-height:1.35;
    font-weight:var(--bicom-weight-bold);
}

.bicom-clara-support__item p{
    margin:5px 0 0;
    color:var(--bicom-white);
    font-size:16px;
    line-height:1.55;
    font-weight:var(--bicom-weight-medium);
}


/* CLARA */

.bicom-clara-ai{
    background:var(--bicom-surface);
}

.bicom-clara-ai__grid{
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(480px,1.1fr);
    gap:clamp(70px,8vw,120px);
    align-items:center;
}

.bicom-clara-ai__content{
    max-width:600px;
}

.bicom-clara-ai__lead{
    margin-top:26px;
}

.bicom-clara-ai__copy{
    margin-top:18px;
}

.bicom-clara-ai__link{
    margin-top:25px;
}

.bicom-clara-ai__panel{
    background:var(--bicom-white);
    border:1px solid rgba(23,63,82,.16);
}

.bicom-clara-ai__panel-head{
    display:flex;
    align-items:center;
    gap:15px;
    padding:20px 24px;
    border-bottom:1px solid rgba(23,63,82,.14);
}

.bicom-clara-ai__avatar{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    flex:0 0 44px;
    background:var(--bicom-green);
    color:var(--bicom-navy);
    font-size:20px;
    line-height:1;
    font-weight:var(--bicom-weight-bold);
}

.bicom-clara-ai__panel-head strong{
    display:block;
    color:var(--bicom-navy);
    font-size:17px;
    line-height:1.3;
    font-weight:var(--bicom-weight-bold);
}

.bicom-clara-ai__panel-head span{
    display:block;
    margin-top:2px;
    color:var(--bicom-muted);
    font-size:16px;
    line-height:1.35;
}

.bicom-clara-ai__conversation{
    min-height:270px;
    padding:30px 24px;
}

.bicom-clara-ai__message{
    width:fit-content;
    max-width:75%;
    padding:12px 15px;
    font-size:16px;
    line-height:1.5;
}

.bicom-clara-ai__message--system{
    background:var(--bicom-surface);
    color:var(--bicom-navy);
}

.bicom-clara-ai__message--user{
    margin:18px 0 0 auto;
    background:var(--bicom-navy);
    color:var(--bicom-white);
}

.bicom-clara-ai__input{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    min-height:58px;
    padding:0 18px;
    border-top:1px solid rgba(23,63,82,.14);
    color:var(--bicom-muted);
    font-size:16px;
}

.bicom-clara-ai__input span:last-child{
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    flex:0 0 34px;
    background:var(--bicom-green);
    color:var(--bicom-navy);
    font-weight:var(--bicom-weight-bold);
}


/* DALŠÍ PODPORA */

.bicom-clara-more{
    background:var(--bicom-white);
}

.bicom-clara-more__head{
    display:grid;
    grid-template-columns:minmax(0,.8fr) minmax(420px,1.2fr);
    gap:70px;
    align-items:end;
    margin-bottom:42px;
}

.bicom-clara-more__head .bicom-lead{
    max-width:650px;
}

.bicom-clara-more__rows{
    border-top:1px solid var(--bicom-line);
}

.bicom-clara-more__row{
    display:grid;
    grid-template-columns:60px minmax(220px,.7fr) minmax(0,1.3fr);
    gap:28px;
    align-items:start;
    padding:24px 0;
    border-bottom:1px solid var(--bicom-line);
}

.bicom-clara-more__row > span{
    color:var(--bicom-green);
    font-size:16px;
    line-height:1.4;
    font-weight:var(--bicom-weight-bold);
}

.bicom-clara-more__row strong{
    color:var(--bicom-navy);
    font-size:19px;
    line-height:1.4;
    font-weight:var(--bicom-weight-bold);
}

.bicom-clara-more__row p{
    max-width:720px;
    margin:0;
    color:var(--bicom-text);
    font-size:16px;
    line-height:1.6;
}


/* PŘÍSTUP */

.bicom-clara-access{
    padding:82px 0 88px;
    background:var(--bicom-navy);
}

.bicom-clara-access__grid{
    display:grid;
    grid-template-columns:minmax(0,.75fr) minmax(560px,1.25fr);
    gap:clamp(70px,8vw,120px);
    align-items:start;
}

.bicom-clara-access__content{
    max-width:530px;
}

.bicom-clara-access__content .bicom-lead{
    margin-top:24px;
}

.bicom-clara-access__actions{
    border-top:1px solid rgba(255,255,255,.2);
}

.bicom-clara-access__choice{
    padding:22px 0 24px;
    border-bottom:1px solid rgba(255,255,255,.2);
}

.bicom-clara-access__choice strong{
    display:block;
    color:var(--bicom-white);
    font-size:20px;
    line-height:1.35;
    font-weight:var(--bicom-weight-bold);
}

.bicom-clara-access__choice p{
    max-width:620px;
    margin:7px 0 14px;
    color:var(--bicom-white);
    font-size:16px;
    line-height:1.55;
}


/* COMPACT DESKTOP */

@media(min-width:1025px) and (max-height:960px){

    .bicom-clara-intro__visual{
        height:390px;
    }

    .bicom-clara-ai__conversation{
        min-height:230px;
    }

    .bicom-clara-access{
        padding:68px 0 72px;
    }

}


/* TABLET */

@media(max-width:1024px){

    .bicom-clara-intro__grid,
    .bicom-clara-ai__grid{
        grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
        gap:48px;
    }

    .bicom-clara-support__grid{
        grid-template-columns:.8fr 1.2fr;
        gap:48px;
    }

    .bicom-clara-more__head{
        grid-template-columns:1fr 1fr;
        gap:48px;
    }

    .bicom-clara-access__grid{
        grid-template-columns:.8fr 1.2fr;
        gap:48px;
    }

    .bicom-clara-more__row{
        grid-template-columns:48px minmax(180px,.7fr) minmax(0,1.3fr);
        gap:22px;
    }

}


/* MOBILE */

@media(max-width:767px){

    .bicom-clara-intro__grid,
    .bicom-clara-support__grid,
    .bicom-clara-ai__grid,
    .bicom-clara-more__head,
    .bicom-clara-access__grid{
        grid-template-columns:1fr;
        gap:36px;
    }

    .bicom-clara-intro__visual{
        height:auto;
        aspect-ratio:16 / 9;
    }

    .bicom-clara-intro__actions{
        flex-direction:column;
        align-items:flex-start;
    }

    .bicom-clara-ai__conversation{
        min-height:220px;
    }

    .bicom-clara-more__head{
        margin-bottom:30px;
    }

    .bicom-clara-more__row{
        grid-template-columns:38px minmax(0,1fr);
        gap:8px 16px;
        padding:20px 0;
    }

    .bicom-clara-more__row strong{
        grid-column:2;
    }

    .bicom-clara-more__row p{
        grid-column:2;
    }

    .bicom-clara-access{
        padding:60px 0 64px;
    }

}


/* SMALL MOBILE */

@media(max-width:480px){

    .bicom-clara-intro__visual{
        aspect-ratio:4 / 3;
    }

    .bicom-clara-ai__panel-head,
    .bicom-clara-ai__conversation{
        padding-left:18px;
        padding-right:18px;
    }

    .bicom-clara-ai__message{
        max-width:88%;
    }

    .bicom-clara-support__item{
        grid-template-columns:36px minmax(0,1fr);
    }

}