/* bracis-figma/program-schedule — grade de programação (matriz semanal) */
/* impeccable-disable design-system-font-size -- grade Gantt densa (7 salas x 4 dias por coluna estreita): micro-rótulos abaixo do menor passo do ramp (0.9rem) são intencionais */
/* impeccable-disable design-system-color -- #8C80C7 = roxo de reunião (categoria não-evento), cor do mock Figma 401:459 confirmada pelo usuário */

.bracis-figma-program {
  --slot-h: 26px;      /* altura de 30 min */
  --axis-w: 52px;
  --gap: 10px;
  /* Modo de layout, lido pelo view.js. O breakpoint mora só na media query;
     o JS pergunta o modo ao CSS em vez de repetir o número. */
  --bfp-mode: desktop;
  /* tokens do tema (theme.json / DESIGN.md) */
  --navy: var(--wp--preset--color--navy);              /* #313267 */
  --deep-navy: var(--wp--preset--color--deep-navy);    /* #24254d */
  --navy-header: var(--wp--preset--color--navy-header);/* #0A4273 */
  --gold: var(--wp--preset--color--gold);              /* #E2C576 */
  --slate: var(--wp--preset--color--slate);            /* #5c5d7a */
  --fog: var(--wp--preset--color--fog);                /* #F0F2F2 */
  --cloud: var(--wp--preset--color--cloud);            /* #ffffff */
  /* faixa de acento com as cores dos eventos co-localizados */
  --bfp-rainbow: linear-gradient(90deg,
    var(--navy-header) 0 16.667%, #32A64F 16.667% 33.333%, #51BFD6 33.333% 50%,
    #F5C745 50% 66.667%, #F24444 66.667% 83.333%, #DD723B 83.333% 100%);
  margin: 0;
  background: var(--fog);
  color: var(--navy);
}

/* ---------- Hero ---------- */
.bfp-hero { background: var(--wp--preset--gradient--navy-depth); padding: 2.5rem 0 3rem; }
.bfp-hero__inner { max-width: 1410px; margin: 0 auto; padding: 0 15px; }
.bfp-hero__title {
  /* herda Bebas Neue de theme.json (elements.heading); tamanho no token display */
  color: var(--cloud); margin: 0;
  font-size: var(--wp--preset--font-size--display);
  letter-spacing: .02em; text-transform: uppercase; line-height: .9;
}
.bfp-hero__rule { display: block; width: 120px; height: 5px; background: var(--gold); margin-top: 1.1rem; border-radius: 999px; }
/* asterisco em gold (acento editorial) amarra o título à ressalva abaixo da régua */
.bfp-hero__star { color: var(--gold); }
.bfp-hero__note {
  margin: 1rem 0 0; max-width: 52ch;
  color: var(--gold); font-size: var(--wp--preset--font-size--sm); line-height: 1.5;
}

/* ---------- Controles: filtro ---------- */
.bfp-controls { max-width: 1410px; margin: 0 auto; padding: 1.6rem 15px 0; }
.bfp-filter { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.bfp-filter__label { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); font-size: var(--wp--preset--font-size--sm); }
/* Duas caixas, não uma lista corrida: o "ALL" fica cravado à esquerda e os
   eventos quebram dentro da própria caixa. Numa tela estreita a segunda linha
   de eventos nasce alinhada com a primeira, em vez de descer para baixo do
   "ALL" e desmanchar a leitura de "reset | eventos". */
.bfp-filter__pills { display: flex; gap: .6rem; align-items: flex-start; }
.bfp-filter__pills > .bfp-filter__pill { flex: none; }
.bfp-filter__events { display: flex; gap: .6rem; flex-wrap: wrap; min-width: 0; }
.bfp-filter__pill {
  border: 0; cursor: pointer; border-radius: 10px;
  /* piso comum de largura: as siglas variam de "STIL" a "WESAAC" (78px a 112px
     só de texto) e a fileira lia como degrau. 7rem cobre a maior; um rótulo
     futuro mais longo cresce a partir daí em vez de ser cortado. */
  min-width: 7rem;
  padding: .7rem 1.4rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  font-size: var(--wp--preset--font-size--sm);
  background: var(--pill-bg); color: var(--pill-fg);
  opacity: .5; transition: opacity .15s, box-shadow .15s;
}
.bfp-filter__pill:hover { opacity: .8; }
.bfp-filter__pill.is-active { opacity: 1; box-shadow: 0 14px 28px rgba(49, 50, 103, 0.12); }
/* TODOS ativo: todas as pílulas em cor cheia (como se selecionadas) */
.bfp-filter.is-all .bfp-filter__pill { opacity: 1; }

/* ---------- Fecho do bloco: card de check-in (depois da grade) ----------
   Card do Foyer: o Foyer não é coluna da grade, então o check-in não aparece em
   lugar nenhum da matriz — este card é a única superfície que carrega o dado.
   Vocabulário de card do DESIGN.md: cloud sobre fog, raio lg, borda de 1px e
   levantamento macio (ele genuinamente flutua sobre o fundo). */
.bfp-outro { max-width: 1410px; margin: 0 auto; padding: 0 15px 3rem; }
/* legenda da sigla usada na grade: encostada na grade (que reduz o próprio
   padding inferior) e afastada do card, para pertencer visualmente à tabela */
.bfp-legend {
  margin: 0 0 var(--wp--preset--spacing--lg);
  color: var(--slate); font-size: var(--wp--preset--font-size--sm);
}
/* mesma caixa da grade: o card fecha o bloco alinhado à programação */
.bfp-info {
  display: flex; align-items: center; gap: var(--wp--preset--spacing--lg); flex-wrap: wrap;
  margin: 0; padding: 1.3rem var(--wp--preset--spacing--md);
  background: var(--cloud); color: var(--navy);
  border: 1px solid rgba(49, 50, 103, 0.08); border-radius: 16px;
  box-shadow: 0 18px 40px rgba(28, 29, 58, 0.08);
}
.bfp-info__head { display: flex; align-items: center; gap: var(--wp--preset--spacing--sm); }
/* marcador de ícone em círculo (Shapes: círculo = marcador de ícone) */
.bfp-info__mark {
  flex: none; width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--fog); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
}
.bfp-info__mark svg { width: 1.6rem; height: 1.6rem; }
.bfp-info__title {
  /* herda Bebas Neue de theme.json (elements.heading); tamanho no token xl */
  margin: 0; font-size: var(--wp--preset--font-size--xl);
  line-height: 1.1; text-transform: uppercase; color: var(--navy);
}
.bfp-info__place {
  margin: .15rem 0 0; color: var(--slate);
  font-size: var(--wp--preset--font-size--sm); line-height: 1.35;
}
/* um fato por dia; separados por divisória fina, não por caixa */
.bfp-info__facts {
  display: flex; align-items: stretch; flex-wrap: wrap;
  gap: var(--wp--preset--spacing--md); margin: 0 0 0 auto;
}
.bfp-info__fact {
  padding-left: var(--wp--preset--spacing--md);
  border-left: 1px solid rgba(49, 50, 103, 0.08);
}
.bfp-info__fact:first-child { padding-left: 0; border-left: 0; }
.bfp-info__fact dt {
  font-size: var(--wp--preset--font-size--md); font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; color: var(--slate);
  line-height: 1.2;
}
.bfp-info__fact dd {
  margin: 0; font-size: var(--wp--preset--font-size--xl); font-weight: 700; line-height: 1.25;
  white-space: nowrap;
}

