/* ==========================================================================
 * 船联汇 VesselNexus — B1 Content Area Styles
 * ==========================================================================
 * §1. Content Layout (2-col sidebar + narrow full-width)
 * §2. Entry Typography (heading, paragraph, list, blockquote, table, code)
 * §3. Post Meta & Featured Image
 * §4. WordPress Block Editor Alignments
 * §5. Breadcrumbs
 *
 * 依赖: vnx-design-tokens.css
 * @package VesselNexus
 * @version 2.1.0
 * ========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════
   §1. CONTENT LAYOUT
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-content-layout {
  display: flex;
  gap: var(--vnx-space-8);
  max-width: var(--vnx-content-max-width);
  margin: 0 auto;
  padding: calc(var(--vnx-header-height) + var(--vnx-space-8)) var(--vnx-container-padding) var(--vnx-space-16);
}

.vnx-content-layout__main {
  flex: 1;
  min-width: 0; /* prevent flex overflow */
}

.vnx-content-layout__sidebar {
  width: var(--vnx-sidebar-width);
  flex-shrink: 0;
}

/* ── Narrow (full-width, no sidebar) ── */
.vnx-content-layout--narrow .vnx-content-layout__main {
  max-width: var(--vnx-content-narrow);
  margin: 0 auto;
}

/* ── Full-width (no sidebar, no max-width) ── */
.vnx-content-layout--full .vnx-content-layout__main {
  max-width: none;
}

/* ── Mobile: sidebar drops below ── */
@media (max-width: 1023px) {
  .vnx-content-layout {
    flex-direction: column;
    padding-top: calc(var(--vnx-header-height-mobile) + var(--vnx-space-6));
  }

  .vnx-content-layout__sidebar {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   §2. ENTRY TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-entry {
  font-family: var(--vnx-font-family-body);
  font-size: var(--vnx-text-base);
  line-height: var(--vnx-leading-relaxed);
  color: var(--vnx-text-primary);
  word-wrap: break-word;
}

/* ── Entry Header ── */
.vnx-entry__header {
  margin-bottom: var(--vnx-space-8);
}

.vnx-entry__title {
  font-family: var(--vnx-font-family-heading);
  font-size: var(--vnx-text-3xl);
  font-weight: var(--vnx-font-bold);
  color: var(--vnx-text-primary);
  margin: 0 0 var(--vnx-space-3);
  line-height: var(--vnx-leading-tight);
}

.vnx-entry__title a {
  color: inherit;
  text-decoration: none;
}
.vnx-entry__title a:hover {
  color: var(--vnx-ocean-500);
}

/* ── Entry Meta ── */
.vnx-entry__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vnx-space-4);
  font-size: var(--vnx-text-sm);
  color: var(--vnx-text-tertiary);
  margin-bottom: var(--vnx-space-4);
}

.vnx-entry__meta a {
  color: var(--vnx-text-secondary);
  text-decoration: none;
  font-weight: var(--vnx-font-medium);
}
.vnx-entry__meta a:hover {
  color: var(--vnx-ocean-500);
}

.vnx-entry__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--vnx-space-1);
}

/* ── Entry Featured Image ── */
.vnx-entry__thumbnail {
  margin-bottom: var(--vnx-space-8);
  border-radius: var(--vnx-radius-xl);
  overflow: hidden;
  aspect-ratio: 21 / 9;
  background: var(--vnx-gray-100);
}

.vnx-entry__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Entry Content Typography ── */
.vnx-entry__content {
  font-size: var(--vnx-text-base);
  line-height: var(--vnx-leading-relaxed);
}

/* Headings within content */
.vnx-entry__content h1,
.vnx-entry__content h2,
.vnx-entry__content h3,
.vnx-entry__content h4,
.vnx-entry__content h5,
.vnx-entry__content h6 {
  font-family: var(--vnx-font-family-heading);
  color: var(--vnx-text-primary);
  margin: var(--vnx-space-8) 0 var(--vnx-space-4);
  line-height: var(--vnx-leading-tight);
}

