/* Personalizações visuais leves */

.about-entity1 img {
  border: 3px solid #2c3e50;
}

.about-link {
  border-radius: 6px;
}

h2 {
  border-bottom: 1px solid #dee2e6;
  padding-bottom: 0.3rem;
}

/* Lista de participantes (com foto) no final de uma página de publicação
   — ver publications/retreiver/TEMPLATE.qmd, seção "## Authors". Cada
   pessoa linka para people/<id> (equipe) ou authors/<id> (colaborador
   externo, fora da página People). */
/* O Pandoc embrulha os <a> soltos dentro de ::: {.paper-authors} num único
   <p> (é assim que ele trata HTML bruto em linhas adjacentes de um fenced
   div) — então quem precisa ser o container flex de verdade é esse <p>,
   não a própria .paper-authors (que só tem esse <p> como filho único).
   Sem isso, cada link (display:flex, block-level) empilha verticalmente
   em vez de ficar lado a lado. .project-participants é gerado por
   participants.lua como um <div> de verdade (não linhas soltas de HTML),
   então não passa por esse embrulho automático — o próprio elemento já é
   o container flex. */
.paper-authors,
.project-participants {
  margin: 1rem 0;
}

.paper-authors p {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 0;
}

.project-participants {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.paper-authors a,
.project-participants a {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 84px;
  text-align: center;
  font-size: 0.75em;
  color: inherit;
  text-decoration: none;
}

.paper-authors img,
.project-participants img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0.35rem;
}

/* Autor sem foto confirmada (nem da equipe, nem coautor reconhecido pelo
   próprio Scholar) — ícone genérico do mesmo tamanho da foto, pra não
   quebrar o alinhamento da fileira. */
.paper-authors i.bi-person-circle,
.project-participants i.bi-person-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #e9ecef;
  color: #6c757d;
  font-size: 2rem;
  margin-bottom: 0.35rem;
}

/* O Quarto define ~10 variações de grid-template-columns para .page-columns
   (fullcontent/listing/floating/docked/toc-left, cada combinação com seus
   próprios valores), e todas travam a coluna de conteúdo (body-content) em
   algo como minmax(500px, calc(850px - 3em)) — ~850px fixos, bem estreito
   em telas largas. Substituímos por uma única regra (com !important, para
   vencer qualquer uma das variações acima) onde o conteúdo sempre ocupa
   70% da largura da tela, com margens iguais (15%) dos dois lados. */
.page-columns {
  grid-template-columns:
    [screen-start] 1fr
    [screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] minmax(0, 70vw)
    [body-content-end body-end body-end-outset page-end-inset page-end screen-end-inset] 1fr
    [screen-end] !important;
}

/* A regra acima colapsa "body-end" e "page-end" na mesma linha do grid —
   ótimo para a maioria das páginas (sem barra lateral), mas o CSS padrão
   do Quarto posiciona a barra de categorias/TOC de um listing com
   `grid-column: body-end / page-end` (ver _bootstrap-rules.scss): duas
   linhas iguais viram uma coluna de largura zero, e a barra lateral acaba
   se sobrepondo ao conteúdo. A solução é reabrir, só para essa variante,
   colunas de verdade entre "body-content-end" e a borda da tela — tiradas
   de dentro dos mesmos 70vw de conteúdo (não somados a eles), pra manter
   a regra de 70% de tela ocupada.
   Importante: #quarto-margin-sidebar também é usado, em QUALQUER página
   de conteúdo com `toc: true` (todas as aulas), para o sumário (#TOC) —
   por isso o seletor usa `:has()` para mirar as duas variantes (nuvem de
   categorias OU TOC).
   Conteúdo sempre 70vw. Margem esquerda sempre 15vw — igual à regra
   geral acima, com ou sem menu, pra não sobrar mais espaço vazio de um
   lado do que do outro. Quando há menu (categorias ou TOC), ele mora
   DENTRO da margem direita, que por isso também continua 15vw no total —
   só que preenchida por 1vw de respiro colado ao conteúdo + 11vw pro
   menu em si + 3vw de margem até a borda da tela, em vez de vazia.

   BUG CORRIGIDO — nomeação das linhas do grid não podia ser lida de
   trás pra frente igual à ordem em que os nomes aparecem no CSS. A
   versão anterior desta regra escrevia, nessa ordem:
     [body-content-end body-end-outset body-end] 1vw [page-end-inset page-end] 11vw [screen-end-inset screen-end] 3vw
   ou seja, "body-end" ficava ANTES da faixa de 1vw (respiro), e
   "page-end" ficava DEPOIS dela — só que o CSS padrão do Quarto (linha
   ~309 de _bootstrap-rules.scss) posiciona a barra lateral exatamente
   com `grid-column: body-end / page-end`. Com "body-end" e "page-end"
   colados nas duas pontas da faixa de 1vw (não da faixa de 11vw!), a
   ÁREA DE GRID de verdade da barra lateral era essa faixa de 1vw
   (~9px em telas largas, menos ainda em telas estreitas) — não os 11vw
   pretendidos. O `width: 11vw` que forçávamos no elemento (ver abaixo)
   só mascarava o sintoma: o box ficava largo o bastante visualmente,
   mas "vazava" da sua área de grid pra direita a partir do canto
   esquerdo dela (comportamento padrão do navegador quando um item é
   mais largo que a própria área) — nunca alcançando de fato a borda
   direita da faixa de 11vw real, que sobrava vazia bem à direita da
   barra. Em telas estreitas (<1000px) a faixa de 1vw physically
   shrinks to just a few px, tornando o efeito ainda mais visível
   (a barra "flutua" ainda mais perto do conteúdo, com uma faixa maior
   de espaço morto entre ela e a borda da tela).
   Fix: mover "body-end" pra DEPOIS da faixa de 1vw e "page-end" pra
   DEPOIS da faixa de 11vw — agora a área de grid real da barra lateral
   (body-end → page-end) é exatamente a faixa de 11vw pretendida, igual
   à convenção que o próprio Quarto usa nos mixins de TOC (ver
   _bootstrap-mixins.scss, `page-columns-tocleft-wide`). "screen-end"
   também precisa ser a ÚLTIMA linha nomeada, sem nenhuma faixa depois
   dela (assim como na regra geral acima, sem barra lateral) — na
   versão anterior havia uma faixa de 3vw DEPOIS de "screen-end", então
   qualquer regra do site (nossa ou do Quarto) que use "screen-end" como
   borda da tela parava 3vw curta da borda real. */
