/* ================================
   LISTA – layout e comportamentos
   ================================ */

:root{
  --panel-pad: 24px;
  --lista-banner-h: 90px;

  /* normalização das logos */
  --logo-cell-h: 120px;   /* altura de cada “slot” de logo */
  --logo-max-w: 70%;      /* limite padrão de largura da imagem dentro do slot */
  --logo-max-h: 60%;      /* limite padrão de altura da imagem dentro do slot */
}

/* por padrão, a LISTA não aparece na Home */
.home .lista{ display: none; }

.home .filtro{ display: none; }

/* quando a faixa estiver aberta em “lista”, mostramos a seção e ocultamos o que não precisa */
.ribbon[data-view="lista"] ~ .home .lista{ 
  display: grid;
  width: 100%;
  gap: 20px;
  padding: var(--panel-pad) var(--container-pad);
  box-sizing: border-box;
  height: calc(100vh - var(--header-h)); /* altura útil: tela - faixa (header-h) */
}




/* quando a faixa estiver aberta em “filtro”, mostramos a seção de filtros */
.ribbon[data-view="filtro"] ~ .home .filtro{ 
  display: grid;
  width: 100%;
  gap: 20px;
  padding: var(--panel-pad) var(--container-pad);
  box-sizing: border-box;
  height: calc(100vh - var(--header-h));
}

/* quando Filtro estiver aberto, escondemos banner e subtítulo também */
.ribbon[data-view="filtro"] ~ .home .banner,
.ribbon[data-view="filtro"] ~ .home .subtitle{
  display: none;
}

/* e escondemos a LISTA quando o filtro está ativo */
.ribbon[data-view="filtro"] ~ .home .lista{
  display: none;
}














/* esconda os elementos da Home que você não quer ver na lista */
.ribbon[data-view="lista"] ~ .home .banner,
.ribbon[data-view="lista"] ~ .home .subtitle{
  display: none;
}

/* ====== layout LISTA ====== */
.ribbon[data-view="lista"] ~ .home .lista .lista-banner{
  height: var(--lista-banner-h);
  border-radius: 16px;
  margin-top: clamp(18px, 2vh, 24px);
  overflow: hidden;
}
.ribbon[data-view="lista"] ~ .home .lista .lista-banner img{
  width: 100%;
  height: 100%;
  object-fit: contain;          /* mostra a imagem inteira, sem cortar */
  display: block;
  background: #040A10;          /* cor de fundo nas “faixas” que sobrarem */
}

/* =========================
   MOMENTO 1 — GRID DE LOGOS
   ========================= */
.lista[data-step="grid"] #listaGrid{ display: grid; }
.lista[data-step="grid"] #listaDetalhe{ display: none; }

#listaGrid{
  overflow: auto;
  height: calc(100% - var(--lista-banner-h) - 20px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  grid-auto-rows: var(--logo-cell-h);
  gap: 28px 48px;
  padding-right: 8px;
  align-content: start;
}

/* =========================
   MOMENTO 2 — DETALHE
   ========================= */
.lista[data-step="detail"] #listaGrid{ display: none; }
.lista[data-step="detail"] #listaDetalhe{ display: grid; }

/* SUBSTITUA este bloco do #listaDetalhe */
#listaDetalhe{
  display: grid;
  grid-template-columns: 280px 1fr 220px;
  gap: 24px;

  /* ⬇️ altura real calculada da área de conteúdo */
  height: calc(
    100vh
    - var(--header-h)
    - var(--lista-banner-h)
    - var(--lista-pad-top, 32px)
    - var(--lista-pad-bottom, 24px)
    - var(--lista-row-gap, 24px)
    - var(--floor-safe, 96px)
  );

  min-height: 0;      /* ESSENCIAL p/ herdar/encolher */
  overflow: hidden;   /* filhos que rolam */


}
#listaDetalhe .logos-vert{
  overflow: auto;
  padding-right: 6px;
  display: grid;
  gap: 16px;
  grid-auto-rows: calc(var(--logo-cell-h) - 8px);
}
#listaDetalhe .descricao{ min-width: 0; display: grid; }
#listaDetalhe .descricao-scroll{ overflow: auto; padding-right: 10px; }
#listaDetalhe .patros{ display: grid; align-content: start; gap: 12px; }



/* cada logo de patrocinador ocupa sempre a mesma caixinha */
#listaDetalhe .patros img{
  display: block;
  width: 160px;
  height: 55px;
  object-fit: contain;
}

