/* ============================================================
   Purple Bunny Marketing — Single Post Styles
   ============================================================ */

:root {
  --pb-purple:       #5a4092;
  --pb-purple-dark:  #3d2b6e;
  --pb-orange:       #ff914d;
  --pb-grad-start:   #fa6f17;
  --pb-grad-end:     #fd9555;
  --pb-gradient:     linear-gradient(135deg, #fa6f17 0%, #fd9555 100%);
  --pb-white:        #ffffff;
  --pb-off-white:    #faf9fc;
  --pb-border:       #e4dff0;
  --pb-text:         #2d2d2d;
  --pb-text-muted:   #6b6b6b;
  --pb-font-body:    'Libre Franklin', sans-serif;
  --pb-font-display:   'Libre Franklin', sans-serif;
  --pb-font-heart-one: 'Have Heart One', cursive;
  --pb-font-heart-two: 'Have Heart Two', cursive;
  --pb-content-width: 760px;
}

/* ── Hero — image only, no text overlay ─────────────────── */

.pb-single-hero {
  width: 100%;
  max-height: 650px;
  overflow: hidden;
  display: block;
  line-height: 0;
}

.pb-single-hero-img {
  width: 100%;
  height: 650px;
  object-fit: cover;
  object-position: center center;
  display: block;
}

@media (max-width: 768px) {
  .pb-single-hero,
  .pb-single-hero-img {
    height: 380px;
    max-height: 380px;
  }
}

/* ── Post header below the hero ─────────────────────────── */

.pb-single-post-header {
  background: var(--pb-white);
  border-bottom: 1px solid var(--pb-border);
  padding: 40px 24px 36px;
}

.pb-single-post-header-inner {
  max-width: var(--pb-content-width);
  margin: 0 auto;
}

/* Tags */
.pb-single-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.pb-single-tag {
  display: inline-block;
  padding: 5px 14px;
  background: var(--pb-gradient);
  color: var(--pb-white);
  border-radius: 50px;
  font-family: var(--pb-font-body);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: opacity 0.2s;
}

.pb-single-tag:hover {
  opacity: 0.85;
  color: var(--pb-white);
}

/* ── Post title ──────────────────────────────────────────── */

.pb-single-title {
  font-family: var(--pb-font-display);
  font-size: clamp(26px, 4vw, 44px);
  font-weight: 800;
  color: var(--pb-purple);
  margin: 0 0 20px;
  line-height: 1.2;
}

/* ── Post meta row ───────────────────────────────────────── */

.pb-single-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--pb-text-muted);
  font-family: var(--pb-font-body);
  font-size: 13.5px;
}

.pb-single-meta-sep {
  color: var(--pb-border);
}

.pb-single-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pb-single-meta svg {
  flex-shrink: 0;
  opacity: 0.8;
}

/* ── No featured image fallback hero ────────────────────── */

.pb-single-hero--no-image {
  background: var(--pb-purple-dark);
  min-height: 320px;
}

/* ── Article body wrapper ────────────────────────────────── */

.pb-single-wrap {
  max-width: var(--pb-content-width);
  margin: 0 auto;
  padding: 52px 24px 80px;
  font-family: var(--pb-font-body);
  color: var(--pb-text);
}

/* Back to blog link */
.pb-back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--pb-purple);
  font-family: var(--pb-font-body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 40px;
  transition: gap 0.2s, color 0.2s;
}

.pb-back-link:hover {
  color: var(--pb-orange);
  gap: 10px;
}

/* ── Post content typography ─────────────────────────────── */

.pb-single-content {
  font-size: 17px;
  line-height: 1.78;
  color: var(--pb-text);
}

.pb-single-content h2 {
  font-family: var(--pb-font-display);
  font-size: clamp(22px, 3vw, 30px);
  color: var(--pb-purple);
  margin: 48px 0 16px;
  line-height: 1.25;
}

.pb-single-content h3 {
  font-family: var(--pb-font-display);
  font-size: clamp(18px, 2.5vw, 24px);
  color: var(--pb-purple);
  margin: 36px 0 12px;
}

.pb-single-content h4 {
  font-family: var(--pb-font-body);
  font-size: 18px;
  font-weight: 700;
  color: var(--pb-text);
  margin: 28px 0 10px;
}

.pb-single-content p {
  margin: 0 0 22px;
}

.pb-single-content a {
  color: var(--pb-purple);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.pb-single-content a:hover {
  color: var(--pb-orange);
}

.pb-single-content ul,
.pb-single-content ol {
  padding-left: 24px;
  margin: 0 0 22px;
}

.pb-single-content li {
  margin-bottom: 8px;
}

.pb-single-content ul li::marker {
  color: var(--pb-orange);
}

.pb-single-content ol li::marker {
  color: var(--pb-purple);
  font-weight: 700;
}

.pb-single-content blockquote {
  margin: 36px 0;
  padding: 24px 28px;
  border-left: 4px solid var(--pb-orange);
  background: rgba(90, 64, 146, 0.04);
  border-radius: 0 8px 8px 0;
  font-size: 18px;
  font-style: italic;
  color: var(--pb-purple-dark);
}

.pb-single-content blockquote p:last-child {
  margin-bottom: 0;
}

.pb-single-content img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 24px 0;
}

.pb-single-content pre,
.pb-single-content code {
  background: var(--pb-off-white);
  border: 1px solid var(--pb-border);
  border-radius: 6px;
  font-size: 14px;
}

.pb-single-content code {
  padding: 2px 6px;
}

.pb-single-content pre {
  padding: 20px;
  overflow-x: auto;
}

.pb-single-content hr {
  border: none;
  border-top: 2px solid var(--pb-border);
  margin: 48px 0;
}

/* ── Footer tag row ──────────────────────────────────────── */

.pb-single-footer {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 2px solid var(--pb-border);
}

.pb-single-footer-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--pb-text-muted);
  margin-bottom: 12px;
  font-family: var(--pb-font-body);
}

.pb-single-footer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pb-single-footer-tag {
  display: inline-block;
  padding: 8px 20px;
  border: 2px solid var(--pb-purple);
  border-radius: 50px;
  color: var(--pb-purple);
  font-family: var(--pb-font-body);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.pb-single-footer-tag:hover {
  background: var(--pb-purple);
  color: var(--pb-white);
}

/* ── Related posts ───────────────────────────────────────── */

.pb-related {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 80px;
  font-family: var(--pb-font-body);
}

.pb-related-heading {
  font-family: var(--pb-font-display);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  color: var(--pb-purple);
  margin: 0 0 32px;
  text-align: center;
}

.pb-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Related posts re-use .pb-blog-card styles from archive CSS,
   so we import that file on single posts too. */

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 860px) {
  .pb-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .pb-single-hero {
    min-height: 340px;
  }

  .pb-related-grid {
    grid-template-columns: 1fr;
  }

  .pb-single-wrap {
    padding: 36px 16px 60px;
  }

  .pb-related {
    padding: 0 16px 60px;
  }
}