/* ================================================
   VERB CARD - Premium 3D Flip Component
   Fast, tactile card with satisfying flip animation
   ================================================ */

.verb-card {
  display: block;
  perspective: 1000px;
  cursor: pointer;
  container-type: inline-size;

  /* Subtle idle animation hint */
  --flip-duration: 280ms;
  --flip-easing: cubic-bezier(0.4, 0.0, 0.2, 1);
}

.verb-card:focus {
  outline: none;
}

.verb-card:focus-visible .card-inner {
  outline: 3px solid var(--focus-ring, #2563eb);
  outline-offset: 4px;
}

/* ================================================
   CARD INNER - 3D Transform Container
   ================================================ */
.verb-card .card-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-lg, 0.75rem);

  /* Critical for 3D flip */
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;

  /* Snappy transition */
  transition:
    transform var(--flip-duration) var(--flip-easing),
    box-shadow var(--duration-fast, 150ms) ease-out;
}

/* Hover lift effect */
.verb-card:hover .card-inner {
  transform: translateY(-6px) scale(1.01);
}

/* Active press effect */
.verb-card:active .card-inner {
  transform: translateY(-2px) scale(0.995);
  transition-duration: 80ms;
}

/* ================================================
   FLIPPED STATE - 180° Y-Axis Rotation
   ================================================ */
.verb-card.flipped .card-inner {
  transform: rotateY(180deg);
}

.verb-card.flipped:hover .card-inner {
  transform: rotateY(180deg) translateY(-6px) scale(1.01);
}

.verb-card.flipped:active .card-inner {
  transform: rotateY(180deg) translateY(-2px) scale(0.995);
}

/* ================================================
   CARD FACES - Front & Back
   ================================================ */
.verb-card .face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg, 0.75rem);

  /* Hide backface during rotation */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  /* Grid layout for content */
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "card-header"
    "card-forms"
    "card-footer";

  /* Surface styling */
  background: var(--surface-1, #ffffff);
  border: 1px solid var(--border, #c5bdb3);
  box-shadow:
    0 2px 8px rgba(93, 78, 60, 0.06),
    0 1px 2px rgba(93, 78, 60, 0.04);
  overflow: hidden;

  transition: box-shadow var(--duration-fast, 150ms) ease-out;
}

/* Hover shadow enhancement */
.verb-card:hover .face {
  box-shadow:
    0 12px 28px rgba(93, 78, 60, 0.12),
    0 4px 8px rgba(93, 78, 60, 0.06);
}


/* ================================================
   BACK FACE - Starts rotated, reveals on flip
   ================================================ */
.verb-card .face.back {
  /* Pre-rotated so it faces away initially */
  transform: rotateY(180deg);

  /* Same grid, different content */
  grid-template-areas:
    "card-header"
    "back-content"
    "card-footer";
}


/* ================================================
   CARD HEADER
   ================================================ */
.verb-card .card-header {
  grid-area: card-header;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--space-xs, 0.5rem);
}

/* ================================================
   AUXILIARY BADGE
   ================================================ */
.verb-card .aux-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--space-xs, 0.5rem);
  border-radius: var(--radius-full, 9999px);
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.03em;
}

.verb-card .aux-badge.hebben {
  background: var(--hebben-bg, #fff8f0);
  color: var(--hebben-text, #7a5a2e);
}

.verb-card .aux-badge.zijn {
  background: var(--zijn-bg, #e8f4fc);
  color: var(--zijn-text, #3a6585);
}

/* ================================================
   LIKE BUTTON
   ================================================ */
.verb-card .like-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-muted, #999);
  transition:
    color 150ms ease-out,
    transform 150ms ease-out;
}

.verb-card .like-btn:hover {
  color: var(--like-color, #e25555);
  transform: scale(1.15);
}

.verb-card .like-btn:active {
  transform: scale(0.9);
}

.verb-card .like-btn.liked {
  color: var(--like-color, #e25555);
}

.verb-card .like-btn.liked .like-icon {
  fill: currentColor;
}

.verb-card .like-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: fill 150ms ease-out;
}

/* Liked animation */
@keyframes likePopIn {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.verb-card .like-btn.just-liked {
  animation: likePopIn 300ms ease-out;
}

/* ================================================
   FRONT FACE CONTENT
   ================================================ */
.verb-card .card-content {
  grid-area: card-forms;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs, 0.5rem) var(--space-sm, 0.75rem);
}

/* Verb Forms - Single Column Stack */
.verb-card .verb-forms {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2px, 1cqi, 4px);
  text-align: center;
  width: 100%;
}

.verb-card .verb-form {
  font-size: clamp(0.85rem, 7cqi, 1.1rem);
  font-weight: 500;
  color: var(--text, #1a1a1a);
  line-height: 1.2;
  hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
}

.verb-card .verb-form.infinitive {
  font-size: clamp(1rem, 9cqi, 1.35rem);
  font-weight: 700;
}

.verb-card .verb-form.past,
.verb-card .verb-form.perfect {
  color: var(--text-muted, #555555);
  font-weight: 400;
}

/* ================================================
   CARD FOOTER
   ================================================ */
.verb-card .card-footer {
  grid-area: card-footer;
  padding: var(--space-2xs, 0.25rem) var(--space-xs, 0.5rem);
  display: flex;
  justify-content: flex-end;
  align-self: end;
}

/* Flip hint - appears on hover */
.verb-card .flip-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6rem;
  color: var(--text-muted, #666666);
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity var(--duration-fast, 150ms) ease-out,
    transform var(--duration-fast, 150ms) ease-out;
}

.verb-card:hover .flip-hint {
  opacity: 0.7;
  transform: translateY(0);
}

/* ================================================
   BACK FACE CONTENT
   ================================================ */
.verb-card .back-content {
  grid-area: back-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs, 0.5rem);
  padding: var(--space-md, 1rem);
  text-align: center;
}

.verb-card .translation {
  /* Dynamic font size based on container width */
  font-size: clamp(1.1rem, 10cqi, 1.5rem);
  font-weight: 600;
  color: var(--text, #1a1a1a);
  line-height: 1.3;
}

.verb-card .back-inf {
  font-size: clamp(0.8rem, 6cqi, 1rem);
  color: var(--text-muted, #666666);
  opacity: 0.8;
}

/* Back header - minimal */
.verb-card .face.back .card-header {
  justify-content: flex-end;
}

/* ================================================
   REDUCED MOTION
   ================================================ */
@media (prefers-reduced-motion: reduce) {
  .verb-card .card-inner {
    transition: none;
  }

  .verb-card:hover .card-inner {
    transform: none;
  }

  .verb-card.flipped .card-inner {
    transform: rotateY(180deg);
  }

  .verb-card.flipped:hover .card-inner {
    transform: rotateY(180deg);
  }

  .verb-card .face,
  .verb-card .flip-hint {
    transition: none;
  }
}

/* ================================================
   DARK MODE
   ================================================ */
@media (prefers-color-scheme: dark) {
  .verb-card .face {
    background: var(--surface-1, #1e1c1a);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow:
      0 2px 8px rgba(0, 0, 0, 0.2),
      0 1px 2px rgba(0, 0, 0, 0.1);
  }

  .verb-card:hover .face {
    box-shadow:
      0 12px 28px rgba(0, 0, 0, 0.3),
      0 4px 8px rgba(0, 0, 0, 0.2);
  }

  .verb-card .face::before {
    opacity: 1;
  }
}

/* Container queries replaced by clamp() with cqi units */