/* ════════════════════════════════════════════════════════════════
   NEWS / BLOG CMS
════════════════════════════════════════════════════════════════ */
.blog-wrap { max-width: 720px; margin: 0 auto; padding: 96px 28px 120px; }

.blog-list-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--space-13); gap: var(--space-6); }
.blog-list-title  { font-family: var(--font-display); font-size: var(--heading-sm); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }

/* btn-new, btn-publish, btn-cancel → use gbw system; legacy class kept as alias */
.btn-new { display: inline-flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }

.post-list { display: flex; flex-direction: column; }

.post-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding: 22px 0;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  outline: none;
}
.post-card:first-child { border-top: 1px solid var(--border-subtle); }

/* When a card has a cover image, switch to side-by-side layout */
.post-card:has(.post-card-cover) {
  grid-template-columns: 1fr 140px;
  align-items: center;
}

.post-card-cover {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  grid-row: 1;
  grid-column: 2;
  order: 2;
}

.post-card-body { grid-column: 1; grid-row: 1; }

.post-card-author  { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-5); }
.post-card-author .lnc-avatar { width: 24px; height: 24px; font-size: var(--body-xs); }
.post-card-author .lnc-avatar--3d { width: 24px; height: 24px; border-radius: 0; border: none; overflow: visible; }
.post-card-author .lnc-avatar--logo { width: 24px; height: 24px; }
.post-card-author-name { font-size: var(--body-xs); font-weight: 700; color: var(--text-secondary); letter-spacing: -0.01em; }
.post-card-author-role { font-size: var(--body-xs); font-weight: 700; color: var(--text-on-elevated-muted); }
.post-card-author-role::before { content: '·'; margin-right: 4px; opacity: 0.5; }
.post-card-date    { font-size: var(--body-xs); font-weight: 700; color: var(--text-on-elevated-muted); letter-spacing: 0.02em; margin-bottom: 7px; }
.post-card-title   { font-size: 1.05rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.4; color: var(--text-secondary); margin-bottom: 7px; transition: color 0.15s ease; }
.post-card-excerpt { font-size: var(--body-sm); color: var(--text-on-elevated-muted); line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-card-tags    { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.post-tag          { font-size: var(--body-xs); font-weight: 700; color: var(--text-muted); background: var(--color-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 2px 8px; }

/* Category-specific tag colors (legacy post-tag) */
.post-tag--patch-notes  { color: var(--cat-patch-notes);  border-color: rgba(0,212,146,0.25); background: rgba(0,212,146,0.08); }
.post-tag--server-event { color: var(--cat-server-event); border-color: rgba(97,95,255,0.25); background: rgba(97,95,255,0.08); }
.post-tag--announcement { color: var(--cat-announcement); border-color: rgba(201,160,72,0.25); background: rgba(201,160,72,0.08); }
.post-tag--maintenance  { color: var(--cat-maintenance);  border-color: rgba(255,105,0,0.25); background: rgba(255,105,0,0.08); }

/* Category pills (team-pill variant for news categories) */
.team-pill--patch-notes  { color: var(--cat-patch-notes);  background: rgba(0,212,146,0.12);  border-color: rgba(0,212,146,0.22); }
.team-pill--server-event { color: var(--cat-server-event); background: rgba(97,95,255,0.12);  border-color: rgba(97,95,255,0.22); }
.team-pill--announcement { color: var(--cat-announcement); background: rgba(201,160,72,0.12); border-color: rgba(201,160,72,0.22); }
.team-pill--maintenance  { color: var(--cat-maintenance);  background: rgba(255,105,0,0.12);  border-color: rgba(255,105,0,0.22); }

/* Light theme: stronger text for category pills */
html[data-theme="light"] .team-pill--patch-notes  { color: var(--cat-patch-notes-text); }
html[data-theme="light"] .team-pill--server-event { color: var(--cat-server-event-text); }
html[data-theme="light"] .team-pill--announcement { color: var(--cat-announcement-text); }
html[data-theme="light"] .team-pill--maintenance  { color: var(--cat-maintenance-text); }

.post-card:hover .post-card-title { color: var(--text-primary); }
.post-card:hover .post-card-cover { opacity: 0.85; }
.post-card:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 4px; border-radius: var(--radius-sm); }
.post-card:active { opacity: 0.75; }

@media (max-width: 500px) {
  .post-card:has(.post-card-cover) {
    grid-template-columns: 1fr 100px;
  }
  .post-card-cover { aspect-ratio: 1; }
}

.blog-empty { padding: 72px 0; text-align: center; }
.blog-empty-title { font-size: var(--body-md); font-weight: 500; color: var(--text-secondary); margin-bottom: var(--space-4); }
.blog-empty-sub   { font-size: var(--body-sm); color: var(--text-muted); line-height: 1.6; }

.back-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: none; padding: 0; margin-bottom: var(--space-11);
  font-family: var(--font-sans); font-size: var(--body-xs); font-weight: 500;
  color: var(--text-muted); cursor: pointer; letter-spacing: -0.01em;
  transition: color 0.15s ease;
}

.back-btn:hover { color: var(--text-secondary); }
.back-btn:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; border-radius: var(--radius-xs); }
.back-btn:active { opacity: 0.75; }