/* Empilha antes de os fatos ficarem apertados: a divisória vertical vira
   horizontal e o card passa a ler como lista de dias. */
@media (max-width: 1100px) {
  .bfp-info { align-items: flex-start; }
  .bfp-info__facts { margin-left: 0; gap: 0; flex-direction: column; align-items: stretch; width: 100%; }
  /* center e não baseline: dia e horário têm corpos diferentes, e alinhados
     pela base o rótulo subia dentro da própria linha */
  .bfp-info__fact {
    display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--sm);
    padding: .55rem 0 0; border-left: 0; border-top: 1px solid rgba(49, 50, 103, 0.08);
  }
  .bfp-info__fact:first-child { padding-left: 0; }
}

/* ---------- Grade: eixo (col 1) + dias (col 2); overlay sobreposto ----------
   OBS: --rows é sempre 26; repeat() NÃO aceita var()/calc() na contagem → literal 26.
   --plot-top é definido em runtime pelo view.js no .bfp-grid e herdado por eixo+overlay. */
.bfp-grid {
  position: relative; max-width: 1410px; margin: 1.5rem auto 0; padding: 0 15px .8rem;
  display: grid; grid-template-columns: var(--axis-w) 1fr; column-gap: var(--gap); align-items: start;
}

.bfp-axis { position: relative; z-index: 1; padding-top: var(--head-h, 0); padding-right: 8px; font-size: .95rem; color: var(--slate); text-align: right; }
.bfp-axis__corner { position: absolute; top: 0; right: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .66rem; }
.bfp-axis__hours { display: grid; grid-template-rows: repeat(26, var(--slot-h)); }
/* translateY(-50%) centra a caixa do rótulo na linha da régua (translateY(-.5em)
   usa metade do font-size, não do line-height, e deixava o texto ~3px abaixo). */
