/* ════════════════════════════════════════════════════════════════
   gklickt — Actor Card: Hover-CTA "Für mein Portrait anfragen"
   (5.4.8) Inspiration → Buchung. Subtil, nicht aufdringlich.
   ════════════════════════════════════════════════════════════════ */

.gk-actor-card {
  position: relative;
  isolation: isolate;
}

/* CTA-Overlay erscheint beim Hover */
.gk-actor-card__cta {
  position: absolute;
  bottom: calc(var(--mup-sp-2, 1rem) + 2rem); /* über dem Name */
  left: 50%;
  translate: -50% 8px;
  white-space: nowrap;

  background: var(--mup-gold, #c9a84c);
  color: #1f1a12;
  font-family: var(--mup-font-sans, 'Jost', sans-serif);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  padding: 0.5rem 0.9rem;
  border-radius: var(--mup-r-pill, 60px);
  box-shadow: var(--mup-shadow-glow, 0 8px 20px -8px rgba(201,168,76,0.5));

  opacity: 0;
  pointer-events: none;
  transition:
    opacity   var(--mup-t-fast, 200ms) var(--mup-ease, cubic-bezier(0.22,1,0.36,1)),
    translate var(--mup-t-fast, 200ms) var(--mup-ease, cubic-bezier(0.22,1,0.36,1));
}

@media (hover: hover) {
  .gk-actor-card:hover .gk-actor-card__cta {
    opacity: 1;
    pointer-events: auto;
    translate: -50% 0;
  }
  /* Thumbnail leicht abdunkeln beim Hover */
  .gk-actor-card:hover .gk-actor-thumb {
    filter: brightness(0.82);
  }
}

/* Mobile: kein Hover → CTA immer sichtbar */
@media (hover: none) {
  .gk-actor-card__cta {
    position: static;
    display: block;
    translate: none;
    opacity: 1;
    pointer-events: auto;
    text-align: center;
    margin: 0.4rem auto 0;
    width: fit-content;
    font-size: 0.55rem;
  }
}