/* VIVID BOOKS — BLOG POST CSS */
.read-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); width: 0%; z-index: 9999; transition: width 0.1s linear; }

/* HERO */
.post-hero { min-height: 65vh; display: flex; align-items: flex-end; position: relative; overflow: hidden; padding: 120px 0 60px; }
.poh-bg { position: absolute; inset: 0; }
.poh-bg-marketing { background: linear-gradient(160deg, #0d0700, #2a1500, #5a3000, rgba(201,169,110,0.3)); }
.poh-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0.25) 100%); }
.poh-content { position: relative; z-index: 2; max-width: 820px; padding: 0 48px; }
.poh-breadcrumb { display: flex; align-items: center; gap: 10px; font-size: 0.75rem; color: rgba(255,255,255,0.5); margin-bottom: 20px; flex-wrap: wrap; }
.poh-breadcrumb a { color: rgba(255,255,255,0.5); transition: color 0.2s; }
.poh-breadcrumb a:hover { color: var(--gold); }
.poh-breadcrumb span:last-child { color: var(--gold); }
.poh-cat { display: inline-block; padding: 5px 14px; background: var(--gold); color: var(--dark); border-radius: 100px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 20px; }
.poh-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.8rem, 4vw, 3.2rem); line-height: 1.2; color: #ffffff; margin-bottom: 28px; }
.poh-meta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.poh-author { display: flex; align-items: center; gap: 12px; }
.poh-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #6B8EAD, #8ACCE8); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: var(--dark); flex-shrink: 0; }
.poh-author strong { display: block; color: var(--cream); font-size: 0.88rem; font-weight: 500; margin-bottom: 2px; }
.poh-author span { font-size: 0.72rem; color: rgba(255,255,255,0.5); }
.poh-details { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: rgba(255,255,255,0.5); }
.poh-dot { color: rgba(255,255,255,0.3); }

/* BODY LAYOUT */
.post-body { padding: 72px 0 100px; }
.post-layout { display: grid; grid-template-columns: 1fr 300px; gap: 64px; align-items: start; }

