/* Callout Block — bkco- prefix */
.bkco-wrap {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: var(--bkco-pv, 16px) var(--bkco-ph, 20px);
  border-radius: var(--bkco-radius, 6px);
  background: var(--bkco-bg, #e8f4fd);
  color: var(--bkco-text, #1565c0);
  position: relative;
  transition: opacity .3s;
}

/* Border styles */
.bkco-border-left  { border-left: 4px solid var(--bkco-border, #2196f3); }
.bkco-border-top   { border-top: 4px solid var(--bkco-border, #2196f3); padding-top: calc(var(--bkco-pv, 16px) + 2px); }
.bkco-border-all   { border: 2px solid var(--bkco-border, #2196f3); }
/* .bkco-border-none — no border styles applied */

.bkco-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
}
.bkco-icon svg { width: 100%; height: 100%; }

.bkco-content { flex: 1; min-width: 0; }
.bkco-title {
  display: block;
  font-family: var(--bkco-tt-font-family, inherit);
  font-size: var(--bkco-tt-font-size-d, 1em);
  font-weight: var(--bkco-tt-font-weight, 700);
  line-height: var(--bkco-tt-line-height-d, 1.3);
  text-transform: var(--bkco-tt-text-transform, none);
  font-style: var(--bkco-tt-font-style, normal);
  text-decoration: var(--bkco-tt-text-decoration, none);
  letter-spacing: var(--bkco-tt-letter-spacing-d, normal);
  word-spacing: var(--bkco-tt-word-spacing-d, normal);
  margin-bottom: 4px;
}
.bkco-body {
  margin: 0;
  font-family: var(--bkco-tb-font-family, inherit);
  font-size: var(--bkco-tb-font-size-d, .95em);
  font-weight: var(--bkco-tb-font-weight, inherit);
  line-height: var(--bkco-tb-line-height-d, 1.6);
  text-transform: var(--bkco-tb-text-transform, none);
  font-style: var(--bkco-tb-font-style, normal);
  text-decoration: var(--bkco-tb-text-decoration, none);
  letter-spacing: var(--bkco-tb-letter-spacing-d, normal);
  word-spacing: var(--bkco-tb-word-spacing-d, normal);
}

.bkco-close {
  position: absolute;
  top: 10px; right: 12px;
  border: none; background: none;
  font-size: 1.3em; line-height: 1;
  cursor: pointer; color: inherit; opacity: .6;
  padding: 0 4px;
}
.bkco-close:hover { opacity: 1; }
.bkco-wrap.bkco-hidden { display: none; }

/* ── Responsive Typography ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .bkco-title {
    font-size: var(--bkco-tt-font-size-t, var(--bkco-tt-font-size-d, 1em));
    line-height: var(--bkco-tt-line-height-t, var(--bkco-tt-line-height-d, 1.3));
    letter-spacing: var(--bkco-tt-letter-spacing-t, var(--bkco-tt-letter-spacing-d, normal));
    word-spacing: var(--bkco-tt-word-spacing-t, var(--bkco-tt-word-spacing-d, normal));
  }
  .bkco-body {
    font-size: var(--bkco-tb-font-size-t, var(--bkco-tb-font-size-d, .95em));
    line-height: var(--bkco-tb-line-height-t, var(--bkco-tb-line-height-d, 1.6));
    letter-spacing: var(--bkco-tb-letter-spacing-t, var(--bkco-tb-letter-spacing-d, normal));
    word-spacing: var(--bkco-tb-word-spacing-t, var(--bkco-tb-word-spacing-d, normal));
  }
}

@media (max-width: 767px) {
  .bkco-title {
    font-size: var(--bkco-tt-font-size-m, var(--bkco-tt-font-size-t, var(--bkco-tt-font-size-d, 1em)));
    line-height: var(--bkco-tt-line-height-m, var(--bkco-tt-line-height-t, var(--bkco-tt-line-height-d, 1.3)));
    letter-spacing: var(--bkco-tt-letter-spacing-m, var(--bkco-tt-letter-spacing-t, var(--bkco-tt-letter-spacing-d, normal)));
    word-spacing: var(--bkco-tt-word-spacing-m, var(--bkco-tt-word-spacing-t, var(--bkco-tt-word-spacing-d, normal)));
  }
  .bkco-body {
    font-size: var(--bkco-tb-font-size-m, var(--bkco-tb-font-size-t, var(--bkco-tb-font-size-d, .95em)));
    line-height: var(--bkco-tb-line-height-m, var(--bkco-tb-line-height-t, var(--bkco-tb-line-height-d, 1.6)));
    letter-spacing: var(--bkco-tb-letter-spacing-m, var(--bkco-tb-letter-spacing-t, var(--bkco-tb-letter-spacing-d, normal)));
    word-spacing: var(--bkco-tb-word-spacing-m, var(--bkco-tb-word-spacing-t, var(--bkco-tb-word-spacing-d, normal)));
  }
}

/* Editor */
.wp-block-blockenberg-callout .bkco-title,
.wp-block-blockenberg-callout .bkco-body { outline: none; }