/* =========================================================
   catalogue.css — catálogo vivo de revestimentos
   Tokens 100% de colors_and_type.css; zero hex hardcoded.
   ========================================================= */

/* ── Skeleton / loading state ─────────────────────────────────────────── */
.catalogue-loading {
  min-height: 480px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  align-items: stretch;
}

@media (max-width: 900px) {
  .catalogue-loading { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .catalogue-loading { grid-template-columns: 1fr; }
}

.catalogue-skeleton {
  background: var(--cream);
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  min-height: 280px;
}

.catalogue-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(244, 239, 230, 0.6) 50%,
    transparent 100%
  );
  animation: skeleton-sweep 1.6s ease-in-out infinite;
  transform: translateX(-100%);
}

@keyframes skeleton-sweep {
  to { transform: translateX(200%); }
}

@media (prefers-reduced-motion: reduce) {
  .catalogue-skeleton::after { animation: none; }
}

/* ── Grid principal ───────────────────────────────────────────────────── */
.catalogue-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  align-items: stretch;
}

@media (max-width: 900px) {
  .catalogue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 560px) {
  .catalogue-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ── Cards clicáveis ──────────────────────────────────────────────────── */
.catalogue-card {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  text-align: left;
  display: block;
  width: 100%;
  transition: transform 200ms var(--ease-out, ease-out);
}

.catalogue-card:hover  { transform: translateY(-3px); }
.catalogue-card:active { transform: translateY(0); }

.catalogue-card:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Imagem do card (plate / edition têm swatch; specimen tem coluna lateral) */
.catalogue-card .stone-swatch,
.catalogue-card .catalogue-img {
  width: 100%;
  object-fit: cover;
  display: block;
  border-radius: 2px 2px 0 0;
}

.catalogue-card.plate   .catalogue-img { aspect-ratio: 4 / 5; }
.catalogue-card.edition .catalogue-img { aspect-ratio: 3 / 4; }

/* Edition: overlay full */
.catalogue-card.edition {
  position: relative;
  overflow: hidden;
}

.catalogue-card.edition .catalogue-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.68;
  transition: opacity 600ms var(--ease-out, ease-out),
              filter  600ms var(--ease-out, ease-out);
  border-radius: 0;
  aspect-ratio: unset;
}

.catalogue-card.edition:hover  .catalogue-img { opacity: 0.82; filter: brightness(1.04); }

/* Specimen: layout coluna lateral */
.catalogue-card.specimen {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
}

.catalogue-card.specimen .catalogue-img {
  aspect-ratio: unset;
  height: 100%;
  border-radius: 2px 0 0 2px;
}

/* ── Filtros — estado sem dados ──────────────────────────────────────── */
.filter-tabs[data-dynamic] button[data-filter].catalogue-hidden {
  display: none;
}

/* ── Variação colmeia (padrão ativo) ──────────────────────────────────
   Layout: grid de 8 colunas, cada hexágono ocupa span 2.
   Fileiras alternadas (4 + 3 favos) via classes .hex-shift / .hex-stack
   atribuídas por JS sobre os cards VISÍVEIS — evita o bug do :nth-child
   contar cards ocultos durante filtros.
   ──────────────────────────────────────────────────────────────────── */
.catalogue-grid--hex {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 12px;
}

.catalogue-grid--hex .catalogue-card {
  grid-column: span 2;
  position: relative;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  aspect-ratio: 0.866 / 1;
  overflow: hidden;
  padding: 0;
  transition: transform 200ms var(--ease-out, ease-out),
              filter 200ms var(--ease-out, ease-out);
}

/* Garantia do filtro: card de outra categoria some na colmeia (vence as
   regras do hex grid e qualquer estilo inline de posição). */
.catalogue-grid--hex .catalogue-card.is-hidden { display: none !important; }

.catalogue-grid--hex .catalogue-card:hover {
  transform: scale(1.04);
  filter: brightness(1.07);
}

/* Foco no favo: SEM moldura. O `outline` retangular global (ver
   .catalogue-card:focus-visible acima) não respeita o clip-path do
   hexágono e desenharia uma moldura quadrada ao redor — visível ao
   devolver o foco ao card depois de fechar a ficha. No modo colmeia
   deixamos só a foto + o rótulo; o foco é sinalizado por um leve brilho,
   sem nenhuma borda/anel. */