.page-columns:has(.quarto-listing-category),
.page-columns:has(nav[role="doc-toc"]) {
  grid-template-columns:
    [screen-start] 15vw
    [screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] minmax(0, 70vw)
    [body-content-end body-end-outset] minmax(0, 1vw)
    [body-end] minmax(0, max(11vw, 170px))
    [page-end-inset page-end screen-end-inset] 3vw
    [screen-end]
    !important;
}

/* Mesmo bug de largura das categorias (ver bloco de categorias mais
   abaixo: um item de grid position:static/sticky não estica pra
   largura da coluna sozinho, só com `vw` explícito, não com `%`) — só
   que aqui SEM tocar em position/top/max-height, porque o TOC deve
   continuar sticky (acompanhar o scroll é o comportamento certo pra um
   sumário, diferente da nuvem de categorias). Agora que a área de grid
   (ver correção acima) já é exatamente 11vw, esse width não é mais uma
   máscara pro bug de posicionamento — é só o valor real da coluna.
   Cartão (fundo + borda), no mesmo espírito visual da barra de
   categorias de Publications (pedido explícito: "deixar o toc com uma
   estrutura parecida do categories"). margin-top (não padding-top)
   empurra o CARTÃO INTEIRO pra baixo até alinhar com o topo do título
   da aula — um padding-top só empurraria o texto de dentro, deixando a
   borda do cartão "vazando" pra cima, ocupando visualmente parte da
   margem superior que o resto do conteúdo respeita (era exatamente essa
   a reclamação: "eles ainda ocupam a margem de cima"). Valor calibrado
   comparando o topo do cartão com o topo do <h1> da aula. */
#quarto-margin-sidebar:has(nav[role="doc-toc"]) {
  width: max(11vw, 170px);
  box-sizing: border-box;
  margin-top: 1.9rem;
  /* Sem isso, o item de grid estica por padrão (align-self:stretch é o
     default) até a altura da LINHA inteira do grid — que vai até o fim
     do conteúdo da página, quase sempre bem mais alto que a lista real
     de "Nesta aula"/"Outras aulas". Com align-self:start, a caixa
     (fundo + borda) só ocupa a altura do próprio conteúdo — mesma
     lógica já aplicada à caixa de categorias, abaixo. position:sticky
     continua funcionando normalmente com align-self:start (é o caso
     comum: a maioria dos elementos sticky não é esticada). */
  align-self: start;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  padding: 1rem 1.15rem;
  /* Pedido explícito: nunca passar de 75% da altura da tela — útil pra
     disciplinas com "Outras aulas" longa (muitas aulas) ou uma aula com
     muitos títulos no sumário. overflow-y:auto dá rolagem própria pro
     que não cabe, em vez de a caixa crescer sem limite (mesma lógica já
     usada na nuvem de categorias de Publications, com 70vh).
     !important é necessário aqui: o próprio Quarto define, via JS (não
     CSS), um style INLINE neste elemento — `max-height: calc(-79px +
     100vh); top: 79px;` — pra manter o sidebar sticky abaixo da navbar
     fixa (79px de altura). Style inline tem prioridade sobre qualquer
     regra de folha de estilo externa, mesmo com seletor mais específico
     (confirmado inspecionando `sidebar.style.cssText` ao vivo — sem
     !important, esta regra NUNCA tinha efeito nenhum, apesar de "ganhar"
     na comparação de especificidade entre seletores). */
  max-height: 75vh !important;
  overflow-y: auto;
}