/* se tiver <a>, ele vira só um “envelope” da imagem, sem esticar nada */
#listaDetalhe .patros a{
  display: inline-block;
  width: 160px;
  height: 55px;
}


/* =========================
   LOGOS – normalização visual
   ========================= */
.lista .logo,
.filtro .logo{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  height: var(--logo-cell-h);
  padding: 8px 10px;
  border-radius: 8px;
  overflow: hidden;
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* shape branco translúcido no hover/ativo */
.lista .logo::before,
.filtro .logo::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  border-radius: inherit;
  transition: background .25s ease;
  z-index: 0;
}
.lista .logo:hover::before,
.lista .logo.is-active::before,
.filtro .logo:hover::before,
.filtro .logo.is-active::before{
  background: rgba(255,255,255,.85);
}

/* imagem da logo */
.lista .logo img,
.filtro .logo img{
  display: block;
  position: relative;
  z-index: 1;
  max-width: var(--logo-max-w);
  max-height: var(--logo-max-h);
  object-fit: contain;
  margin: 0;
  filter: grayscale(1) contrast(.9) opacity(.65);
  transition: filter .25s ease, opacity .25s ease, transform .15s ease;
}

.lista .logo:hover img,
.lista .logo.is-active img,
.filtro .logo:hover img,
.filtro .logo.is-active img{
  filter: none;
  opacity: 1;
}

/* microajustes de proporção (se marcados via JS) */
.lista .logo img.is-wide,
.filtro .logo img.is-wide{ max-width: 58%; }
.lista .logo img.is-tall,
.filtro .logo img.is-tall{ max-height: 52%; }

/* =========================
   RESPONSIVO
   ========================= */
@media (max-width: 1280px){
  #listaGrid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  #listaDetalhe{ grid-template-columns: 240px 1fr 200px; }
}
@media (max-width: 1024px){
  #listaGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  #listaDetalhe{ grid-template-columns: 220px 1fr 180px; }
}




/* ----- limites e rolagem do MOMENTO 2 ----- */

/* altura do painel de detalhe = viewport - (faixa) - (banner) - paddings - gap - “chão” */
:root{
  /* ajuste esses 3 se precisar, o resto calcula sozinho */
  --lista-pad-top: 32px;
  --lista-pad-bottom: 24px;
  --lista-row-gap: 24px;
  --floor-safe: 96px; /* “faixa” escura inferior */
}

.ribbon[data-view="lista"] ~ .home .lista{
  /* garante que a 2ª linha é área de conteúdo que pode encolher/rolar */
  grid-template-rows: auto minmax(0, 1fr);
  row-gap: var(--lista-row-gap);
  padding: var(--lista-pad-top) var(--container-pad) var(--lista-pad-bottom);
}

/* ===== MOMENTO 2: detalhe ===== */
#listaDetalhe{
  display: grid;
  grid-template-columns: 280px 1fr 220px; /* logos | descrição | patros */
  gap: 24px;

  /* teto independente do container (evita “ir até lá embaixo”) */
  max-height: calc(
    100vh
    - var(--header-h)
    - var(--lista-banner-h)
    - var(--lista-pad-top)
    - var(--lista-pad-bottom)
    - var(--lista-row-gap)
    - var(--floor-safe)
  );

  min-height: 0;     /* permite encolher */
  overflow: hidden;  /* quem rola são os filhos */
}

/* coluna de LOGOS com rolagem própria */
#listaDetalhe .logos-vert{
  display: grid;
  gap: 16px;
  grid-auto-rows: calc(var(--logo-cell-h) - 8px);
  align-content: start;   /* não “esticar” */
  padding-right: 6px;

  min-height: 0;
  overflow: auto;         /* <- rola aqui */
}

/* descrição com rolagem independente */
#listaDetalhe .descricao{ min-width: 0; display: grid; }
#listaDetalhe .descricao-scroll{
  min-height: 0;
  overflow: auto;         /* <- rola aqui */
  padding-right: 10px;
}

/* patrocinadores fixo (sem scroll) */
#listaDetalhe .patros{
  display: grid;
  align-content: start;
  gap: 12px;
}










/* ===== Scroll independente na descrição ===== */

/* garante que as colunas estiquem igualmente */
#listaDetalhe{ align-items: stretch; }

