/* A agenda da home: o evento em destaque e a linha de "Outros eventos".

   Referencia "secao-do-in-move-pagina-bianca" de Lucas, 2026-09-22. O bloco
   `.fx-event-flow` envolve a faixa da comunidade e a agenda, como antes; o que
   saiu foi a "luz" que acompanhava o filme, junto com o filme.

   Cores do sistema, por token: terracota da marca no fio do cartao, nas
   etiquetas e no botao; areia no texto. Escopo `.fx-event-flow`. */
.fx-event-flow {
  position: relative;
  isolation: isolate;
  margin-inline: calc(-1 * var(--espaco-6));
  color: var(--cor-texto);
  background: var(--cor-fundo);
  border: 1px solid color-mix(in srgb, var(--cor-texto) 12%, transparent);
  border-radius: 16px;
  overflow: hidden;
}
.fx-event-flow .fx-cinema { margin-inline: 0; }
.fx-next-event {
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  padding: var(--espaco-6) clamp(24px, 3.5vw, 44px) var(--espaco-10);
  scroll-margin-top: 100px;
}
.fx-next-event__heading,
.fx-others__heading { display: flex; justify-content: space-between; align-items: center; gap: var(--espaco-4); margin-bottom: var(--espaco-5); }
.fx-next-event__heading h2,
.fx-others__heading h3 { margin: 0; color: var(--cor-texto); font-size: clamp(var(--fs-24), 2.4vw, var(--fs-30)); font-weight: var(--peso-forte); line-height: 1.2; letter-spacing: -.03em; }
.fx-others__heading p { margin: var(--espaco-1) 0 0; color: var(--cor-texto-suave); font-size: var(--fs-15); }
.fx-next-event__all { display: inline-flex; align-items: center; gap: var(--espaco-3); min-height: 44px; color: var(--cor-texto-marca); font-size: var(--fs-14); text-underline-offset: 6px; text-decoration-color: color-mix(in srgb, var(--cor-texto-marca) 45%, transparent); }
.fx-next-event__all:hover { color: var(--cor-texto); text-decoration-color: currentColor; }
.fx-next-event__list { display: grid; gap: var(--espaco-5); }

