/**
 * Widget "Linha do Tempo" — assets/css/sections/pagina-timeline.css
 *
 * Repetidor cronológico: linha vertical com marcador (ano) alinhado à
 * esquerda no mobile, zigue-zague alternado a partir de 1024px. Sem JS —
 * a alternância de lado é decidida no PHP por paridade do índice
 * (classes `.is-esquerda`/`.is-direita`).
 *
 * Cores de widget (fundo, título, marcador, textos do item) são aplicadas
 * pelo Elementor via `selectors` (ver widgets/pagina-timeline.php) — este
 * arquivo só define layout, tipografia de apoio e a estrutura da linha.
 *
 * Largura fixa da coluna do marcador (4rem, mobile e desktop) é o que
 * mantém a linha vertical alinhada ao centro do marcador em toda a lista —
 * ver comentário na seção 2.
 *
 * Mobile-first. Zero hex literal — só var(--fjpn-*). Zero !important.
 */

.fjpn-pagina-timeline {
  padding-block: var(--fjpn-space-section-py-lg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.fjpn-pagina-timeline__cabecalho {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 42rem;
  margin-inline: auto;
  margin-bottom: var(--fjpn-space-section-py-sm);
}

.fjpn-pagina-timeline__titulo {
  margin-block: 0;
}

.fjpn-pagina-timeline__paragrafo {
  margin-block: var(--fjpn-gap-medium) 0;
}

/* ==========================================================
 * 1. LISTA — linha vertical
 * Largura da coluna do marcador (4rem) definida em `--fjpn-timeline-col`
 * para o `::before` (linha) e o grid do item usarem o mesmo valor —
 * evita repetir o número em dois lugares.
 * ========================================================== */

.fjpn-pagina-timeline__lista {
  --fjpn-timeline-col: 4rem;

  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fjpn-space-section-py-sm);
  max-width: 64rem;
  margin-inline: auto;
}

.fjpn-pagina-timeline__lista::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--fjpn-timeline-col) / 2);
  width: var(--fjpn-border-width-outline);
  background-color: var(--fjpn-slate-200);
}

/* ==========================================================
 * 2. ITEM — mobile: marcador à esquerda, card ocupa o restante
 * ========================================================== */

.fjpn-pagina-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--fjpn-timeline-col) 1fr;
  align-items: start;
  column-gap: var(--fjpn-gap-medium);
}

.fjpn-pagina-timeline__ano {
  position: relative;
  z-index: 1;
  grid-column: 1;
  justify-self: center;
  align-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: var(--fjpn-gap-icon-text);
  border-radius: var(--fjpn-radius-full);
  background-color: var(--fjpn-blue-primary);
  color: var(--fjpn-white);
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-small);
  font-weight: var(--fjpn-weight-bold);
  letter-spacing: var(--fjpn-tracking-normal);
  text-align: center;
  box-shadow: var(--fjpn-shadow-card);
}

.fjpn-pagina-timeline__card {
  grid-column: 2;
  padding: var(--fjpn-padding-card);
  border-radius: var(--fjpn-radius-xl);
  background-color: var(--fjpn-white);
  box-shadow: var(--fjpn-shadow-card);
}

.fjpn-pagina-timeline__item-titulo {
  margin: 0 0 var(--fjpn-gap-icon-text);
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-heading-sm);
  font-weight: var(--fjpn-weight-extrabold);
  line-height: var(--fjpn-leading-snug);
  color: var(--fjpn-text-primary);
}

.fjpn-pagina-timeline__item-descricao {
  margin: 0;
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-body);
  line-height: var(--fjpn-leading-relaxed);
  color: var(--fjpn-text-muted);
}

.fjpn-pagina-timeline__imagem-wrap {
  display: block;
  margin-top: var(--fjpn-gap-medium);
  overflow: hidden;
  border-radius: var(--fjpn-radius-lg);
}

.elementor .fjpn-pagina-timeline__imagem {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================
 * 3. DESKTOP — zigue-zague a partir de 1024px
 * Grid de 3 colunas: card | marcador | card, alternado por
 * `.is-esquerda`/`.is-direita`. A linha migra para o centro (50%).
 * ========================================================== */

@media (min-width: 1024px) {
  .fjpn-pagina-timeline__lista::before {
    left: 50%;
  }

  .fjpn-pagina-timeline__item {
    grid-template-columns: 1fr var(--fjpn-timeline-col) 1fr;
    column-gap: var(--fjpn-gap-hero-columns);
  }

  .fjpn-pagina-timeline__ano {
    grid-column: 2;
  }

  .fjpn-pagina-timeline__item.is-esquerda .fjpn-pagina-timeline__card {
    grid-column: 1;
    grid-row: 1;
    text-align: right;
  }

  .fjpn-pagina-timeline__item.is-direita .fjpn-pagina-timeline__card {
    grid-column: 3;
    grid-row: 1;
  }
}

/* ==========================================================
 * Sangria de seção — largura total dentro do Elementor.
 * Mesmo padrão da seção 5 de base.css (arquivo somente-leitura), replicado
 * aqui porque este widget novo não está na lista fixa daquele arquivo.
 * ========================================================== */

.elementor-widget-fjpn-pagina-timeline > .elementor-widget-container {
  width: 100%;
  margin: 0;
  padding: 0;
}