/*
  Bookmark tool — Notion-style link preview card. The whole card is a single
  anchor: a text column (title / description / favicon + full URL) on the left
  and an optional cover image on the right. Quiet visuals: hairline border,
  subtle hover tint, clamped text. Scoped to [data-blok-tool="bookmark"].
*/

/*
  Card metrics scale with the text: every value below reproduces the size the
  card was tuned for at a 14px title / 12px body (12px+14px padding, a 60px
  floor, 20px/16px line boxes, 2px and 6px gaps, a 16px favicon) and holds that
  proportion at any `fontSize.bookmark.*` the host sets.

  `--bookmark-scale` is the title size, resolved ON the element spacing by it.
  The content column applies no bookmark font size, so it resolves there against
  the editor's text — the base the title itself resolves against, applying a
  relative value like `calc(1em * 1.5)` exactly once. The placeholder already
  carries the title token, so its scale is a plain 1em; naming the token again
  down that chain would square a relative value.
*/
[data-blok-tool="bookmark"] .blok-bookmark {
  --bookmark-gap: 0.5em;
  display: flex;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--blok-popover-border);
  border-radius: var(--blok-radius-lg);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 100ms ease;
}
[data-blok-tool="bookmark"] .blok-bookmark:hover {
  background-color: var(--blok-item-hover-bg);
}

/* left text column — anchors the link row to the bottom */
[data-blok-tool="bookmark"] .blok-bookmark__content {
  --bookmark-scale: var(--blok-bookmark-title-font-size, 14px);
  flex: 4 1 180px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: calc(var(--bookmark-scale) * 30 / 7);
  padding: calc(var(--bookmark-scale) * 6 / 7) var(--bookmark-scale);
}

[data-blok-tool="bookmark"] .blok-bookmark__title {
  font-size: var(--blok-bookmark-title-font-size, 14px);
  line-height: 1.42857;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-blok-tool="bookmark"] .blok-bookmark__description {
  margin-top: 0.16667em;
  font-size: var(--blok-bookmark-description-font-size, 12px);
  line-height: 1.33333;
  color: var(--blok-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

[data-blok-tool="bookmark"] .blok-bookmark__link-row {
  display: flex;
  align-items: center;
  min-width: 0;
  margin-top: auto;
  padding-top: var(--bookmark-gap);
  font-size: var(--blok-bookmark-link-font-size, 12px);
  line-height: 1.33333;
}

[data-blok-tool="bookmark"] .blok-bookmark__favicon {
  flex: 0 0 auto;
  width: 1.33333em;
  height: 1.33333em;
  margin-right: var(--bookmark-gap);
}

[data-blok-tool="bookmark"] .blok-bookmark__url {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* right cover image — fills its flex cell */
[data-blok-tool="bookmark"] .blok-bookmark__image {
  flex: 0 0 160px;
  max-width: 29%;
}
[data-blok-tool="bookmark"] .blok-bookmark__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
  empty / loading / error states — same shell, muted text. The text stands in
  for the title, so it follows the title token; a host that retypes the card
  must not get a mismatched shell.
*/
[data-blok-tool="bookmark"] .blok-bookmark__placeholder {
  --bookmark-scale: 1em;
  border: 1px solid var(--blok-popover-border);
  border-radius: var(--blok-radius-lg);
  padding: calc(var(--bookmark-scale) * 6 / 7) var(--bookmark-scale);
  color: var(--blok-text-secondary);
  font-size: var(--blok-bookmark-title-font-size, 14px);
  line-height: 1.42857;
}