/* ============================================================
   TIMELINE v14.1 · Horizontal · Estações por ano
   Substitui o layout em colunas por um trilho horizontal com
   snap, setas e mini-mapa de anos.
   ============================================================ */

.tl14 .archive-shell,
.tl14 .timeline-shell,
.tl14 .archive-row,
.tl14 .archive-empty-row { all: unset; display: block; }

/* -------- Container -------- */
.tl14{
  --tl-line: color-mix(in oklab, var(--fg) 10%, transparent);
  --tl-line-strong: color-mix(in oklab, var(--fg) 22%, transparent);
  --tl-soft: color-mix(in oklab, var(--fg) 5%, transparent);
  --tl-accent: var(--accent);
  --tl-muted: var(--muted);
  --tl-fg: var(--fg);

  --cat-trabalho:#c2492a;
  --cat-ia:#5b3ac7;
  --cat-cultura:#2f6c58;
  --cat-formacao:#145A6B;
  --cat-autoral:#e07a3c;
  --cat-imprensa:#6c6f7d;

  margin-top: 30px;
}

/* -------- Espinha dorsal -------- */
.tl14-spine{
  margin: 4px 0 24px;
  padding: 20px 22px 18px;
  border: 1px solid var(--tl-line);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--tl-soft), transparent 70%);
}
.tl14-spine-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  color: var(--tl-muted);
  font: 700 10px/1 "Inter", sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
}
.tl14-spine-eyebrow::before{
  content:""; width:6px; height:6px; border-radius:999px; background:var(--tl-accent);
}
.tl14-spine-title{
  margin: 10px 0 16px;
  font: 800 clamp(18px,2.2vw,24px)/1.2 "Plus Jakarta Sans","Inter",sans-serif;
  letter-spacing: -.02em;
  color: var(--tl-fg);
}
.tl14-spine-track{
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.tl14-spine-step{
  display: inline-flex; flex-direction: column;
  padding: 8px 12px;
  border: 1px solid var(--tl-line);
  border-radius: 12px;
  background: var(--bg);
  font: 700 12px/1.2 "Inter", sans-serif;
  color: var(--tl-fg);
}
.tl14-spine-step small{
  display:block; margin-top:2px;
  font: 600 9.5px/1 "Inter", sans-serif;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tl-muted);
}
.tl14-spine-arrow{ color: var(--tl-muted); font: 700 13px/1 "Inter", sans-serif; opacity: .7; }

/* -------- Filtros -------- */
.tl14-filters{
  display:flex; gap:6px; flex-wrap:wrap;
  padding: 6px;
  margin: 0 0 18px;
  border: 1px solid var(--tl-line);
  border-radius: 999px;
  position: sticky; top: 78px; z-index: 5;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
}
.tl14-chip{
  all: unset; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px;
  color: var(--tl-muted);
  font: 700 12px/1 "Inter", sans-serif;
  transition: background .16s ease, color .16s ease;
  white-space: nowrap;
}
.tl14-chip:hover{ color: var(--tl-fg); background: var(--tl-soft); }
.tl14-chip[aria-pressed="true"]{ color: var(--bg); background: var(--tl-fg); }
.tl14-chip .tl14-chip-dot{ width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.tl14-chip[data-cat="trabalho"] .tl14-chip-dot{ background: var(--cat-trabalho); }
.tl14-chip[data-cat="ia"]       .tl14-chip-dot{ background: var(--cat-ia); }
.tl14-chip[data-cat="cultura"]  .tl14-chip-dot{ background: var(--cat-cultura); }
.tl14-chip[data-cat="formacao"] .tl14-chip-dot{ background: var(--cat-formacao); }
.tl14-chip[data-cat="autoral"]  .tl14-chip-dot{ background: var(--cat-autoral); }
.tl14-chip[data-cat="imprensa"] .tl14-chip-dot{ background: var(--cat-imprensa); }
.tl14-chip[data-cat="all"] .tl14-chip-dot{ display:none; }

/* -------- Controle do trilho -------- */
.tl14-railwrap{
  position: relative;
  margin: 6px 0 0;
}
.tl14-railhead{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 0 0 10px;
}
.tl14-yearmap{
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  min-width: 0; flex: 1 1 auto;
}
.tl14-yearpin{
  all: unset; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  font: 700 11px/1 "Inter", sans-serif;
  color: var(--tl-muted);
  border: 1px solid transparent;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.tl14-yearpin::before{
  content:""; width: 6px; height: 6px; border-radius: 999px;
  background: currentColor; opacity: .5;
}
.tl14-yearpin:hover{ color: var(--tl-fg); background: var(--tl-soft); }
.tl14-yearpin.is-active{
  color: var(--tl-fg);
  background: var(--tl-soft);
  border-color: var(--tl-line);
}
.tl14-yearpin.is-active::before{ background: var(--tl-accent); opacity: 1; }

.tl14-navs{ display: inline-flex; gap: 6px; flex: 0 0 auto; }
.tl14-nav{
  all: unset; cursor: pointer;
  width: 34px; height: 34px; border-radius: 999px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--tl-line);
  color: var(--tl-fg);
  transition: background .16s ease, border-color .16s ease, opacity .16s ease;
}
.tl14-nav:hover{ background: var(--tl-soft); border-color: var(--tl-line-strong); }
.tl14-nav[disabled]{ opacity: .3; cursor: default; }
.tl14-nav svg{ width: 14px; height: 14px; }

/* -------- Trilho horizontal -------- */
.tl14-rail{
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 8px 4px 20px;
  margin: 0 -4px;
  position: relative;
}
.tl14-rail::-webkit-scrollbar{ display: none; }
.tl14-rail::before{
  content:""; position: absolute; left: 4px; right: 4px; top: 62px;
  height: 1px; background: var(--tl-line); z-index: 0;
}

.tl14-chapter{
  flex: 0 0 min(420px, 88vw);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  padding: 20px 22px 22px;
  border: 1px solid var(--tl-line);
  border-radius: 18px;
  background: var(--bg);
  position: relative; z-index: 1;
  transition: border-color .18s ease, transform .18s ease;
}
.tl14-chapter:hover{ border-color: var(--tl-line-strong); }

/* Cabeçalho do ano dentro do card */
.tl14-year{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin: 0 0 4px;
}
.tl14-year strong{
  font: 900 clamp(38px, 4.2vw, 54px)/.9 "Plus Jakarta Sans","Inter",sans-serif;
  letter-spacing: -.06em;
  color: var(--tl-fg);
}
.tl14-year-count{
  color: var(--tl-accent);
  font: 800 10px/1 "Inter", sans-serif;
  letter-spacing: .12em; text-transform: uppercase;
}
.tl14-year-summary{
  display: block;
  margin: 2px 0 14px;
  font: 700 10px/1.4 "Inter", sans-serif;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tl-muted);
}

