/**
 * Single Post Styles
 * Post-specific typography, layout, and components
 */

/* ===================================
   POST HEADER
   =================================== */

.post-header {
  padding-top: var(--space-8);
  padding-bottom: var(--space-6);
}

.post-title {
  margin: 0 0 var(--space-4) 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 64px;
  line-height: 1.2;
  letter-spacing: -0.64px;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

@media (max-width: 768px) {
  .post-title {
    font-size: 48px;
    letter-spacing: -0.48px;
  }
}

@media (max-width: 480px) {
  .post-title {
    font-size: 36px;
    letter-spacing: -0.36px;
  }

  .post-header {
    padding-top: var(--space-5);
    padding-bottom: var(--space-4);
  }

  .post-title {
    margin-bottom: var(--space-2);
  }

  .post-meta {
    padding-top: 0;
  }
}

/* ===================================
   POST META ROW (inside header)
   =================================== */

.post-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-top: var(--space-3);
}

/* Author (Left) */
.post-meta__author {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex: 1 1 auto;
}

.post-meta__avatar {
  flex-shrink: 0;
}

.post-meta__avatar img {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.post-meta__author-text {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: -0.14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.post-meta__author-name {
  font-weight: 700;
}

.post-meta__separator {
  font-weight: 400;
}

.post-meta__author-title {
  font-weight: 400;
}

/* Taxonomy (Right) */
.post-meta__taxonomy {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
}

.post-meta__tag {
  display: inline-block;
  padding: var(--space-0-25) var(--space-0-5); /* 2px 4px */
  background: var(--c-surface);
  color: var(--c-text);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: -0.14px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.post-meta__tag:hover {
  background: var(--c-muted);
  color: var(--c-bg);
}

/* ===================================
   FEATURED IMAGE
   =================================== */

.post-featured-image {
  margin-bottom: 0;
}

.post-featured-image__img {
  width: 100%;
  height: auto;
  display: block;
}

/* Remove bottom margin from featured image captions to avoid double spacing */
.post-featured-image .photo-credit {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .post-featured-image .container {
    padding-left: 0;
    padding-right: 0;
  }

  .post-featured-image .photo-credit {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
}

/* ===================================
   POST CONTENT
   =================================== */

.post-content-wrap {
  padding-top: var(--space-8);
}

.post-content {
  padding-bottom: var(--space-8);
}

.post-content__inner {
  /* No max-width - let individual elements constrain themselves */
  margin-left: auto;
  margin-right: auto;
}

/* Post-only typography (scoped to .post-content) */
.post-content h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 64px;
  line-height: 1.2;
  letter-spacing: -0.64px;
  margin: var(--space-8) 0 var(--space-4) 0;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.post-content h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.3;
  letter-spacing: -0.4px;
  margin: var(--space-6) 0 var(--space-3) 0;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.post-content h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: -0.28px;
  margin: var(--space-5) 0 var(--space-3) 0;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.post-content h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.2px;
  margin: var(--space-4) 0 var(--space-2) 0;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.post-content h5 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.18px;
  margin: var(--space-3) 0 var(--space-2) 0;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.post-content h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.16px;
  margin: var(--space-3) 0 var(--space-2) 0;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.post-content p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: 0;
  margin-bottom: var(--space-4);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.post-content ul,
.post-content ol {
  margin-bottom: var(--space-4);
  padding-left: var(--space-5);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.post-content li {
  margin-bottom: var(--space-2);
  font-size: 20px;
  line-height: 1.6;
}

/* Mobile responsive typography */
@media (max-width: 768px) {
  .post-content h1 {
    font-size: 48px;
    letter-spacing: -0.48px;
  }

  .post-content h2 {
    font-size: 32px;
    letter-spacing: -0.32px;
  }

  .post-content h3 {
    font-size: 24px;
    letter-spacing: -0.24px;
  }

  .post-content h4 {
    font-size: 18px;
    letter-spacing: -0.18px;
  }

  .post-content h5 {
    font-size: 16px;
    letter-spacing: -0.16px;
  }

  .post-content h6 {
    font-size: 15px;
    letter-spacing: -0.15px;
  }

  .post-content p,
  .post-content li {
    font-size: 18px;
  }

  .post-content ul,
  .post-content ol {
    padding-left: var(--space-3);
  }
}

/* ===================================
   IMAGES IN CONTENT
   =================================== */

.post-content img {
  max-width: 900px;
  width: 100%;
  height: auto;
  margin: var(--space-6) auto;
  display: block;
}

/* Large images (1080px) */
.post-content img.is-wide,
.post-content figure.is-wide,
.post-content .wp-block-image.is-wide,
.post-content .is-style-bleed-wide img,
.post-content .is-style-bleed-wide {
  max-width: 1080px;
}

/* Full width images */
.post-content img.is-full,
.post-content figure.is-full,
.post-content .wp-block-image.is-full,
.post-content .is-style-bleed-full img,
.post-content .is-style-bleed-full {
  max-width: 100%;
}

/* Gutenberg image blocks */
.post-content figure.wp-block-image,
.post-content .wp-block-image {
  margin-top: var(--space-6);
  margin-bottom: 0;
  padding-bottom: 0;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* Wider Gutenberg image blocks */
.post-content figure.wp-block-image.is-style-bleed-wide,
.post-content .wp-block-image.is-style-bleed-wide,
.post-content figure.wp-block-image.is-wide,
.post-content .wp-block-image.is-wide {
  max-width: 1080px;
}

/* Full width Gutenberg image blocks */
.post-content figure.wp-block-image.is-style-bleed-full,
.post-content .wp-block-image.is-style-bleed-full,
.post-content figure.wp-block-image.is-full,
.post-content .wp-block-image.is-full {
  max-width: 100%;
}

/* Images inside Gutenberg figures - remove margin, force block display */
.post-content figure.wp-block-image img,
.post-content .wp-block-gallery img {
  display: block;
  height: auto;
  margin: 0;
}

/* Generic figure fallback */
.post-content figure {
  margin-top: var(--space-6);
  margin-bottom: 0;
}

.post-content figcaption {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.4;
  color: var(--c-muted);
  text-align: right;
  margin-top: var(--space-1);
  padding-right: var(--space-2);
}

/* Group and Cover blocks - default width */
.post-content .wp-block-group,
.post-content .wp-block-cover {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* Wider Group and Cover blocks */
.post-content .wp-block-group.is-style-bleed-wide,
.post-content .wp-block-cover.is-style-bleed-wide,
.post-content .wp-block-group.is-wide,
.post-content .wp-block-cover.is-wide {
  max-width: 1080px;
}

/* Override Gutenberg layout constraints for wider blocks */
.post-content .wp-block-group.is-style-bleed-wide > .is-layout-constrained,
.post-content .wp-block-group.is-wide > .is-layout-constrained,
.post-content .wp-block-group.alignwide > .is-layout-constrained {
  max-width: 1080px;
}

/* Full width Group and Cover blocks */
.post-content .wp-block-group.is-style-bleed-full,
.post-content .wp-block-cover.is-style-bleed-full,
.post-content .wp-block-group.is-full,
.post-content .wp-block-cover.is-full {
  max-width: 100%;
}

/* Override Gutenberg layout constraints for full-width blocks */
.post-content .wp-block-group.is-style-bleed-full > .is-layout-constrained,
.post-content .wp-block-group.is-full > .is-layout-constrained,
.post-content .wp-block-group.alignfull > .is-layout-constrained {
  max-width: 100%;
}

/* ===================================
   ALIGNMENT OVERRIDES FOR ALL BLOCKS
   Override WordPress layout constraints
   Make alignwide/alignfull work like custom bleed styles
   =================================== */

/* Wide alignment - 1080px centered */
.post-content .alignwide,
.post-content .wp-block.alignwide,
.post-content figure.alignwide,
.post-content .wp-block-image.alignwide,
.post-content .wp-block-video.alignwide,
.post-content .wp-block-audio.alignwide,
.post-content .wp-block-table.alignwide,
.post-content .wp-block-media-text.alignwide,
.post-content .wp-block-embed.alignwide,
.post-content .wp-block-group.alignwide,
.post-content .wp-block-cover.alignwide,
.post-content .wp-block-columns.alignwide,
.post-content .wp-block-gallery.alignwide {
  width: 100%;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

/* Full width alignment - break out of container, max 1600px, centered */
.post-content .alignfull,
.post-content .wp-block.alignfull,
.post-content figure.alignfull,
.post-content .wp-block-image.alignfull,
.post-content .wp-block-video.alignfull,
.post-content .wp-block-audio.alignfull,
.post-content .wp-block-table.alignfull,
.post-content .wp-block-media-text.alignfull,
.post-content .wp-block-embed.alignfull,
.post-content .wp-block-group.alignfull,
.post-content .wp-block-cover.alignfull,
.post-content .wp-block-columns.alignfull,
.post-content .wp-block-gallery.alignfull {
  width: calc(100vw - (2 * var(--space-3)));
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

@media (min-width: 768px) {
  .post-content .alignfull,
  .post-content .wp-block.alignfull,
  .post-content figure.alignfull,
  .post-content .wp-block-image.alignfull,
  .post-content .wp-block-video.alignfull,
  .post-content .wp-block-audio.alignfull,
  .post-content .wp-block-table.alignfull,
  .post-content .wp-block-media-text.alignfull,
  .post-content .wp-block-embed.alignfull,
  .post-content .wp-block-group.alignfull,
  .post-content .wp-block-cover.alignfull,
  .post-content .wp-block-columns.alignfull,
  .post-content .wp-block-gallery.alignfull {
    width: calc(100vw - (2 * var(--space-5)));
  }
}

@media (min-width: 1024px) {
  .post-content .alignfull,
  .post-content .wp-block.alignfull,
  .post-content figure.alignfull,
  .post-content .wp-block-image.alignfull,
  .post-content .wp-block-video.alignfull,
  .post-content .wp-block-audio.alignfull,
  .post-content .wp-block-table.alignfull,
  .post-content .wp-block-media-text.alignfull,
  .post-content .wp-block-embed.alignfull,
  .post-content .wp-block-group.alignfull,
  .post-content .wp-block-cover.alignfull,
  .post-content .wp-block-columns.alignfull,
  .post-content .wp-block-gallery.alignfull {
    width: calc(100vw - (2 * var(--space-6)));
  }
}

/* Override layout constraints for wide blocks */
.post-content .alignwide > .is-layout-constrained,
.post-content .alignwide .is-layout-constrained,
.post-content .wp-block.alignwide > .is-layout-constrained {
  max-width: 1080px;
}

/* Override layout constraints for full blocks */
.post-content .alignfull > .is-layout-constrained,
.post-content .alignfull .is-layout-constrained,
.post-content .wp-block.alignfull > .is-layout-constrained {
  max-width: 100%;
}

/* Make images inside alignwide blocks fill the 1080px width */
.post-content .alignwide img,
.post-content .wp-block.alignwide img,
.post-content .wp-block-image.alignwide img {
  max-width: 1080px;
  width: 100%;
}

/* Make images inside alignfull blocks fill the full width */
.post-content .alignfull img,
.post-content .wp-block.alignfull img,
.post-content .wp-block-image.alignfull img {
  max-width: 100%;
  width: 100%;
}

/* Make videos fill alignwide/alignfull containers */
.post-content .alignwide video,
.post-content .wp-block-video.alignwide video {
  max-width: 1080px;
  width: 100%;
}

.post-content .alignfull video,
.post-content .wp-block-video.alignfull video {
  max-width: 100%;
  width: 100%;
}

/* Make media-text blocks fill properly */
.post-content .wp-block-media-text.alignwide .wp-block-media-text__media img,
.post-content .wp-block-media-text.alignwide .wp-block-media-text__media video {
  max-width: 100%;
  width: 100%;
}

.post-content .wp-block-media-text.alignfull .wp-block-media-text__media img,
.post-content .wp-block-media-text.alignfull .wp-block-media-text__media video {
  max-width: 100%;
  width: 100%;
}

/* Photo credit from Media Library caption */
.photo-credit {
  display: block;
  margin-top: var(--space-1);
  margin-bottom: var(--space-6);
  text-align: right;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: -0.14px;
  color: var(--c-muted);
}

/* ===================================
   HORIZONTAL RULES
   =================================== */

.post-content hr,
.post-content .wp-block-separator {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}

/* Wider separator blocks */
.post-content hr.alignwide,
.post-content .wp-block-separator.alignwide {
  max-width: 1080px;
}

/* Full width separator blocks */
.post-content hr.alignfull,
.post-content .wp-block-separator.alignfull {
  max-width: 100%;
}

/* ===================================
   VIDEO BLOCKS
   =================================== */

/* Video blocks - default width */
.post-content .wp-block-video,
.post-content .wp-block-embed,
.post-content video {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}

.post-content video {
  display: block;
  width: 100%;
  height: auto;
}

/* Media-text blocks - default width */
.post-content .wp-block-media-text {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}

/* Wider video and media-text blocks */
.post-content .wp-block-video.alignwide,
.post-content .wp-block-embed.alignwide,
.post-content .wp-block-media-text.alignwide {
  max-width: 1080px;
}

/* Full width video and media-text blocks */
.post-content .wp-block-video.alignfull,
.post-content .wp-block-embed.alignfull,
.post-content .wp-block-media-text.alignfull {
  max-width: 100%;
}

/* ===================================
   AUDIO BLOCKS
   =================================== */

.post-content .wp-block-audio,
.post-content audio {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}

.post-content audio {
  display: block;
  width: 100%;
}

.post-content .wp-block-audio.alignwide {
  max-width: 1080px;
}

.post-content .wp-block-audio.alignfull {
  max-width: 100%;
}

/* ===================================
   TABLES
   =================================== */

.post-content table,
.post-content .wp-block-table {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}

.post-content .wp-block-table.alignwide {
  max-width: 1080px;
}

.post-content .wp-block-table.alignfull {
  max-width: 100%;
}

/* ===================================
   CODE BLOCKS
   =================================== */

.post-content pre,
.post-content .wp-block-code,
.post-content .wp-block-preformatted {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}

.post-content .wp-block-code.alignwide,
.post-content .wp-block-preformatted.alignwide {
  max-width: 1080px;
}

.post-content .wp-block-code.alignfull,
.post-content .wp-block-preformatted.alignfull {
  max-width: 100%;
}

/* ===================================
   BUTTONS
   =================================== */

.post-content .wp-block-button,
.post-content .wp-block-buttons {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

.post-content .wp-block-buttons.alignwide {
  max-width: 1080px;
}

.post-content .wp-block-buttons.alignfull {
  max-width: 100%;
}

/* ===================================
   PULLQUOTES
   =================================== */

.post-content .wp-block-pullquote {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}

.post-content .wp-block-pullquote.alignwide {
  max-width: 1080px;
}

.post-content .wp-block-pullquote.alignfull {
  max-width: 100%;
}

/* ===================================
   VERSE & FILE BLOCKS
   =================================== */

.post-content .wp-block-verse,
.post-content .wp-block-file {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

.post-content .wp-block-verse.alignwide,
.post-content .wp-block-file.alignwide {
  max-width: 1080px;
}

.post-content .wp-block-verse.alignfull,
.post-content .wp-block-file.alignfull {
  max-width: 100%;
}

/* ===================================
   COLUMNS
   =================================== */

.post-content .wp-block-columns {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}

.post-content .wp-block-columns.alignwide {
  max-width: 1080px;
}

.post-content .wp-block-columns.alignfull {
  max-width: 100%;
}

/* ===================================
   BLOCKQUOTES
   =================================== */

.post-content blockquote,
.post-content .wp-block-quote {
  position: relative;
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
  padding: 0;
  background: transparent;
  border-left: none;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.post-content blockquote::before,
.post-content .wp-block-quote::before,
.post-content .wp-block-quote.is-layout-flow::before,
.post-content .wp-block-quote.is-style-default::before {
  content: "\201C" !important; /* Left double quotation mark */
  display: block !important;
  padding: var(--space-0-25) var(--space-0-5) !important; /* 2px 4px */
  background: var(--c-surface) !important;
  font-family: var(--font-mono) !important;
  font-size: 32px !important;
  line-height: 1 !important;
  margin-bottom: var(--space-2) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: fit-content !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.post-content blockquote p,
.post-content .wp-block-quote p,
.post-content .wp-block-quote.is-layout-flow p {
  font-family: var(--font-mono) !important;
  font-size: 40px !important;
  font-weight: 100 !important;
  line-height: 1.6 !important; /* 160% */
  letter-spacing: -2.4px !important;
  text-align: center !important;
  color: var(--c-text) !important;
  margin: 0 auto !important;
  max-width: 900px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.post-content blockquote p + p,
.post-content .wp-block-quote p + p {
  margin-top: var(--space-3);
}

.post-content blockquote cite,
.post-content .wp-block-quote cite,
.post-content .wp-block-quote__citation {
  display: block;
  font-family: var(--font-mono);
  font-size: 14px;
  font-style: normal;
  color: var(--c-muted);
  margin-top: var(--space-2);
  padding-left: var(--space-3);
}

@media (max-width: 768px) {
  .post-content blockquote,
  .post-content .wp-block-quote {
    /* Negative margins removed - using max-width + auto margins instead */
  }

  .post-content blockquote p,
  .post-content .wp-block-quote p {
    font-size: 28px !important;
    letter-spacing: -1.4px !important;
  }

  .post-content blockquote cite,
  .post-content .wp-block-quote cite,
  .post-content .wp-block-quote__citation {
    padding-left: var(--space-2);
  }
}

/* ===================================
   CONTINUE READING SECTION
   =================================== */

.post-continue-reading {
  padding-top: var(--space-10);
  padding-bottom: calc(var(--space-10) + 24px);
}

.post-continue-reading__heading {
  margin-bottom: var(--space-6);
}

.post-continue-reading__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .post-continue-reading__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }

  /* Hide 3rd card on mobile (only show 2) */
  .post-continue-reading__grid > *:nth-child(3) {
    display: none;
  }
}

@media (min-width: 1024px) {
  .post-continue-reading__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }

  /* Show 3rd card on desktop */
  .post-continue-reading__grid > *:nth-child(3) {
    display: block;
  }
}

/* Disable stagger animations for continue reading cards */
.post-continue-reading__grid > * {
  animation: none;
  margin-top: 0 !important;
}

/* ===================================
   POST AUTHOR BLOCK
   =================================== */

.post-author {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

@media (min-width: 768px) {
  .post-author {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }
}

@media (min-width: 1024px) {
  .post-author {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

.post-author > .container {
  max-width: 900px;
  padding-left: 0;
  padding-right: 0;
}

.post-author::before {
  content: "";
  display: block;
  max-width: 900px;
  margin: calc(var(--space-8) * -1) auto var(--space-8) auto;
  border-top: 1px solid var(--c-border);
}

.post-author__inner {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}

.post-author__avatar {
  flex-shrink: 0;
}

.post-author__avatar img {
  display: block;
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.post-author__content {
  flex: 1;
}

.post-author__description {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.6;
  color: var(--c-text);
  margin-bottom: var(--space-4);
}

.post-author__description p {
  margin-bottom: var(--space-2);
  font-size: 20px;
}

.post-author__links {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.6;
  color: var(--c-text);
  word-spacing: 0.5em;
}

.post-author__link {
  color: var(--c-text);
  text-decoration: underline;
  transition: color 0.2s ease;
}

.post-author__link:hover {
  color: var(--c-muted);
}

@media (max-width: 768px) {
  .post-author__inner {
    flex-direction: column;
    gap: var(--space-4);
  }

  .post-author__avatar img {
    width: 80px;
    height: 80px;
  }

  .post-author__description {
    font-size: 18px;
  }

  .post-author__description p {
    font-size: 18px;
  }
}

/* Author Overview (for author archive pages) */
.author-overview {
  padding-top: 0;
  padding-bottom: var(--space-8);
}

/* Reuse post-author components but without centering/max-width */
.author-overview .post-author__inner,
.author-overview .post-author__avatar,
.author-overview .post-author__avatar img,
.author-overview .post-author__content,
.author-overview .post-author__description,
.author-overview .post-author__description p,
.author-overview .post-author__links,
.author-overview .post-author__link {
  /* Inherit all styles from .post-author components above */
}

@media (max-width: 768px) {
  .author-overview .post-author__inner {
    flex-direction: column;
    gap: var(--space-4);
  }

  .author-overview .post-author__avatar img {
    width: 80px;
    height: 80px;
  }

  .author-overview .post-author__description {
    font-size: 18px;
  }

  .author-overview .post-author__description p {
    font-size: 18px;
  }
}