.post-cover  { width: 100%; aspect-ratio: 16/7; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); display: block; margin-bottom: var(--space-9); }
.post-meta   { font-size: var(--body-xs); color: var(--text-muted); font-weight: 700; letter-spacing: 0.02em; margin-bottom: var(--space-5); }
.post-title  { font-family: var(--font-display); font-size: clamp(22px, 4vw, 34px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.15; color: var(--text-primary); margin-bottom: var(--space-11); padding-top: 24px; border-top: 1px solid var(--border-subtle); }

/* ── Author block (post detail view) — avatar | info | date+cat ── */
.post-author {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}

.post-author-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--brand-gold-subtle);
  color: var(--brand-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--body-md);
  font-weight: 700;
  flex-shrink: 0;
  border: 1px solid var(--brand-gold-subtle);
  overflow: hidden;
}

/* 3D canvas variant — invisible container, no clipping */
.post-author-avatar--3d {
  width: 42px;
  height: 42px;
  border-radius: 0;
  background: transparent;
  border: none;
  overflow: visible;
}

/* Hycon logo variant */
.post-author-avatar--logo {
  background: var(--color-elevated);
  border-color: var(--border-subtle);
}
.post-author-avatar--logo img {
  width: 70%;
  height: 70%;
  object-fit: contain;
}

