/* Galeria limpa: o cartão é só a mídia, como nas galerias do Higgsfield.
   Título, preço e ações aparecem por cima ao passar o mouse; o resto fica no menu "⋯".
   Carregado por último para valer sobre styles.css, pele.css e acabamento.css. */

.feed, .grade { align-items: start; gap: 10px; }

.card { position: relative; background: none; border: 0; border-radius: 16px; box-shadow: none; overflow: visible; isolation: isolate; }
.card:hover { transform: none; }
.card .midia { border-radius: 16px; }
.card .midia video, .card .midia img { transition: transform 0.6s cubic-bezier(.2, .7, .2, 1); }
.card:hover .midia video, .card:hover .midia img { transform: scale(1.03); }

/* preço e tipo: só no hover (o "+N" das variações continua sempre visível) */
.card .etiqueta:not(.dir) { opacity: 0; transition: opacity 0.2s; }
.card:hover .etiqueta, .card.menu-aberto .etiqueta { opacity: 1; }

/* camada de cima: degradê no rodapé da mídia, só os botões recebem clique */
.card .sobre {
  position: absolute; inset: auto 0 0 0; z-index: 2; pointer-events: none;
  display: grid; gap: 8px; padding: 48px 12px 12px; border-radius: 0 0 16px 16px;
  background: linear-gradient(transparent, rgb(0 0 0 / 55%) 45%, rgb(0 0 0 / 82%));
  color: #fff;
}
.card .sobre .info { padding: 0; font-size: 13px; }
.card .sobre .info p { color: #fff; font-weight: 600; margin: 0 0 3px; -webkit-line-clamp: 2; line-height: 1.3; text-shadow: 0 1px 8px rgb(0 0 0 / 40%); }
.card .sobre .meta { color: rgb(255 255 255 / 72%); opacity: 1; font-size: 11px; font-weight: 500; gap: 2px 6px; }
.card .sobre .erro-card { padding: 0; color: #ff9b8a; font-size: 12px; font-weight: 600; }
.card .sobre .aviso-card { color: rgb(255 255 255 / 80%); }

.card .acoes { display: flex; gap: 6px; padding: 0; margin: 0; flex-wrap: nowrap; pointer-events: auto; }
.card .acoes::before { content: none; }
.card .acoes a, .card .acoes button {
  order: 0; width: 34px; height: 34px; padding: 0; gap: 0; font-size: 0; justify-content: center;
  border-radius: 999px; border: 1px solid rgb(255 255 255 / 18%); color: #fff;
  background: rgb(255 255 255 / 12%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.card .acoes a:hover, .card .acoes button:hover { background: rgb(255 255 255 / 24%); color: #fff; }
.card .acoes .ic { width: 16px; height: 16px; }
.card .acoes .mais { margin-left: auto; }
.card .acoes .fav.on { color: var(--sol); }

/* com mouse: tudo escondido até passar por cima */
@media (hover: hover) {
  .card .sobre { opacity: 0; transform: translateY(6px); transition: opacity 0.22s, transform 0.22s; }
  .card:hover .sobre, .card:focus-within .sobre, .card.menu-aberto .sobre { opacity: 1; transform: none; }
  /* erro e aviso continuam visíveis sem hover */
  .card:has(.erro-card) .sobre { opacity: 1; transform: none; }
}

/* no celular: rodapé compacto sempre visível, título em 1 linha e sem metadados */
@media (hover: none) {
  .card .sobre { padding: 36px 8px 8px; gap: 6px; }
  .card .sobre .info p { -webkit-line-clamp: 1; font-size: 12px; }
  .card .sobre .meta { display: none; }
  .card .acoes a, .card .acoes button { width: 30px; height: 30px; }
}

/* menu "⋯" */
.card-menu {
  position: absolute; right: 8px; bottom: 54px; z-index: 5; min-width: 190px;
  display: grid; padding: 6px; border-radius: 14px;
  background: rgb(20 18 28 / 92%); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgb(255 255 255 / 10%); box-shadow: 0 18px 40px rgb(0 0 0 / 45%);
  animation: card-menu-entra 0.16s ease-out;
}
.card-menu[hidden] { display: none; }
.card-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px;
  background: none; color: rgb(255 255 255 / 88%); font: 600 13px/1.2 inherit; text-align: left; cursor: pointer;
}
.card-menu button:hover, .card-menu button:focus-visible { background: rgb(255 255 255 / 9%); color: #fff; outline: none; }
.card-menu .ic { width: 16px; height: 16px; color: rgb(255 255 255 / 65%); }
.card-menu .perigo { margin-top: 4px; border-top: 1px solid rgb(255 255 255 / 8%); border-radius: 0 0 9px 9px; padding-top: 11px; }
.card-menu .perigo:hover { color: var(--erro); }
.card-menu .perigo:hover .ic { color: var(--erro); }
.card.menu-aberto { z-index: 10; }
@keyframes card-menu-entra { from { opacity: 0; transform: translateY(6px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .card-menu { animation: none; } .card .sobre { transition: none; } }

/* Explorar: em repouso só o vídeo; no hover escurece e mostra título + Recriar no centro */
.exp-item { border-radius: 16px; }
.exp-sobre { inset: 0; align-content: end; justify-items: start; padding: 12px; background: linear-gradient(transparent 60%, rgb(0 0 0 / 55%)); transition: background 0.25s; }
.exp-sobre b { text-shadow: 0 1px 10px rgb(0 0 0 / 45%); }
@media (hover: hover) {
  .exp-sobre { align-content: center; justify-items: center; text-align: center; background: transparent; }
  .exp-sobre b { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
  .exp-sobre > b, .exp-sobre > span { opacity: 0; transform: translateY(6px); transition: opacity 0.25s, transform 0.25s; }
  .exp-item:hover .exp-sobre, .exp-item:focus-within .exp-sobre { background: rgb(0 0 0 / 45%); }
  .exp-item:hover .exp-sobre > *, .exp-item:focus-within .exp-sobre > * { opacity: 1; transform: none; }
  .exp-sobre .exp-botoes { justify-content: center; }
}
@media (hover: none) {
  .exp-sobre span, .exp-sobre .exp-botoes .sec { display: none; }
  .exp-sobre b { font-size: 13px; }
  .exp-sobre .exp-botoes { margin-top: 4px; }
}

/* Explorar em mosaico (colunas): vídeos de alturas diferentes se encaixam sem buraco */
.explorar-grade { display: block; columns: 5 210px; column-gap: 12px; }
.explorar-grade .exp-item { display: block; width: 100%; margin: 0 0 12px; break-inside: avoid; grid-column: auto; }
.explorar-grade .exp-item.h { aspect-ratio: 16 / 10; }
@media (max-width: 700px) { .explorar-grade { columns: 2; column-gap: 8px; } .explorar-grade .exp-item { margin-bottom: 8px; } }