/*
 * project-components.css
 * Shared styles for project detail pages (.bhub-* component classes).
 * Link this file from any project page that uses the code-pane,
 * protocol-packet, or feature-grid components.
 *
 * Usage:
 *   <link rel="stylesheet" href="css/project-components.css">
 */

/* ── Shared card shell ──────────────────────────────── */
.bhub-card-wrap {
  --bhub-bg:           #0d1117;
  --bhub-bg3:          #161b27;
  --bhub-surface:      #1c2333;
  --bhub-border:       #2a3550;
  --bhub-cyan:         #569cd6;
  --bhub-green:        #4ec9b0;
  --bhub-amber:        #dcdcaa;
  --bhub-text:         #cdd9f0;
  --bhub-text-muted:   #6b82a8;
  --bhub-text-dim:     #334466;
  --bhub-protocard-bg: #1c2333;
  --bhub-mono:         'DM Mono', 'Courier New', monospace;
  --bhub-byte-val-color: #fff;
  background: var(--bhub-bg) !important;
  padding: 0 !important;
  overflow: hidden;
  display: flex !important;
  align-items: stretch !important;
  min-height: 360px;
  border: 2px solid var(--bhub-border);
}

/* ── Code pane ──────────────────────────────────────── */
.bhub-code-pane {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bhub-bg3);
  overflow: hidden;
  min-width: 0;
}
.bhub-code-pane-header {
  background: var(--bhub-surface);
  border-bottom: 1px solid var(--bhub-border);
  padding: 0.7rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}