/* Hora cheia: sempre navy e em negrito (sem distinção par/ímpar) — é a âncora de
   leitura da grade. O :30 fica menor e esmaecido, como marcação secundária. */
.bfp-axis__hour { align-self: start; transform: translateY(-50%); font-weight: 700; color: var(--navy); }
.bfp-axis__half { align-self: start; transform: translateY(-50%); font-size: .68rem; opacity: .38; }

.bfp-days { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); min-width: 0; }
.bfp-day { min-width: 0; position: relative; }
/* Divisão vertical entre os dias, centrada no vão de --gap. Em pseudo-elemento e
   não em border-right: a borda ficava colada no fim do dia anterior, deixando
   1px de um lado e 9px do outro — cada dia parecia ter um recuo à esquerda. E
   como border-box a descontava da caixa, os três primeiros dias ficavam 1px mais
   largos que o último. Fora do fluxo, a linha não mexe em nenhuma das duas coisas. */
.bfp-day:not(:last-child)::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: calc(var(--gap) / -2);
  width: 1px; background: rgba(49, 50, 103, 0.12);
}
/* align-items: stretch (padrão) e não center: é o que faz os botões de dia
   terem exatamente a altura da caixa da data — topo e base alinhados com o
   nome do dia, sem número mágico de altura. */
.bfp-day__head { display: flex; justify-content: space-between; gap: .4rem; margin-bottom: .35rem; min-height: 1.4rem; }
/* dia da semana e data em proporção 2:1 (weekday = --day-fs, data = metade).
   --day-fs é o corpo do nome do dia e a régua do cabeçalho inteiro: os botões
   de navegação medem a largura e a seta a partir dele, então mudar a escala do
   dia (ver media query) move o conjunto junto, sem números soltos. */
.bfp-day__head { --day-fs: var(--wp--preset--font-size--xl); }
.bfp-day__date { color: var(--navy); font-weight: 700; font-size: calc(var(--day-fs) / 2); line-height: 1.1; }
.bfp-day__wd { font-weight: 800; text-transform: uppercase; font-size: 2em; letter-spacing: .01em; margin-right: .18em; }
/* Navegação entre dias: ladeia a data (‹ MONDAY 19/10 ›) e só existe na visão
   de um dia (ver media query). Retângulo cinza-claro em vez de círculo navy —
   é controle de superfície, não conteúdo, e não compete com a data.
   Largura = 2,2x o corpo do nome do dia; a altura vem do stretch. */
