/* Frontend styles for NOWBKK Link Preview (v1.2.3) */
.kols-link-preview{
    display:flex;
    text-decoration:none;
    border:1px solid rgba(0,0,0,.1);
    border-radius:10px;
    overflow:hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
    transition: box-shadow .2s ease, transform .05s ease;
    background:#fff;
    margin-top: 8px;
}
.kols-link-preview:hover{ 
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
    transform: translateY(-1px);
    text-decoration: none; }
.kols-link-preview:hover .kols-lp-title{
    text-decoration: underline;
}
.kols-lp-image{
    width: 75px;
    min-width:75px;
    background-size: auto 110%;
    background-position: 7% 0;
    background-color: #f2f2f2;
    aspect-ratio: 16/9;
    background-repeat:no-repeat;
}

.kols-lp-image.is-fallback{
    background-image: linear-gradient(135deg,#f3f3f3,#e9e9e9);
}
.kols-lp-body{
    display:flex;
    grid-template-columns: 1fr;
    justify-content: space-between;
    flex-direction:column;
    gap:0;
    padding:12px 14px;
    color:#111;
    height: 79px;
}
.kols-lp-title{
    font-weight:500;
    line-height:1.3;
    font-size: 14px;
}
.kols-lp-host{
    margin-top:6px;
    display:flex;
    align-items:center;
    gap:8px;
    color:#666;
    font-size:13px;
}
.kols-lp-favicon{
    width:12px; height:12px; border-radius:2px;
}

@media (max-width: 968px) {
    .kols-link-preview{
        height: 115px;
    }
    .kols-lp-image{
        height: 115px;
        width: 115px;
        min-width: 115px;
    }
    .kols-lp-title{
        overflow: hidden;
        display: -webkit-box; /* Required for -webkit-line-clamp */
        -webkit-line-clamp: 3; /* Limits to two lines */
        -webkit-box-orient: vertical; /* Required for -webkit-line-clamp */
        text-overflow: ellipsis; /* Adds ellipsis for overflowed text */
    }
    .kols-lp-body{
        height: 115px;
    }
}