/* ARTICLE CONTENT */
.post-content { max-width: 680px; }
.post-lead { font-family: var(--font-display); font-size: 1.2rem; font-weight: 400; font-style: italic; color: #1A1410; line-height: 1.75; margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--border-subtle); }
.post-content p { font-size: 0.95rem; color: #3A3228; line-height: 1.9; margin-bottom: 20px; }
.post-content h2 { font-family: var(--font-display); font-size: 1.8rem; font-weight: 400; color: #111009; margin: 44px 0 16px; line-height: 1.3; }
.post-content h2::before { content: '✦'; color: var(--gold); font-size: 0.7rem; margin-right: 12px; vertical-align: middle; }
.post-content h3 { font-size: 1rem; font-weight: 700; color: #111009; margin: 28px 0 10px; letter-spacing: 0.02em; }
.post-content ul { list-style: none; margin: 12px 0 20px; display: flex; flex-direction: column; gap: 10px; }
.post-content ul li { font-size: 0.92rem; color: #3A3228; padding-left: 20px; position: relative; line-height: 1.75; }
.post-content ul li::before { content: '→'; position: absolute; left: 0; color: var(--gold); font-size: 0.75rem; top: 4px; }
.post-content strong { color: var(--cream); font-weight: 600; }

/* Callout boxes */
.post-highlight { display: flex; gap: 16px; align-items: flex-start; padding: 24px 28px; background: linear-gradient(135deg, rgba(201,169,110,0.08), rgba(201,169,110,0.04)); border: 1px solid var(--border); border-radius: 14px; margin: 28px 0; }
.ph-icon { font-size: 1.4rem; flex-shrink: 0; }
.post-highlight p { font-size: 0.9rem; color: #1A1410; line-height: 1.75; margin: 0; font-weight: 500; }
.post-callout { padding: 22px 26px; background: var(--dark-3); border: 1px solid var(--border-subtle); border-left: 3px solid var(--gold); border-radius: 0 12px 12px 0; margin: 28px 0; }
.pc-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.post-callout p { font-size: 0.88rem; color: #2E2820; line-height: 1.75; margin: 0; }

/* Article CTA box */
.post-cta-box { padding: 40px 36px; background: var(--dark-3); border: 1px solid var(--border); border-radius: 20px; text-align: center; margin: 48px 0; position: relative; overflow: hidden; }
.post-cta-box::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, var(--gold-dim), transparent 60%); pointer-events: none; }
.pcb-icon { font-size: 1.8rem; color: var(--gold); display: block; margin-bottom: 16px; }
.post-cta-box h3 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 300; color: var(--cream); margin-bottom: 12px; }
.post-cta-box p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 24px; max-width: 480px; margin-left: auto; margin-right: auto; }
.pcb-link { display: block; margin-top: 14px; font-size: 0.8rem; color: var(--text-muted); transition: color 0.3s; }
.pcb-link:hover { color: var(--gold); }

/* Author bio */
.post-author-bio { display: flex; gap: 20px; align-items: flex-start; padding: 28px 32px; background: var(--dark-3); border: 1px solid var(--border-subtle); border-radius: 16px; margin: 48px 0 32px; }
.pab-avatar { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #6B8EAD, #8ACCE8); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 700; color: var(--dark); flex-shrink: 0; }
.pab-info strong { display: block; color: var(--cream); font-weight: 600; font-size: 0.95rem; margin-bottom: 2px; }
.pab-info span { display: block; font-size: 0.75rem; color: var(--gold); margin-bottom: 10px; }
.pab-info p { font-size: 0.84rem; color: var(--text-muted); line-height: 1.7; margin: 0; }

/* Share */
.post-share { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid var(--border-subtle); }
.post-share span { font-size: 0.8rem; color: var(--text-muted); }
.ps-links { display: flex; gap: 8px; flex-wrap: wrap; }
.ps-btn { padding: 7px 16px; background: var(--dark-4); border: 1px solid var(--border-subtle); border-radius: 100px; font-size: 0.75rem; color: var(--text-muted); transition: border-color 0.3s, color 0.3s; cursor: none; }
.ps-btn:hover { border-color: var(--gold); color: var(--gold); }
.ps-copy.copied { border-color: #4caf50; color: #4caf50; }

/* SIDEBAR */
.post-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 100px; }
.ps-card { background: var(--dark-3); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 24px; }
.psc-title { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border-subtle); }

/* TOC */
.post-toc-nav { display: flex; flex-direction: column; gap: 2px; }
.ptn-link { font-size: 0.8rem; color: var(--text-muted); padding: 7px 10px; border-radius: 7px; transition: background 0.2s, color 0.2s; display: flex; align-items: center; gap: 8px; cursor: none; }
.ptn-link::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--border); flex-shrink: 0; transition: background 0.2s; }
.ptn-link:hover, .ptn-link.active { background: var(--dark-4); color: var(--text); }
.ptn-link.active::before { background: var(--gold); }

/* Newsletter */
.ps-newsletter { }
.psn-icon { font-size: 1.5rem; display: block; margin-bottom: 10px; }
.ps-newsletter h4 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 400; color: var(--cream); margin-bottom: 8px; }
.ps-newsletter p { font-size: 0.8rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 14px; }
.ps-newsletter input { width: 100%; background: var(--dark-4); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 10px 14px; color: var(--text); font-family: var(--font-body); font-size: 0.85rem; outline: none; transition: border-color 0.3s; }
.ps-newsletter input:focus { border-color: rgba(201,169,110,0.4); }
.ps-newsletter input::placeholder { color: rgba(232,228,220,0.25); }
.psn-success { display: none; font-size: 0.82rem; color: var(--gold); padding: 8px 0; }
.psn-success.visible { display: block; }

