/* ============================================================
   VOLUM TECHNOLOGIES — Individual Post / Article Page
   ============================================================ */

/* ── POST HERO ── */
.post-hero {
  background: #000;
  padding: 100px clamp(1.5rem, 5vw, 4rem) clamp(3rem, 5vw, 4rem);
  position: relative; overflow: hidden;
}
.post-hero::before {
  content: '';
  position: absolute; top: -180px; left: 50%; transform: translateX(-50%);
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,152,253,0.05) 0%, transparent 65%);
  pointer-events: none;
}
.post-hero-inner { max-width: 780px; margin: 0 auto; position: relative; z-index: 1; }

.post-breadcrumb {
  display: flex; align-items: center; gap: 0.5rem; text-transform: uppercase;
  font-size: 0.72rem; font-weight: 400;
  color: rgba(255,255,255,0.32);
  margin-bottom: 1.75rem;
}
.post-breadcrumb a { color: rgba(255,255,255,0.32); text-decoration: none; transition: color 0.2s; }
.post-breadcrumb a:hover { color: var(--primary); }
.post-breadcrumb svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; }

.post-tag-row { margin-bottom: 1.25rem; }

.post-title {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 700; line-height: 1.1; letter-spacing: -0.03em;
  margin-bottom: 1.5rem;
}
.post-meta {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  font-size: 0.75rem; font-weight: 400;
  color: rgba(255,255,255,0.32);
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.post-meta span { display: flex; align-items: center; gap: 0.4rem; }
.post-meta svg {
  width: 13px; height: 13px;
  stroke: currentColor; fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

/* ── COVER IMAGE ── */
.post-cover-section {
  background: #000;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
}
.post-cover-inner { max-width: 1100px; margin: 0 auto; }
.post-cover {
  border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.07);
  max-height: 500px;
}
.post-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-cover-placeholder {
  height: 360px;
  background: linear-gradient(160deg, #06101f 0%, #030810 100%);
  background-image: radial-gradient(circle, rgba(0,152,253,0.14) 1px, transparent 1px);
  background-size: 28px 28px;
  display: flex; align-items: center; justify-content: center;
}
.post-cover-placeholder svg {
  width: 60px; height: 60px; opacity: 0.12;
  stroke: var(--primary); fill: none;
  stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;
}

/* ── ARTICLE BODY ── */
.post-body-section {
  background: #000;
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem) clamp(5rem, 10vw, 8rem);
}
.post-body-inner { max-width: 780px; margin: 0 auto; }

/* Prose styles */
.post-body { font-size: 0.97rem; font-weight: 300; line-height: 1.85; color: rgba(255,255,255,0.72); }
.post-body p { margin-bottom: 1.5rem; }
.post-body p:last-child { margin-bottom: 0; }
.post-body strong { color: rgba(255,255,255,0.88); font-weight: 500; }
.post-body em { font-style: italic; color: rgba(255,255,255,0.6); }
.post-body a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(0,152,253,0.4); }
.post-body a:hover { text-decoration-color: var(--primary); }

.post-body h2 {
  font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em;
  color: #fff; margin: 2.5rem 0 1rem;
}
.post-body h3 {
  font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em;
  color: rgba(255,255,255,0.88); margin: 2rem 0 0.75rem;
}
.post-body ul, .post-body ol {
  padding-left: 1.5rem; margin-bottom: 1.5rem;
}
.post-body li { margin-bottom: 0.5rem; }
.post-body ul li::marker { color: var(--primary); }

/* Pull quote / highlight block */
.post-highlight {
  border-left: 2px solid var(--primary);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
  background: rgba(0,152,253,0.04);
  border-radius: 0 6px 6px 0;
  font-size: 1rem; font-weight: 400; line-height: 1.7;
  color: rgba(255,255,255,0.68);
}

/* ── POST FOOTER ── */
.post-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 3rem; padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  flex-wrap: wrap; gap: 1rem;
}
.post-back {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.4); text-decoration: none;
  transition: color 0.2s;
}
.post-back:hover { color: var(--primary); }
.post-back svg {
  width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2;
  transition: transform 0.2s;
}
.post-back:hover svg { transform: translateX(-3px); }
.post-share {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.72rem; color: rgba(255,255,255,0.28);
}
.post-share a {
  color: rgba(255,255,255,0.35); text-decoration: none;
  transition: color 0.2s;
}
.post-share a:hover { color: var(--primary); }

/* ── IN-ARTICLE FIGURE ── */
.post-figure {
  margin: 2.5rem 0;
  border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.07);
}
.post-figure img { width: 100%; display: block; object-fit: cover; }
.post-figure figcaption {
  padding: 0.65rem 1rem;
  font-size: 0.78rem; color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.03);
}

/* ── RESPONSIVE ── */
@media (max-width: 700px) {
  .post-meta { gap: 1rem; }
  .post-cover-placeholder { height: 220px; }
}