/* ============================================================
   DGM Content Blocks — backend preview design system
   ------------------------------------------------------------
   Compact, frontend-flavoured previews for the page module.
   EVERYTHING is scoped under .dgm-cbp so nothing leaks into
   the rest of the TYPO3 backend. Loaded globally via
   $GLOBALS['TYPO3_CONF_VARS']['BE']['stylesheets'] (ext_localconf.php).

   Tones:   .dgm-cbp--light  (default, content blocks)
            .dgm-cbp--dark   (hero / dark CTA blocks)
   ============================================================ */

.dgm-cbp,
.dgm-cbp * { box-sizing: border-box; }

.dgm-cbp {
  --cbp-accent: #00abe3;        /* primary-500 — DGM house cyan */
  --cbp-accent-strong: #006788; /* primary-700 */
  --cbp-accent-soft: #e6f7fc;   /* primary-100 */
  --cbp-ink: #0f172a;
  --cbp-muted: #64748b;
  --cbp-line: #e3e8ef;
  --cbp-surface: #f6f8fb;

  position: relative;
  max-width: 760px;
  margin: 0;
  border: 1px solid var(--cbp-line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  color: var(--cbp-ink);
  font-family: "Inter", "Theme-Font", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 12px;
  line-height: 1.45;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

/* brand accent rail down the left edge */
.dgm-cbp::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--cbp-accent);
  z-index: 2;
}

/* ---- header bar ------------------------------------------------ */
.dgm-cbp__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--cbp-line);
  background: linear-gradient(180deg, #fbfdff, #f2f6fa);
}
.dgm-cbp__type {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--cbp-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dgm-cbp__title {
  font-weight: 700;
  font-size: 13px;
  color: var(--cbp-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}
.dgm-cbp__title--muted { color: var(--cbp-muted); font-weight: 600; font-style: italic; }
.dgm-cbp__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--cbp-line);
  background: #fff;
  color: var(--cbp-muted);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.dgm-cbp__chip--count {
  color: var(--cbp-accent-strong);
  border-color: #bfeaf8;
  background: var(--cbp-accent-soft);
}
.dgm-cbp__spacer { margin-left: auto; }

/* ---- body ------------------------------------------------------ */
.dgm-cbp__body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dgm-cbp__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cbp-accent-strong);
}
.dgm-cbp__eyebrow::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--cbp-accent);
}

.dgm-cbp__headline {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--cbp-ink);
}
.dgm-cbp__accent { color: var(--cbp-accent); }

.dgm-cbp__lead {
  margin: 0;
  color: var(--cbp-muted);
  font-size: 12px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dgm-cbp__lead p { margin: 0; }
.dgm-cbp__lead--3 { -webkit-line-clamp: 3; }

/* ---- tile grid (stats / facts / info items / features) -------- */
.dgm-cbp__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
}
.dgm-cbp__tile {
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--cbp-surface);
  border: 1px solid var(--cbp-line);
  min-width: 0;
}
.dgm-cbp__tile-label {
  margin: 0 0 1px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cbp-muted);
}
.dgm-cbp__tile-value {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cbp-ink);
  overflow: hidden;
  text-overflow: ellipsis;
}
.dgm-cbp__tile-value p { margin: 0; }

/* ---- list (faq / links / notes / rows) ------------------------- */
.dgm-cbp__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.dgm-cbp__row { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.dgm-cbp__row::before {
  content: "";
  flex: 0 0 auto;
  width: 5px; height: 5px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--cbp-accent);
}
.dgm-cbp__row--plain::before { display: none; }
.dgm-cbp__row > div { min-width: 0; }
.dgm-cbp__row-title { font-weight: 700; color: var(--cbp-ink); }
.dgm-cbp__row-sub {
  color: var(--cbp-muted);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- buttons --------------------------------------------------- */
.dgm-cbp__btns { display: flex; flex-wrap: wrap; gap: 6px; }
.dgm-cbp__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--cbp-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--cbp-accent);
}
.dgm-cbp__btn--secondary,
.dgm-cbp__btn--ghost {
  background: transparent;
  color: var(--cbp-accent-strong);
  border-color: #bfeaf8;
}

