/* ============================================
   FuseIoT — Fórum (capa de jornal)
   Masthead, manchete, filtros, grid, arquivo
   Ref: 04-featured-work-grid.md, 11-typography-color-system.md
   ============================================ */

/* ============================================
   Estados de entrada [data-animate]
   O observer (js/animations.js para o shell estático; ForumShared para o
   conteúdo pós-fetch) adiciona .is-visible. Escopado em .page-forum para
   não vazar para outras páginas.
   ============================================ */
.page-forum [data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--ease-expo-out),
              transform 0.8s var(--ease-expo-out);
}

.page-forum [data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   Curva decorativa (compartilhada com release-notes)
   ============================================ */
.forum__curve {
  position: absolute;
  inset: 0;
  z-index: var(--z-curves, 20);
  pointer-events: none;
  width: 100%;
  height: 100%;
}

/* ============================================
   Masthead — cabeçalho de jornal
   ============================================ */
.forum-masthead {
  position: relative;
  background: var(--bg-primary);
  padding-top: clamp(140px, 16vh, 190px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 68vh;
}

.forum-masthead__inner {
  position: relative;
  z-index: var(--z-content, 30);
}

/* --- Linha de cima: kicker à esquerda, deck à direita --- */
.forum-masthead__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: clamp(20px, 3vw, 40px);
}

.forum-masthead__kicker {
  color: var(--text-primary);
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  /* reserva a linha enquanto o scrambleReveal digita */
  min-height: 1.4em;
}

.forum-masthead__deck {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--text-primary);
  max-width: 280px;
  text-align: right;
}

/* --- Título massivo --- */
.forum-masthead__title {
  font-size: var(--headline-large, clamp(3rem, 8.5vw, 10.8rem));
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: var(--text-primary);
  margin-bottom: clamp(28px, 4vw, 56px);
}

/* --- Linha de data entre hairlines --- */
.forum-masthead__dateline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  border-top: 1px solid rgba(26, 26, 26, 0.14);
  border-bottom: 1px solid rgba(26, 26, 26, 0.14);
  padding: 14px 2px;
}

.forum-masthead__date,
.forum-masthead__place {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  /* não usar var(--text-label) como cor: o token é redefinido como tamanho */
  color: #666666;
  line-height: 1.4;
  white-space: nowrap;
}

.forum-masthead__date {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================
   Capa — container geral
   ============================================ */
.forum-cover {
  background: var(--bg-primary);
  padding-top: clamp(24px, 4vw, 56px);
  padding-bottom: var(--section-gap-large);
}

/* ============================================
   Mídia com parallax (manchete + cards)
   O wrapper clipa; .forum-media__img é 130% de altura e o GSAP move
   yPercent 10 -> -10 com scrub (js/forum.js).
   ============================================ */
.forum-media {
  position: relative;
  overflow: hidden;
  background: var(--bg-alternate);
}

.forum-media--hero {
  aspect-ratio: 21 / 9;
  /* teto de altura: a manchete INTEIRA (capa + título + deck + byline)
     precisa caber numa viewport — o object-fit cover absorve o corte */
  max-height: clamp(300px, 42vh, 470px);
  width: 100%;
  border-radius: var(--radius-container);
}

.forum-media--card {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-card);
}

/* camada de escala (hover) separada da camada de parallax (GSAP) */
.forum-media__scale {
  position: absolute;
  inset: 0;
  transition: transform 0.9s var(--ease-expo-out); /* saída lenta */
  will-change: transform;
}

.forum-media__img {
  position: absolute;
  left: 0;
  top: -15%;
  width: 100%;
  height: 130%;
  object-fit: cover;
}

/* ============================================
   Manchete — link full-width
   ============================================ */
.forum-headline {
  display: block;
  color: inherit;
}

/* o hover global de <a> pinta tudo de vermelho — a manchete responde
   com escala da imagem, não com cor */
.forum-headline:hover {
  color: inherit;
}

.forum-headline:hover .forum-media__scale {
  transform: scale(1.02);
  transition-duration: 0.5s; /* entrada rápida, saída lenta */
}

.forum-headline__meta {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-top: clamp(14px, 2vw, 22px);
}

.forum-tag {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.4;
}

.forum-headline__date {
  color: var(--text-muted);
}

