/* ─────────────────────────────────────────────────────────────────
   Link Preview — bklp
   ───────────────────────────────────────────────────────────────── */

.bklp-card {
    display:         flex;
    text-decoration: none;
    color:           inherit;
    background:      var(--bklp-bg, #fff);
    border:          var(--bklp-bw, 1px) solid var(--bklp-border, #e5e7eb);
    border-radius:   var(--bklp-radius, 14px);
    overflow:        hidden;
    box-shadow:      var(--bklp-shadow, 0 2px 16px rgba(0,0,0,0.09));
    transition:      transform 0.2s ease, box-shadow 0.2s ease;
    box-sizing:      border-box;
    font-family:     inherit;
}

.bklp-card.bklp-hover-lift:hover {
    transform:  translateY(-4px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.14);
}

/* ── Styles ────────────────────────────────────────────────────── */
.bklp-style-horizontal { flex-direction: row; }
.bklp-style-vertical   { flex-direction: column; }
.bklp-style-large      { flex-direction: column; }
.bklp-style-minimal    { flex-direction: column; }

/* ── Image ─────────────────────────────────────────────────────── */
.bklp-image {
    object-fit: cover;
    display:    block;
    flex-shrink: 0;
}
.bklp-style-horizontal .bklp-image {
    width:  var(--bklp-img-w, 220px);
    height: 100%;
    min-height: 120px;
}
.bklp-style-vertical .bklp-image,
.bklp-style-large    .bklp-image {
    width: 100%;
}

/* ── Text area ─────────────────────────────────────────────────── */
.bklp-text {
    padding: 18px 20px 20px;
    flex:    1;
    min-width: 0;
}
.bklp-style-large .bklp-text {
    padding: 20px 24px 24px;
}

/* ── Meta row (favicon + domain) ───────────────────────────────── */
.bklp-meta {
    display:     flex;
    align-items: center;
    gap:         6px;
    margin-bottom: 8px;
    flex-wrap:   wrap;
}
.bklp-favicon {
    width:         14px;
    height:        14px;
    border-radius: 2px;
    object-fit:    cover;
    flex-shrink:   0;
}
.bklp-domain {
    font-size:      12px;
    font-weight:    600;
    color:          var(--bklp-domain, #6c3fb5);
    letter-spacing: 0.2px;
    overflow:       hidden;
    text-overflow:  ellipsis;
    white-space:    nowrap;
    max-width:      200px;
}
.bklp-dot {
    color:     #d1d5db;
    font-size: 11px;
}
.bklp-sitename {
    font-size: 12px;
    color:     #9ca3af;
    overflow:  hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Title ─────────────────────────────────────────────────────── */
.bklp-title {
    margin:      0 0 6px;
    font-family: var(--bklp-tt-font-family, inherit);
    font-weight: var(--bklp-tt-font-weight, 700);
    font-style: var(--bklp-tt-font-style, normal);
    text-decoration: var(--bklp-tt-text-decoration, none);
    text-transform: var(--bklp-tt-text-transform, none);
    font-size:   var(--bklp-tt-font-size-d, 16px);
    line-height: var(--bklp-tt-line-height-d, var(--bklp-tt-line-height, 1.35));
    letter-spacing: var(--bklp-tt-letter-spacing-d, var(--bklp-tt-letter-spacing, 0px));
    word-spacing: var(--bklp-tt-word-spacing-d, var(--bklp-tt-word-spacing, 0px));
    color:       var(--bklp-title, #111827);
    overflow:    hidden;
    display:     -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ── Description ───────────────────────────────────────────────── */
.bklp-desc {
    margin:      0;
    font-family: var(--bklp-d-font-family, inherit);
    font-weight: var(--bklp-d-font-weight, 400);
    font-style: var(--bklp-d-font-style, normal);
    text-decoration: var(--bklp-d-text-decoration, none);
    text-transform: var(--bklp-d-text-transform, none);
    font-size:   var(--bklp-d-font-size-d, 13px);
    line-height: var(--bklp-d-line-height-d, var(--bklp-d-line-height, 1.55));
    letter-spacing: var(--bklp-d-letter-spacing-d, var(--bklp-d-letter-spacing, 0px));
    word-spacing: var(--bklp-d-word-spacing-d, var(--bklp-d-word-spacing, 0px));
    color:       var(--bklp-desc, #6b7280);
    overflow:    hidden;
    display:     -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* ── Editor ────────────────────────────────────────────────────── */
.bklp-editor-wrap {
    width: 100%;
    display: flex;
    justify-content: flex-start;
}

/* ── Reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .bklp-card { transition: none; }
}

/* Typography – responsive */
@media (max-width: 1024px) {
    .bklp-card .bklp-title { font-size: var(--bklp-tt-font-size-t, var(--bklp-tt-font-size-d, 16px)); line-height: var(--bklp-tt-line-height-t, var(--bklp-tt-line-height-d, 1.35));letter-spacing:var(--bklp-tt-letter-spacing-t, var(--bklp-tt-letter-spacing-d, var(--bklp-tt-letter-spacing, 0px)));word-spacing:var(--bklp-tt-word-spacing-t, var(--bklp-tt-word-spacing-d, var(--bklp-tt-word-spacing, 0px)))}
    .bklp-card .bklp-desc { font-size: var(--bklp-d-font-size-t, var(--bklp-d-font-size-d, 13px)); line-height: var(--bklp-d-line-height-t, var(--bklp-d-line-height-d, 1.55));letter-spacing:var(--bklp-d-letter-spacing-t, var(--bklp-d-letter-spacing-d, var(--bklp-d-letter-spacing, 0px)));word-spacing:var(--bklp-d-word-spacing-t, var(--bklp-d-word-spacing-d, var(--bklp-d-word-spacing, 0px)))}
}
@media (max-width: 767px) {
    .bklp-card .bklp-title { font-size: var(--bklp-tt-font-size-m, var(--bklp-tt-font-size-t, var(--bklp-tt-font-size-d, 16px))); line-height: var(--bklp-tt-line-height-m, var(--bklp-tt-line-height-t, var(--bklp-tt-line-height-d, 1.35)));letter-spacing:var(--bklp-tt-letter-spacing-m, var(--bklp-tt-letter-spacing-t, var(--bklp-tt-letter-spacing-d, var(--bklp-tt-letter-spacing, 0px))));word-spacing:var(--bklp-tt-word-spacing-m, var(--bklp-tt-word-spacing-t, var(--bklp-tt-word-spacing-d, var(--bklp-tt-word-spacing, 0px))))}
    .bklp-card .bklp-desc { font-size: var(--bklp-d-font-size-m, var(--bklp-d-font-size-t, var(--bklp-d-font-size-d, 13px))); line-height: var(--bklp-d-line-height-m, var(--bklp-d-line-height-t, var(--bklp-d-line-height-d, 1.55)));letter-spacing:var(--bklp-d-letter-spacing-m, var(--bklp-d-letter-spacing-t, var(--bklp-d-letter-spacing-d, var(--bklp-d-letter-spacing, 0px))));word-spacing:var(--bklp-d-word-spacing-m, var(--bklp-d-word-spacing-t, var(--bklp-d-word-spacing-d, var(--bklp-d-word-spacing, 0px))))}
}