.bfp-day__navbtn {
  display: none; align-items: center; justify-content: center;
  cursor: pointer; width: calc(var(--day-fs) * 2.2);
  background: #E8EBEF; color: var(--navy);
  border: 1px solid #B4BAC4; border-radius: 8px;
  box-shadow: 0 1px 2px rgba(49, 50, 103, 0.08);
  transition: background .15s, border-color .15s;
}
/* o chevron é um quadrado: centrado pelo flex do botão, sem métrica de fonte
   no meio do caminho */
.bfp-day__navbtn svg { display: block; width: calc(var(--day-fs) * .62); height: auto; }
.bfp-day__navbtn:hover { background: #DDE2E9; border-color: #98A1AF; }
/* cabeçalho das salas: nome na 1ª linha, número na 2ª, em proporção 1:1,25
   (nome : número). Os dois eixos se cruzam: o nome é menor mas em negrito, o
   número é maior mas de peso normal. */
/* minmax(0, 1fr) e não 1fr: "1fr" equivale a minmax(auto, 1fr), então uma coluna
   cujo min-content seja maior que a fração CRESCE. "Arena" é mais largo que
   "Room", e nas larguras em que ele não cabia as duas primeiras colunas
   inchavam (medido a 1230px: 37,95px contra 37,06px das demais), empurrando o
   cabeçalho para fora do esquadro com o plot — cujos blocos têm min-width: 0 e
   por isso ficam sempre iguais. Travar o mínimo em 0 iguala os dois grids. */
.bfp-day__rooms { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; margin-bottom: 4px; }
/* o corpo do rótulo acompanha a coluna (que vale ~(100vw - 122px)/28), para
   "Arena" caber sem forçar a largura mínima da célula */
.bfp-day__room { --room-fs: clamp(.7rem, .94vw, .85rem); min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; color: var(--navy); line-height: 1.15; }
/* Divisória entre as salas, só no cabeçalho. Desenhada em pseudo-elemento e não
   em border-left: com box-sizing border-box a borda comeria 1px da célula e
   empurraria o rótulo meio pixel para a direita — só nas colunas 2 a 7, o que
   deixava a Arena 1 (sem borda) fora de esquadro com as demais. Assim a linha
   cai na calha de 2px, a mesma do .bfp-day__plot, sem tocar na caixa. */
.bfp-day__room + .bfp-day__room::before {
  content: ""; position: absolute; left: -1px; top: 0; bottom: 0;
  border-left: 1px solid rgba(49, 50, 103, 0.2);
}
.bfp-day__room-name { font-size: var(--room-fs); font-weight: 700; }
.bfp-day__room-num { font-size: calc(var(--room-fs) * 1.25); font-weight: 400; }

.bfp-day__plot {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(26, var(--slot-h));
  column-gap: 2px; row-gap: 0; /* row-gap DEVE ser 0: senão blocos desalinham do eixo/faixas (overlay usa slot×altura) */
}

/* ---------- Régua de horas ----------
   Linhas contínuas que saem do rótulo do eixo e atravessam os 4 dias, alinhadas
   ao mesmo slot dos blocos. Fica atrás dos dias (z-index 1) e do overlay (2). */
.bfp-rules {
  position: absolute; z-index: 0; top: var(--plot-top, 0);
  /* + var(--gap): a régua começa onde os dias começam, não onde o eixo termina.
     Sem isso ela invadia o vão de 10px entre eixo e grade e sobrava só do lado
     esquerdo — a linha nascia antes do primeiro bloco e morria certinho no
     último, o que lia como desalinhamento. Mesma caixa do .bfp-overlay. */
  left: calc(15px + var(--axis-w) + var(--gap)); right: 15px;
  height: calc(var(--slot-h) * 26 + 1px);
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to bottom, rgba(49, 50, 103, 0.22) 0 1px, transparent 1px calc(var(--slot-h) * 2)),
    repeating-linear-gradient(to bottom, rgba(49, 50, 103, 0.10) 0 1px, transparent 1px var(--slot-h));
}

