/* ============================================================
 * File: css/tools/metatags.css
 * Module: Tool CSS — Meta Tag Generator
 * Purpose: Form grid + the social (Open Graph) preview card.
 * ============================================================ */

.dt-form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 720px) {
  .dt-form-grid { grid-template-columns: 1fr; }
}

.dt-og-card {
  max-width: 520px;
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-surface);
}
.dt-og-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  background-color: var(--color-surface-2);
}
.dt-og-card__body {
  padding: 12px 14px;
  background-color: var(--color-surface-2);
}
.dt-og-card__site {
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
  letter-spacing: 0.03em;
  margin-bottom: 3px;
}
.dt-og-card__title {
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin-bottom: 3px;
}
.dt-og-card__desc {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}