/* Categorias de Publications: painel fechado por padrão (cartão
   delimitado — fundo + borda —, título clicável com ícone de seta
   inserido via JS em publications/categories-accordion.html, e lista de
   texto simples em vez das pílulas antigas — pílulas quebrando em 2-3
   linhas numa coluna estreita, com nomes como "Multi-objective
   Optimization", é o que deixava a barra lateral com aparência
   desleixada; texto simples quebra linha normalmente, sem parecer
   quebrado).
   Também: sem position fixed/sticky (herdado de `.sidebar.margin-sidebar`
   no CSS padrão do Quarto) — a barra cresce com o próprio conteúdo e
   rola junto com o resto da página, como pedido.
   align-self:start é necessário porque, sem ele, o item de grid estica
   (comportamento padrão) até a altura da linha inteira — que vai até o
   fim da lista de publicações —, e com fundo/borda isso virava um
   painel cinza enorme e vazio ocupando a coluna toda até o rodapé.
   width:11vw é necessário porque, de volta ao grid normal (sem
   position:fixed), o item por padrão NÃO estica na largura: fica do
   tamanho do próprio conteúdo (~41px), bem mais estreito que a coluna
   "page-end" reservada pra ele (11vw, definida em
   .page-columns:has(...) acima). `width:100%` (percentual) não resolve
   certo aqui — testado isoladamente, dá os mesmos ~41px, aparentemente
   um caso em que o Chrome não trata "%" como relativo à área do grid
   neste elemento em particular — mas `vw` (absoluto, não percentual)
   funciona, por isso repetimos aqui o mesmo valor da coluna.
   margin-top alinha o TOPO DO CARTÃO (borda, não só o texto de dentro)
   com o topo do título "Publications" — sem isso, o cartão (que começa
   no topo da própria linha do grid, antes do respiro que o título tem
   por padrão) ficava uns 35px mais alto que o título, "vazando" pra
   dentro da margem superior que o resto do conteúdo respeita. Mesma
   lógica e mesmo mecanismo do TOC (`:has(nav[role="doc-toc"])` acima). */
#quarto-margin-sidebar:has(.quarto-listing-category) {
  position: static;
  top: auto;
  max-height: none;
  overflow-y: visible;
  align-self: start;
  width: max(11vw, 170px);
  box-sizing: border-box;
  margin-top: 2.2rem;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  padding: 1rem 1.15rem;
}

.quarto-listing-category-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #212529;
  cursor: pointer;
  user-select: none;
}

.quarto-listing-category-title .bi-list {
  color: #6c757d;
  font-size: 1rem;
}

#quarto-margin-sidebar.categories-collapsed .quarto-listing-category.category-cloud {
  display: none;
}

/* Aberta, a lista tem ~35 categorias — sem limite ela cresce até
   qualquer altura e empurra o resto da página. max-height relativo a
   `vh` (não a um valor fixo em px) faz a caixa se adaptar ao tamanho
   da tela — cabe menos linhas visíveis numa tela baixa, mais numa
   alta —, com barra de rolagem própria pro que não cabe, em vez de a
   lista toda participar do scroll da página. */