/* -------- Entradas -------- */
.tl14-entries{
  display: flex; flex-direction: column; gap: 0;
  min-height: 0;
}
.tl14-entry{
  display: grid;
  grid-template-columns: minmax(0,1fr) 30px;
  column-gap: 12px;
  row-gap: 0;
  padding: 13px 0;
  border-top: 1px solid var(--tl-line);
  align-items: start;
  color: var(--tl-fg);
}
.tl14-entry:first-child{ border-top: 0; padding-top: 6px; }

.tl14-date{
  display:block;
  margin:0 0 6px;
  color:var(--tl-accent);
  font:800 9.5px/1 "Inter",sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.tl14-body{ min-width:0; display:block; }
.tl14-meta{
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font: 700 10px/1 "Inter", sans-serif;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--tl-muted);
}
.tl14-cat-dot{ width: 6px; height: 6px; border-radius: 999px; flex: 0 0 auto; }
.tl14-cat-trabalho .tl14-cat-dot{ background: var(--cat-trabalho); }
.tl14-cat-ia       .tl14-cat-dot{ background: var(--cat-ia); }
.tl14-cat-cultura  .tl14-cat-dot{ background: var(--cat-cultura); }
.tl14-cat-formacao .tl14-cat-dot{ background: var(--cat-formacao); }
.tl14-cat-autoral  .tl14-cat-dot{ background: var(--cat-autoral); }
.tl14-cat-imprensa .tl14-cat-dot{ background: var(--cat-imprensa); }
.tl14-meta-source{ color: var(--tl-fg); font-weight: 700; letter-spacing: -.005em; text-transform: none; font-size: 11.5px; }
.tl14-meta-sep{ opacity: .35; }
.tl14-title{
  margin: 5px 0 0;
  font: 700 14.5px/1.28 "Plus Jakarta Sans","Inter",sans-serif;
  letter-spacing: -.015em;
}

/* Cada marco tem seu próprio controle de leitura. O ano continua usando
   "Ver mais" apenas para revelar outros acontecimentos daquele período. */
.tl14-detail-toggle{
  all: unset;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  border: 1px solid var(--tl-line);
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  color: var(--tl-fg);
  cursor: pointer;
  transition: background .16s ease,border-color .16s ease,color .16s ease;
}
.tl14-detail-toggle:hover{ background:var(--tl-soft); border-color:var(--tl-line-strong); }
.tl14-detail-toggle:focus-visible{ outline:2px solid var(--tl-accent); outline-offset:2px; }
.tl14-detail-toggle > span{ position:relative; display:block; width:10px; height:10px; }
.tl14-detail-toggle > span::before,
.tl14-detail-toggle > span::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:10px; height:1.5px;
  border-radius:99px;
  background:currentColor;
  transform:translate(-50%,-50%);
  transition:opacity .16s ease,transform .16s ease;
}
.tl14-detail-toggle > span::after{ transform:translate(-50%,-50%) rotate(90deg); }
.tl14-detail-toggle[aria-expanded="true"] > span::after{ opacity:0; transform:translate(-50%,-50%) rotate(0deg); }
.tl14-detail-toggle.is-empty{ border-color:transparent; cursor:default; opacity:0; }