.post-author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.post-author-name {
  font-size: var(--body-sm);
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.post-author-role {
  font-size: var(--body-xs);
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

.post-author-meta {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
  font-size: var(--body-xs);
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Inline category pill in meta */
.post-author-meta .team-pill {
  font-size: var(--body-xs);
  padding: 2px 8px;
}

/* ── Prose ── */
.prose { font-size: var(--body-md); line-height: 1.82; color: var(--text-secondary); }
.prose h1,.prose h2,.prose h3,.prose h4 { color: var(--text-primary); font-weight: 700; letter-spacing: -0.025em; margin: 2em 0 0.7em; line-height: 1.2; }
.prose h1 { font-size: 1.75em; } .prose h2 { font-size: 1.4em; } .prose h3 { font-size: 1.15em; }
.prose p  { margin: 0 0 1.15em; }
.prose ul,.prose ol { padding-left: 1.4em; margin: 0 0 1.15em; }
.prose li { margin-bottom: 0.35em; }
.prose strong { color: var(--text-primary); font-weight: 600; }
.prose em     { font-style: italic; }
.prose a      { color: var(--brand-gold); text-decoration: underline; text-underline-offset: 2px; }
.prose code   { background: var(--color-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 2px 6px; font-size: 0.85em; font-family: var(--font-mono); color: var(--text-primary); }
.prose pre    { background: var(--color-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-6) 20px; overflow-x: auto; margin: 0 0 1.15em; }
.prose pre code { background: none; border: none; padding: 0; }
.prose blockquote { border-left: 2px solid var(--border-strong); padding-left: 16px; margin: 0 0 1.15em; color: var(--text-muted); font-style: italic; }
.prose img  { max-width: 100%; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); }
.prose hr   { border: none; border-top: 1px solid var(--border-subtle); margin: 2em 0; }

.post-actions-row { display: flex; gap: var(--space-4); margin-top: var(--space-12); padding-top: 24px; border-top: 1px solid var(--border-subtle); }

/* btn-delete → danger glass alias */
.btn-delete { display: inline-flex; align-items: center; gap: 5px; }

.editor-title-input {
  display: block; width: 100%;
  background: transparent; border: none; outline: none;
  font-family: var(--font-display); font-size: var(--heading-sm); font-weight: 700;
  letter-spacing: -0.035em; color: var(--text-primary);
  margin-bottom: var(--space-7); line-height: 1.2;
}
.editor-title-input::placeholder { color: var(--text-muted); }

.editor-img-input {
  display: block; width: 100%;
  background: var(--color-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 9px 13px;
  font-family: var(--font-sans); font-size: var(--body-xs); color: var(--text-secondary);
  outline: none; margin-bottom: var(--space-6);
  transition: border-color 0.15s ease;
}
.editor-img-input::placeholder { color: var(--text-muted); }
.editor-img-input:focus { border-color: var(--border-strong); }

.editor-tab-row { display: flex; border-bottom: 1px solid var(--border-subtle); }

.ed-tab {
  padding: 8px 16px;
  background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-family: var(--font-sans); font-size: var(--body-xs); font-weight: 700;
  color: var(--text-muted); cursor: pointer; letter-spacing: -0.01em;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.ed-tab:hover { color: var(--text-secondary); }
.ed-tab.active { color: var(--text-primary); border-bottom-color: var(--text-primary); }
.ed-tab:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
.ed-tab:active { opacity: 0.75; }

.editor-textarea {
  display: block; width: 100%; min-height: 300px;
  background: var(--color-elevated);
  border: 1px solid var(--border-subtle); border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: var(--space-6);
  font-family: var(--font-mono); font-size: var(--body-xs); line-height: 1.72;
  color: var(--text-secondary);
  outline: none; resize: vertical;
  transition: border-color 0.15s ease;
}
.editor-textarea::placeholder { color: var(--text-muted); }
.editor-textarea:focus { border-color: var(--border-strong); }

.editor-preview-panel {
  background: var(--color-elevated);
  border: 1px solid var(--border-subtle); border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: var(--space-7); min-height: 300px;
}

.editor-footer { display: flex; justify-content: flex-end; gap: var(--space-4); margin-top: var(--space-6); }

/* btn-cancel / btn-publish → glass aliases (HTML wraps them in gbw/gbw-sm) */


/* ════════════════════════════════════════════════════════════════
   LATEST NEWS — Homepage preview section
════════════════════════════════════════════════════════════════ */
.latest-news-section {
  padding: 96px 28px 80px;
  max-width: 1080px;
  margin: 0 auto;
}

.latest-news-inner {
  text-align: center;
}

.latest-news-section .eyebrow {
  margin-bottom: var(--space-5);
}

.latest-news-section .section-heading {
  margin-bottom: var(--space-14);
}

.latest-news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-8);
  margin-bottom: var(--space-11);
  text-align: left;
}

/* ── News card — mirrors team card structure ── */
.latest-news-card {
  background: var(--color-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  outline: none;
  position: relative;
  display: flex;
  flex-direction: column;
  transition:
    border-color 0.2s ease,
    box-shadow 0.25s ease,
    transform 0.25s var(--ease-bounce);
}

/* Team-card-style hover elevation */
.latest-news-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-8px);
  z-index: 10;
  box-shadow: var(--shadow-card-hover);
}
html[data-theme="dark"] .latest-news-card:hover {
  box-shadow: var(--shadow-card-hover);
}

.latest-news-card:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
}

.latest-news-card:active { opacity: 0.80; }

/* ── Glow pseudo-elements (same as team cards) ── */
.latest-news-card[data-glow]::before {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: radial-gradient(
    300px circle at var(--glow-x) var(--glow-y),
    hsla(var(--glow-hue), 80%, 60%, calc(0.55 * var(--glow-active))),
    transparent 60%
  ) border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
  opacity: var(--glow-active);
  transition: opacity 0.35s ease;
}

.latest-news-card[data-glow]::after {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: radial-gradient(
    150px circle at var(--glow-x) var(--glow-y),
    hsla(0, 0%, 100%, calc(0.10 * var(--glow-active))),
    transparent 50%
  ) border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
  opacity: var(--glow-active);
  transition: opacity 0.35s ease;
}

.lnc-glow-inner {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(
    400px circle at var(--glow-x) var(--glow-y),
    hsla(var(--glow-hue, 35), 80%, 55%, calc(0.12 * var(--glow-active, 0))),
    transparent 60%
  );
  filter: blur(14px);
  opacity: var(--glow-active, 0);
  transition: opacity 0.4s ease;
}

/* ── Cover image ── */
.latest-news-card-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--border-subtle);
}