.forum-headline__title {
  font-size: clamp(2.25rem, 4.2vw, 4.6rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.0;
  color: var(--text-primary);
  margin-top: 12px;
  max-width: 26ch;
}

.forum-headline__deck {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 680px;
  margin-top: clamp(12px, 1.6vw, 20px);
}

/* byline mais junta SÓ na manchete (nos cards o respiro original fica) */
.forum-headline .forum-byline {
  margin-top: clamp(12px, 1.8vw, 20px);
}

/* ============================================
   Byline (avatar + nome + leitura)
   ============================================ */
.forum-byline {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(20px, 2.5vw, 32px);
}

.forum-byline__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

/* coautoria: fotos meio sobrepostas, 1º autor na frente */
.forum-byline__avatars {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.forum-byline__avatars .forum-byline__avatar {
  position: relative;
  border: 2px solid var(--bg, #F5F5F7);
}

.forum-byline__avatars .forum-byline__avatar:nth-child(1) { z-index: 3; }
.forum-byline__avatars .forum-byline__avatar:nth-child(2) { z-index: 2; margin-left: -14px; }
.forum-byline__avatars .forum-byline__avatar:nth-child(3) { z-index: 1; margin-left: -14px; }

/* dentro da manchete cinema o recorte é escuro */
.forum-headline--cinema .forum-byline__avatars .forum-byline__avatar {
  border-color: var(--bg-dark, #0A0A0F);
}

.forum-byline__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.forum-byline__name {
  font-size: 0.9375rem;
  color: var(--text-primary);
  line-height: 1.3;
}

.forum-byline__role {
  color: var(--text-muted);
}

.forum-byline__read {
  margin-left: auto;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ============================================
   Filtros por categoria + busca por tema
   ============================================ */
.forum-cover__toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
  flex-wrap: wrap;
  margin-top: clamp(48px, 6vw, 88px);
}

.forum-cover__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* --- Busca: campo hairline na linguagem da casa --- */
.forum-search {
  position: relative;
  flex: 0 1 340px;
  min-width: 240px;
}

.forum-search__input {
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(26, 26, 26, 0.25);
  border-radius: 0;
  padding: 10px 84px 10px 2px;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--text-primary);
  transition: border-color 0.5s var(--ease-expo-out);
}

.forum-search__input::placeholder {
  color: var(--text-muted);
}

.forum-search__input:focus {
  outline: none;
  border-bottom-color: var(--blue, #3436B1);
  transition-duration: 0.3s;
}

.forum-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.forum-search__clear {
  position: absolute;
  right: 0;
  bottom: 12px;
  background: none;
  border: none;
  padding: 2px 2px;
  cursor: pointer;
  color: var(--text-muted);
  letter-spacing: 0.15em;
  transition: color 0.5s var(--ease-expo-out);
}

.forum-search__clear:hover {
  color: var(--text-primary);
  transition-duration: 0.3s;
}

.forum-filter.is-active {
  background-color: var(--pill-bg-dark);
  border-color: var(--pill-bg-dark);
  color: var(--text-on-dark);
}

/* ============================================
   Cabeçalho de seção (MAIS HISTÓRIAS / ARQUIVO)
   ============================================ */
.forum-section-head {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: clamp(28px, 3.5vw, 48px);
}

.forum-section-head__label {
  color: var(--text-primary);
  white-space: nowrap;
}

.forum-section-head__rule {
  flex: 1;
  height: 1px;
  background: rgba(26, 26, 26, 0.12);
}

.forum-section-head__count {
  color: var(--text-muted);
  white-space: nowrap;
}

/* ============================================
   Grid MAIS HISTÓRIAS — anatomia do featured-work grid
   ============================================ */
.forum-cover__grid {
  margin-top: clamp(48px, 6vw, 88px);
}

.forum-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 5vw, 72px) 3vw;
}

.forum-card {
  display: block;
  color: inherit;
}

.forum-card:hover {
  color: inherit;
}

.forum-card:hover .forum-media__scale {
  transform: scale(1.03);
  transition-duration: 0.5s;
}

.forum-card__meta {
  padding-top: 16px;
}

.forum-card__tags {
  display: block;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.forum-card__tags .forum-tag {
  font-size: inherit;
}

.forum-card__title {
  font-size: clamp(1.375rem, 2.5vw, 2.125rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text-primary);
}

/* Seta — escondida por padrão, desliza no hover (padrão capability cards) */
.forum-card__arrow {
  display: inline-block;
  font-size: 0.8em;
  width: 1em;
  margin-right: 0.35em;
  margin-left: -1.35em; /* colapsa o espaço quando escondida */
  opacity: 0;
  vertical-align: baseline;
  transition: margin-left 0.45s cubic-bezier(0.35, 0, 0, 1),
              opacity 0.35s cubic-bezier(0.35, 0, 0, 1);
  transition-delay: 0.1s;
}

.forum-card:hover .forum-card__arrow {
  margin-left: 0;
  opacity: 1;
}

.forum-card__excerpt {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-top: 10px;
  max-width: 52ch;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.forum-card__byline {
  display: block;
  margin-top: 14px;
  color: var(--text-muted);
}

/* ============================================
   Arquivo — linhas compactas de jornal
   ============================================ */
.forum-cover__archive {
  margin-top: clamp(56px, 7vw, 104px);
}

.forum-archive__row {
  display: grid;
  grid-template-columns: 130px 110px 1fr auto;
  align-items: baseline;
  gap: 24px;
  padding: 18px 10px;
  border-top: 1px solid rgba(26, 26, 26, 0.08);
  color: inherit;
  transition: background-color 0.5s ease;
  border-radius: 8px;
}

/* As linhas do arquivo têm entrada [data-animate] E hover de fundo — a lista
   de transição precisa cobrir as três propriedades (o stagger inline usa
   "Xs, Xs, 0s" para nunca atrasar o hover). Especificidade > regra genérica. */
.page-forum .forum-archive__row[data-animate] {
  transition: opacity 0.8s var(--ease-expo-out),
              transform 0.8s var(--ease-expo-out),
              background-color 0.5s ease;
}

.page-forum .forum-archive__row[data-animate]:hover {
  transition-duration: 0.8s, 0.8s, 0.3s; /* hover assimétrico preservado */
}

.forum-archive__row:last-child {
  border-bottom: 1px solid rgba(26, 26, 26, 0.08);
}

.forum-archive__row:hover {
  background-color: var(--bg-alternate);
  color: inherit;
  transition-duration: 0.3s;
}

.forum-archive__date {
  color: var(--text-muted);
  white-space: nowrap;
}

.forum-archive__title {
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--text-primary);
}

.forum-archive__arrow {
  font-size: 1rem;
  color: var(--text-muted);
  transform: translateX(-6px);
  opacity: 0;
  transition: transform 0.5s var(--ease-expo-out),
              opacity 0.5s var(--ease-expo-out);
}

.forum-archive__row:hover .forum-archive__arrow {
  transform: translateX(0);
  opacity: 1;
  transition-duration: 0.3s;
}

/* ============================================
   Estados de erro / vazio (ForumShared.renderError)
   ============================================ */
.forum-error,
.forum-empty {
  text-align: center;
  padding: clamp(56px, 10vw, 120px) 20px;
  border: 1px solid rgba(26, 26, 26, 0.1);
  border-radius: var(--radius-container);
  background: var(--bg-alternate);
}

.forum-error__marks {
  display: block;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.6em;
  text-indent: 0.6em; /* compensa o letter-spacing do último caractere */
  color: var(--text-muted);
  margin-bottom: 20px;
  user-select: none;
}

.forum-error__kicker,
.forum-empty__kicker {
  color: var(--text-primary);
  margin-bottom: 14px;
}

.forum-error__body,
.forum-empty__body {
  font-size: 1rem;
  color: var(--text-secondary);
  max-width: 46ch;
  margin: 0 auto 28px;
}

.forum-empty__body {
  margin-bottom: 0;
}

/* ============================================
   Responsivo
   ============================================ */
@media (max-width: 1024px) {
  .forum-headline__title {
    font-size: clamp(2.25rem, 6.5vw, 5rem);
  }
}

@media (max-width: 768px) {
  .forum-masthead {
    min-height: 56vh;
    padding-top: 120px;
  }

  .forum-masthead__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .forum-masthead__deck {
    text-align: left;
    max-width: 340px;
  }

  .forum-masthead__dateline {
    flex-wrap: wrap;
    gap: 8px;
  }

  .forum-media--hero {
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-card);
  }

  .forum-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .forum-archive__row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "meta arrow"
      "title arrow";
    row-gap: 6px;
    column-gap: 16px;
  }

  .forum-archive__date { grid-area: meta; }
  .forum-archive__cat {
    grid-area: meta;
    margin-left: 110px;
  }
  .forum-archive__title { grid-area: title; }
  .forum-archive__arrow {
    grid-area: arrow;
    align-self: center;
  }
}

@media (max-width: 480px) {
  .forum-masthead {
    min-height: 48vh;
    padding-top: 100px;
  }

  .forum-masthead__date {
    white-space: normal;
  }

  .forum-headline__meta {
    flex-wrap: wrap;
    gap: 10px 18px;
  }

  .forum-byline__read {
    display: none;
  }

  .forum-archive__cat {
    margin-left: 96px;
  }
}

/* ============================================
   CINEMA — cards escuros + badge ESPECIAL
   Posts com "theme": "cinema" no manifest
   (classes geradas por js/forum.js)
   ============================================ */

/* --- Badge ESPECIAL: pill 10px sobre a capa escura --- */
.forum-badge--especial {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1;
  color: #FFFFFF;
  background: rgba(10, 10, 15, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ancorado na capa (manchete e cards) */
.forum-media .forum-badge--especial {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
}

/* --- FIXADO: o alfinete do post pinado (vive no grid E no arquivo) --- */
.forum-badge--fixado {
  gap: 6px;
}

.forum-badge--fixado svg {
  flex: none;
}

/* com pin presente, o ESPECIAL desce uma linha no mesmo canto */
.forum-media .forum-badge--fixado + .forum-badge--especial {
  top: 54px;
}

/* variante inline do arquivo (linha clara): pill cheia escura */
.forum-badge--especial--inline {
  background: var(--bg-dark);
  border-color: var(--bg-dark);
  padding: 5px 10px;
  margin-left: 10px;
  vertical-align: 2px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* --- Busca: card sem match esmaece (não some), arquivo sai de foco --- */
.forum-card {
  transition: opacity 0.5s var(--ease-expo-out);
}

.forum-card.is-dimmed {
  opacity: 0.28;
}

.forum-card.is-dimmed:hover {
  opacity: 0.6;
}

.forum-cover__archive.is-search {
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-expo-out);
}

/* --- Card escuro no grid --- */
.forum-card--cinema {
  background: var(--bg-dark);
  border-radius: var(--radius-card);
  overflow: hidden;
}

/* o card já clipa — a mídia abre mão do radius próprio */
.forum-card--cinema .forum-media--card {
  border-radius: 0;
}

.forum-card--cinema .forum-card__meta {
  padding: 18px 22px 26px;
}

.forum-card--cinema .forum-card__title {
  color: #FFFFFF;
}

.forum-card--cinema .forum-card__excerpt {
  color: rgba(255, 255, 255, 0.72);
}

.forum-card--cinema .forum-card__tags,
.forum-card--cinema .forum-card__byline {
  color: rgba(255, 255, 255, 0.55);
}

/* a cor de editoria vem inline do manifest — em fundo escuro vira branco */
.forum-card--cinema .forum-card__tags .forum-tag {
  color: #FFFFFF !important;
}

/* --- Manchete cinema: edição especial — o bloco inteiro vira noite --- */
.forum-headline--cinema {
  background: var(--bg-dark);
  border-radius: var(--radius-card);
  overflow: hidden;
}

/* o bloco já clipa — a mídia abre mão do radius próprio */
.forum-headline--cinema .forum-media--hero {
  background: var(--bg-dark);
  border-radius: 0;
}

/* o texto ganha respiro interno (na manchete clara ele corre solto na página) */
.forum-headline--cinema .forum-headline__meta,
.forum-headline--cinema .forum-headline__title,
.forum-headline--cinema .forum-headline__deck {
  margin-left: clamp(24px, 3.5vw, 48px);
  margin-right: clamp(24px, 3.5vw, 48px);
}

.forum-headline--cinema .forum-byline {
  margin-left: clamp(24px, 3.5vw, 48px);
  margin-right: clamp(24px, 3.5vw, 48px);
  padding-bottom: clamp(20px, 2.5vw, 32px);
}

.forum-headline--cinema .forum-headline__title {
  color: #FFFFFF;
}

.forum-headline--cinema .forum-headline__deck {
  color: rgba(255, 255, 255, 0.72);
}

.forum-headline--cinema .forum-headline__date,
.forum-headline--cinema .forum-byline__role,
.forum-headline--cinema .forum-byline__read {
  color: rgba(255, 255, 255, 0.55);
}

.forum-headline--cinema .forum-byline__name {
  color: #FFFFFF;
}

/* a cor de editoria vem inline do manifest — em fundo escuro vira branco */
.forum-headline--cinema .forum-tag {
  color: #FFFFFF !important;
}