.vnx-entry__content h1 { font-size: var(--vnx-text-4xl); font-weight: var(--vnx-font-extrabold); }
.vnx-entry__content h2 { font-size: var(--vnx-text-3xl); font-weight: var(--vnx-font-bold); }
.vnx-entry__content h3 { font-size: var(--vnx-text-2xl); font-weight: var(--vnx-font-semibold); }
.vnx-entry__content h4 { font-size: var(--vnx-text-xl);  font-weight: var(--vnx-font-semibold); }
.vnx-entry__content h5 { font-size: var(--vnx-text-lg);  font-weight: var(--vnx-font-semibold); }
.vnx-entry__content h6 { font-size: var(--vnx-text-base); font-weight: var(--vnx-font-semibold); color: var(--vnx-text-secondary); }

/* First heading has no top margin */
.vnx-entry__content > *:first-child { margin-top: 0; }

/* Paragraph */
.vnx-entry__content p {
  margin: 0 0 var(--vnx-space-5);
}

/* Lead paragraph */
.vnx-entry__content .vnx-lead {
  font-size: var(--vnx-text-lg);
  color: var(--vnx-text-secondary);
  line-height: var(--vnx-leading-normal);
  margin-bottom: var(--vnx-space-8);
}

/* Links within content */
.vnx-entry__content a {
  color: var(--vnx-ocean-500);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--vnx-ocean-200);
  transition: color var(--vnx-duration-fast), text-decoration-color var(--vnx-duration-fast);
}
.vnx-entry__content a:hover {
  color: var(--vnx-ocean-600);
  text-decoration-color: var(--vnx-ocean-500);
}

/* Bold & Strong */
.vnx-entry__content strong,
.vnx-entry__content b {
  font-weight: var(--vnx-font-semibold);
  color: var(--vnx-text-primary);
}

/* Horizontal rule */
.vnx-entry__content hr {
  border: none;
  height: 1px;
  background: var(--vnx-border-light);
  margin: var(--vnx-space-8) 0;
}

/* ── Lists ── */
.vnx-entry__content ul,
.vnx-entry__content ol {
  margin: 0 0 var(--vnx-space-5);
  padding-left: var(--vnx-space-6);
}

.vnx-entry__content li {
  margin-bottom: var(--vnx-space-2);
}

.vnx-entry__content li::marker {
  color: var(--vnx-ocean-400);
}

.vnx-entry__content ul { list-style-type: disc; }
.vnx-entry__content ul ul { list-style-type: circle; }
.vnx-entry__content ul ul ul { list-style-type: square; }

/* ── Blockquote ── */
.vnx-entry__content blockquote {
  margin: var(--vnx-space-6) 0;
  padding: var(--vnx-space-4) var(--vnx-space-6);
  border-left: 4px solid var(--vnx-gold-500);
  background: var(--vnx-gold-50);
  border-radius: 0 var(--vnx-radius-md) var(--vnx-radius-md) 0;
  font-style: italic;
  color: var(--vnx-text-secondary);
}

.vnx-entry__content blockquote p:last-child {
  margin-bottom: 0;
}

.vnx-entry__content blockquote cite {
  display: block;
  margin-top: var(--vnx-space-2);
  font-size: var(--vnx-text-sm);
  font-style: normal;
  font-weight: var(--vnx-font-medium);
  color: var(--vnx-text-tertiary);
}

/* ── Tables ── */
.vnx-entry__content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--vnx-space-6) 0;
  font-size: var(--vnx-text-sm);
}

.vnx-entry__content thead {
  background: var(--vnx-ocean-50);
}

.vnx-entry__content th {
  padding: var(--vnx-space-3) var(--vnx-space-4);
  text-align: left;
  font-weight: var(--vnx-font-semibold);
  font-family: var(--vnx-font-family-heading);
  color: var(--vnx-text-primary);
  border-bottom: 2px solid var(--vnx-border-default);
}

.vnx-entry__content td {
  padding: var(--vnx-space-3) var(--vnx-space-4);
  border-bottom: 1px solid var(--vnx-border-light);
  color: var(--vnx-text-secondary);
}

.vnx-entry__content tbody tr:hover {
  background: var(--vnx-gray-50);
}

/* ── Code ── */
.vnx-entry__content code {
  font-family: var(--vnx-font-family-mono);
  font-size: 0.875em;
  padding: 2px 6px;
  border-radius: var(--vnx-radius-sm);
  background: var(--vnx-gray-100);
  color: var(--vnx-ocean-700);
}

.vnx-entry__content pre {
  margin: var(--vnx-space-5) 0;
  padding: var(--vnx-space-4);
  border-radius: var(--vnx-radius-md);
  background: var(--vnx-ocean-950);
  color: var(--vnx-ocean-100);
  font-family: var(--vnx-font-family-mono);
  font-size: var(--vnx-text-sm);
  line-height: var(--vnx-leading-snug);
  overflow-x: auto;
}