/* a coluna de descrição pode encolher e repassar altura pro filho rolável */
#listaDetalhe .descricao{
  min-height: 0;                 /* desbloqueia encolhimento */
  display: flex;
  flex-direction: column;        /* header (auto) + conteúdo (flex) */
}

/* se você tiver um título fixo na descrição, pode usar .descricao-head (opcional) */
#listaDetalhe .descricao-head{ flex: 0 0 auto; }

/* bloco rolável da descrição */
#listaDetalhe .descricao-scroll{
  flex: 1 1 auto;                /* ocupa o restante da coluna */
  min-height: 0;                 /* ESSENCIAL para o overflow funcionar */
  overflow: auto;                /* rolagem independente aqui */
  padding-right: 10px;           /* respiro da barra */
}


/* garante que o <a> ocupa toda a área do banner */
.lista .lista-banner,
.lista .lista-banner-link { height: var(--lista-banner-h); display: block; }
.lista .lista-banner-link img { width: 100%; height: 100%; object-fit: cover; display: block; }
















/* ================================
   FILTROS – layout e comportamentos
   ================================ */

/* por padrão, FILTRO não aparece */
.home .filtro{
  display: none;
}

/* quando a faixa estiver em “filtro”, mostramos a seção como PAINEL */
.ribbon[data-view="filtro"] ~ .home .filtro{ 
  display: grid;
  width: 100%;
  box-sizing: border-box;

  /* painel ocupando a área útil abaixo da faixa */
  height: calc(100vh - var(--header-h));

  /* mesmo “respiro” da lista */
  grid-template-rows: auto auto minmax(0, 1fr); /* banner | filtros | grid */
  row-gap: var(--lista-row-gap);
  padding: var(--lista-pad-top) var(--container-pad) var(--lista-pad-bottom);
}

/* quando Filtro estiver aberto, escondemos banner da home, subtítulo e a LISTA */
.ribbon[data-view="filtro"] ~ .home .banner,
.ribbon[data-view="filtro"] ~ .home .subtitle,
.ribbon[data-view="filtro"] ~ .home .lista{
  display: none;
}

/* ====== banner do FILTRO (reaproveita a mesma classe .lista-banner) ====== */
.ribbon[data-view="filtro"] ~ .home .filtro .lista-banner{
  height: var(--lista-banner-h);
  border-radius: 16px;
  margin-top: clamp(18px, 2vh, 24px);
  overflow: hidden;
}
.ribbon[data-view="filtro"] ~ .home .filtro .lista-banner img{
  width: 100%;
  height: 100%;
  object-fit: contain;          /* mostra a imagem inteira, sem cortar */
  display: block;
  background: #040A10;          /* cor de fundo nas “faixas” que sobrarem */
}

/* ====== barra de filtros logo abaixo do banner ====== */
.filtro-controls{
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: flex-end;
}

/* cada campo de filtro */
.filtro-field{
  display: flex;
  flex-direction: column;
  min-width: 220px;
}

.filtro-label{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  opacity: .7;
  margin-bottom: 4px;
}

/* input de busca */
#filtroBusca{
  background: #040A10;
  border: 1px solid #192539;
  border-radius: 999px;
  padding: 8px 14px;
  color: var(--ink);
  font-size: 14px;
  outline: none;
}
#filtroBusca::placeholder{
  color: rgba(232,238,246,.5);
}

/* rádios (sim/não/todos) */
.filtro-radio{
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.filtro-radio label{
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.filtro-radio input{
  accent-color: #71F27A; /* bolinha verdinha */
}

/* ====== grid de logos filtradas ====== */
.filtro-grid{
  overflow: auto;

  /* altura baseada na tela, SEM depender de outras variáveis */
  height: 50vh;
  max-height: 50vh;

  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  grid-auto-rows: var(--logo-cell-h);
  gap: 28px 48px;
  padding-right: 8px;
  align-content: start;
}

/* responsivo – igual ao grid da lista */
@media (max-width: 1280px){
  .filtro-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 1024px){
  .filtro-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* telas um pouco menores: diminuímos um pouco o grid */
@media (max-height: 900px){
  .filtro-grid{
    height: 50vh;
    max-height: 50vh;
  }
}

/* telas bem baixas (notebook pequeno, janela reduzida) */
@media (max-height: 750px){
  .filtro-grid{
    height: 45vh;
    max-height: 45vh;
  }
}