.bhub-code-pane-title {
  font-family: var(--bhub-mono);
  font-size: 0.98rem;
  letter-spacing: 0.08em;
  color: var(--bhub-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.bhub-code-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.bhub-d-r { background: #ff5f57; }
.bhub-d-y { background: #ffbd2e; }
.bhub-d-g { background: #28c840; }
.bhub-pre {
  margin: 0;
  padding: 1.5rem 1.25rem;
  font-family: var(--bhub-mono);
  font-size: 1.03rem;
  line-height: 1.9;
  color: var(--bhub-text);
  white-space: pre;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}

/* syntax tokens */
.bhub-k { color: var(--bhub-cyan); }
.bhub-s { color: var(--bhub-green); }
.bhub-c { color: var(--bhub-text-dim); font-style: italic; }
.bhub-n { color: var(--bhub-amber); }
.bhub-p { color: #e879f9; }

/* ── Protocol grid ──────────────────────────────────── */
.bhub-protocol-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  padding: 1.75rem;
  background: var(--bhub-bg);
  box-sizing: border-box;
}
.bhub-proto-card {
  border: 1px solid var(--bhub-border);
  padding: 1.25rem;
  background: var(--bhub-protocard-bg);
}
.bhub-proto-card.bhub-req { border-top: 2px solid var(--bhub-cyan); }
.bhub-proto-card.bhub-res { border-top: 2px solid var(--bhub-green); }
.bhub-proto-title {
  font-family: var(--bhub-mono);
  font-size: 0.88rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bhub-text-muted);
  margin-bottom: 0.9rem;
}
.bhub-proto-bytes {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.bhub-byte-box {
  font-family: var(--bhub-mono);
  font-size: 0.92rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--bhub-border);
  background: var(--bhub-bg3);
  text-align: center;
  min-width: 36px;
}
.bhub-byte-val  { color: var(--bhub-byte-val-color); font-weight: 700; display: block; }
.bhub-byte-desc { color: var(--bhub-text-dim); font-size: 0.8rem; margin-top: 0.1rem; display: block; }
.bhub-byte-box.bhub-b-cyan  { border-color: var(--bhub-cyan); }
.bhub-byte-box.bhub-b-green { border-color: var(--bhub-green); }
.bhub-byte-box.bhub-b-amber { border-color: var(--bhub-amber); }
.bhub-byte-box.bhub-b-mag   { border-color: #e879f9; }
.bhub-proto-consts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.bhub-proto-const {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--bhub-mono);
  font-size: 0.97rem;
}
.bhub-pkey { color: var(--bhub-cyan); min-width: 40px; }
.bhub-pval { color: var(--bhub-text-muted); }
.bhub-proto-note {
  margin-top: 0.9rem;
  font-family: var(--bhub-mono);
  font-size: 0.94rem;
  color: var(--bhub-text-muted);
  line-height: 1.7;
}
.bhub-proto-note code {
  color: var(--bhub-cyan);
  font-family: var(--bhub-mono);
}

@media (max-width: 768px) {
  .bhub-protocol-grid { grid-template-columns: 1fr; gap: 1rem; padding: 1.25rem; }
  .bhub-proto-bytes { gap: 3px; }
  .bhub-byte-box { font-size: 0.76rem; min-width: 28px; padding: 0.2rem 0.3rem; }
  .bhub-byte-desc { font-size: 0.66rem; }
  .bhub-proto-title { font-size: 0.78rem; letter-spacing: 0.1em; }
  .bhub-proto-const { font-size: 0.85rem; }
  .bhub-proto-note { font-size: 0.82rem; }
}

@media (max-width: 575px) {
  .bhub-card-wrap { min-height: 220px; }
  .bhub-pre { font-size: 0.82rem; padding: 1rem; line-height: 1.75; }
  .bhub-code-pane-title { font-size: 0.8rem; letter-spacing: 0.04em; }
  .bhub-feature-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Feature/tech grid: 3-col square items ──────────── */
.bhub-feature-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  grid-column-gap: 1.25rem !important;
  grid-row-gap: 1.25rem !important;
}
.bhub-feature-grid .mxd-tech-stack-cards__item {
  aspect-ratio: 1;
  overflow: hidden;
}
.bhub-feature-grid .mxd-tech-stack-cards__inner-v2 {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem;
  gap: 0.6rem;
  overflow: hidden;
  justify-content: center;
}
.bhub-feature-grid .mxd-tech-stack-cards__icon {
  flex: 0 0 auto;
  width: 40%;
  aspect-ratio: 1;
  height: unset !important;
  align-self: center;
}
.bhub-feature-grid .mxd-tech-stack-cards__icon img,
.bhub-feature-grid .mxd-tech-stack-cards__icon video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.bhub-feature-grid .mxd-tech-stack-cards__title {
  flex: 0 0 auto;
  overflow: hidden;
  width: 100%;
}
.bhub-feature-grid .mxd-tech-stack-cards__title p {
  font-size: clamp(0.85rem, 1.6vw, 1.1rem);
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
  text-align: center;
  margin: 0;
}
@media only screen and (min-width: 768px) {
  .bhub-feature-grid .mxd-tech-stack-cards__inner-v2 { padding: 1rem; gap: 0.75rem; }
  .bhub-feature-grid .mxd-tech-stack-cards__icon { width: 42%; }
}
@media only screen and (min-width: 1600px) {
  .bhub-feature-grid .mxd-tech-stack-cards__inner-v2 { padding: 1.5rem; gap: 1rem; }
  .bhub-feature-grid .mxd-tech-stack-cards__icon { width: 42%; }
}

/* ── Footer: shrink to content height on project pages ─ */
@media only screen and (min-width: 1200px) {
  #mxd-footer .footer-blocks__column { height: auto !important; }
}

/* ── Light theme overrides ──────────────────────────── */
@media (prefers-color-scheme: light) {
  .bhub-card-wrap {
    --bhub-bg:           #f0f4fa;
    --bhub-bg3:          #e4eaf5;
    --bhub-surface:      #ffffff;
    --bhub-border:       #c0cedf;
    --bhub-cyan:         #0077aa;
    --bhub-green:        #007a47;
    --bhub-amber:        #b36a00;
    --bhub-text:         #1a2a4a;
    --bhub-text-muted:   #4a5f7a;
    --bhub-text-dim:     #8099b8;
    --bhub-protocard-bg: #ffffff;
    --bhub-byte-val-color: #dfdfdf;
  }
}
:root[color-scheme=light] .bhub-card-wrap {
  --bhub-bg:           #ffffff;
  --bhub-bg3:          #ffffff;
  --bhub-surface:      #fbfbfb;
  --bhub-border:       #e1e1e1;
  --bhub-cyan:         #0187d0;
  --bhub-green:        #03a399;
  --bhub-amber:        #b36a00;
  --bhub-text:         #1a2a4a;
  --bhub-text-muted:   #4a5f7a;
  --bhub-text-dim:     #8099b8;
  --bhub-protocard-bg: #fbfbfb;
  --bhub-byte-val-color: #019382;
}
:root[color-scheme=dark] .bhub-card-wrap {
  --bhub-bg:           #161b27;
  --bhub-bg3:          #161b27;
  --bhub-surface:      #1c2333;
  --bhub-border:       #2a3550;
  --bhub-cyan:         #569cd6;
  --bhub-green:        #4ec9b0;
  --bhub-amber:        #dcdcaa;
  --bhub-text:         #cdd9f0;
  --bhub-text-muted:   #6b82a8;
  --bhub-text-dim:     #334466;
  --bhub-protocard-bg: #1c2333;
  --bhub-byte-val-color: #fff;
}