/* ==========================================================================
   RAKIM — V2 — componentes.css
   Peças reutilizáveis entre páginas: cartão de obra, carrossel horizontal,
   slideshow da Home, estados vazios e selos técnicos.
   ========================================================================== */

/* ==========================================================================
   CARTÃO DE OBRA — usado na Galeria, nas páginas de Coleção e em "Outros Materiais"
   ========================================================================== */
.cartao-obra { display: block; width: 100%; text-align: left; }
.cartao-obra__moldura {
  display: block;
  overflow: hidden;
  background: var(--carvao-suave);
  position: relative;
  aspect-ratio: 3 / 4;
}
.cartao-obra__imagem {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--curva);
}
.cartao-obra:hover .cartao-obra__imagem,
.cartao-obra:focus-visible .cartao-obra__imagem { transform: scale(1.035); }

/* Modificador "contido" — para coleções com fotografias de proporções
   muito variadas entre si (ex.: Tecnobestas, que mistura obras quadradas,
   retrato e paisagem). Em vez de cortar a imagem para preencher o
   cartão (cover, o padrão acima), a obra inteira é exibida, centralizada,
   sem distorcer nem cortar — o espaço sobrando revela o fundo do próprio
   cartão. Aplicado via dado ajusteImagem da coleção (acervo.js), nunca
   direto no HTML de uma página específica. */
.cartao-obra--contido .cartao-obra__imagem { object-fit: contain; }

.cartao-obra__legenda {
  display: flex; align-items: baseline; gap: var(--espaco-s);
  padding-top: var(--espaco-xs); flex-wrap: wrap;
}
.cartao-obra__titulo { font-family: var(--fonte-display); font-size: 1.15rem; font-weight: 500; }
.cartao-obra__tecnica { font-size: 0.82rem; color: #a49b93; font-style: italic; }
.galeria-clara .cartao-obra__tecnica { color: #7a716b; }

/* ==========================================================================
   SELO DE COLEÇÃO — pequeno acento visual junto ao nome da série
   ========================================================================== */
.selo-colecao {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
}
.selo-colecao::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
}

/* ==========================================================================
   CARROSSEL HORIZONTAL — página Galeria (visão geral por coleção)
   ========================================================================== */
.carrossel-secao { margin-bottom: var(--espaco-xl); }
.carrossel-secao__cabecalho {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--espaco-m);
  max-width: var(--largura-maxima); margin: 0 auto var(--espaco-m);
  padding: 0 var(--margem-lateral);
}
.carrossel-secao__titulo {
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: clamp(1.85rem, 2.6vw + 1rem, 3rem);
  border-left: 3px solid currentColor;
  padding-left: 0.5em;
}
.carrossel-secao__link {
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.03em;
  white-space: nowrap;
  border-bottom: 1px solid rgba(241, 234, 224, 0.3);
  padding-bottom: 0.2em;
  transition: border-color 0.25s, color 0.25s;
}
.carrossel-secao__link:hover, .carrossel-secao__link:focus-visible { color: var(--dourado); border-color: var(--dourado); }

.carrossel-controles { display: flex; gap: var(--espaco-xs); }
.carrossel-controles button {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(241, 234, 224, 0.3);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.25s, color 0.25s, opacity 0.25s;
}
.carrossel-controles button:hover, .carrossel-controles button:focus-visible { border-color: var(--dourado); color: var(--dourado); }
.carrossel-controles button:disabled { opacity: 0.3; pointer-events: none; }

.carrossel {
  display: flex;
  gap: var(--espaco-s);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 var(--margem-lateral) var(--espaco-s);
  scrollbar-width: thin;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.carrossel:active { cursor: grabbing; }
.carrossel::-webkit-scrollbar { height: 6px; }
.carrossel::-webkit-scrollbar-thumb { background: rgba(241, 234, 224, 0.2); border-radius: 4px; }

.carrossel__item {
  flex: 0 0 auto;
  width: clamp(210px, 28vw, 320px);
}

/* ---- Cartão de obra dentro do carrossel — imagem + selo revelado ---- */
.carrossel-obra { display: block; }
.carrossel-obra__moldura {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--carvao-suave);
  aspect-ratio: 3 / 4;
}
.carrossel-obra__imagem {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--curva);
}

/* Modificador "contido" — mesmo princípio do .cartao-obra--contido:
   a obra inteira fica visível, centralizada, sem corte nem distorção,
   para coleções cujas fotografias têm proporções muito variadas. */
.carrossel-obra--contido .carrossel-obra__imagem { object-fit: contain; }
.carrossel-obra__overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--espaco-s);
  background: linear-gradient(0deg, rgba(18,16,20,0.88) 0%, rgba(18,16,20,0.32) 48%, transparent 78%);
  opacity: 0;
  transition: opacity 0.4s var(--curva);
}
.carrossel-obra__titulo {
  font-family: var(--fonte-display);
  font-size: 1.05rem;
  color: var(--osso);
  margin-bottom: 0.25em;
}
.carrossel-obra__cta {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--dourado);
}

