/* ==========================================================================
   Post Detail — single-post page layout.
   Layout: content-centered column with sibling sections below (Next Post,
   Related Posts).
   ========================================================================== */

.post-detail-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  max-width: 696px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-large);
  font-family: var(--font-sans);
  color: var(--color-text-primary);
}

.post-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.post-detail__deleted-notice {
  padding: var(--space-default) var(--space-large);
  border: 1px solid var(--color-stroke-error);
  border-radius: var(--border-radius-m);
  background: var(--color-surface-error-weak);
  color: var(--color-text-error);
  font-family: var(--font-sans);
  font-size: var(--font-size-small);
  line-height: var(--line-height-tight);
}

.post-detail__admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-default);
  align-items: center;
  justify-content: flex-start;
}

.post-detail__approve-form {
  margin: 0;
}

.post-detail__pending-badge {
  font-family: var(--font-sans);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-error);
}

.post-detail__figure {
  margin: 0;
}

.post-detail__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--border-radius-l);
}

.post-detail__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-large);
  font-size: var(--font-size-base);
  line-height: var(--line-height-loose);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-secondary);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-stroke-weak);
}

/* Reset the site-wide `p { @apply py-5 }` from frontend/styles.css
   so paragraph rhythm comes from the body's flex `gap`, not from
   each <p> contributing its own 1.25rem of top/bottom padding. */
.post-detail__body p {
  padding-top: 0;
  padding-bottom: 0;
}

.post-detail__body a {
  color: inherit;
  text-decoration: underline;
}

.post-detail__external-url a {
  color: var(--color-text-secondary);
  text-decoration: underline;
  text-underline-position: from-font;
}

.post-detail__body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius-m);
}

.post-detail__body pre,
.post-detail__body code {
  font-family: var(--font-code);
  font-size: var(--font-size-small);
}

.post-detail__body pre {
  padding: var(--space-medium);
  border-radius: var(--border-radius-m);
  background: var(--color-surface-mid);
  overflow-x: auto;
}

.post-detail__body ul,
.post-detail__body ol {
  padding-left: var(--space-large);
  list-style-position: outside;
}

.post-detail__body ul {
  list-style-type: disc;
}

.post-detail__body ol {
  list-style-type: decimal;
}

.post-detail__body ul ul {
  list-style-type: circle;
}

.post-detail__body ol ol,
.post-detail__body ul ol {
  list-style-type: lower-alpha;
}

.post-detail__body h1,
.post-detail__body h2,
.post-detail__body h3,
.post-detail__body h4,
.post-detail__body h5,
.post-detail__body h6 {
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}

.post-detail__body h1 { font-size: var(--font-size-xl); }
.post-detail__body h2 { font-size: var(--font-size-large); }
.post-detail__body h3 { font-size: var(--font-size-medium); }
.post-detail__body h4,
.post-detail__body h5,
.post-detail__body h6 { font-size: var(--font-size-base); }

.post-detail__body b,
.post-detail__body strong {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.post-detail__next,
.post-detail__related {
  display: flex;
  flex-direction: column;
}

/* The first section after the article gets an extra 32px of top spacing
   on top of the page-level 32px gap, totaling 64px (Figma spec). The
   subsequent section (next -> related) keeps the plain 32px gap. */
.post-detail-page > .post-detail + section {
  margin-top: var(--space-xl);
}

/* Inner card-group defaults to max-width: 458px, a tinted background,
   a border, and vertical padding; none of those belong in the
   post-detail context. */
.post-detail__next .card-group,
.post-detail__related .card-group {
  max-width: none;
  background: none;
  border: none;
  padding-top: 0;
  padding-bottom: 0;
}

.post-detail__next .card-group__heading,
.post-detail__related .card-group__heading {
  padding-left: 0;
}

/* Specificity bumped by chaining .card-group--card to beat the
   `.card-group--card .card-group__list { padding: 0 var(--space-card) }`
   rule in card-group.css. */
.post-detail__next .card-group--card .card-group__list,
.post-detail__related .card-group--card .card-group__list {
  padding: 0;
  gap: 0;
}

/* `.card-group--card .card-group__item` (card-group.css) gives each
   item its own background and border-radius. The per-item radius is
   what creates the apparent "indented hairline" between stacked cards
   (rounded corners notch into each other). Strip both so the post-card
   inside controls the visual. */
.post-detail__next .card-group--card .card-group__item,
.post-detail__related .card-group--card .card-group__item {
  background: none;
  border-radius: 0;
}

.post-detail__next .post-card,
.post-detail__related .post-card {
  background: var(--color-surface-weak);
  border: 1px solid var(--color-stroke-weak);
}

.post-detail-page .post-detail__next .post-card__title-block,
.post-detail-page .post-detail__related .post-card__title-block {
  gap: var(--space-s);
}

.post-detail-page .user-profile__header {
  row-gap: var(--space-default);
}

/* Collapse adjacent borders so stacked cards share a single hairline. */
.post-detail__next .card-group__item:not(:first-child) .post-card,
.post-detail__related .card-group__item:not(:first-child) .post-card {
  border-top: none;
}

/* Stacked post-cards: square by default; only the outer two corners of
   the stack are rounded. Single-item lists (e.g. Next Post) end up
   fully rounded since :first-child and :last-child both match. */
.post-detail__next .post-card,
.post-detail__related .post-card {
  border-radius: 0;
}

.post-detail__next .card-group__item:first-child .post-card,
.post-detail__related .card-group__item:first-child .post-card {
  border-top-left-radius: var(--border-radius-xl);
  border-top-right-radius: var(--border-radius-xl);
}

.post-detail__next .card-group__item:last-child .post-card,
.post-detail__related .card-group__item:last-child .post-card {
  border-bottom-left-radius: var(--border-radius-xl);
  border-bottom-right-radius: var(--border-radius-xl);
}

/* Related posts render in a single column across all breakpoints. */
.post-detail__related .card-group__list {
  grid-template-columns: 1fr;
}

/* ---------- Dark mode ---------- */

/* card-group.css applies a grey background in dark mode via
   `html.dark .card-group--default`. That selector is more specific than
   our base override, so we re-strip it here for the post-detail
   sections. */
html.dark .post-detail__next .card-group,
html.dark .post-detail__related .card-group {
  background: none;
}

/* ---------- Breakpoints ---------- */

/* Tablet and desktop: add vertical breathing room */
@media (min-width: 768px) {
  .post-detail-page {
    padding-top: var(--space-xxl);
    padding-bottom: var(--space-xxl);
    padding-left: 0;
    padding-right: 0;
  }
}

/* Tablet only */
@media (min-width: 768px) and (max-width: 1279px) {
  .post-header {
    gap: var(--space-large);
  }
}

/* Mobile */
@media (max-width: 767px) {
  .post-header {
    gap: var(--space-large);
  }
  .post-detail-page {
    gap: var(--space-large);
    padding: var(--space-medium);
    padding-bottom: 64px;
  }
  /* Total gap between article body and the first sibling section is
     64px on mobile (Figma spec). Subtracts the page-level flex gap so
     gap + margin-top = 64. */
  .post-detail-page > .post-detail + section {
    margin-top: calc(64px - var(--space-large));
  }
}