.vnx-entry__content pre code {
  background: none;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

/* ── Images within content ── */
.vnx-entry__content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--vnx-radius-md);
}

.vnx-entry__content figure {
  margin: var(--vnx-space-6) 0;
}

.vnx-entry__content figcaption {
  margin-top: var(--vnx-space-1);
  font-size: var(--vnx-text-sm);
  color: var(--vnx-text-tertiary);
  text-align: center;
}

/* ── Details / Summary ── */
.vnx-entry__content details {
  margin: var(--vnx-space-4) 0;
  padding: var(--vnx-space-4);
  border: 1px solid var(--vnx-border-light);
  border-radius: var(--vnx-radius-md);
  background: var(--vnx-gray-50);
}

.vnx-entry__content summary {
  font-weight: var(--vnx-font-semibold);
  cursor: pointer;
  user-select: none;
}

/* ── Definition Lists ── */
.vnx-entry__content dt {
  font-weight: var(--vnx-font-semibold);
  color: var(--vnx-text-primary);
  margin-top: var(--vnx-space-4);
}

.vnx-entry__content dd {
  margin-left: var(--vnx-space-5);
  color: var(--vnx-text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════
   §3. ENTRY FOOTER (Tags, Categories, Share)
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-entry__footer {
  margin-top: var(--vnx-space-10);
  padding-top: var(--vnx-space-6);
  border-top: 1px solid var(--vnx-border-light);
}

.vnx-entry__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vnx-space-2);
}

.vnx-entry__tags-label {
  font-size: var(--vnx-text-sm);
  font-weight: var(--vnx-font-semibold);
  color: var(--vnx-text-secondary);
  margin-right: var(--vnx-space-2);
}

.vnx-entry__tags a {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--vnx-radius-full);
  background: var(--vnx-ocean-50);
  color: var(--vnx-ocean-600);
  font-size: var(--vnx-text-xs);
  font-weight: var(--vnx-font-medium);
  text-decoration: none;
  transition: background var(--vnx-duration-fast), color var(--vnx-duration-fast);
}
.vnx-entry__tags a:hover {
  background: var(--vnx-ocean-100);
  color: var(--vnx-ocean-700);
}

/* ═══════════════════════════════════════════════════════════════════════
   §4. POST NAVIGATION (Previous / Next)
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-post-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--vnx-space-4);
  margin-top: var(--vnx-space-10);
  padding-top: var(--vnx-space-6);
  border-top: 1px solid var(--vnx-border-light);
}

.vnx-post-nav__link {
  display: flex;
  flex-direction: column;
  gap: var(--vnx-space-1);
  max-width: 45%;
  text-decoration: none;
  color: var(--vnx-text-secondary);
  font-size: var(--vnx-text-sm);
  transition: color var(--vnx-duration-fast);
}
.vnx-post-nav__link:hover {
  color: var(--vnx-ocean-500);
}

.vnx-post-nav__label {
  font-size: var(--vnx-text-xs);
  color: var(--vnx-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--vnx-tracking-wider);
}

.vnx-post-nav__title {
  font-weight: var(--vnx-font-semibold);
  color: var(--vnx-text-primary);
  font-size: var(--vnx-text-sm);
  line-height: var(--vnx-leading-snug);
}

/* ═══════════════════════════════════════════════════════════════════════
   §5. RELATED POSTS
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-related {
  margin-top: var(--vnx-space-12);
}

.vnx-related__title {
  font-family: var(--vnx-font-family-heading);
  font-size: var(--vnx-text-xl);
  font-weight: var(--vnx-font-bold);
  color: var(--vnx-text-primary);
  margin: 0 0 var(--vnx-space-5);
}

/* ═══════════════════════════════════════════════════════════════════════
   §6. WORDPRESS BLOCK EDITOR ALIGNMENTS
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-entry__content .alignwide {
  margin-left: calc(-10vw);
  margin-right: calc(-10vw);
  max-width: none;
  width: auto;
}

.vnx-entry__content .alignfull {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  max-width: none;
  width: 100vw;
}

/* ── Responsive alignments ── */
@media (max-width: 1023px) {
  .vnx-entry__title {
    font-size: var(--vnx-text-2xl);
  }

  .vnx-entry__content .alignwide {
    margin-left: calc(-1 * var(--vnx-container-padding));
    margin-right: calc(-1 * var(--vnx-container-padding));
  }

  .vnx-entry__content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 639px) {
  .vnx-content-layout {
    padding-left: var(--vnx-space-4);
    padding-right: var(--vnx-space-4);
  }

  .vnx-entry__title {
    font-size: var(--vnx-text-xl);
  }

  .vnx-post-nav {
    flex-direction: column;
  }

  .vnx-post-nav__link {
    max-width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   §7. BREADCRUMBS
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vnx-space-2);
  margin-bottom: var(--vnx-space-5);
  font-size: var(--vnx-text-sm);
  color: var(--vnx-text-tertiary);
}

