/* lp-blog.css — Camika Blog landing (`/blog`)
 *
 * Loaded ALONGSIDE lp-home.css so header / footer / lang dropdown / theme
 * switcher / contact toast styling is reused. This file only owns blog
 * page-specific sections:
 *   - .lpbg-head      (breadcrumb + bilingual h1 + subscribe form + tabs)
 *   - .lpbg-featured  (hero post + sidebar latest 4 posts)
 *   - .lpbg-topics    (chip strip — content discovery, kept per user intent)
 *   - .lpbg-section   (all posts grid + load-more)
 *   - .lpbg-nl        (dark newsletter CTA block)
 *
 * Namespace `.lpbg-*` — collision-free with `.lphome-*` and `.lpsc-*`.
 * border-radius: 0 everywhere (CLAUDE.md global Rule #11).
 * Inherits P5 tokens from lp-home.css via :root[data-page="lp"].
 */

:root[data-page="lp"] {
  --lpbg-active-bg: #1a1a1a;
  --lpbg-active-fg: #ffffff;
  --lpbg-nl-bg: #15130f;
  --lpbg-nl-fg: #f5efe3;
}
:root[data-page="lp"][data-theme="dark"] {
  --lpbg-active-bg: var(--p5-red);
  --lpbg-active-fg: #ffffff;
  --lpbg-nl-bg: #0a0a0f;
  --lpbg-nl-fg: #e8e8e8;
}

/* ─── Shared utilities ─────────────────────────────── */
.lpbg-wrap {
  /* 1504 = 1440 inner content (matches home .lphome-show-grid) + 32px padding
     each side. Same rationale as .lpsc-wrap. */
  max-width: 1504px;
  margin: 0 auto;
  padding: 0 32px;
}
.lpbg-mono {
  font-family: 'Consolas', 'Monaco', 'JetBrains Mono', 'Courier New', monospace;
  letter-spacing: 0.04em;
  font-weight: 500;
}
.lpbg-h-en {
  color: var(--p5-red);
  font-family: 'Playfair Display', 'DM Serif Display', 'Noto Serif SC', Georgia, 'Times New Roman', serif;
  font-weight: 900;
}
.lpbg-h-en-dark {
  color: #ff8e8e;
}

.lpbg-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid transparent;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.lpbg-btn-primary {
  background: var(--p5-red);
  color: #fff;
  border-color: var(--p5-red);
}
.lpbg-btn-primary:hover {
  background: #c42121;
  border-color: #c42121;
}
.lpbg-btn-ghost {
  background: transparent;
  color: var(--p5-text);
  border-color: var(--p5-border-strong);
}
.lpbg-btn-ghost:hover {
  background: var(--p5-bg-alt);
}
.lpbg-btn-lg {
  padding: 13px 22px;
  font-size: 15px;
}

/* ─── Page head ─────────────────────────────────────── */
.lpbg-head {
  padding: 52px 0 28px;
  background: var(--p5-bg-alt);
}

.lpbg-crumb {
  font-size: 12.5px;
  color: var(--p5-muted);
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 20px;
}
.lpbg-crumb .lpbg-mono {
  color: var(--p5-text-secondary);
}
.lpbg-crumb-sep {
  color: var(--p5-border-strong);
}

.lpbg-head-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: end;
}

.lpbg-h1 {
  font-size: clamp(48px, 5.8vw, 96px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin: 0;
  color: var(--p5-text);
}

.lpbg-head-meta {
  padding-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lpbg-head-meta p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--p5-text-secondary);
  margin: 0;
  max-width: 480px;
}

.lpbg-sub-form {
  display: flex;
  align-items: stretch;
  background: var(--p5-card);
  border: 1px solid var(--p5-border-strong);
  padding: 5px 5px 5px 14px;
  gap: 8px;
  max-width: 420px;
}
.lpbg-sub-form input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  color: var(--p5-text);
  min-width: 0;
}
.lpbg-sub-form input::placeholder {
  color: var(--p5-muted);
}
.lpbg-sub-form .lpbg-btn {
  padding: 9px 14px;
  font-size: 13.5px;
}

.lpbg-sub-hint {
  font-size: 11.5px;
  color: var(--p5-muted);
  font-family: 'Consolas', 'Monaco', 'JetBrains Mono', monospace;
}

/* Right-column stats — fills the h1 negative space with content-oriented
   numbers (no subscribe CTA per user intent: form + hint were removed). */
.lpbg-stats {
  display: flex;
  gap: 28px;
  border-top: 1px solid var(--p5-border);
  padding-top: 18px;
}
.lpbg-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lpbg-stat-n {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--p5-text);
}
.lpbg-stat-l {
  font-size: 11.5px;
  color: var(--p5-muted);
  letter-spacing: 0.08em;
  font-family: 'Consolas', 'Monaco', 'JetBrains Mono', monospace;
}