/* ── Card text body ── */
.latest-news-card-body {
  padding: 18px 20px 14px;
  position: relative;
  flex: 1;
}

/* Category badge — top-right corner of text area */
.latest-news-card-category {
  position: absolute;
  top: 18px;
  right: 20px;
}

.latest-news-card-date {
  font-size: var(--body-xs);
  font-weight: 700;
  color: var(--text-on-elevated-muted);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}

.latest-news-card-title {
  font-size: var(--body-md);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--text-on-elevated-secondary);
  margin-bottom: 6px;
  padding-right: 90px; /* room for category badge */
}

.latest-news-card-excerpt {
  font-size: var(--body-xs);
  color: var(--text-on-elevated-muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.latest-news-card:hover .latest-news-card-title {
  color: var(--brand-gold);
}

/* ── Author footer ── */
.lnc-footer {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: 14px 20px 18px;
  border-top: 1px solid var(--border-subtle);
}

.lnc-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-gold-subtle);
  color: var(--brand-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--body-xs);
  font-weight: 700;
  flex-shrink: 0;
  border: 1px solid var(--brand-gold-subtle);
  overflow: hidden;
}

/* 3D canvas variant — invisible container, no clipping */
.lnc-avatar--3d {
  width: 30px;
  height: 30px;
  border-radius: 0;
  background: transparent;
  border: none;
  overflow: visible;
}

/* Hycon logo variant */
.lnc-avatar--logo {
  background: var(--color-elevated);
  border-color: var(--border-subtle);
}
.lnc-avatar--logo img {
  width: 70%;
  height: 70%;
  object-fit: contain;
}

.lnc-avatar-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.lnc-footer-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.lnc-footer-name {
  font-size: var(--body-xs);
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1;
}

.lnc-footer-role {
  font-size: var(--body-xs);
  font-weight: 700;
  color: var(--text-on-elevated-muted);
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.latest-news-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-4);
}

@media (max-width: 640px) {
  .latest-news-grid {
    grid-template-columns: 1fr;
  }
  .latest-news-card-title {
    padding-right: 0;
  }
  .latest-news-card-category {
    position: static;
    margin-bottom: var(--space-4);
  }
}

/* Disable glow on touch / reduced motion */
@media (hover: none), (pointer: coarse) {
  .latest-news-card[data-glow]::before,
  .latest-news-card[data-glow]::after,
  .lnc-glow-inner { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .latest-news-card { transition: none !important; }
  .latest-news-card[data-glow]::before,
  .latest-news-card[data-glow]::after,
  .lnc-glow-inner { display: none; }
}