.quarto-listing-category.category-cloud {
  display: block;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e9ecef;
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.quarto-listing-category.category-cloud .category {
  padding: 0.35rem 0;
  color: #495057;
  line-height: 1.3;
  cursor: pointer;
  transition: color 0.15s ease-in-out;
}

/* A nuvem varia o tamanho da fonte pela frequência de cada categoria
   (category-cloud-1 a -4) — nivelamos, senão a lista de texto simples
   fica com tamanhos de linha inconsistentes, o mesmo efeito "poluído"
   que estávamos tentando eliminar, só que sem as pílulas. */
.quarto-listing-category.category-cloud .category span {
  font-size: 0.85rem !important;
}

.quarto-listing-category.category-cloud .category:hover {
  color: #0085ca;
}

.quarto-listing-category.category-cloud .category.active {
  color: #0085ca;
  font-weight: 600;
}

/* Foto do IC no topo de Teaching / embaixo de Projects / Contact. */
.page-banner {
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

/* Contact: cada dado (email, telefone, endereço, horário) como uma linha
   com ícone à esquerda, em vez do bloco de texto corrido com só
   **negrito** que a página tinha antes — mesmo espírito visual dos
   ícones de #links na home, mas em lista (cada item já tem um rótulo
   textual ao lado, então não faz sentido o mesmo tratamento circular). */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1rem;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.contact-item i {
  flex-shrink: 0;
  width: 1.5rem;
  margin-top: 0.2rem;
  font-size: 1.3rem;
  color: #0085ca;
  text-align: center;
}

.contact-item p {
  margin-bottom: 0;
}

/* Período (ano de início/fim) de cada projeto, no mesmo estilo discreto
   usado para data/autor nas outras listagens. */
.quarto-post .listing-subtitle {
  color: #6c757d;
  font-size: 0.85em;
  margin-bottom: 0.4rem;
}

/* O template "about: jolla" injeta regras de tema sem escopo
   (.quarto-title h1.title / .quarto-title .description) que centralizam
   título e subtítulo em TODAS as páginas do site, não só na home.
   Restauramos o alinhamento à esquerda por padrão... */
.quarto-title h1.title,
.quarto-title .description {
  text-align: left;
}

/* ...e centralizamos de volta apenas dentro do cartão de perfil da home. */
.quarto-about-jolla .quarto-title h1.title,
.quarto-about-jolla .quarto-title .description,
.quarto-about-jolla .quarto-title .subtitle {
  text-align: center;
}

/* O template "about: jolla" usa align-items:center no flexbox, o que
   encolhe <main> (e o <header> do título) para caber no conteúdo em vez de
   ocupar a largura toda. Isso quebra dois efeitos:
   (1) o cargo/subtítulo só "parecia" centralizado quando por acaso era a
       linha mais larga do cartão — por isso a regra explícita acima;
   (2) as faixas full-bleed do band-sections.lua (.column-screen) calculam
       "borda a borda" relativas à largura de <main>, então se <main> está
       encolhido, a faixa também fica encolhida em vez de ir de ponta a
       ponta da tela.
   align-items:stretch sozinho não resolve: <main> também é um grid
   container (classe .page-columns), e um grid container dimensionado por
   flexbox "stretch" ainda cai de volta no tamanho intrínseco do seu próprio
   grid-template-columns em vez de esticar de verdade — confirmado
   visualmente com screenshot (Chrome headless) comparando as duas versões.
   Por isso width:100% explícito, não só align-items. */
.quarto-about-jolla {
  align-items: stretch;
  /* Padrão do próprio template "about: jolla" do Quarto é margin-top:10%
     — um espaço em branco grande entre a navbar e a foto de perfil nas
     páginas de pessoa. Pedido explícito: reduzir pela metade (10% -> 5%),
     e de novo pela metade depois (5% -> 2.5%). */
  margin-top: 2.5%;
}

.quarto-about-jolla > main {
  width: 100%;
}

.quarto-about-jolla > img.about-image {
  align-self: center;
}

/* O mesmo template também aplica text-align:center a toda a <main>, o que
   centralizava o texto de Education nas páginas de perfil (about: jolla).
   ".section-content" (gerado manualmente ou pelo filtro band-sections.lua)
   sempre lê da esquerda, como o resto do conteúdo do site. */
.quarto-about-jolla .grid #education,
.section-content {
  text-align: left;
}

/* Conteúdo itemizado (listas) sempre à esquerda nas páginas de perfil,
   mesmo dentro de seções centralizadas ou justificadas à direita — bullets
   ficam ilegíveis quando centralizados/à direita. A indentação padrão do
   navegador (~2.5em) empurra o texto do bullet bem mais para a direita do
   que um parágrafo normal (ex.: o texto de Education) — reduzimos para o
   texto do item começar alinhado com o resto do conteúdo. */
.quarto-about-jolla ul,
.quarto-about-jolla ol {
  text-align: left;
  padding-left: 1.2em;
  margin-left: 0;
}

/* Listagens (teaching/projects/publications): título em destaque,
   data/autor discretos e alinhados à esquerda, sem herdar centralização. */
.quarto-listing,
.quarto-post,
.quarto-grid-item {
  text-align: left;
}

.quarto-post .listing-title,
.quarto-grid-item .card-title {
  font-weight: 600;
}

/* Data/autor empilhados junto com título e descrição, na mesma coluna
   (não separados numa faixa lateral). O Quarto marca os itens com a classe
   "image-right", que usa flex-direction: row-reverse no desktop, e o tema
   aplica um gap:2em pensado para colunas lado a lado — em coluna isso virava
   um espaço vertical enorme entre a descrição e a data/autor. Reduzimos tudo
   para um ritmo vertical compacto. */
.quarto-post.image-left,
.quarto-post.image-right {
  flex-direction: column;
  gap: 0.35rem;
}

.quarto-post {
  margin-bottom: 1rem;
  padding-bottom: 0.75em;
}

.quarto-post .metadata {
  text-align: left;
  padding-bottom: 0;
}

.quarto-post .body .description p {
  margin-bottom: 0.25rem;
}

.quarto-post .listing-categories {
  margin: 0.15rem 0;
}

/* Data: informação secundária, discreta. */
.quarto-post .listing-date,
.quarto-grid-item .listing-date {
  color: #6c757d;
  font-size: 0.8em;
  font-weight: normal;
}

/* Autor no mesmo tamanho do journal/venue (campo "description" do item). */
.quarto-post .listing-author,
.quarto-grid-item .listing-author {
  font-size: 0.9em;
  color: #212529;
}

/* Projects e teaching em cards de uma coluna (grid-columns: 1 no front
   matter da listing), com cantos arredondados — o tema flatly usa cards
   de canto reto por padrão. */
#projects-listing .quarto-grid-item.card,
#teaching-listing .quarto-grid-item.card {
  border-radius: 0.75rem;
  overflow: hidden;
}

/* Publications também é uma listing "grid" de uma coluna, mas sem `id:`
   próprio no front matter (por isso o seletor usa o id padrão gerado
   pelo Quarto, "listing-listing", em vez de algo como
   "#publications-listing"). Os cards herdavam o padding padrão do
   Bootstrap (.card-body: 1rem) somado à margem inferior padrão de
   parágrafo (<p>: margin-bottom: 1rem) dentro da descrição — como cada
   entrada é só título + pastilhas de categoria + uma linha de autor/
   venue, essas duas margens somadas deixavam a caixa bem maior que o
   próprio texto. Comprimimos o padding do card, zeramos a margem do
   parágrafo (o próprio padding do card já dá o respiro necessário) e
   reduzimos o espaço entre um card e o próximo. */
#listing-listing .list.grid {
  gap: 0.6rem;
}

