/* GfG POTD post styles (black & white cyberpunk) */
/* Link after CSS/style.css */

.hero.hero-min { min-height: 42vh; }

/* Breadcrumbs + meta */
.breadcrumbs { color: var(--muted-weak, rgba(255,255,255,0.52)); font-size: .9rem; }
.breadcrumbs a { color: var(--muted, rgba(255,255,255,0.7)); }
.breadcrumbs a:hover { color: var(--fg, #fff); text-decoration: underline; }
.post-meta {
  color: var(--muted-weak, rgba(255,255,255,0.52));
  margin-top: .25rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .9rem;
}

/* Section */
.post-section { padding: clamp(2rem, 5vw, 3rem) 0 clamp(3rem, 6vw, 4rem); }
.post-card .excerpt { color: var(--muted, rgba(255,255,255,0.75)); margin: .4rem 0 1rem; }

/* Generic block inside post card */
.block + .example,
.example + .example,
.example + .code,
.code + .note,
.note + .post-nav { margin-top: .9rem; }

/* Example block */
.example .card-inner { padding: .9rem 1rem; }
.example .excerpt { margin: .2rem 0 0; }

/* Code block */
.code-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .45rem;
}
.copy-btn {
  appearance: none; border: var(--border-w, 1px) solid var(--line, rgba(255,255,255,0.12));
  background: var(--glass, rgba(255,255,255,0.04));
  color: var(--fg, #fff);
  border-radius: 8px; padding: .35rem .6rem; cursor: pointer;
}
.copy-btn:hover { background: rgba(255,255,255,0.08); }

pre.code-pre {
  margin: 0;
  padding: .9rem 1rem;
  border-radius: 12px;
  border: var(--border-w, 1px) solid var(--line, rgba(255,255,255,0.12));
  background: rgba(255,255,255,0.04);
  overflow: auto;
}
pre code {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .95rem;
  color: var(--fg, #fff);
  white-space: pre;
}

/* Note */
.note .card-inner { padding: .85rem 1rem; }
.note p { margin: 0 0 .4rem; color: var(--muted, rgba(255,255,255,0.75)); }
.note pre { margin: .4rem 0 0; }

/* Post nav */
.post-nav {
  display: flex; gap: .5rem; margin-top: 1rem; justify-content: flex-end;
}
@media (max-width: 640px) { .post-nav { justify-content: flex-start; } }