/* ============================================================
   ORDO · CAPAS.CSS — capas com profundidade + botão de troca
   ============================================================ */

/* Elemento de capa: imagem de fundo com profundidade, cobre a área */
.capa {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}
/* escurece a base da capa para o texto/glass respirar por cima */
.capa::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,4,4,0.15) 0%, rgba(0,4,4,0.55) 62%, var(--c-abs) 100%);
}

/* capa da SPLASH (tela cheia atrás de tudo) */
.splash-tela { position: relative; }
.splash-tela .capa::after {
  background: linear-gradient(180deg, rgba(0,4,4,0.35) 0%, rgba(0,4,4,0.45) 45%, rgba(0,4,4,0.85) 100%);
}
.splash-tela > *:not(.capa) { position: relative; z-index: 1; }

/* capa dentro de um card destaque (foto atrás do conteúdo do card) */
.card-capa {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--borda-ouro);
  min-height: 120px;
  padding: var(--sp-4);
  display: flex;
  align-items: flex-end;
}
.card-capa .capa { border-radius: var(--r-lg); }
.card-capa > *:not(.capa) { position: relative; z-index: 1; }

/* botão de trocar capa (discreto, canto) */
.btn-capa {
  position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 2;
  width: 34px; height: 34px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--glass-nav); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--borda); color: var(--c-txt-2); font-size: 15px; cursor: pointer;
}
.btn-capa:active { transform: scale(.94); }

/* item de leitura com miniatura de capa (biblioteca) */
.item-leitura__thumb.tem-capa {
  background-size: cover; background-position: center;
}