/* Toolbar: tabs only (no right side — user removed search / RSS). */
.lpbg-toolbar {
  margin-top: 36px;
  border-top: 1px solid var(--p5-border);
  padding-top: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.lpbg-tabs {
  display: flex;
  gap: 22px;
  align-items: center;
}
/* Tab style aligned with home Showcase / lp-showcase: red active + underline. */
.lpbg-tab {
  padding: 6px 0;
  font-size: 15px;
  color: var(--p5-text-secondary);
  font-weight: 500;
  background: transparent;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  transition: color 0.12s;
}
.lpbg-tab:hover {
  color: var(--p5-text);
}
.lpbg-tab.is-active {
  color: var(--p5-red);
  font-weight: 600;
}
.lpbg-tab.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--p5-red);
}
.lpbg-tab-count {
  font-size: 11.5px;
  color: var(--p5-muted);
  font-family: 'Consolas', 'Monaco', 'JetBrains Mono', monospace;
}
.lpbg-tab.is-active .lpbg-tab-count {
  color: var(--p5-red);
  opacity: 0.7;
}

/* ─── Featured strip ───────────────────────────────── */
.lpbg-featured {
  padding: 36px 0 24px;
  background: var(--p5-bg);
}

.lpbg-feat-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
}

.lpbg-feat-main {
  background: var(--p5-card);
  border: 1px solid var(--p5-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.lpbg-feat-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  border-bottom: 1px solid var(--p5-border);
  overflow: hidden;
  display: block;
}

.lpbg-hero-cover {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 36% 40%, #d83a2a 0%, #5e1810 35%, #160805 100%);
}
.lpbg-hero-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 9px);
}

.lpbg-feat-body {
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lpbg-feat-tag {
  font-family: 'Consolas', 'Monaco', 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--p5-red);
  font-weight: 700;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lpbg-pulse {
  width: 6px;
  height: 6px;
  background: var(--p5-red);
  box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.16);
}

.lpbg-feat-main h2 {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin: 0;
  color: var(--p5-text);
}
.lpbg-feat-main h2 a:hover {
  color: var(--p5-red);
}

.lpbg-feat-dek {
  font-size: 15px;
  line-height: 1.7;
  color: var(--p5-text-secondary);
  margin: 0;
}

.lpbg-post-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12.5px;
  color: var(--p5-muted);
  margin-top: 6px;
  flex-wrap: wrap;
}
.lpbg-author {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--p5-text-secondary);
  font-weight: 600;
}
.lpbg-avatar {
  width: 22px;
  height: 22px;
  background: var(--dot, var(--p5-red));
  display: inline-block;
  flex-shrink: 0;
}
.lpbg-meta-dot {
  width: 3px;
  height: 3px;
  background: var(--p5-border-strong);
}

/* Sidebar */
.lpbg-feat-side {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lpbg-side-head {
  font-size: 11.5px;
  color: var(--p5-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--p5-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lpbg-side-head a {
  color: var(--p5-text-secondary);
  font-family: inherit;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12.5px;
  font-weight: 600;
}
.lpbg-side-head a:hover {
  color: var(--p5-red);
}

.lpbg-side-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px dashed var(--p5-border);
}
.lpbg-side-item:last-child {
  border-bottom: 0;
}
.lpbg-side-thumb {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
  background: var(--p5-bg-alt);
  border: 1px solid var(--p5-border);
}
.lpbg-side-num {
  font-family: 'Consolas', 'Monaco', 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--p5-muted);
  font-weight: 600;
}
.lpbg-side-title {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.4;
  margin: 4px 0 6px;
  color: var(--p5-text);
}
.lpbg-side-item:hover .lpbg-side-title {
  color: var(--p5-red);
}
.lpbg-side-meta {
  font-size: 11.5px;
  color: var(--p5-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.lpbg-pill {
  font-size: 10.5px;
  color: var(--p5-text-secondary);
  background: var(--p5-bg-alt);
  border: 1px solid var(--p5-border);
  padding: 2px 7px;
  font-weight: 600;
}

/* ─── Topics chip strip ────────────────────────────── */
.lpbg-topics {
  padding: 36px 0;
  border-top: 1px solid var(--p5-border);
  background: var(--p5-card);
}
.lpbg-topics-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.lpbg-topics-lab {
  font-family: 'Consolas', 'Monaco', 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--p5-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-right: 6px;
}
.lpbg-chip {
  padding: 8px 14px;
  border: 1px solid var(--p5-border-strong);
  background: var(--p5-bg);
  font-size: 13px;
  color: var(--p5-text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.lpbg-chip:hover {
  background: var(--p5-card);
  border-color: var(--p5-text);
  color: var(--p5-text);
}
.lpbg-chip-ct {
  font-family: 'Consolas', 'Monaco', 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--p5-muted);
}
.lpbg-chip-accent {
  background: var(--p5-soft-red);
  border-color: transparent;
  color: var(--p5-red);
  font-weight: 600;
}
.lpbg-chip-accent .lpbg-chip-ct {
  color: var(--p5-red);
  opacity: 0.7;
}

/* ─── All posts section ────────────────────────────── */
.lpbg-section {
  padding: 64px 0;
  border-top: 1px solid var(--p5-border);
  background: var(--p5-bg);
}
.lpbg-section-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
}
.lpbg-section-head h2 {
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1;
  margin: 0;
  color: var(--p5-text);
}
.lpbg-section-lede {
  font-size: 14px;
  color: var(--p5-muted);
  max-width: 480px;
  line-height: 1.65;
  margin: 0;
}

.lpbg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 22px;
}

.lpbg-post {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lpbg-post-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--p5-border);
  background: var(--p5-bg-alt);
  display: block;
}
.lpbg-post-thumb:hover {
  border-color: var(--p5-border-strong);
}

.lpbg-post-tag {
  display: inline-block;
  font-size: 11.5px;
  color: var(--p5-red);
  font-weight: 700;
  font-family: 'Consolas', 'Monaco', 'JetBrains Mono', monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lpbg-post h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--p5-text);
}
.lpbg-post h3 a:hover {
  color: var(--p5-red);
}