#listing-listing .card-body {
  padding: 0.6rem 0.9rem;
}

#listing-listing .card-text.listing-description p {
  margin-bottom: 0;
}

/* Campo de busca ("Filter"): pedido explícito pra morar DENTRO do
   cartão "Categories" da barra lateral, não solto ao lado do título
   "Publications". A barra lateral (#quarto-margin-sidebar) é irmã de
   #quarto-document-content, não descendente — não dá pra resolver só
   com CSS (não existe seletor que mova um nó pra outro container). A
   solução é mover o próprio elemento (não uma cópia) via JS, em
   publications/categories-accordion.html, pra dentro do cartão de
   categorias, logo abaixo do título clicável e antes da lista — o
   binding de busca do List.js (site_libs/quarto-listing/list.min.js,
   `new List('listing-listing', ...)`) já aconteceu antes desse ponto
   (o script dele carrega e roda primeiro no <head>/fim do <body>, e
   nosso script de mover é registrado depois) — mover um nó no DOM não
   desliga os event listeners já presos a ele, então o filtro continua
   funcionando normalmente depois de realocado.
   Só faz sentido mover em telas onde a barra lateral existe: o próprio
   Quarto esconde #quarto-margin-sidebar por completo abaixo de 768px
   (ver _bootstrap-rules.scss, "@include media-breakpoint-down(md)") —
   por isso o JS só move quando `window.matchMedia("(min-width: 768px)")`
   é verdade nesse momento; abaixo disso, o campo continua onde o Quarto
   já colocava por padrão (acima da lista, dentro de #listing-listing),
   sem nenhum CSS especial precisando entrar em ação. */
#quarto-margin-sidebar .listing-actions-group {
  width: 100%;
  margin: 0.85rem 0 0;
}

#quarto-margin-sidebar .listing-actions-group .input-group {
  width: 100%;
}

/* Zebra branco/cinza entre os cards da listagem de teaching (um card por
   disciplina), para diferenciar visualmente cada entrada. */
#teaching-listing .quarto-grid-item.card:nth-child(odd) {
  background-color: #ffffff;
}

#teaching-listing .quarto-grid-item.card:nth-child(even) {
  background-color: #f4f5f6;
}