/* Related posts */
.related-posts { display: flex; flex-direction: column; gap: 16px; }
.rp-item { display: flex; gap: 12px; align-items: flex-start; transition: opacity 0.3s; cursor: none; }
.rp-item:hover { opacity: 0.75; }
.rpi-visual { width: 56px; height: 56px; border-radius: 8px; flex-shrink: 0; }
.rpv-1 { background: linear-gradient(135deg, #001428, #0060a0); }
.rpv-2 { background: linear-gradient(135deg, #0a0a1a, #4040b0); }
.rpv-3 { background: linear-gradient(135deg, #1a0008, #900038); }
.rpi-info h5 { font-size: 0.8rem; font-weight: 500; color: var(--cream); line-height: 1.4; margin-bottom: 4px; }
.rpi-info span { font-size: 0.7rem; color: var(--text-muted); }

/* Sidebar CTA */
.ps-cta-card { border-color: rgba(201,169,110,0.2); position: relative; overflow: hidden; text-align: center; }
.pscc-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(201,169,110,0.08), transparent 60%); pointer-events: none; }
.pscc-icon { font-size: 1.5rem; color: var(--gold); display: block; margin-bottom: 10px; }
.ps-cta-card h4 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 400; color: var(--cream); margin-bottom: 8px; }
.ps-cta-card p { font-size: 0.8rem; color: var(--text-muted); line-height: 1.6; }

/* MORE ARTICLES */
.more-articles { padding: 80px 0 120px; background: var(--dark-2); }
.ma-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ma-card { background: var(--dark-3); border: 1px solid var(--border-subtle); border-radius: 16px; overflow: hidden; transition: border-color 0.4s, transform 0.4s; cursor: none; }
.ma-card:hover { border-color: var(--border); transform: translateY(-4px); }
.mac-visual { height: 150px; }
.macv-1 { background: linear-gradient(160deg, #001428, #003060, #1a60a0); }
.macv-2 { background: linear-gradient(160deg, #0e001a, #300050, #7020a0); }
.macv-3 { background: linear-gradient(160deg, #001a10, #004028, #007550); }
.mac-body { padding: 22px 24px; }
.mac-cat { display: inline-block; padding: 3px 10px; background: var(--gold-dim); border: 1px solid var(--border); border-radius: 100px; font-size: 0.62rem; color: var(--gold); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 10px; }
.mac-body h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; color: var(--cream); line-height: 1.4; margin-bottom: 10px; }
.mac-meta { font-size: 0.75rem; color: var(--text-muted); }

@media (max-width: 1024px) {
  .post-layout { grid-template-columns: 1fr; }
  .post-sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; }
  .ma-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .poh-content { padding: 0 24px; }
  .post-sidebar { grid-template-columns: 1fr; }
  .ma-grid { grid-template-columns: 1fr; }
  .post-author-bio { flex-direction: column; }
}

/* Additional hero backgrounds */
.poh-bg-editing { background: linear-gradient(160deg, #001838, #003878, #1a5898); }
.poh-bg-design { background: linear-gradient(160deg, #1a0030, #400070, #7820b0); }
.poh-bg-publishing { background: linear-gradient(160deg, #001f12, #004830, #007848); }
.poh-bg-branding { background: linear-gradient(160deg, #300018, #700038, #b02870); }

/* ── ILLUSTRATED POST HERO OVERLAYS ── */
/* Decorative SVG-style patterns layered over the hero gradient */
.poh-bg::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(255,255,255,0.06) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.04) 0%, transparent 35%);
  pointer-events: none;
}
.poh-bg::after {
  content: '';
  position: absolute; right: 0; top: 0; bottom: 0; width: 45%;
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 40px,
      rgba(255,255,255,0.015) 40px,
      rgba(255,255,255,0.015) 41px
    );
  pointer-events: none;
}

/* Blog post card images for more-articles section */
.mac-visual { height: 150px; position: relative; overflow: hidden; }
.mac-visual::after {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    -45deg, transparent, transparent 20px,
    rgba(255,255,255,0.03) 20px, rgba(255,255,255,0.03) 21px
  );
}

/* Post sidebar related post visuals */
.rpi-visual { width: 56px; height: 56px; border-radius: 8px; flex-shrink: 0; position: relative; }

/* ── BLOG.HTML FEATURED CARD IMAGE ── */
/* Add a decorative book illustration to featured card */
.bf-visual::after {
  content: '📖';
  position: absolute;
  font-size: 6rem;
  bottom: 60px; right: 40px;
  opacity: 0.15;
  pointer-events: none;
  filter: grayscale(1) brightness(3);
}

/* Blog post card emojis */
.pcv-1::after { content: '📈'; position: absolute; bottom: 12px; right: 12px; font-size: 2rem; opacity: 0.3; }
.pcv-2::after { content: '✏️'; position: absolute; bottom: 12px; right: 12px; font-size: 2rem; opacity: 0.3; }
.pcv-3::after { content: '🎨'; position: absolute; bottom: 12px; right: 12px; font-size: 2rem; opacity: 0.3; }
.pcv-4::after { content: '📚'; position: absolute; bottom: 12px; right: 12px; font-size: 2rem; opacity: 0.3; }
.pcv-5::after { content: '🎤'; position: absolute; bottom: 12px; right: 12px; font-size: 2rem; opacity: 0.3; }
.pcv-6::after { content: '📱'; position: absolute; bottom: 12px; right: 12px; font-size: 2rem; opacity: 0.3; }
.pcv-7::after { content: '✍️'; position: absolute; bottom: 12px; right: 12px; font-size: 2rem; opacity: 0.3; }
.pcv-8::after { content: '📋'; position: absolute; bottom: 12px; right: 12px; font-size: 2rem; opacity: 0.3; }
.pcv-9::after { content: '🖥️'; position: absolute; bottom: 12px; right: 12px; font-size: 2rem; opacity: 0.3; }