/* ---------- Blocos ---------- */
.bfp-block {
  /* raio "micro" (4px) do DESIGN.md § Shapes: coluna de ~40px, onde o raio de
     card não escala para baixo sem virar pastilha. */
  border-radius: 4px; overflow: hidden; min-width: 0;
  /* Costura de 2px entre blocos empilhados, espelhando o column-gap. Vai como
     margem (e NÃO como row-gap, que precisa ficar 0 para o alinhamento com o
     eixo): a margem encolhe o item dentro da área, mantendo o topo cravado no
     horário de início. Sem isso, uma sessão que termina 17:30 e outra que começa
     17:30 encostam e leem como um bloco só. */
  margin-bottom: 2px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 3px 1px; transition: opacity .15s;
  /* entrelinha apertada (contra o 1.6 herdado do tema): num rótulo de 2–3
     linhas dentro de uma coluna de ~45px, o espaço entre linhas competia com
     o próprio corpo do texto e o nome lia como duas coisas separadas. Também
     é o que libera largura para a fonte maior nos blocos verticais, onde o
     line-height vira espessura horizontal da linha. */
  line-height: 1.15;
}
/* nome do evento em negrito; a informação secundária, sem. */
.bfp-block__code, .bfp-block__title { font-weight: 800; }
.bfp-block__sub { font-weight: 400; opacity: .85; }

.bfp-block--session {
  background: var(--evt-bg); color: var(--evt-fg);
  writing-mode: vertical-rl; transform: rotate(180deg);
  /* com writing-mode vertical, flex-direction:column segue o eixo de bloco
     (horizontal na tela) — é isso que joga "Pôster"/"Short" para uma 2ª linha
     de texto vertical, em vez de emendar na mesma. */
  flex-direction: column;
  font-size: .95rem; letter-spacing: .03em; gap: .15em;
}
.bfp-block--session .bfp-block__sub { font-size: .92em; }

.bfp-block--keynote {
  background: var(--evt-bg); color: var(--evt-fg);
  flex-direction: column; gap: .1em; font-size: 1.15rem; padding: 4px;
}

.bfp-block--social {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--navy-header), var(--deep-navy));
  color: var(--cloud); font-size: 1.2rem; padding: 4px;
}
/* textura da árvore-circuito (branca, sutil) por cima do gradiente */
.bfp-block--social::before {
  content: ""; position: absolute; inset: 0; background: var(--cloud);
  -webkit-mask: url(../../images/arvore-colorida.svg) center / cover no-repeat;
  mask: url(../../images/arvore-colorida.svg) center / cover no-repeat;
  opacity: .13; pointer-events: none;
}
/* faixa de acento das cores dos eventos na base do social */
.bfp-block--social::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: var(--bfp-rainbow); z-index: 2;
}
.bfp-block--social .bfp-block__title { position: relative; z-index: 1; font-weight: 800; }

/* "Special Committee Meeting" numa coluna de ~45px: as palavras em inglês são
   mais longas que as em português, então o corpo fica abaixo dos demais — o
   suficiente para "Committee" caber inteiro e quebrar só entre palavras. */
.bfp-block--meeting {
  background: #8C80C7; color: var(--cloud); font-size: .48rem; font-weight: 700; padding: 2px;
}

/* "TBD*": o slot existe, o conteúdo ainda não. Cinza azulado um passo acima do
   fog do fundo — presente como bloco, sem competir com os eventos. A sigla é
   curta, então fica na horizontal mesmo nas colunas estreitas. */
