/* ==========================================================================
   Catálogo de materiais
   Depende de tokens.css e base.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BARRA DE FILTROS
   -------------------------------------------------------------------------- */
.filtros {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  padding-block: var(--e-4);
  background: color-mix(in srgb, var(--fundo) 92%, transparent);
  backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--borda);
}

.filtros__linha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  align-items: center;
}

.filtros__grupo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}

/* Botão de filtro — herda cor do tema da seção */
.pilula {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-4);
  min-block-size: 40px;
  font-family: var(--fonte-marca);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-sutil);
  background: transparent;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pill);
  cursor: pointer;
  transition: color var(--t-rapido), border-color var(--t-rapido), background var(--t-rapido);
}

.pilula:hover { color: var(--texto); border-color: var(--acento); }

.pilula[aria-pressed="true"] {
  color: var(--c-noite-900);
  background: var(--c-ouro-500);
  border-color: var(--c-ouro-500);
  font-weight: 600;
}

.pilula__contagem {
  font-variant-numeric: tabular-nums;
  opacity: 0.65;
  font-size: 0.6875rem;
}

/* Campo de busca */
.busca {
  position: relative;
  flex: 1 1 14rem;
  min-inline-size: 12rem;
}

.busca__campo {
  inline-size: 100%;
  padding: var(--e-2) var(--e-4) var(--e-2) 2.75rem;
  min-block-size: 40px;
  color: var(--texto);
  background: transparent;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pill);
  font-size: var(--fs-sm);
}

.busca__campo::placeholder { color: var(--texto-sutil); }
.busca__campo:focus { border-color: var(--acento); outline: none; }
.busca__campo:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.busca__icone {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--e-4);
  translate: 0 -50%;
  color: var(--texto-sutil);
  pointer-events: none;
}

.filtros__resultado {
  font-size: var(--fs-sm);
  color: var(--texto-sutil);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   GRADE DE MATERIAIS
   -------------------------------------------------------------------------- */
.materiais {
  display: grid;
  gap: var(--e-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  padding-block-start: var(--e-7);
}

.material {
  display: flex;
  flex-direction: column;
  text-align: start;
  padding: 0;
  background: var(--fundo-elevado);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}

.material:hover,
.material:focus-visible {
  border-color: color-mix(in srgb, var(--acento) 60%, transparent);
  transform: translateY(-4px);
  box-shadow: var(--sombra);
}

.material__figura {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-pedra-200);
}

.material__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: scale var(--t-lento);
}

.material:hover .material__img { scale: 1.05; }

/* Selo de quantidade de fotos */
.material__fotos {
  position: absolute;
  inset-block-end: var(--e-2);
  inset-inline-end: var(--e-2);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--c-texto-claro);
  background: color-mix(in srgb, var(--c-noite-900) 72%, transparent);
  backdrop-filter: blur(4px);
  border-radius: var(--raio-pill);
}

.material__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  padding: var(--e-4);
  flex: 1;
}

.material__tipo {
  font-family: var(--fonte-marca);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento);
}

.material__nome {
  font-family: var(--fonte-display);
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1.15;
  color: var(--texto);
}

.material__meta {
  margin-block-start: auto;
  padding-block-start: var(--e-3);
  font-size: var(--fs-xs);
  color: var(--texto-sutil);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-3);
}

.material__meta span { display: inline-flex; align-items: center; gap: 0.3rem; }

/* Estado vazio */
.vazio {
  grid-column: 1 / -1;
  padding: var(--e-10) var(--e-5);
  text-align: center;
  color: var(--texto-sutil);
}

/* --------------------------------------------------------------------------
   FICHA DO MATERIAL (diálogo)
   -------------------------------------------------------------------------- */
.ficha {
  inline-size: min(100% - 2rem, 64rem);
  max-block-size: min(100% - 2rem, 52rem);
  padding: 0;
  color: var(--texto);
  background: var(--fundo-elevado);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  overflow: hidden;
}

.ficha::backdrop {
  background: color-mix(in srgb, var(--c-noite-900) 82%, transparent);
  backdrop-filter: blur(6px);
}

.ficha__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-5) var(--e-6);
  border-block-end: 1px solid var(--borda);
}