/* O CARTAO EM DESTAQUE */
.fx-event-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr) 17.5rem;
  gap: var(--espaco-6) clamp(var(--espaco-5), 2.4vw, var(--espaco-8));
  align-items: center;
  min-height: 13.5rem;
  padding: var(--espaco-8) var(--espaco-6) var(--espaco-6);
  /* Sem `overflow: hidden`: o selo "Proximo evento" sai 1rem para cima do
     cartao. */
  /* Preto solido, sem foto: a Bianca pediu na call de 2026-09-22. */
  background: var(--cor-fundo);
  border: 1px solid color-mix(in srgb, var(--marca) 55%, transparent);
  border-radius: 12px;
}
.fx-event-card__badge {
  position: absolute;
  top: -1rem;
  left: var(--espaco-6);
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  margin: 0;
  padding: var(--espaco-1) var(--espaco-4);
  border: 1px solid color-mix(in srgb, var(--marca) 55%, transparent);
  border-radius: var(--raio-pill);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-size: var(--fs-12);
  font-weight: var(--peso-forte);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.fx-event-card__badge span { color: var(--cor-texto-marca); }
.fx-event-card__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-height: 9rem;
  padding: var(--espaco-5) var(--espaco-3);
  background: color-mix(in srgb, var(--marca) 42%, var(--cor-fundo));
  border: 1px solid color-mix(in srgb, var(--marca) 40%, transparent);
  border-radius: 8px;
  color: var(--cor-texto);
}
.fx-event-card__day { font-size: 3.25rem; line-height: 1; font-weight: var(--peso-forte); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.fx-event-card__month { margin-top: var(--espaco-2); font-size: var(--fs-12); font-weight: var(--peso-forte); letter-spacing: .14em; text-transform: uppercase; }
.fx-event-card__year { margin-top: var(--espaco-1); font-size: var(--fs-12); letter-spacing: .12em; }
.fx-event-card__body { min-width: 0; max-width: 31rem; }
.fx-event-card h3 { margin: 0 0 var(--espaco-2); color: var(--cor-texto); font-size: clamp(var(--fs-24), 2.4vw, var(--fs-30)); line-height: 1.15; font-weight: var(--peso-forte); letter-spacing: -.03em; overflow-wrap: anywhere; }
.fx-event-card h3 a { color: inherit; text-decoration: none; }
.fx-event-card h3 a:hover { color: var(--cor-texto-marca); text-decoration: underline; text-underline-offset: 5px; }
.fx-event-card__summary { max-width: 44ch; margin: 0 0 var(--espaco-3); color: var(--cor-texto-suave); font-size: var(--fs-15); line-height: 1.5; overflow-wrap: anywhere; }
.fx-event-card__details { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--espaco-2) var(--espaco-6); margin: 0; font-size: var(--fs-14); line-height: 1.5; }
.fx-event-card__details > div { display: flex; align-items: flex-start; gap: var(--espaco-2); min-width: 0; }
.fx-event-card__details dt { flex: 0 0 1.25rem; }
.fx-event-card__details svg { display: block; width: 1.25rem; height: 1.25rem; color: var(--cor-texto-marca); }
.fx-event-card__details dd { margin: 0; overflow-wrap: anywhere; }
.fx-event-card__tags { display: flex; flex-wrap: wrap; gap: var(--espaco-2); margin: var(--espaco-4) 0 0; padding: 0; list-style: none; }
.fx-event-card__tags li { padding: .2rem var(--espaco-3); border: 1px solid color-mix(in srgb, var(--cor-texto) 26%, transparent); border-radius: var(--raio-pill); font-size: var(--fs-12); font-weight: var(--peso-semi); letter-spacing: .1em; text-transform: uppercase; }
.fx-event-card__action { position: relative; z-index: 1; display: grid; justify-items: start; align-content: center; align-self: stretch; gap: var(--espaco-3); padding-left: var(--espaco-6); border-left: 1px solid color-mix(in srgb, var(--cor-texto) 14%, transparent); min-width: 0; }
.fx-event-card__status { display: inline-flex; align-items: center; gap: var(--espaco-2); margin: 0; padding: var(--espaco-2) var(--espaco-4); border: 1px solid var(--marca); border-radius: var(--raio-pill); color: var(--cor-texto-marca); font-size: var(--fs-12); line-height: 1.4; font-weight: var(--peso-forte); letter-spacing: .12em; text-transform: uppercase; }
.fx-event-card__status svg { width: 15px; height: 15px; flex-shrink: 0; }
.fx-event-card__status[data-status="closed"], .fx-event-card__status[data-status="full"], .fx-event-card__status[data-status="not_yet_open"] { border-color: var(--cor-borda-forte); color: var(--cor-texto-suave); }
.fx-event-card__pitch { margin: 0; color: var(--cor-texto); font-size: var(--fs-14); line-height: 1.5; }
.fx-event-card__price { display: flex; align-items: baseline; gap: var(--espaco-2); margin: 0; }
.fx-event-card__price > span { color: var(--cor-texto-suave); font-size: var(--fs-12); letter-spacing: .08em; text-transform: uppercase; }
.fx-event-card__price strong { color: var(--cor-texto); font-size: var(--fs-24); font-weight: var(--peso-forte); letter-spacing: -.03em; white-space: nowrap; }
.fx-event-card__button { display: inline-flex; justify-content: space-between; align-items: center; gap: var(--espaco-5); width: 100%; min-height: 3.25rem; padding: 0 var(--espaco-5); color: var(--cor-sobre-marca); background: var(--marca); border: 1px solid transparent; border-radius: var(--raio-md); text-decoration: none; font-size: var(--fs-15); font-weight: var(--peso-forte); line-height: 1.4; transition: background-color .2s; }
.fx-event-card__button:hover { background: var(--marca-hover); color: var(--cor-sobre-marca); text-decoration: none; }
.fx-event-card__more { display: inline-flex; align-items: center; gap: var(--espaco-3); min-height: 2rem; color: var(--cor-texto-marca); font-size: var(--fs-14); text-underline-offset: 5px; }
.fx-event-card__more:hover { color: var(--cor-texto); }
.fx-next-event :focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 5px; }

