/**
 * PULP.CSS
 * Componentes relacionados
 */

/* ============================================
   ELEMENTOS PULP (contaminação controlada)
   ============================================ */

/* 🟧 1. MARCADOR PULP (acento gráfico que cria identidade) */
/* Base comum para todos os marcadores */
.pulp-marker,
.article-card__section--pulp,
.articles-list__section-label--pulp,
.feature__section--pulp,
.story__section--pulp,
.article-header__section--pulp,
.carousel-item__section--pulp {
  position: relative;
  padding-left: 1.5em;
}

.pulp-marker::before,
.article-card__section--pulp::before,
.articles-list__section-label--pulp::before,
.feature__section--pulp::before,
.story__section--pulp::before,
.article-header__section--pulp::before,
.carousel-item__section--pulp::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.9em;
  height: 1.9em;
  background-color: var(--section-bar-color, var(--accent));
  opacity: 1;
  border-radius: 0;
}

/* Ajustes por estilo do rótulo de seção (cards) */
.article-card__section--pulp.article-card__section--bar {
  padding-left: 0.75rem;
}

.article-card__section--pulp.article-card__section--bar::before {
  width: 0.35rem;
  height: 1.05rem;
  border-radius: 0;
}

.article-card__section--pulp.article-card__section--editorial::before {
  border-radius: 0;
}

.article-card__section--pulp.article-card__section--pill {
  padding: 0.2rem 0.65rem 0.2rem 1.1em;
}

.article-card__section--pulp.article-card__section--pill::before {
  content: "";
  left: 1px;
  top: 1px;
  bottom: 1px;
  height: auto;
  transform: none;
  border-radius: 999px;
}

.article-card__section--pulp.article-card__section--underline {
  padding-left: 0;
}

.article-card__section--pulp.article-card__section--underline::before {
  content: none;
}

.article-card__section--pulp.article-card__section--marker {
  padding: 0.1rem 0.35rem;
}

.article-card__section--pulp.article-card__section--marker::before {
  content: "";
  position: absolute;
  left: -0.15rem;
  right: -0.15rem;
  bottom: 0.2rem;
  top: auto;
  transform: none;
  width: auto;
  height: 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--section-bar-color, var(--accent)) 22%, transparent);
  opacity: 0.7;
  z-index: -1;
}

.article-header__section--pulp.article-header__section--bar {
  padding-left: 0.75rem;
}

.article-header__section--pulp.article-header__section--bar::before {
  width: 0.35rem;
  height: 1.05rem;
  border-radius: 0;
  top: 50%;
  transform: translateY(-50%);
}

.article-header__section--pulp.article-header__section--editorial::before {
  border-radius: 0;
}

.article-header__section--pulp.article-header__section--pill {
  padding: 0.2rem 0.65rem 0.2rem 1.1em;
}

.article-header__section--pulp.article-header__section--pill::before {
  content: "";
  left: 1px;
  top: 1px;
  bottom: 1px;
  height: auto;
  transform: none;
  border-radius: 999px;
}

.article-header__section--pulp.article-header__section--underline {
  padding-left: 0;
}

.article-header__section--pulp.article-header__section--underline::before {
  content: none;
}

.article-header__section--pulp.article-header__section--marker {
  padding: 0.1rem 0.35rem;
  z-index: 0;
}

.article-header__section--pulp.article-header__section--marker::before {
  content: "";
  position: absolute;
  left: -0.15rem;
  right: -0.15rem;
  bottom: 0.2rem;
  top: auto;
  transform: none;
  width: auto;
  height: 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--section-bar-color, var(--accent)) 22%, transparent);
  opacity: 0.7;
  z-index: -1;
}

.articles-list__section-label--pulp.articles-list__section-label--bar {
  padding-left: 0.75rem;
}

.articles-list__section-label--pulp.articles-list__section-label--bar::before {
  width: 0.35rem;
  height: 1.05rem;
  border-radius: 0;
}

.articles-list__section-label--pulp.articles-list__section-label--editorial::before {
  border-radius: 0;
}

.articles-list__section-label--pulp.articles-list__section-label--pill {
  padding: 0.2rem 0.65rem 0.2rem 1.1em;
}

.articles-list__section-label--pulp.articles-list__section-label--pill::before {
  content: "";
  left: 1px;
  top: 1px;
  bottom: 1px;
  height: auto;
  transform: none;
  border-radius: 999px;
}

.articles-list__section-label--pulp.articles-list__section-label--underline {
  padding-left: 0;
}

.articles-list__section-label--pulp.articles-list__section-label--underline::before {
  content: none;
}

.articles-list__section-label--pulp.articles-list__section-label--marker {
  padding: 0.1rem 0.35rem;
}

.articles-list__section-label--pulp.articles-list__section-label--marker::before {
  content: "";
  position: absolute;
  left: -0.15rem;
  right: -0.15rem;
  bottom: 0.2rem;
  top: auto;
  transform: none;
  width: auto;
  height: 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--section-bar-color, var(--accent)) 22%, transparent);
  opacity: 0.7;
  z-index: -1;
}

.carousel-item__section--pulp.carousel-item__section--bar {
  padding-left: 0.75rem;
}

.carousel-item__section--pulp.carousel-item__section--bar::before {
  width: 0.35rem;
  height: 1.05rem;
  border-radius: 0;
}

