/**
 * Página de post do blog - XSALT
 * Hero com imagem, título centralizado branco, categoria e tempo de leitura.
 */

/* ========== Container estreito para conteúdo ========== */

.container--narrow {
  max-width: 720px;
}

/* ========== Hero do post ========== */

.post-hero {
  position: relative;
  min-height: 50vh;
  min-height: 50dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-height) + var(--space-2xl)) var(--space-lg) var(--space-2xl);
  overflow: hidden;
}

.post-hero__image-wrap {
  position: absolute;
  inset: 0;
}

.post-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.post-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0.35)
  );
  pointer-events: none;
}

.post-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-max-width);
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

.post-hero__category {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  margin-bottom: var(--space-md);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius-sm);
}

.post-hero__title {
  margin: 0 0 var(--space-md);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: var(--line-height-tight);
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

.post-hero__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  font-size: var(--font-size-small);
  color: rgba(255, 255, 255, 0.9);
}

.post-hero__meta iconify-icon {
  flex-shrink: 0;
  opacity: 0.9;
}

/* ========== Conteúdo do post ========== */

.post-content {
  background: var(--bg-primary);
  padding-top: var(--space-4xl);
}

.post-content__body {
  color: var(--text-primary);
}

.post-content__body h2 {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
  font-size: var(--font-size-h4);
}

.post-content__body h2:first-child {
  margin-top: 0;
}

.post-content__body p {
  margin-bottom: var(--space-lg);
  color: var(--text-secondary);
}

.post-content__lead {
  font-size: 1.125rem;
  line-height: var(--line-height-relaxed);
  color: var(--text-primary);
}

.post-content__back {
  display: inline-block;
  margin-top: var(--space-2xl);
  margin-bottom: 0;
  font-weight: var(--font-weight-medium);
}

/* ========== Posts relacionados (mesma categoria) ========== */

.related-posts {
  background: var(--bg-secondary);
  padding: var(--space-4xl) 0;
}

.related-posts__title {
  margin-bottom: var(--space-2xl);
  font-size: var(--font-size-h3);
  color: var(--text-primary);
}

.related-posts__list {
  margin-bottom: 0;
}