.catalogue-grid--hex .catalogue-card:focus-visible {
  outline: none;
  filter: brightness(1.06);
}

/* Encaixe vertical: margem negativa a partir do 5º card visível
   (gridColumn e gridRow são atribuídos via style inline por applyHexFlow) */
.catalogue-grid--hex .catalogue-card.hex-stack {
  margin-top: -26%;
}

/* A foto cobre o favo inteiro em qualquer variante */
.catalogue-grid--hex .catalogue-card .catalogue-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: unset;
  border-radius: 0;
}

/* Ocultar layouts editoriais; o favo mostra só imagem + rótulo */
.catalogue-grid--hex .catalogue-card .material-foot,
.catalogue-grid--hex .catalogue-card .edition-top,
.catalogue-grid--hex .catalogue-card .edition-copy,
.catalogue-grid--hex .catalogue-card .specimen-body {
  display: none;
}

/* O quadro decorativo inset (.edition::after / .stone-hero::after em
   styles.css) é do layout editorial; recortado no hexágono ele aparece
   como uma "moldura quadrada" dentro do favo. Desliga no modo colmeia. */
.catalogue-grid--hex .catalogue-card::after,
.catalogue-grid--hex .catalogue-card.edition::after {
  content: none;
}

/* ── Rótulo fixo no favo ──────────────────────────────────────────────
   Oculto fora do modo colmeia. No favo: posicionado absoluto na faixa
   inferior segura do hexágono (abaixo de 55% da altura), com scrim
   petróleo derivado por color-mix (zero hex direto).
   ──────────────────────────────────────────────────────────────────── */
.hex-label {
  display: none;
}

.catalogue-grid--hex .catalogue-card .hex-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18%;
  padding: 10px 14% 12px;
  /* Sem scrim: o gradiente escuro virava uma faixa feia sobre pedras claras.
     A legibilidade vem do text-shadow no próprio texto (ver regras abaixo),
     que segura o contraste em pedra clara OU escura, sem faixa. */
  pointer-events: none;
  overflow: hidden;
}

.catalogue-grid--hex .hex-label-num {
  font-family: var(--font-mono);
  font-size: calc(var(--fs-label) * 1.1);
  letter-spacing: var(--tracking-label);
  color: var(--gold-500);
  text-transform: uppercase;
  line-height: 1;
  text-shadow:
    0 0 2px color-mix(in srgb, black 70%, transparent),
    0 1px 3px color-mix(in srgb, black 60%, transparent),
    0 0 12px color-mix(in srgb, var(--petrol-900) 70%, transparent);
}

.catalogue-grid--hex .hex-label-name {
  font-family: var(--font-display);
  font-variation-settings: var(--font-display-settings);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(var(--fs-body-sm), 1.15vw, var(--fs-body));
  color: var(--fg-on-dark);
  text-align: center;
  line-height: var(--lh-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-shadow:
    0 0 2px color-mix(in srgb, black 72%, transparent),
    0 1px 3px color-mix(in srgb, black 62%, transparent),
    0 0 14px color-mix(in srgb, var(--petrol-900) 72%, transparent);
}

/* ── Breakpoint 900px: 3 favos por fileira, sem deslocamento ─────────── */
@media (max-width: 900px) {
  .catalogue-grid--hex {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
  }

  /* JS limpa gridColumn/gridRow inline e hex-stack neste breakpoint */
  .catalogue-grid--hex .catalogue-card {
    grid-column: span 2;
    grid-row: auto;
  }
  .catalogue-grid--hex .catalogue-card.hex-stack {
    margin-top: 0;
  }

  .catalogue-grid--hex .hex-label-name {
    font-size: var(--fs-caption);
  }
}

/* ── Breakpoint 560px: 2 favos por fileira (span 1), sem offset ──────── */
@media (max-width: 560px) {
  .catalogue-grid--hex {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  /* JS limpa gridColumn/gridRow inline neste breakpoint */
  .catalogue-grid--hex .catalogue-card {
    grid-column: span 1;
    grid-row: auto;
  }
  .catalogue-grid--hex .catalogue-card.hex-stack {
    margin-top: 0;
  }

  /* Rótulo omitido em mobile pequeno — favo muito reduzido */
  .catalogue-grid--hex .catalogue-card .hex-label {
    display: none;
  }
}