.carousel-item__section--pulp.carousel-item__section--editorial::before {
  border-radius: 0;
}

.carousel-item__section--pulp.carousel-item__section--pill {
  padding: 0.2rem 0.65rem 0.2rem 1.1em;
}

.carousel-item__section--pulp.carousel-item__section--pill::before {
  content: "";
  left: 1px;
  top: 1px;
  bottom: 1px;
  height: auto;
  transform: none;
  border-radius: 999px;
}

.carousel-item__section--pulp.carousel-item__section--underline {
  padding-left: 0;
}

.carousel-item__section--pulp.carousel-item__section--underline::before {
  content: none;
}

.carousel-item__section--pulp.carousel-item__section--marker {
  padding: 0.1rem 0.35rem;
}

.carousel-item__section--pulp.carousel-item__section--marker::before {
  content: "";
  position: absolute;
  left: -0.15rem;
  right: -0.15rem;
  bottom: 0.2rem;
  top: auto;
  transform: none;
  width: auto;
  height: 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--section-bar-color, var(--accent)) 22%, transparent);
  opacity: 0.7;
  z-index: -1;
}

/* Variantes de marcador */
.pulp-marker--diamond::before {
  content: "◆";
  transform: translateY(-50%) rotate(0deg);
}

.pulp-marker--square::before {
  content: "▪";
  transform: translateY(-50%) rotate(3deg);
}

/* 🟧 2. TÍTULOS COM EXAGERO CONTROLADO (manchete, não ensaio) */
.article-header__title--pulp {
  letter-spacing: -0.015em;
  /* Tracking mais apertado */
  word-spacing: 0.05em;
  /* Palavras com mais ritmo */
  color: var(--article-title) !important;
  /* Força cor do título do artigo */
}

/* Palavra-chave em destaque (aplicar via <em> ou <strong>) */
h1.article-header__title.article-header__title--pulp em,
.article-header__title.article-header__title--pulp em,
.article-header__title--pulp em,
h1.about-page__title--pulp em,
.about-page__title--pulp em {
  font-style: italic !important;
  font-weight: inherit;
  color: inherit !important;
}

.article-header__title--pulp strong {
  font-variant: small-caps;
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
}

/* Feature title também pode ter exagero */
/* Títulos com estilo pulp (unificado) */
.article-card__title--pulp,
.feature__title--pulp,
.story__title--pulp {
  letter-spacing: -0.01em;
  color: var(--article-title);
}

.article-card__title--pulp a,
.feature__title--pulp a,
.story__title--pulp a {
  color: inherit;
}

.article-card__title--pulp em,
.feature__title--pulp em,
.story__title--pulp em {
  font-style: italic;
  color: inherit;
}

.article-card__title--pulp strong,
.feature__title--pulp strong,
.story__title--pulp strong {
  font-variant: small-caps;
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
}

/* 🟧 3. IMAGENS COM CARA DE IMPRESSÃO (não "limpas" demais) */

[data-card-style="pulp"] .article-hero__image--pulp img,
[data-card-style="pulp"] .feature__image--pulp img {
  filter: saturate(0.85) contrast(1.08);
  transform: rotate(1deg);
  /* Leve dessaturação + contraste */
  /* Preto menos puro, branco menos branco */
}

[data-card-style="pulp"] .story__thumbnail--pulp img {
  filter: saturate(0.88) contrast(1.05);
  transform: rotate(1deg);
}

/* Dark theme: ajuste mais sutil */
[data-card-style="pulp"][data-theme="dark"] .article-hero__image--pulp img,
[data-card-style="pulp"][data-theme="dark"] .feature__image--pulp img {
  filter: saturate(0.9) contrast(1.05);
}

/* Dark theme: sombra visível nas imagens das prévias */
[data-theme="dark"] .feature__image img {
  box-shadow: 4px 4px 0 rgba(255, 255, 255, 0.3), 0 0 30px rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .story__thumbnail img {
  box-shadow: 4px 4px 0 rgba(255, 255, 255, 0.3), 0 0 30px rgba(0, 0, 0, 0.7);
}

/* 🟧 4. BOLSÕES DE OUSADIA (Editorial do Estorvo, etc) */
.section--pulp {
  position: relative;
  padding: var(--space-xl) var(--space-lg);
  border-left: 3px solid var(--accent);
  background: linear-gradient(to right,
      rgba(184, 113, 79, 0.03) 0%,
      transparent 100%);
}

[data-theme="dark"] .section--pulp {
  background: linear-gradient(to right,
      rgba(184, 113, 79, 0.05) 0%,
      transparent 100%);
}

.section--pulp .section__label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  position: relative;
  padding-left: 1.5em;
}

.section--pulp .section__label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.9em;
  height: 0.9em;
  background-color: var(--accent);
  opacity: 0.9;
}

/* Tipografia diferente dentro de bolsões pulp */
.section--pulp h2,
.section--pulp h3 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

.section--pulp p:first-of-type {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

/* Metadados de artigo */
.article-header__meta,

.meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}

.meta-item__icon {
  width: 14px;
  height: 14px;
  stroke-width: 1.25;
  color: var(--muted);
  opacity: 0.6;
  flex-shrink: 0;
}