.ficha__fechar {
  flex: none;
  inline-size: 40px;
  block-size: 40px;
  display: grid;
  place-items: center;
  color: var(--texto-sutil);
  background: transparent;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  cursor: pointer;
  transition: color var(--t-rapido), border-color var(--t-rapido);
}

.ficha__fechar:hover { color: var(--texto); border-color: var(--acento); }

.ficha__corpo {
  display: grid;
  gap: var(--e-6);
  padding: var(--e-6);
  overflow-y: auto;
}

@media (min-width: 52rem) {
  .ficha__corpo { grid-template-columns: 1.4fr 1fr; align-items: start; }
}

.ficha__galeria { display: grid; gap: var(--e-3); }

.ficha__principal {
  aspect-ratio: 4 / 3;
  inline-size: 100%;
  object-fit: cover;
  border-radius: var(--raio);
  background: var(--c-pedra-200);
}

.ficha__miniaturas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
  gap: var(--e-2);
}

.ficha__mini {
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  overflow: hidden;
  cursor: pointer;
  background: none;
  transition: border-color var(--t-rapido), opacity var(--t-rapido);
  opacity: 0.6;
}

.ficha__mini img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.ficha__mini:hover { opacity: 1; }
.ficha__mini[aria-current="true"] { border-color: var(--acento); opacity: 1; }

/* Tabela de especificações */
.especs { display: grid; gap: 0; margin-block: var(--e-5); }

.especs__linha {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: var(--e-3);
  padding-block: var(--e-3);
  border-block-end: 1px solid var(--borda);
  font-size: var(--fs-sm);
}

.especs__rotulo {
  font-family: var(--fonte-marca);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-sutil);
  padding-block-start: 0.15rem;
}

/* Avisos de uso */
.aviso {
  display: flex;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  margin-block-start: var(--e-3);
  font-size: var(--fs-sm);
  border-radius: var(--raio);
  border-inline-start: 2px solid var(--acento);
  background: color-mix(in srgb, var(--acento) 8%, transparent);
}

.aviso svg { flex: none; margin-block-start: 0.15rem; }

/* ==========================================================================
   CELULAR
   ========================================================================== */
@media (max-width: 48rem) {

  /* --- Filtros ---------------------------------------------------------
     Em vez de quebrar em várias linhas e comer metade da tela, o grupo
     de tipos rola na horizontal. A busca ganha linha própria. */
  .filtros { padding-block: var(--e-3); }

  .filtros__linha { gap: var(--e-2); }

  .filtros__grupo {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    /* sangra até a borda da tela, para não parecer cortado */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }

  .filtros__grupo::-webkit-scrollbar { display: none; }

  .pilula { white-space: nowrap; flex: none; }

  .busca { flex: 1 1 100%; }

  .filtros__resultado { inline-size: 100%; }

  /* --- Grade -----------------------------------------------------------
     Duas colunas: uma só deixa os cartões gigantes e obriga a rolar
     muito para ver 34 materiais. */
  .materiais {
    grid-template-columns: 1fr 1fr;
    gap: var(--e-3);
    padding-block-start: var(--e-5);
  }

  .material__corpo { padding: var(--e-3); gap: 0.15rem; }
  .material__nome { font-size: var(--fs-base); }
  .material__meta { padding-block-start: var(--e-2); gap: 0.1rem var(--e-2); }

  /* --- Ficha do material ----------------------------------------------
     Vira folha de tela cheia: num diálogo centrado pequeno a galeria
     não cabe. */
  .ficha {
    inline-size: 100%;
    max-inline-size: 100%;
    block-size: 100%;
    max-block-size: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }

  .ficha__topo {
    padding: var(--e-4) var(--gutter);
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    background: var(--fundo-elevado);
  }

  .ficha__corpo {
    padding: var(--e-5) var(--gutter) var(--e-8);
    gap: var(--e-5);
    flex: 1;
  }

  .ficha__miniaturas { grid-template-columns: repeat(auto-fit, minmax(3.25rem, 1fr)); }

  .especs__linha { grid-template-columns: 7rem 1fr; gap: var(--e-2); }

  /* O botão flutuante de WhatsApp cobriria o CTA da ficha. */
  body:has(.ficha[open]) .zap { display: none; }
}

/* Telas bem estreitas: o cartão em duas colunas fica apertado demais. */
@media (max-width: 22rem) {
  .materiais { grid-template-columns: 1fr; }
}