/* Faixas alternando cinza/branco entre as seções da home, à la Hugo Blox.
   .column-screen é o mecanismo nativo do Quarto para conteúdo "full-bleed"
   dentro do grid de página (evita hacks manuais com 100vw). */
body {
  background-color: #ffffff;
}

.band {
  padding: 3rem 0;
  margin-bottom: 0;
}

.band-gray {
  background-color: #f4f5f6;
}

.band-white {
  background-color: #ffffff;
}

.band h2 {
  margin-top: 0;
}

/* Faixa final da home ("Meet the team"): foto (team.jpg, um mural do IC)
   como fundo full-bleed (mesmo tratamento de ponta-a-ponta das faixas
   cinza/branco das outras seções) em vez de só o botão solto num fundo
   branco liso que a seção tinha antes.
   Precisa ser uma seção "##" de verdade (`## Meet the team
   {.team-band-heading}`, processada pelo band-sections.lua como as
   demais) — um `::: {.column-screen} :::` manual sem heading própria
   antes dele fica acumulado dentro do CONTEÚDO da seção anterior
   ("Latest Publications"), porque o filtro só fecha uma seção quando
   encontra o próximo "##" no nível raiz do documento. Aninhado assim
   dentro de `.section-content` (que é display:block, não mais
   full-bleed), o `.column-screen` não tem mais um ancestral
   `.page-columns` de verdade pra caber ponta-a-ponta — ele fica travado
   na largura da coluna de conteúdo (~977px), não da tela cheia. Foi
   exatamente esse bug visível quando a imagem apareceu: a foto ficava
   dentro de uma caixa mais estreita, "num quadro dentro de
   publications", em vez de ocupar a tela toda como as outras faixas.
   Sendo uma seção "##" de verdade, o band-sections.lua gera a mesma
   estrutura de duas colunas (rótulo + conteúdo) das demais seções —
   removida abaixo só pra esta faixa (:has() mirando a classe do
   heading), porque aqui o título faz parte do herói centralizado, não
   de um rótulo fixo à esquerda.
   O gradiente escuro por cima garante contraste pro texto branco
   independente de onde a foto for mais clara/colorida (o mural tem
   muita cor, um overlay uniforme é mais confiável do que contar com um
   ponto específico da imagem estar escuro). */
.column-screen:has(.team-band-heading) {
  position: relative;
  background-image: linear-gradient(
      to bottom,
      rgba(15, 23, 32, 0.6),
      rgba(15, 23, 32, 0.72)
    ),
    url("team.jpg");
  background-size: cover;
  background-position: center 35%;
  padding: 4.5rem 0;
}

.column-screen:has(.team-band-heading) .section-row {
  flex-direction: column !important;
  align-items: center;
  gap: 0.6rem !important;
  text-align: center;
}

.column-screen:has(.team-band-heading) .section-label,
.column-screen:has(.team-band-heading) .section-content {
  flex: none !important;
  width: 100%;
  text-align: center;
}

.team-band-heading {
  margin: 0;
  color: #ffffff;
}

.team-band-content p {
  max-width: 34em;
  margin: 0 auto 1.5rem;
  color: rgba(255, 255, 255, 0.88);
}

.team-band-content .btn-outline-light {
  border-width: 1.5px;
  font-weight: 600;
}

/* Cada seção da home vira duas colunas: título sozinho, fixo no topo à
   esquerda (com espaço vazio embaixo), e todo o conteúdo (listagem) à
   direita, numa coluna mais larga.
   O Quarto às vezes adiciona "page-columns page-full" de brinde nessas
   divs (observado só na seção de Publications, motivo não muito claro) —
   combinado com nosso override de largura de 75% (.page-columns{...}),
   isso as transforma em grid-container e quebra o layout de duas colunas.
   Forçamos display:flex/block com !important para neutralizar, já que a
   regra do Quarto usa seletores bem mais específicos (com :not()) que
   venceriam por especificidade mesmo carregando antes.
   A classe "page-full" de brinde também mexe no grid-column (via
   .page-full{grid-column:screen-start/screen-end!important}), esticando
   a linha inteira até a borda da tela em vez de ficar dentro da coluna de
   conteúdo centralizada — por isso o título/lista ficavam grudados à
   esquerda. Fixamos o grid-column de volta para a coluna de conteúdo
   normal (a mesma que .column-body já usa), também com !important.
   Essa mesma regra do Quarto (`body.listing:not(.floating):not(.docked)
   .page-columns`) também zera o "gap" — e como nem ela nem a nossa regra
   original tinham !important, quem ganhava era só a especificidade (a
   regra do Quarto, bem mais específica, vencia mesmo carregando antes) —
   por isso a seção de Publications ficava sem o respiro entre o título e
   a lista, coladas uma na outra, só nessa seção. Daí o !important
   também no gap abaixo. */