.lpbg-post-dek {
  margin: 0;
  font-size: 13.5px;
  color: var(--p5-muted);
  line-height: 1.65;
}

.lpbg-read {
  font-size: 12.5px;
  color: var(--p5-muted);
  font-family: 'Consolas', 'Monaco', 'JetBrains Mono', monospace;
}

.lpbg-load-more {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

/* ─── Newsletter CTA (dark block) ──────────────────── */
.lpbg-nl {
  padding: 72px 0;
  border-top: 1px solid var(--p5-border);
  background: var(--p5-bg);
}
.lpbg-nl-inner {
  background: var(--lpbg-nl-bg);
  color: var(--lpbg-nl-fg);
  padding: 48px 56px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.lpbg-nl-inner::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(230, 57, 70, 0.45), transparent 60%);
  filter: blur(10px);
  pointer-events: none;
}
.lpbg-nl-inner h2 {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  max-width: 560px;
  position: relative;
  z-index: 1;
}
.lpbg-nl-inner p {
  margin: 14px 0 0;
  color: rgba(245, 239, 227, 0.7);
  font-size: 14.5px;
  line-height: 1.7;
  max-width: 520px;
  position: relative;
  z-index: 1;
}
.lpbg-nl-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.lpbg-nl-row {
  display: flex;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 5px 5px 5px 16px;
  align-items: center;
  gap: 10px;
}
.lpbg-nl-row input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 14px;
  padding: 10px 0;
}
.lpbg-nl-row input::placeholder {
  color: rgba(245, 239, 227, 0.45);
}
.lpbg-nl-row button {
  background: var(--p5-red);
  color: #fff;
  font-weight: 700;
  padding: 11px 18px;
  font-size: 13.5px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.lpbg-nl-row button:hover {
  background: #c42121;
}
.lpbg-nl-meta {
  font-family: 'Consolas', 'Monaco', 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(245, 239, 227, 0.55);
  letter-spacing: 0.04em;
}

/* ─── Placeholder gradients (CSS-only mock thumbs) ─── */
.lpbg-ph {
  position: absolute;
  inset: 0;
}
.lpbg-ph-dark {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 8px),
    linear-gradient(180deg, #2b2825, #15130f);
}
.lpbg-ph-gold {
  background:
    repeating-linear-gradient(135deg, rgba(120, 90, 30, 0.06) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, #f1e8d2, #e3d3a6);
}
.lpbg-ph-violet {
  background:
    repeating-linear-gradient(135deg, rgba(60, 40, 120, 0.06) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, #cdc6e8, #4e447a);
}
.lpbg-ph-ember {
  background:
    repeating-linear-gradient(135deg, rgba(40, 10, 0, 0.08) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, #3a201a, #0e0805);
}
.lpbg-ph-mint {
  background:
    repeating-linear-gradient(135deg, rgba(40, 80, 60, 0.06) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, #cfe1d1, #5a8a64);
}
.lpbg-ph-ink {
  background:
    repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, #3a3833, #0d0c0a);
}
.lpbg-ph-paper {
  background:
    repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.04) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, #fff, #ece6d5);
}
.lpbg-ph-ash {
  background:
    repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, #dedad1, #7a7468);
}

.lpbg-ph-label {
  position: absolute;
  left: 12px;
  bottom: 12px;
  font-family: 'Consolas', 'Monaco', 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(0, 0, 0, 0.46);
  padding: 3px 7px;
  letter-spacing: 0.04em;
}
.lpbg-ph-label.is-light {
  color: var(--p5-text-secondary);
  background: rgba(255, 255, 255, 0.74);
}

/* ─── Responsive ───────────────────────────────────── */
@media (max-width: 1180px) {
  .lpbg-head-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .lpbg-feat-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .lpbg-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .lpbg-nl-inner {
    grid-template-columns: 1fr;
    padding: 36px 28px;
  }
}
@media (max-width: 768px) {
  .lpbg-wrap {
    padding: 0 18px;
  }
  .lpbg-grid {
    grid-template-columns: 1fr;
  }
  .lpbg-feat-main h2 {
    font-size: 24px;
  }
}