/* OUTROS EVENTOS: A LINHA DO TEMPO */
.fx-others { margin-top: var(--espaco-10); }
.fx-others__list { position: relative; display: grid; gap: var(--espaco-4); margin: 0; padding: 0 0 0 var(--espaco-6); list-style: none; }
.fx-others__list::before { content: ""; position: absolute; left: .25rem; top: var(--espaco-5); bottom: var(--espaco-5); width: 1px; background: color-mix(in srgb, var(--marca) 55%, transparent); }
.fx-other {
  position: relative;
  display: grid;
  grid-template-columns: 6rem minmax(0, 14rem) minmax(0, 1fr) 12rem;
  gap: var(--espaco-5);
  align-items: center;
  padding: var(--espaco-4) 0;
}
.fx-other::before { content: ""; position: absolute; left: calc(-1 * var(--espaco-6) - .125rem); top: 50%; width: .8rem; height: .8rem; border-radius: 50%; border: 1px solid var(--marca); background: color-mix(in srgb, var(--marca) 55%, var(--cor-fundo)); translate: 0 -50%; }
.fx-other__date { display: grid; justify-items: center; color: var(--cor-texto); }
.fx-other__day { font-size: var(--fs-30); font-weight: var(--peso-forte); line-height: 1; letter-spacing: -.04em; }
.fx-other__month { margin-top: var(--espaco-1); font-size: var(--fs-12); font-weight: var(--peso-forte); letter-spacing: .12em; text-transform: uppercase; }
.fx-other__year { font-size: var(--fs-12); color: var(--cor-texto-suave); letter-spacing: .1em; }
.fx-other__art { aspect-ratio: 3 / 1; overflow: hidden; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--marca) 40%, transparent); }
.fx-other__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fx-other__body { min-width: 0; }
.fx-other h4 { margin: 0 0 var(--espaco-1); color: var(--cor-texto); font-size: var(--fs-20); font-weight: var(--peso-forte); line-height: 1.2; }
.fx-other h4 a { color: inherit; text-decoration: none; }
.fx-other h4 a:hover { color: var(--cor-texto-marca); text-decoration: underline; text-underline-offset: 4px; }
.fx-other__summary { margin: 0 0 var(--espaco-3); color: var(--cor-texto-suave); font-size: var(--fs-14); line-height: 1.5; }
.fx-other__action { display: grid; justify-items: start; gap: var(--espaco-3); }
.fx-other__button { display: inline-flex; justify-content: space-between; align-items: center; gap: var(--espaco-4); width: 100%; min-height: 2.75rem; padding: 0 var(--espaco-4); border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-md); color: var(--cor-texto); font-size: var(--fs-14); font-weight: var(--peso-forte); text-decoration: none; }
.fx-other__button:hover { border-color: var(--cor-texto); color: var(--cor-texto); }

@media (max-width: 64rem) {
  .fx-event-card { grid-template-columns: 7.5rem minmax(0, 1fr); min-height: 0; }
  .fx-event-card__body { max-width: none; }
  .fx-event-card__action { grid-column: 1 / -1; padding: var(--espaco-5) 0 0; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--cor-texto) 14%, transparent); grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .fx-event-card__status, .fx-event-card__pitch { grid-column: 1 / -1; }
  .fx-event-card__button { width: auto; }
  .fx-event-card__more { grid-column: 1 / -1; }
  .fx-other { grid-template-columns: 5rem minmax(0, 1fr); }
  .fx-other__art { grid-column: 2; }
  .fx-other__body, .fx-other__action { grid-column: 2; }
}
/* Ate 76rem, a largura do container largo, o bloco encosta nas duas bordas da
   janela, e o canto arredondado sobrava ali (Lucas, 24/09): fica reto, sem fio
   nas laterais. Acima disso ele flutua no container e continua cartao. */
@media (width <= 76rem) {
  .fx-event-flow { border-inline: 0; border-radius: 0; }
}
@media (max-width: 650px) {
  .fx-next-event { padding: var(--espaco-5) 20px var(--espaco-8); scroll-margin-top: 16px; }
  .fx-next-event__heading, .fx-others__heading { flex-wrap: wrap; gap: var(--espaco-1); }
  .fx-event-card { grid-template-columns: minmax(0, 1fr); padding: var(--espaco-8) var(--espaco-4) var(--espaco-5); }
  .fx-event-card__date { flex-direction: row; gap: var(--espaco-3); min-height: 0; padding: var(--espaco-3) var(--espaco-4); }
  .fx-event-card__day { font-size: 2.25rem; }
  .fx-event-card__month, .fx-event-card__year { margin: 0; }
  .fx-event-card__action { grid-template-columns: minmax(0, 1fr); }
  .fx-event-card__button { width: 100%; }
  .fx-other { grid-template-columns: minmax(0, 1fr); }
  .fx-other__art, .fx-other__body, .fx-other__action { grid-column: 1; }
  .fx-other__date { grid-template-columns: auto auto auto; gap: var(--espaco-2); justify-content: start; align-items: baseline; }
  .fx-other__month, .fx-other__year { margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .fx-event-card__button { transition: none; } }
@media (forced-colors: active) {
  .fx-event-flow, .fx-event-card, .fx-event-card__date, .fx-event-card__badge, .fx-event-card__status, .fx-event-card__tags li, .fx-other__art, .fx-other__button { background: Canvas; color: CanvasText; border-color: CanvasText; }
  .fx-event-card__button { background: Canvas; color: LinkText; border-color: LinkText; }
  .fx-others__list::before, .fx-other::before { background: CanvasText; border-color: CanvasText; }
  .fx-next-event :focus-visible { outline-color: Highlight; }
}
@media print {
  .fx-event-flow { border: 0; }
  .fx-event-card, .fx-other { break-inside: avoid; }
  .fx-other__art { display: none; }
}