/* ###################################################################### */
/* ### Like-Button (Daumen hoch), site/plugins/likes                 ### */
/* ###################################################################### */
/* Global statt unter assets/css/templates/, weil der Button auf zwei
   verschiedenen Vorlagen auftaucht (manoeverbericht.php UND die
   Portfolio-Kacheln in portfolio-kachel.php, die sowohl von
   templates/portfolio.php als auch von der Nachlade-Route in
   site/plugins/portfolio/index.php genutzt werden) - css('@auto') laedt
   aber immer nur die CSS-Datei der jeweils aktiven Vorlage, siehe die
   Begruendung dazu bei den anderen global in header.php eingebundenen
   Dateien (index.css, header.css, ...). Deshalb hier explizit in
   header.php eingebunden.

   Farb-/Formsprache bewusst 1:1 aus dem bestehenden Chip-System
   uebernommen (siehe .chronik-year-tab in templates/chronik.css):
   Pille (border-radius 999px), dunkles Anthrazit-Chip (#4a4b61), Text/
   Icon in Gold (#ffcc33), aktiv/geliked = volle Gold-Fuellung mit
   dunkler Schrift (#3c3e50) - identisches Prinzip wie bei den aktiven
   Jahres-Chips in der Chronik. */

.like-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  border-radius: 999px;
  background-color: #4a4b61;
  color: #ffcc33;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.25;
  cursor: pointer;
  transition: background-color 150ms, color 150ms, transform 150ms;
}

.like-btn:hover:not(:disabled) {
  background-color: #565875;
  color: #ffffff;
}

.like-btn:active:not(:disabled) {
  transform: scale(0.96);
}

.like-btn .like-icon {
  width: 1.1em;
  height: 1.1em;
  flex: 0 0 auto;
  fill: currentColor;
}

.like-btn .like-count {
  font-variant-numeric: tabular-nums;
}

/* Geliked (lokal im Browser gemerkt, siehe assets/js/likes.js): dieselbe
   Gold-Fuellung wie ein aktiver Jahres-Chip. cursor:default statt
   not-allowed - ein weiterer Klick ist kein Fehler, er passiert einfach
   nichts (siehe JS), das soll sich nicht wie eine Fehlermeldung anfuehlen. */
.like-btn.is-liked {
  background-color: #ffcc33;
  color: #3c3e50;
  cursor: default;
}

.like-btn.is-liked:hover {
  background-color: #ffcc33;
  color: #3c3e50;
}

/* ### Artikel-Detailseite: eigene Zeile unterhalb des Artikeltexts ### */

.article-like {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
}

.article-like .like-btn {
  padding: 0.65rem 1.4rem;
  font-size: 1rem;
}

/* Rein dekorative Explosionswolke beim Liken, Sven-Wunsch 2026-08-27
   (siehe assets/js/likes.js, explosionAnzeigen()). Nur auf der
   Artikel-Detailseite (.article-like) - beim kleinen Portfolio-Badge
   waere die Wolke im Verhaeltnis zur Kachelgroesse eher Bildrauschen als
   ein Effekt. position:relative hier lokal statt am globalen .like-btn,
   damit das Portfolio-Badge (schon selbst absolut positioniert) davon
   unberuehrt bleibt. */
.article-like .like-btn {
  position: relative;
}

.like-explosion {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.6em;
  height: 2.6em;
  margin: -1.3em 0 0 -1.3em;
  pointer-events: none;
  z-index: 3;
  animation: likeExplosionPop 480ms ease-out forwards;
}

.like-explosion svg {
  width: 100%;
  height: 100%;
  fill: #ffffff;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.25));
}

/* Kleiner Pop-und-Verpuff: reinkommen, kurz ueberschiessen, verblassen -
   klassischer Comic-Explosions-Rhythmus statt gleichmaessigem Fade. */
@keyframes likeExplosionPop {
  0% {
    opacity: 0;
    transform: scale(0.2) rotate(-6deg);
  }
  35% {
    opacity: 1;
    transform: scale(1.15) rotate(4deg);
  }
  100% {
    opacity: 0;
    transform: scale(1.5) rotate(10deg);
  }
}

/* ### Portfolio-Kachel: dezentes, halbtransparentes Badge in der Ecke ### */
/* .portfolio-tile ist ein eigener, schlichter Wrapper um <a> herum (siehe
   portfolio-kachel.php) - absichtlich NICHT auf .portfolio-grid li/a
   selbst gestuetzt: deren position:relative gilt dort nur innerhalb der
   "(hover: hover) and (pointer: fine)"-Media-Query (siehe dortiger
   Kommentar zum Titel-Overlay), der Like-Button muss aber auch auf
   Touch-Geraeten funktionieren und sichtbar sein. */
.portfolio-tile {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.portfolio-like {
  position: absolute;
  right: 0.4rem;
  bottom: 0.4rem;
  z-index: 2;
  padding: 0.3rem 0.55rem;
  font-size: 0.75rem;
  gap: 0.3rem;
  background-color: rgba(62, 63, 81, 0.55);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  backdrop-filter: blur(6px) saturate(140%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.portfolio-like:hover:not(:disabled) {
  background-color: rgba(86, 88, 117, 0.7);
}

.portfolio-like.is-liked {
  background-color: rgba(255, 204, 51, 0.85);
}

.portfolio-like .like-icon {
  width: 0.95em;
  height: 0.95em;
}

@media only screen and (max-width: 480px) {
  .article-like .like-btn {
    padding: 0.55rem 1.1rem;
    font-size: 0.9rem;
  }
}