.bfp-block--tbd {
  background: #CBD1DE; color: var(--navy);
  font-size: .86rem; letter-spacing: .04em;
}
.bfp-block--tbd .bfp-block__code { font-weight: 600; }
/* faixa de largura total (dia inteiro sem definição) */
.bfp-block--tbd-band { font-size: var(--wp--preset--font-size--sm); }
.bfp-block--tbd-band .bfp-block__title { font-weight: 600; }

/* ---------- Overlay das faixas semanais (Lunch/Coffee) ---------- */
.bfp-overlay {
  position: absolute; top: var(--plot-top, 0); z-index: 2;
  left: calc(15px + var(--axis-w) + var(--gap)); right: 15px;
  pointer-events: none;
}
.bfp-band { position: absolute; left: 0; right: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
/* faixa de acento das cores dos eventos no topo do Coffee/Lunch */
.bfp-band::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--bfp-rainbow);
}
.bfp-band--lunch { background: url(../../images/bg-lunch.png) center / cover no-repeat; color: var(--slate); font-weight: 400; font-size: var(--wp--preset--font-size--lg); border-radius: 8px; }
.bfp-band--coffee { background: url(../../images/bg-coffe.png) center / cover no-repeat; color: var(--slate); font-weight: 400; font-size: .7rem; border-radius: 8px; }

/* ---------- Estado de filtro ---------- */
.is-dimmed { opacity: .16 !important; }

/* ---------- Responsivo: um dia por vez ----------
   Corte em 1200px, não em 960px: os 4 dias × 7 salas têm um piso rígido de
   largura. A coluna de sala não encolhe abaixo do min-content do rótulo
   ("Arena" a .8rem ≈ 35px), então 7×35 + vãos ≈ 260px por dia e 4 dias +
   eixo + padding ≈ 1160px. Abaixo disso a grade não comprime: ela transborda
   e os dias colidem. Medido: 1200px íntegro, 1150px já com 7px de transbordo.
   Se o rótulo de sala mudar de tamanho, este número muda junto. */
@media (max-width: 1199px) {
  .bracis-figma-program { --bfp-mode: single; }

  .bfp-days { grid-template-columns: 1fr; }
  .bfp-day { display: none; border-right: 0; margin-right: 0; }
  .bfp-day.is-active-day { display: block; }
  /* o cabeçalho do dia mantém a proporção 2:1 do desktop, mas sobe 50% de
     escala: um dia por tela, o cabeçalho é o título da vista. Os botões
     acompanham porque medem a partir de --day-fs. */
  .bfp-day__head { --day-fs: calc(var(--wp--preset--font-size--xl) * 1.5); }
  .bfp-day__navbtn { display: flex; }
  .bfp-day__date { flex: 1; text-align: center; }

  /* Um dia ocupa a largura dos quatro: a coluna de sala passa de ~36px para
     ~130px, então os rótulos e os nomes de evento sobem de escala junto.

     O rótulo usa clamp, não valor fixo: a coluna vale ~(vw - 104)/7 e o
     "Arena" precisa de ~2,8x o próprio corpo. A 1,05rem fixo isso cabe de
     ~440px para cima, mas estoura num telefone (medido: 25px de transbordo
     e 9px de rolagem horizontal a 420px). O termo em vw faz a fonte ceder
     junto com a coluna, sem precisar de um segundo breakpoint. */
  .bfp-day__room { --room-fs: clamp(.65rem, 2.5vw, 1.05rem); }
  .bfp-block--session { font-size: 1.05rem; }
  .bfp-block--keynote { font-size: 1.2rem; }
  .bfp-block--social { font-size: 1.2rem; }
  /* o meeting NÃO cresce aqui: no modo de um dia a coluna de sala fica em
     ~39px (mais estreita que os 45px do desktop), então ele mantém o corpo
     do desktop — a .68rem anterior vazava 13px para fora da pastilha. */
}