/* Hover só é ativado em dispositivos que realmente têm hover de precisão
   (mouse/trackpad) — em telas de toque o selo permanece sempre visível,
   já que não existe estado de :hover confiável ali. */
@media (hover: hover) and (pointer: fine) {
  .carrossel-obra:hover .carrossel-obra__overlay,
  .carrossel-obra:focus-visible .carrossel-obra__overlay { opacity: 1; }
  .carrossel-obra:hover .carrossel-obra__imagem,
  .carrossel-obra:focus-visible .carrossel-obra__imagem { transform: scale(1.045); }
}
@media not all and (hover: hover) {
  .carrossel-obra__overlay {
    opacity: 1;
    background: linear-gradient(0deg, rgba(18,16,20,0.82) 0%, rgba(18,16,20,0.1) 60%, transparent 82%);
  }
}

/* ==========================================================================
   SLIDESHOW DE TELA CHEIA — Home
   ========================================================================== */
.slideshow {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: var(--carvao);
}
.slideshow__lista { position: absolute; inset: 0; }
.slideshow__slide {
  position: absolute; inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.4s var(--curva), visibility 0s linear 1.4s;
}
.slideshow__slide.slideshow__slide--ativo {
  opacity: 1;
  visibility: visible;
  transition: opacity 1.4s var(--curva), visibility 0s linear 0s;
  z-index: 1;
}
.slideshow__imagem {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  transform: scale(1.06);
  transition: transform 8s linear;
}
.slideshow__slide--ativo .slideshow__imagem { transform: scale(1); }

.slideshow__veu {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(18,16,20,0.5) 0%, rgba(18,16,20,0.05) 32%, rgba(18,16,20,0.3) 58%, rgba(18,16,20,0.92) 100%),
    linear-gradient(90deg, rgba(18,16,20,0.55) 0%, rgba(18,16,20,0.02) 38%);
}

.slideshow__conteudo {
  position: relative; z-index: 3;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding: 0 var(--margem-lateral) var(--espaco-xl);
}

.slideshow__controles {
  position: absolute; z-index: 4;
  bottom: var(--espaco-m); right: var(--margem-lateral);
  display: flex; align-items: center; gap: var(--espaco-s);
}
.slideshow__navegacao { display: flex; gap: var(--espaco-xs); }
.slideshow__navegacao button {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(241, 234, 224, 0.35);
  color: var(--osso);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.3s var(--curva), color 0.3s var(--curva), background 0.3s var(--curva);
}
.slideshow__navegacao button:hover, .slideshow__navegacao button:focus-visible {
  border-color: var(--dourado); color: var(--dourado);
}

.slideshow__marcadores { display: flex; gap: 0.5em; }
.slideshow__marcador {
  width: 22px; height: 2px; background: rgba(241, 234, 224, 0.3);
  transition: background 0.3s var(--curva);
}
.slideshow__marcador--ativo { background: var(--osso); }

@media (max-width: 699px) {
  .slideshow__controles { left: var(--margem-lateral); right: var(--margem-lateral); justify-content: space-between; }
}

/* ==========================================================================
   ESTADO VAZIO — Exposições, Outros Materiais (enquanto não há itens reais)
   ========================================================================== */
.estado-vazio {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  padding: var(--espaco-xl) var(--espaco-m);
  border: 1px dashed rgba(241, 234, 224, 0.22);
  border-radius: 4px;
}
.estado-vazio__marca { width: 40px; height: auto; margin: 0 auto var(--espaco-m); opacity: 0.5; }
.estado-vazio__titulo { font-family: var(--fonte-display); font-size: 1.5rem; margin-bottom: var(--espaco-xs); }
.estado-vazio__texto { color: var(--osso-escurecido); max-width: 42ch; margin: 0 auto; }

/* ==========================================================================
   FICHA TÉCNICA — usada na página de obra
   ========================================================================== */
.ficha-tecnica { border-top: 1px solid rgba(241, 234, 224, 0.15); }
.ficha-tecnica__linha {
  display: flex; justify-content: space-between; gap: var(--espaco-m);
  padding: var(--espaco-s) 0;
  border-bottom: 1px solid rgba(241, 234, 224, 0.15);
}
.ficha-tecnica__rotulo { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: #a49b93; }
.ficha-tecnica__valor { font-family: var(--fonte-display); font-size: 1.05rem; text-align: right; }

.aviso-futuro {
  margin-top: var(--espaco-m);
  font-size: 0.78rem;
  color: #6b625c;
  border-left: 2px solid rgba(241, 234, 224, 0.2);
  padding-left: 0.9em;
}