.vnx-breadcrumbs a {
  color: var(--vnx-text-secondary);
  text-decoration: none;
}
.vnx-breadcrumbs a:hover {
  color: var(--vnx-ocean-500);
}

.vnx-breadcrumbs__sep {
  color: var(--vnx-gray-400);
  user-select: none;
  font-size: var(--vnx-text-xs);
}

/* ═══════════════════════════════════════════════════════════════════════
   §8. PAGE HEADER (Archive / Search titles)
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-page-header {
  margin-bottom: var(--vnx-space-8);
}

.vnx-page-header__title {
  font-family: var(--vnx-font-family-heading);
  font-size: var(--vnx-text-3xl);
  font-weight: var(--vnx-font-bold);
  color: var(--vnx-text-primary);
  margin: 0 0 var(--vnx-space-2);
  line-height: var(--vnx-leading-tight);
}

.vnx-page-header__description {
  font-size: var(--vnx-text-base);
  color: var(--vnx-text-secondary);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   §9. 404 PAGE
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-404 {
  text-align: center;
  padding: var(--vnx-space-16) var(--vnx-space-6);
}

.vnx-404__code {
  font-family: var(--vnx-font-family-display);
  font-size: 8rem;
  font-weight: var(--vnx-font-extrabold);
  color: var(--vnx-ocean-600);
  line-height: 1;
  margin: 0;
}

.vnx-404__wave {
  display: block;
  font-size: 3rem;
  line-height: 0.5;
  color: var(--vnx-ocean-200);
  user-select: none;
}

.vnx-404__title {
  font-family: var(--vnx-font-family-heading);
  font-size: var(--vnx-text-2xl);
  font-weight: var(--vnx-font-bold);
  color: var(--vnx-text-primary);
  margin: var(--vnx-space-6) 0 var(--vnx-space-3);
}

.vnx-404__description {
  font-size: var(--vnx-text-base);
  color: var(--vnx-text-secondary);
  max-width: 480px;
  margin: 0 auto var(--vnx-space-8);
}

.vnx-404__actions {
  display: flex;
  justify-content: center;
  gap: var(--vnx-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--vnx-space-10);
}

.vnx-404__links {
  text-align: left;
  max-width: 400px;
  margin: 0 auto;
  padding-top: var(--vnx-space-8);
  border-top: 1px solid var(--vnx-border-light);
}

.vnx-404__links-title {
  font-size: var(--vnx-text-sm);
  font-weight: var(--vnx-font-semibold);
  color: var(--vnx-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--vnx-tracking-wider);
  margin-bottom: var(--vnx-space-3);
}

.vnx-404__links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--vnx-space-2);
}

.vnx-404__links a {
  color: var(--vnx-ocean-500);
  text-decoration: none;
  font-size: var(--vnx-text-sm);
}
.vnx-404__links a:hover {
  color: var(--vnx-ocean-600);
}

/* ═══════════════════════════════════════════════════════════════════════
   §10. COMMENTS SECTION
   ═══════════════════════════════════════════════════════════════════════ */

.vnx-comments {
  margin-top: var(--vnx-space-12);
  padding-top: var(--vnx-space-8);
  border-top: 1px solid var(--vnx-border-light);
}

/* ── Comments Header ── */
.vnx-comments__header {
  margin-bottom: var(--vnx-space-6);
}

.vnx-comments__title {
  font-family: var(--vnx-font-family-heading);
  font-size: var(--vnx-text-xl);
  font-weight: var(--vnx-font-bold);
  color: var(--vnx-text-primary);
  margin: 0;
}

/* ── Comment List ── */
.vnx-comments__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── Single Comment ── */
.vnx-comment {
  list-style: none;
  padding: 0;
}