.tl14-detail{
  grid-column:1 / -1;
  padding: 10px 38px 2px 0;
}
.tl14-detail[hidden]{ display:none!important; }
.tl14-deck{
  margin: 0;
  color: var(--tl-muted);
  font: 500 12px/1.55 "Inter", sans-serif;
}
.tl14-reference{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:10px;
  color:var(--tl-fg);
  font:700 10.5px/1.2 "Inter",sans-serif;
  text-decoration:none;
}
.tl14-reference:hover{ color:var(--tl-accent); }
.tl14-reference:focus-visible{ outline:2px solid var(--tl-accent); outline-offset:3px; border-radius:4px; }

.tl14-entry.is-primary .tl14-title{ font-size: 15.5px; }
.tl14-entry.is-primary .tl14-title::before{
  content:""; display: inline-block;
  width: 3px; height: 12px; margin-right: 7px; vertical-align: -1px;
  background: var(--tl-accent); border-radius: 2px;
}

.tl14-entry.is-headline .tl14-title{
  font: 600 12.5px/1.35 "Plus Jakarta Sans","Inter",sans-serif;
  color: var(--tl-fg);
}
.tl14-entry.is-headline .tl14-meta-source::before{
  content:"“"; margin-right: 2px; color: var(--tl-muted);
}

/* Ver mais dentro do card */
.tl14-more{
  all: unset; cursor: pointer;
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px; padding: 8px 12px;
  border: 1px solid var(--tl-line);
  border-radius: 999px;
  color: var(--tl-fg);
  font: 700 10.5px/1 "Inter", sans-serif;
  transition: background .16s ease, border-color .16s ease;
}
.tl14-more:hover{ background: var(--tl-soft); border-color: var(--tl-line-strong); }
.tl14-more[aria-expanded="true"] .tl14-more-caret{ transform: rotate(180deg); }
.tl14-more-caret{ transition: transform .18s ease; }

.tl14-chapter.is-expanded{ flex: 0 0 min(560px, 92vw); }

/* Fade sinalizando mais conteúdo à direita/esquerda */
.tl14-railwrap::after,
.tl14-railwrap::before{
  content:""; position: absolute; top: 0; bottom: 24px; width: 32px;
  pointer-events: none; z-index: 2;
  transition: opacity .18s ease;
}
.tl14-railwrap::before{
  left: 0; background: linear-gradient(90deg, var(--bg), transparent);
}
.tl14-railwrap::after{
  right: 0; background: linear-gradient(-90deg, var(--bg), transparent);
}
.tl14-railwrap[data-at-start="true"]::before{ opacity: 0; }
.tl14-railwrap[data-at-end="true"]::after{ opacity: 0; }

/* Animações leves */
.tl14-chapter{ animation: tl14-fade .28s ease both; }
@keyframes tl14-fade{ from{ opacity:0; transform: translateY(4px);} to{ opacity:1; transform:none; } }

/* Vazio */
.tl14-empty{
  padding: 40px 0;
  color: var(--tl-muted);
  font: 500 14px/1.6 "Inter", sans-serif;
  text-align: center;
}

/* Responsivo */
@media (max-width: 760px){
  .tl14-chapter{ flex: 0 0 88vw; padding: 16px 16px 18px; }
  .tl14-entry{grid-template-columns:minmax(0,1fr) 28px;column-gap:10px;padding:12px 0}
  .tl14-detail-toggle{width:26px;height:26px}
  .tl14-detail{padding:9px 30px 1px 0}
  .tl14-chapter.is-expanded{ flex: 0 0 92vw; }
  .tl14-filters{ top: 68px; }
  .tl14-navs{ display: none; }
  .tl14-year strong{ font-size: 40px; }
}

/* ============================================================
   v0.5 · full-width rail fix
   The host keeps the legacy `.links-grid` two-column layout on
   desktop. Once Timeline v14 mounts, it must become a single
   full-width flow. The horizontal rail then breaks out of the
   1200px container so the carousel can use the viewport.
   ============================================================ */
.links-grid.tl14,
#links-grid-portfolio.tl14{
  display:block !important;
  grid-template-columns:none !important;
  gap:0 !important;
  width:100%;
  max-width:none;
}

#links-grid-portfolio.tl14 > *{
  grid-column:1 / -1;
}

.tl14 .tl14-railwrap{
  width:100vw;
  max-width:100vw;
  box-sizing:border-box;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding-left:max(40px, calc((100vw - 1200px) / 2 + 40px));
  padding-right:max(40px, calc((100vw - 1200px) / 2 + 40px));
}

.tl14 .tl14-rail{
  width:100%;
  box-sizing:border-box;
  scroll-padding-inline:4px;
}

@media (max-width:1023px){
  .tl14 .tl14-railwrap{
    padding-left:24px;
    padding-right:24px;
  }
}

@media (max-width:760px){
  .tl14 .tl14-railwrap{
    padding-left:18px;
    padding-right:18px;
  }
}