/*
 * Blog card (URL-only paragraph). Loaded on front + block editor so design matches.
 */

.ten-blog-card {
  margin: 1.5rem 0;
  max-width: 100%;
}

.ten-blog-card .ten-blog-card__hit {
  display: block;
  color: inherit;
  text-decoration: none;
  outline: none;
}

.ten-blog-card .ten-blog-card__hit:focus-visible .ten-blog-card__frame {
  box-shadow: 0 0 0 2px var(--ten-card-bg, #fff), 0 0 0 4px var(--ten-main, #2563eb);
}

.ten-blog-card .ten-blog-card__frame {
  position: relative;
  display: block;
  border: 1px solid var(--ten-card-border, #94a3b8);
  border-radius: 2px;
  background: var(--ten-card-bg, #fff);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ten-blog-card.ten-blog-card--internal .ten-blog-card__frame {
  border-color: var(--ten-card-border, #64748b);
}

.ten-blog-card.ten-blog-card--external .ten-blog-card__frame {
  border-color: var(--ten-card-border, #64748b);
}

.ten-blog-card .ten-blog-card__hit:hover .ten-blog-card__frame {
  border-color: var(--ten-main, #2563eb);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

.ten-blog-card .ten-blog-card__body {
  display: block;
  padding: 12px 14px 14px;
}

.ten-blog-card .ten-blog-card__body-inner {
  display: flex;
  gap: 14px;
  align-items: stretch;
}

.ten-blog-card .ten-blog-card__thumb {
  display: block;
  flex: 0 0 120px;
  width: 120px;
  min-height: 68px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--ten-sub, #e2e8f0);
}

.ten-blog-card .ten-blog-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 68px;
  object-fit: cover;
}

.ten-blog-card .ten-blog-card__thumb--empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  padding: 8px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ten-main, #2563eb) 10%, #fff) 0%, var(--ten-sub, #e2e8f0) 100%);
  color: var(--ten-card-muted, #64748b);
  text-align: center;
}

.ten-blog-card .ten-blog-card__thumb-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--ten-card-bg, #fff);
  color: var(--ten-main, #2563eb);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.ten-blog-card .ten-blog-card__thumb-label {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-width: 100%;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.35;
}

.ten-blog-card .ten-blog-card__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}

.ten-blog-card .ten-blog-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ten-card-text, #0f172a);
}

.ten-blog-card .ten-blog-card__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ten-card-muted, #64748b);
}

@media (max-width: 520px) {
  .ten-blog-card .ten-blog-card__body-inner {
    flex-direction: column;
  }

  .ten-blog-card .ten-blog-card__thumb {
    flex-basis: auto;
    width: 100%;
    min-height: 140px;
  }

  .ten-blog-card .ten-blog-card__thumb img {
    min-height: 140px;
  }
}