.section-row {
  display: flex !important;
  grid-column: body-content-start / body-content-end !important;
  gap: 2.5rem !important;
  align-items: flex-start;
}

.section-label {
  flex: 0 0 180px;
  text-align: left;
}

.section-label h2 {
  margin-top: 0;
  border-bottom: none;
  padding-bottom: 0;
}

.section-content {
  display: block !important;
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 767.98px) {
  .section-row {
    flex-direction: column;
    gap: 0.5rem;
  }

  .section-label {
    flex-basis: auto;
  }
}

/* "SEE ALL"/"Slides" eram só um link sublinhado simples — mesmo espírito
   do botão outline usado em "Meet the team", só sem cor de fundo. Nas
   seções da home (Teaching/Projects/Publications), o parágrafo que
   contém só esse link vira centralizado, pro botão ficar no meio da
   coluna de conteúdo, não colado à esquerda. */
.see-all {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.4rem 1rem;
  border: 1.5px solid #0085ca;
  border-radius: 999px;
  color: #0085ca;
  font-size: 0.85em;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.see-all:hover {
  background-color: #0085ca;
  color: #ffffff;
}

.section-content p:has(> a.see-all) {
  text-align: center;
  margin-top: 0.5rem;
}

/* Ícone de slides no link "Slides →" das notas de aula, em vez de só
   depender do "Outros formatos: RevealJS" (texto genérico, escondido no
   TOC) que o Quarto adiciona sozinho quando a página tem mais de um
   formato de saída. */
/* [href$="slides.html"] ("termina com"), não [href="slides.html"]
   (correspondência exata) — extensões de navegador que reescrevem links
   relativos pra absolutos (`href="slides.html"` vira
   `href="http://.../slides.html"`) quebram uma correspondência exata,
   mas continuam terminando em "slides.html". Bug real encontrado assim:
   o ícone nunca aparecia no Chrome do usuário (perfil com extensões),
   mesmo com a regra correta no CSS. */
a.see-all[href$="slides.html"]::before,
a.see-all.lesson-list-link::before {
  font-family: "bootstrap-icons";
}

a.see-all[href$="slides.html"]::before {
  content: "\f66c";
}

/* Ícone do link "Lista de aulas" (volta pra ../index.qmd, a página da
   disciplina) — bi-card-list. Usa uma classe explícita em vez de casar
   pelo href (como o de slides, acima): esse link aponta pra um caminho
   relativo diferente em cada disciplina, então não dá pra escrever um
   único seletor de sufixo de href que funcione em toda aula. */
a.see-all.lesson-list-link::before {
  content: "\f227";
}

/* Cabeçalho da aula (Autor / Data de Publicação / Slides): o Quarto usa
   `grid-template-columns: repeat(2, 1fr)` nativamente (ver
   .quarto-title-meta no CSS do Bootstrap) — cada coluna ocupa metade da
   largura disponível mesmo quando o conteúdo é bem mais curto que isso.
   `grid-auto-flow: column` com `grid-auto-columns: max-content` troca
   isso por colunas do tamanho do próprio conteúdo, na ordem em que os
   filhos aparecem no DOM — os dois `<div>` nativos (Autor, Data) mais o
   link "Slides →" (terceiro filho, movido pra cá por
   teaching/toc-accordion.js) viram três colunas lado a lado, coladas.
   align-items:stretch faz as três caixas abaixo terem a mesma altura. */
.quarto-title-meta {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  column-gap: 1rem;
  align-items: stretch;
}

/* As quatro "caixas" do cabeçalho (Autor, Data, Slides, Lista de aulas)
   — pedido explícito do usuário: mais quadradas que o antigo texto
   corrido / botão em pílula. Mesma linguagem visual dos outros cartões
   do site (barra de categorias/TOC: fundo cinza claro, borda fina,
   cantos arredondados — ver #quarto-margin-sidebar mais abaixo).
   min-width dá uma base quadrada quando o conteúdo é curto (ex.: a
   data); texto mais longo (ex.: nome + afiliação do autor) só quebra
   linha dentro da mesma caixa, sem alargar desproporcionalmente.
   `.quarto-title-meta > a.see-all` (os links movidos pra cá, Slides e
   Lista de aulas) é mais específico que a regra genérica `.see-all`
   (pílula azul, ver acima), então ganha da cascata sem precisar de
   !important — vira uma caixa igual às outras, só que clicável. */
.quarto-title-meta > div,
.quarto-title-meta > a.see-all {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 150px;
  padding: 0.85rem 1.25rem;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  margin-top: 0;
}

/* Slides e Lista de aulas: só ícone, sem o texto do link (pedido
   explícito — "o botão de slide não precisa ter escrito slides, só
   deixe o ícone maior"). font-size:0 no link esconde o texto (o nome
   acessível continua vindo do aria-label/title no markdown, não do
   texto visual — leitor de tela não é afetado); o ::before tem seu
   próprio font-size explícito por cima, senão herdaria o 0 do pai e o
   ícone sumiria junto. min-width menor que as caixas de texto (Autor/
   Data): não precisam caber uma linha inteira, só o ícone centralizado. */
.quarto-title-meta > a.see-all {
  color: #0085ca;
  font-size: 0;
  min-width: 90px;
}

.quarto-title-meta > a.see-all::before {
  font-size: 1.8rem;
  margin-right: 0;
}

.quarto-title-meta > a.see-all:hover {
  background-color: #0085ca;
  color: #ffffff;
  border-color: #0085ca;
}

/* O Quarto adiciona esse bloco "Outros formatos: RevealJS" sozinho no
   fim do TOC sempre que a página tem mais de um formato de saída — mas
   já temos o link "Slides →" (com ícone, acima) no corpo principal da
   aula, então esse bloco fica redundante e pouco visível ali embaixo. */
.quarto-alternate-formats {
  display: none;
}

/* Cartão de perfil: menos espaço entre a função (subtitle) e a instituição,
   instituição em fonte maior, e os ícones logo abaixo dela em vez de no
   rodapé da página (onde o template "about: jolla" os colocaria por padrão). */
.quarto-about-jolla .quarto-title .subtitle {
  margin-bottom: 0.2rem;
}

/* .quarto-about-jolla é display:flex, então margens de irmãos diretos
   (header do título e main do conteúdo) não colapsam como colapsariam em
   fluxo normal — dobrando o espaço entre o subtítulo e "Institute of
   Computing" (duas margens de ~17px em vez de uma só). */
.quarto-about-jolla #title-block-header {
  margin-bottom: 0;
}