/* ---- media / thumbs -------------------------------------------- */
.dgm-cbp__media { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dgm-cbp__thumb {
  width: 54px; height: 40px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--cbp-line);
  background: var(--cbp-surface);
  display: block;
}
.dgm-cbp__thumb--logo { object-fit: contain; background: #fff; padding: 3px; }

/* ---- misc ------------------------------------------------------ */
.dgm-cbp__more { font-size: 10px; font-weight: 600; color: var(--cbp-muted); }
.dgm-cbp__empty { color: var(--cbp-muted); font-style: italic; font-size: 11px; }
.dgm-cbp__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.dgm-cbp__cols > * { min-width: 0; }

/* ============================================================
   DARK tone — hero / dark CTA blocks
   ============================================================ */
.dgm-cbp--dark {
  border-color: #0b2536;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(0, 171, 227, .18) 0%, transparent 55%),
    linear-gradient(150deg, #041019 0%, #07263a 55%, #03101a 100%);
  color: #eaf6fc;
}
.dgm-cbp--dark .dgm-cbp__bar {
  background: rgba(2, 12, 20, .35);
  border-bottom-color: rgba(255, 255, 255, .10);
}
.dgm-cbp--dark .dgm-cbp__type { background: var(--cbp-accent); color: #04121c; }
.dgm-cbp--dark .dgm-cbp__title { color: #fff; }
.dgm-cbp--dark .dgm-cbp__title--muted { color: rgba(234, 246, 252, .6); }
.dgm-cbp--dark .dgm-cbp__chip { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #bfe9f8; }
.dgm-cbp--dark .dgm-cbp__chip--count { background: rgba(0, 171, 227, .16); border-color: rgba(0, 171, 227, .4); color: #cdeffb; }
.dgm-cbp--dark .dgm-cbp__eyebrow { color: #99ddf4; }
.dgm-cbp--dark .dgm-cbp__headline { color: #fff; }
.dgm-cbp--dark .dgm-cbp__accent { color: #4dc4eb; }
.dgm-cbp--dark .dgm-cbp__lead { color: rgba(234, 246, 252, .72); }
.dgm-cbp--dark .dgm-cbp__tile { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }
.dgm-cbp--dark .dgm-cbp__tile-label { color: rgba(234, 246, 252, .55); }
.dgm-cbp--dark .dgm-cbp__tile-value { color: #fff; }
.dgm-cbp--dark .dgm-cbp__row-title { color: #fff; }
.dgm-cbp--dark .dgm-cbp__row-sub { color: rgba(234, 246, 252, .6); }
.dgm-cbp--dark .dgm-cbp__btn { background: var(--cbp-accent); color: #04121c; border-color: var(--cbp-accent); }
.dgm-cbp--dark .dgm-cbp__btn--secondary,
.dgm-cbp--dark .dgm-cbp__btn--ghost { background: transparent; color: #cdeffb; border-color: rgba(255, 255, 255, .3); }
.dgm-cbp--dark .dgm-cbp__thumb { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); }
.dgm-cbp--dark .dgm-cbp__thumb--logo { background: rgba(255, 255, 255, .92); }
.dgm-cbp--dark .dgm-cbp__more { color: rgba(234, 246, 252, .6); }
.dgm-cbp--dark .dgm-cbp__empty { color: rgba(234, 246, 252, .5); }

/* ============================================================
   LAYOUT ARCHETYPES — each preview should structurally echo its
   own frontend layout. Pick the archetype that matches the block.
   ============================================================ */

/* shared small parts */
.dgm-cbp__ico {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 7px;
  background: var(--cbp-accent-soft); color: var(--cbp-accent-strong);
  font-size: 10px; font-weight: 800;
}
.dgm-cbp--dark .dgm-cbp__ico { background: rgba(0,171,227,.18); color: #cdeffb; }
.dgm-cbp__ph {
  display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(135deg, #e7edf3 25%, #dde5ee 25%, #dde5ee 50%, #e7edf3 50%, #e7edf3 75%, #dde5ee 75%);
  background-size: 12px 12px; color: #8ba0b6;
  border: 1px solid var(--cbp-line); border-radius: 6px;
}
.dgm-cbp__avatar {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px;
  object-fit: cover; display: inline-flex; align-items: center; justify-content: center;
  background: var(--cbp-accent-soft); color: var(--cbp-accent-strong);
  font-size: 10px; font-weight: 800; overflow: hidden;
}

/* HERO SPLIT — text column + visual/logo column */
.dgm-cbp__hero { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: center; }
@media (min-width: 560px) { .dgm-cbp__hero { grid-template-columns: 1.5fr .85fr; } }
.dgm-cbp__hero-visual {
  display: flex; align-items: center; justify-content: center;
  min-height: 66px; padding: 8px; border-radius: 10px;
  background: var(--cbp-surface); border: 1px solid var(--cbp-line);
}
.dgm-cbp--dark .dgm-cbp__hero-visual { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.dgm-cbp__hero-visual img { max-width: 100%; max-height: 92px; object-fit: contain; }

/* CENTERED hero / header */
.dgm-cbp__center { text-align: center; align-items: center; }
.dgm-cbp__center .dgm-cbp__eyebrow,
.dgm-cbp__center .dgm-cbp__btns { justify-content: center; }
.dgm-cbp__center .dgm-cbp__lead { margin-left: auto; margin-right: auto; max-width: 46ch; }

/* STAT GRID — seamless cells: small mono label + bold value (fact grid, key/value) */
.dgm-cbp__stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 1px; background: var(--cbp-line);
  border: 1px solid var(--cbp-line); border-radius: 10px; overflow: hidden;
}
.dgm-cbp__stat { background: #fff; padding: 8px 10px; min-width: 0; }
.dgm-cbp__stat-label { margin: 0; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cbp-muted); }
.dgm-cbp__stat-value { margin: 2px 0 0; font-size: 15px; font-weight: 800; color: var(--cbp-ink); line-height: 1.2; }
.dgm-cbp__stat-value p { margin: 0; }
.dgm-cbp--dark .dgm-cbp__stats { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.12); }
.dgm-cbp--dark .dgm-cbp__stat { background: transparent; }
.dgm-cbp--dark .dgm-cbp__stat-label { color: rgba(234,246,252,.55); }
.dgm-cbp--dark .dgm-cbp__stat-value { color: #fff; }

/* COMPARE — columns with a VS divider, each col = icon+title+body+checklist */
.dgm-cbp__compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: stretch; }
.dgm-cbp__compare--3 { grid-template-columns: 1fr 1fr 1fr; }
.dgm-cbp__compare-col { border: 1px solid var(--cbp-line); border-radius: 10px; padding: 8px 9px; background: #fff; min-width: 0; }
.dgm-cbp__compare-head { display: flex; align-items: center; gap: 7px; }
.dgm-cbp__compare-title { font-weight: 700; color: var(--cbp-ink); }
.dgm-cbp__vs {
  align-self: center; display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 7px; border-radius: 999px; border: 1px solid #bfeaf8; background: #fff;
  font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cbp-accent-strong);
}
.dgm-cbp__feat { list-style: none; margin: 6px 0 0; padding: 6px 0 0; border-top: 1px solid var(--cbp-line); display: flex; flex-direction: column; gap: 3px; }
.dgm-cbp__feat li { display: flex; gap: 5px; align-items: flex-start; color: var(--cbp-ink); }
.dgm-cbp__feat li::before { content: "✓"; color: var(--cbp-accent-strong); font-weight: 800; font-size: 10px; line-height: 1.4; }

/* TIMELINE — vertical rail with dots */
.dgm-cbp__timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--cbp-accent); display: flex; flex-direction: column; gap: 8px; }
.dgm-cbp__tl { position: relative; }
.dgm-cbp__tl::before { content: ""; position: absolute; left: -19px; top: 3px; width: 8px; height: 8px; border-radius: 999px; background: var(--cbp-accent); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--cbp-line); }
.dgm-cbp__tl-time { font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--cbp-accent-strong); }
.dgm-cbp__tl-title { font-weight: 700; color: var(--cbp-ink); }
.dgm-cbp__tl-sub { color: var(--cbp-muted); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

/* QUOTES — testimonial cards with avatar */
.dgm-cbp__quotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.dgm-cbp__quote { background: var(--cbp-surface); border: 1px solid var(--cbp-line); border-radius: 10px; padding: 8px 9px; }
.dgm-cbp__quote-text { color: var(--cbp-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dgm-cbp__quote-text::before { content: "\201C"; color: var(--cbp-accent); font-weight: 800; margin-right: 1px; }
.dgm-cbp__quote-foot { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.dgm-cbp__quote-name { font-weight: 700; font-size: 11px; color: var(--cbp-ink); }
.dgm-cbp__quote-role { font-size: 10px; color: var(--cbp-muted); }

/* PEOPLE — avatar + name + role grid (team, speakers, contacts) */
.dgm-cbp__people { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.dgm-cbp__person { display: flex; gap: 8px; align-items: center; background: var(--cbp-surface); border: 1px solid var(--cbp-line); border-radius: 10px; padding: 6px 8px; min-width: 0; }
.dgm-cbp__person > div { min-width: 0; }
.dgm-cbp__person-name { font-weight: 700; color: var(--cbp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dgm-cbp__person-role { font-size: 10px; color: var(--cbp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* GALLERY — image mosaic */
.dgm-cbp__gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 4px; }
.dgm-cbp__gallery img, .dgm-cbp__gallery .dgm-cbp__ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; border: 1px solid var(--cbp-line); }

/* LOGOS — logo wall */
.dgm-cbp__logos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dgm-cbp__logo { display: flex; align-items: center; justify-content: center; height: 32px; min-width: 62px; padding: 4px 8px; border: 1px solid var(--cbp-line); border-radius: 8px; background: #fff; }
.dgm-cbp__logo img { max-height: 22px; max-width: 84px; object-fit: contain; }

/* TABS — tab strip + panel */
.dgm-cbp__tabstrip { display: flex; flex-wrap: wrap; gap: 4px; }
.dgm-cbp__tab { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 7px; font-size: 11px; font-weight: 600; background: var(--cbp-surface); border: 1px solid var(--cbp-line); color: var(--cbp-muted); }
.dgm-cbp__tab--active { background: var(--cbp-accent); border-color: var(--cbp-accent); color: #fff; }
.dgm-cbp__panel { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--cbp-line); color: var(--cbp-muted); }

/* SPLIT MEDIA — text + image side by side */
.dgm-cbp__split { display: grid; grid-template-columns: 1fr; gap: 9px; align-items: start; }
@media (min-width: 520px) { .dgm-cbp__split { grid-template-columns: 1fr 124px; } }
.dgm-cbp__split-media img, .dgm-cbp__split-media .dgm-cbp__ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.dgm-cbp__split-text { min-width: 0; display: flex; flex-direction: column; gap: 6px; }

/* TWO-COLUMN prose */
.dgm-cbp__prose2 { columns: 2; column-gap: 16px; max-height: 84px; overflow: hidden; color: var(--cbp-muted); font-size: 11px; line-height: 1.55; }
.dgm-cbp__prose2 p { margin: 0 0 6px; break-inside: avoid; }

/* FEATURE CARDS — icon badge cards */
.dgm-cbp__features { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.dgm-cbp__feature { border: 1px solid var(--cbp-line); border-radius: 10px; padding: 8px 9px; background: #fff; min-width: 0; }
.dgm-cbp__feature .dgm-cbp__ico { width: 24px; height: 24px; border-radius: 8px; margin-bottom: 5px; }
.dgm-cbp__feature-title { font-weight: 700; color: var(--cbp-ink); }
.dgm-cbp__feature-text { color: var(--cbp-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* MATRIX — pricing / feature comparison table */
.dgm-cbp__tiers { display: flex; gap: 6px; }
.dgm-cbp__tier { flex: 1; text-align: center; background: var(--cbp-surface); border: 1px solid var(--cbp-line); border-radius: 9px; padding: 7px 6px; min-width: 0; }
.dgm-cbp__tier--hl { border-color: var(--cbp-accent); box-shadow: inset 0 0 0 1px var(--cbp-accent); }
.dgm-cbp__tier-name { font-weight: 800; color: var(--cbp-ink); font-size: 11px; }
.dgm-cbp__tier-price { font-size: 10px; color: var(--cbp-accent-strong); font-weight: 700; }

/* CALLOUT — tinted CTA box (ticket callouts, banners, floating cta) */
.dgm-cbp__callout { border: 1px solid #bfeaf8; background: var(--cbp-accent-soft); border-radius: 10px; padding: 9px 11px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.dgm-cbp--dark .dgm-cbp__callout { border-color: rgba(0,171,227,.4); background: rgba(0,171,227,.12); }

/* DIAGRAM — code-ish block (mermaid) */
.dgm-cbp__code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 10.5px; line-height: 1.5; color: #334155; background: var(--cbp-surface); border: 1px solid var(--cbp-line); border-radius: 8px; padding: 7px 9px; white-space: pre-wrap; max-height: 64px; overflow: hidden; }

/* MINI TABLE */
.dgm-cbp__table { width: 100%; border-collapse: collapse; font-size: 11px; border: 1px solid var(--cbp-line); border-radius: 8px; overflow: hidden; }
.dgm-cbp__table th, .dgm-cbp__table td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--cbp-line); }
.dgm-cbp__table th { background: var(--cbp-surface); font-weight: 700; color: var(--cbp-muted); text-transform: uppercase; font-size: 9px; letter-spacing: .06em; }
.dgm-cbp__table tr:last-child td { border-bottom: 0; }

/* BANNER — full-width image strip placeholder */
.dgm-cbp__banner { width: 100%; height: 54px; border-radius: 8px; font-size: 11px; color: #8ba0b6; }