/* Waar het hartje hangt op een kaartpagina. Hoe het eruitziet staat in
   hartje.css en in .favBtn van de bron; dit bestand gaat alleen over de
   plek. */

/* #card_3d staat in de bron al op relative; dit is de zekerheid voor het geval
   dat verandert, want anders springt het hartje naar de hoek van de pagina. */
#card_3d { position: relative; }

/* Het uiterlijk komt van `.favBtn` uit hun eigen kaarten.min.css. Alleen: die
   stylesheet wordt op een kaartpagina niet geladen — daar staat kaart.min.css.
   Vandaar deze vier regels, letterlijk overgenomen uit
   `SKINS/NL-GEBOORTEKAARTJES/css/dist/kaarten.min.css`:

       .favBtn{position:absolute;right:0px;top:0px;color:#999;font-size:24px;z-index:2;cursor:pointer}
       .favBtn:hover{animation:pulse 2s ease-in-out infinite reverse}
       @keyframes pulse{50%{transform:scale(1.25)}}

   Alleen de naam van de keyframes is anders (`gk-pulse`), zodat we een `pulse`
   die elders op deze pagina misschien iets anders betekent niet overschrijven.
   Zonder dit blok is het hartje hier #333 op 16 px in plaats van #999 op 24, en
   bonkt het niet bij hover — precies het verschil dat Ries zag. */
#card_3d .favBtn {
  position: absolute;
  right: 0;
  top: 0;
  color: #999;
  font-size: 24px;
  z-index: 2;
  cursor: pointer;
}
#card_3d .favBtn:hover { animation: gk-pulse 2s ease-in-out infinite reverse; }
@keyframes gk-pulse { 50% { transform: scale(1.25); } }

/* Verder alleen plaatsing. */
#card_3d .gk-kaartfav {
  position: absolute;
  /* Bóven het beeld, rechts uitgelijnd op de beeldkolom. Negatieve marge zodat
     hij tegen de bovenrand van het beeld hangt en niet halverwege de
     witruimte. */
  bottom: 100%;
  right: 0;
  margin-bottom: -20px;
  width: 24px;
  height: 24px;
  /* De menubalk is z-index 3 binnen .mm-page en de contentkolom z-index 2, dus
     dit wint het nooit van het menu — daarvoor vliegt het hartje in een eigen
     laag (zie tools/favoriet.py). Dit is genoeg om binnen de kolom overal
     bovenop te liggen; het hoogste dat de bron hier stapelt is 10. */
  z-index: 60;
}

@media (max-width: 639px) {
  /* Op een telefoon bestaat de regel met "< Terug" niet: daar staat het beeld
     direct onder de kopbalk en zou het hartje tussen de icoontjes daarvan
     landen. Daar maken we de ruimte dus zelf. */
  #card_3d { padding-top: 42px; }
  #card_3d .gk-kaartfav { top: 16px; bottom: auto; margin-bottom: 0; }
}