.vnx-comment__inner {
  display: flex;
  gap: var(--vnx-space-4);
  padding: var(--vnx-space-5) 0;
  border-bottom: 1px solid var(--vnx-border-light);
}

.vnx-comment:first-child > .vnx-comment__inner {
  padding-top: 0;
}

/* ── Avatar ── */
.vnx-comment__avatar {
  flex-shrink: 0;
}

.vnx-comment__avatar-img {
  width: 48px;
  height: 48px;
  border-radius: var(--vnx-radius-full);
  object-fit: cover;
}

/* ── Comment Body ── */
.vnx-comment__body {
  flex: 1;
  min-width: 0;
}

/* ── Comment Meta ── */
.vnx-comment__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vnx-space-2);
  margin-bottom: var(--vnx-space-2);
}

.vnx-comment__author {
  font-family: var(--vnx-font-family-heading);
  font-size: var(--vnx-text-sm);
  font-weight: var(--vnx-font-semibold);
  color: var(--vnx-text-primary);
}

.vnx-comment__author a {
  color: inherit;
  text-decoration: none;
}

.vnx-comment__time {
  font-size: var(--vnx-text-xs);
  color: var(--vnx-text-tertiary);
}

.vnx-comment__time a {
  color: inherit;
  text-decoration: none;
}

.vnx-comment__time a:hover {
  color: var(--vnx-ocean-500);
}

/* ── Moderation notice ── */
.vnx-comment__moderation {
  font-size: var(--vnx-text-xs);
  font-style: italic;
  color: var(--vnx-gold-700);
  margin: 0 0 var(--vnx-space-2);
}

/* ── Comment Content ── */
.vnx-comment__content {
  font-size: var(--vnx-text-sm);
  line-height: var(--vnx-leading-relaxed);
  color: var(--vnx-text-secondary);
}

.vnx-comment__content p {
  margin: 0 0 var(--vnx-space-2);
}

.vnx-comment__content p:last-child {
  margin-bottom: 0;
}

/* ── Comment Actions ── */
.vnx-comment__actions {
  margin-top: var(--vnx-space-2);
}

.vnx-comment__reply-link a {
  font-size: var(--vnx-text-xs);
  font-weight: var(--vnx-font-semibold);
  color: var(--vnx-ocean-500);
  text-decoration: none;
  transition: color var(--vnx-duration-fast);
}

.vnx-comment__reply-link a:hover {
  color: var(--vnx-ocean-600);
}

/* ── Nested (replies) ── */
.vnx-comment .children {
  list-style: none;
  margin: 0;
  padding-left: var(--vnx-space-8);
}

.vnx-comment .children .vnx-comment__inner {
  border-bottom: 1px solid var(--vnx-border-light);
}

@media (max-width: 639px) {
  .vnx-comment .children {
    padding-left: var(--vnx-space-5);
  }

  .vnx-comment__inner {
    gap: var(--vnx-space-3);
  }
}

/* ── Comment Reply Title ── */
.vnx-comments__reply-title {
  font-family: var(--vnx-font-family-heading);
  font-size: var(--vnx-text-lg);
  font-weight: var(--vnx-font-bold);
  color: var(--vnx-text-primary);
  margin: var(--vnx-space-8) 0 var(--vnx-space-4);
}

/* ── Comment Form ── */
.vnx-comments .comment-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--vnx-space-4);
}

.vnx-comments .comment-form > .vnx-form-group {
  flex: 1 1 100%;
}

.vnx-comments .comment-form .vnx-form-group--half {
  flex: 1 1 calc(50% - var(--vnx-space-2));
  min-width: 200px;
}

.vnx-comments .comment-form .form-submit {
  flex: 1 1 100%;
  margin-top: var(--vnx-space-2);
}

/* ── Logged-in notice ── */
.vnx-comments__logged-in {
  font-size: var(--vnx-text-sm);
  color: var(--vnx-text-tertiary);
  margin-bottom: var(--vnx-space-4);
}

.vnx-comments__logged-in a {
  color: var(--vnx-ocean-500);
}

/* ── Closed notice ── */
.vnx-comments__closed {
  text-align: center;
  padding: var(--vnx-space-6);
  font-size: var(--vnx-text-sm);
  color: var(--vnx-text-tertiary);
  background: var(--vnx-gray-50);
  border-radius: var(--vnx-radius-md);
}