.affiliation {
  font-size: 1.15em;
  margin-top: 0;
  margin-bottom: 1rem;
}

#links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 0.8em;
  row-gap: 0.5em;
  margin: 0 0 1.75rem;
}

/* Só o ícone visível — o texto (GitHub, Lattes, Google Scholar...) vira uma
   dica ao passar o mouse, em vez de ficar escrito ao lado sempre. O texto
   continua no HTML normalmente (não escondido com display:none), só
   afastado visualmente até o hover/foco, pra não perder a leitura por
   leitor de tela. */
/* O tema "about: jolla" do Quarto estiliza .about-link como um botão com
   borda (mixin responsive-button, em about.scss: "border: solid 1px") —
   por isso os ícones de perfil/publicação apareciam como quadrados com
   contorno, bem diferentes dos ícones lisos (sem caixa) da navbar do
   site. Removendo a borda/fundo aqui alinha o visual dos dois. */
#links .about-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 4.8em;
  height: 4.8em;
  padding: 0;
  font-size: 1rem;
  border: none;
  background: none;
  color: #495057;
}

#links .about-link:hover {
  color: #0085ca;
}

#links .about-link i {
  font-size: 2.4em;
}

#links .about-link-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#links .about-link:hover .about-link-text,
#links .about-link:focus-visible .about-link-text {
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  height: auto;
  margin: 0;
  padding: 0.3rem 0.6rem;
  overflow: visible;
  clip: auto;
  background: #2c3e50;
  color: #fff;
  border-radius: 4px;
  font-size: 0.75rem;
  line-height: 1.3;
  pointer-events: none;
  z-index: 20;
}

/* O tema da página People (grid de cartões agrupados) vive em
   people/team-theme.css + people/team-theme.ejs.md — um pacote próprio,
   assim como o filtro band-sections.lua, em vez de misturado aqui. */

/* Seção Experience na home: cargo (negrito) / local-data (discreto) /
   descrição, cada um seu próprio parágrafo — sem isso, o Markdown colapsa
   quebras de linha simples num único parágrafo corrido. */
.experience-item {
  text-align: left;
  margin-bottom: 1.5rem;
}

.experience-item:last-child {
  margin-bottom: 0;
}

.experience-item p {
  font-size: 0.95em;
  margin-bottom: 0.3rem;
}

.experience-item p:first-child {
  font-size: 1em;
  margin-bottom: 0.1rem;
}

.experience-item p:nth-child(2) {
  color: #6c757d;
  font-size: 0.8em;
  margin-bottom: 0.5rem;
}

.experience-item p:last-child {
  margin-bottom: 0;
}