/* ============================================================
   overrides.css — project-level overrides (cyber.css is frozen)
   Loaded after cyber.css via [params.custom_css].
   ============================================================ */

/* --- Post card stretched-link overlay --- */

.post-card__link {
  color: inherit;          /* keep title color (white -> cyan on hover), not the base <a> cyan */
  text-decoration: none;
}

.post-card__link::after {
  content: "";
  position: absolute;
  inset: 0;                /* stretches to .post-card, the nearest positioned ancestor */
  z-index: 2;              /* above content, below corner brackets (3) and tag pills (4) */
}

.post-card .tag-pills {
  position: relative;
  z-index: 4;              /* keep tag links above the overlay so they stay clickable */
}

/* --- Post card: horizontal list layout --- */

.posts-grid {
  grid-template-columns: 1fr;
}

.post-card {
  flex-direction: row;
  align-items: center;
  gap: var(--space-md);
}

.post-thumb {
  width: 112px;
  flex: 0 0 112px;
  margin: 0;
}

.post-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1 1 auto;
  min-width: 0;            /* let body shrink and excerpt clamp inside the flex row */
}

@media (max-width: 480px) {
  .post-thumb {
    width: 64px;
    flex-basis: 64px;
  }
}

/* --- Single post: TOC framed as a cut-corner card --- */

.post-toc {
  position: relative;
  margin-top: var(--space-md);
  background-color: var(--bg-card);
  border: 1px solid var(--bg-border);
  padding: var(--space-md) var(--space-lg);
  clip-path: polygon(
    0 0,
    calc(100% - var(--card-cut)) 0,
    100% var(--card-cut),
    100% 100%,
    var(--card-cut) 100%,
    0 calc(100% - var(--card-cut))
  );
}

.post-toc::before,
.post-toc::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(0, 240, 255, 0.3);
  pointer-events: none;
}

.post-toc::before {
  top: 2px;
  left: 2px;
  border-right: none;
  border-bottom: none;
}

.post-toc::after {
  right: 2px;
  bottom: 2px;
  border-top: none;
  border-left: none;
}

/* --- Code blocks: wrap long lines instead of horizontal scroll --- */

.cyber-terminal__body pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-x: hidden;
}

.cyber-terminal__body pre code > span {
  display: block !important;   /* beat Chroma's inline display:flex so each line stacks and wraps */
}

/* --- Post body: justified paragraph text --- */

.post-content p {
  text-align: justify;
}