/* Gavekortet, tegnet efter kundens rigtige kort (mint/petrol), godkendt 18-09-2026.
   ÉN kilde: både forsiden og /gavekort bruger denne fil og partiallen
   template-parts/gavekort-kort.php — de to steder var duplikeret før og drev fra hinanden. */
.vk-gk-kort{
  /* Kortets egen petrol/mint-palet — findes ikke i sitets tokens, derfor lokalt her */
  --gk-ink:#14545F;
  --gk-flade:#DCEDE9;
  container-type:inline-size;
  aspect-ratio:1.586;
  max-width:420px;width:100%;
  margin-left:auto;
  border-radius:16px;
  background:linear-gradient(145deg, #E6F2EE 0%, #D3E7E2 60%, var(--gk-flade) 100%);
  box-shadow:0 18px 40px rgba(20,84,95,.22), 0 2px 6px rgba(20,84,95,.14);
  color:var(--gk-ink);
  position:relative;
  overflow:hidden;
}
.vk-gk-kort-art{
  position:absolute;inset:0;
  width:100%;height:100%;
}
.vk-gk-kort-inner{
  position:relative;z-index:2;
  height:100%;box-sizing:border-box;
  padding:6.5% 7%;
  display:flex;flex-direction:column;
}
.vk-gk-kort-name{
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;font-weight:700;
  font-size:clamp(20px,8.2cqw,30px);
  line-height:1;letter-spacing:.01em;
  margin:0;
}
.vk-gk-kort-chip-row{
  display:flex;align-items:center;gap:2.1cqw;
  margin:5.2% 0 4%;
}
.vk-gk-kort-chip{
  width:clamp(24px,9.2cqw,34px);height:clamp(18px,7cqw,26px);border-radius:4px;
  background:linear-gradient(135deg,#EAC078 0%,#C9903E 48%,#E3B76C 100%);
  box-shadow:inset 0 0 0 1px rgba(120,80,20,.35);
  position:relative;flex:0 0 auto;
}
.vk-gk-kort-chip::before,.vk-gk-kort-chip::after{content:"";position:absolute;background:rgba(120,80,20,.4)}
.vk-gk-kort-chip::before{left:0;right:0;top:50%;height:1px}
.vk-gk-kort-chip::after{top:22%;bottom:22%;left:34%;width:1px}
.vk-gk-kort-line1{
  font-weight:700;
  font-size:clamp(11px,4.4cqw,15px);
  line-height:1.25;
  margin:0;max-width:58%;
  overflow-wrap:break-word;
}
.vk-gk-kort-line2{
  font-size:clamp(9px,3.5cqw,12px);
  line-height:1.35;
  margin:.45em 0 0;
  max-width:60%;
  color:#1B5C66;
  overflow-wrap:break-word;
}
.vk-gk-kort-line3{
  font-weight:700;
  font-size:clamp(8px,3cqw,10.5px);
  margin:auto 0 0;
  letter-spacing:.005em;
}
.vk-gk-kort-mark{
  position:absolute;right:6.5%;bottom:7%;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  color:#fff;
}
.vk-gk-kort-mark img{width:clamp(52px,17cqw,74px);height:auto;display:block}
.vk-gk-kort-mark small{
  font-size:6.5px;letter-spacing:.14em;font-weight:600;
}

/* Kortet skal fange øjet uden at larme: en langsom vippen, og et lysglimt der stryger
   hen over fladen som lys i et rigtigt plastikkort. Begge står stille ved reduceret bevægelse. */
@keyframes vkGkVip {
  0%, 100% { transform: rotate(-.6deg) translateY(0); }
  50%      { transform: rotate(.5deg) translateY(-6px); }
}
@keyframes vkGkGlimt {
  0%   { transform: translateX(-130%) skewX(-18deg); }
  18%  { transform: translateX(130%) skewX(-18deg); }
  100% { transform: translateX(130%) skewX(-18deg); }
}
.vk-gk-kort {
  animation: vkGkVip 7s ease-in-out infinite;
  transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease;
}
.vk-gk-kort::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 38%;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
  transform: translateX(-130%) skewX(-18deg);
  animation: vkGkGlimt 6.5s ease-in-out infinite;
}
.vk-gk-kort:hover {
  animation-play-state: paused;
  transform: rotate(0deg) translateY(-8px) scale(1.015);
  box-shadow: 0 26px 56px rgba(20,84,95,.3), 0 3px 8px rgba(20,84,95,.16);
}
@media (prefers-reduced-motion: reduce) {
  .vk-gk-kort, .vk-gk-kort::after { animation: none; }
  .vk-gk-kort::after { opacity: 0; }
}