/* Dropbits default theme — widget CSS
 * Styles for .db-widget, .db-list, .db-record, .db-field-*, .db-empty
 *
 * This file is also reused by imported themes. Keep it structural by default:
 * fonts and colours should inherit from the page shell. Theme-specific colour
 * overrides belong in style.css or a theme-owned htmlwidget.css.
 *
 * Optional colour override pattern:
 * .db-field-title { color: var(--db-primary-color); }
 * .db-empty { color: var(--db-text-muted); }
 * ─────────────────────────────────────────────────────────────────── */

/* ── Page regions ─────────────────────────────────────────────────── */
.db-region { display: contents; }

/* ── Widget wrapper ───────────────────────────────────────────────── */
.db-widget { display: block; }

/* ── Listing ──────────────────────────────────────────────────────── */
.db-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ── Record (listing card) ────────────────────────────────────────── */
.db-record {
  border-radius: var(--db-radius);
  padding: 1.25rem 1.5rem;
}

/* Listing rows: fields side-by-side; long text fields span full width */
.db-list .db-record {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
}

.db-list .db-field-body,
.db-list .db-field-content,
.db-list .db-field-description,
.db-list .db-field-summary {
  flex: 1 1 100%;
}

/* Detail view: no card border */
.db-detail .db-record {
  padding: 0;
}

/* ── Fields ───────────────────────────────────────────────────────── */
.db-field {
  margin-bottom: 0.4rem;
}

.db-field:last-child { margin-bottom: 0; }

/* Listing truncation: cap long fields so records stay scannable */
.db-list .db-field {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin-bottom: 0;
}

/* PK / ID fields: compact and muted in listings */
.db-list .db-field-id {
  font-size: 0.72rem;
  font-family: ui-monospace, monospace;
  -webkit-line-clamp: 1;
}

/* Semantic field hooks (themes target these for type-based styling) */
.db-field-title,
.db-field-name,
.db-field-headline {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 0.3rem;
}

.db-field-body,
.db-field-content,
.db-field-description,
.db-field-summary {
  line-height: 1.7;
}

/* Richtext / HTML fields: tighter clamp in listings */
.db-list .db-field-body,
.db-list .db-field-content,
.db-list .db-field-description,
.db-list .db-field-summary {
  -webkit-line-clamp: 2;
}

.db-field-date,
.db-field-published,
.db-field-created-at,
.db-field-published-at,
.db-field-updated-at {
  font-size: 0.78rem;
  margin-bottom: 0.2rem;
}

.db-field-author,
.db-field-byline {
  font-size: 0.82rem;
}

.db-field-url a,
.db-field-permalink a,
.db-field-link a {
  font-size: 0.85rem;
}

/* ── Empty state ──────────────────────────────────────────────────── */
.db-empty {
  font-style: italic;
  padding: 3rem 0;
  text-align: center;
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .db-record { padding: 1rem; }
}

/* ── Media (sizes/floats: platform assets/cms/content-images.css) ───── */
img { max-width: 100%; height: auto; }
.db-file,
.db-field-file a {
  font-size: 0.9rem;
  word-break: break-word;
}


/* Wolkenstein public detail — metadata fields are CMS-only, not page content */
.db-detail .db-field-id,
.db-detail .db-field-slug,
.db-detail .db-field-status,
.db-detail .db-field-hero-image,
.db-detail .db-field-preview-image,
.db-detail .db-field-created-at,
.db-detail .db-field-updated-at {
  display: none;
}

/* Listing rows: hide CMS metadata, keep title/name visible */
.db-list .db-field-id,
.db-list .db-field-preview-image,
.db-list .db-field-created-at,
.db-list .db-field-updated-at {
  display: none;
}

/* Nav lives inside site_header on Wolkenstein — hide empty chrome nav widget */
.db-widget.site_nav {
  display: none;
}

/* Public pages: hide CMS field labels in hero slots and JUMBO blocks */
.db-widget[data-type="hero"] .db-field-label,
.db-widget[data-slot="hero"] .db-field-label,
.db-field[data-type="jumbo"] .db-field-label {
  display: none;
}