/* =============================
   Narcy Knowledge Card (full CSS)
   ============================= */

/* Size vars you can tune once */
:root{
  /* layout paddings & anchors that match your back plate */
  --nk-padX:7%;
  --nk-title-top:29%;
  --nk-title-h:26%;           /* height of the tan title band */
  --nk-id-w:9%;               /* width of the small number box area */
  --nk-id-top:19%;             /* vertical position of card number */
  --nk-body-top:37%;          /* beige definition box top */
  --nk-body-bottom:14%;       /* distance from card bottom to body box */

  /* typography (responsive with safe min/max) */
  --nk-title-size:clamp(12px,3.5vw,15px);
  --nk-body-size: clamp(14px,3.6vw,18px);
}

/* Card shell & flip */
.narcy-card {
  width: min(320px,92vw);
  aspect-ratio: 32/45;
  position: relative;
  margin: 1em auto; /* top/bottom = 1em, left/right = auto (centered) */
  .mt-1em { margin-top: 1em; }
.mb-1em { margin-bottom: 1em; }
.my-1em { margin-block: 1em; } /* shorthand: top+bottom */

}
.nk-card{position:relative;width:100%;height:100%;perspective:1000px}
.nk-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s}
.nk-card:hover .nk-inner,.nk-card.is-flipped .nk-inner{transform:rotateY(180deg)}

.nk-face{
  position:absolute;inset:0;
  border-radius:14px;      /* round corners globally */
  overflow:hidden;         /* clip children to that radius */
  transition:opacity .2s linear;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.18);
}

/* Ensure card front image is centered vertically */
.nk-front img {
  width: 100%;
  height: 100%;
  
}



/* BACK — JS sets background-image on .nk-back */
.nk-back{
  transform:rotateY(180deg);opacity:0;z-index:1;
  background-color:#eae6da;      /* fallback tone */
  background-size:cover;background-position:center;background-repeat:no-repeat;
  color:#000;
}

.nk-card:hover .nk-front,.nk-card.is-flipped .nk-front{opacity:0}
.nk-card:hover .nk-back,.nk-card.is-flipped .nk-back{opacity:1}

/* -------- Text zones (overlay that aligns to your plate) -------- */
.nk-zones{position:absolute;inset:0;padding:18px;user-select:text;-webkit-user-select:text}

/* Title band */
.nk-z-title{
  position:absolute;
  left:var(--nk-padX);
  right:calc(var(--nk-padX) + var(--nk-id-w) + 2%);
  top:var(--nk-title-top);
  height:var(--nk-title-h);
  display:flex;align-items:center;

  font-weight:900;
  font-size:var(--nk-title-size);
  letter-spacing:.1px;
  text-transform:uppercase;
  color:#000;

  /* keep inside the band */
  line-height:1.25;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  word-break:break-word;hyphens:auto;
}

/* Card number (small box area at right of the band) */
.nk-z-id{
  position:absolute;top:var(--nk-id-top);right:var(--nk-padX);
  width:var(--nk-id-w);height:var(--nk-title-h);
  display:flex;align-items:center;justify-content:center;
  font:700 25px/1 "Comic Neue",system-ui,sans-serif;
  color:#D8BE93;               /* gold digits to match your art */
  text-shadow:0 1px 1px rgba(0,0,0,.2);
  pointer-events:none;
}

/* Definition (beige box). Limit lines so it never pushes quote/footer */
.nk-z-body{
  position:absolute;left:var(--nk-padX);right:var(--nk-padX);
  top:var(--nk-body-top);bottom:var(--nk-body-bottom);
  color:#000;font-size:var(--nk-body-size);line-height:1.35;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;
}
.nk-z-body p{margin:0}

/* Quote — pinned inside the navy band */
.nk-back .nk-zones .nk-z-quote{
  position:absolute;
  left:var(--nk-padX);
  right:var(--nk-padX);

  /* sit on the band edge; tweak +/− to center vertically */
  bottom:calc(var(--nk-body-bottom) + 1%);

  font-style:italic;
  font-weight:700;
  font-size:16px;
  line-height:1.25;

  color:#DFC497 !important;          /* force white if something overrides */
  text-align:center;
  text-shadow:0 1px 2px rgba(0,0,0,.35);

  z-index:3;                      /* above background + body text */
  pointer-events:none;
}

/* Footer — pinned near the card bottom */
.nk-footer{
  position:absolute;left:var(--nk-padX);right:var(--nk-padX);
  bottom:var(--nk-body-bottom);
  text-align:center;font-size:12px;font-weight:600;letter-spacing:.2px;
  color:#DFC497;opacity:.9;pointer-events:none;z-index:2;
  bottom:calc(var(--nk-body-bottom) - 8%);
}

/* Accessibility helper */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0 0 0 0);overflow:hidden}












/* --- Narcy Card Flip Mobile/Desktop Fix --- */

/* faces render cleanly during rotate */
.nk-face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Hover flip ONLY on devices that actually have hover (desktops) */
@media (hover: hover) and (pointer: fine) {
  .nk-card:hover .nk-inner { transform: rotateY(180deg); }
  .nk-card:hover .nk-front { opacity: 0; }
  .nk-card:hover .nk-back  { opacity: 1; }
}

/* Optional: nicer taps on mobile */
.nk-card {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}