/*
 * FoundContext v4 Cards System
 * Sacred card-deck animation system - preserve 100% functionality
 * Playing card aspect ratio with mobile-first responsive design
 */

/* Card Container - Main viewport */
.playing-card-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-lg);
  min-height: 60vh; /* Fallback for older browsers */
  min-height: var(--card-height-mobile); /* Dynamic viewport height */
  perspective: 1000px; /* Enable 3D transforms */
}

/* Playing Card - Main content card */
.playing-card {
  width: var(--card-width-mobile);
  height: var(--card-height-mobile);
  /* Legacy CSS calculation ensures proper fit */
  background-color: var(--card-background);
  border: 1px solid var(--border-color);
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: all var(--animation-duration-normal) var(--animation-easing);
  position: relative;
}

.playing-card:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-2px) rotateX(2deg);
}

/* Card sections */
.card-header {
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(135deg, var(--primary-color-alpha) 0%, transparent 100%);
}

.card-content {
  flex: 1;
  padding: var(--space-lg);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

.card-content::-webkit-scrollbar {
  width: 4px;
}

.card-content::-webkit-scrollbar-track {
  background: transparent;
}

.card-content::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
  border-radius: 2px;
}

.card-footer {
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--border-color);
  background-color: var(--background-secondary);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Card Header Elements */
.card-reference {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--primary-color);
  margin-bottom: var(--space-sm);
  line-height: var(--line-height-tight);
}

.card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.card-show {
  font-weight: var(--font-weight-medium);
}

.card-year {
  color: var(--text-muted);
}

/* Answer Sections */
.answer-section {
  margin-bottom: var(--space-lg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.answer-section:last-child {
  margin-bottom: 0;
}

.answer-heading {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--primary-color);
  margin: 0;
}

.answer-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-md);
  background: var(--background-secondary);
  border: none;
  cursor: pointer;
  transition: background-color var(--animation-duration-fast) var(--animation-easing);
}

.answer-toggle:hover,
.answer-toggle:focus {
  background-color: var(--primary-color-alpha);
}

.answer-toggle[aria-expanded="true"] .toggle-icon {
  transform: rotate(45deg);
}

.toggle-icon {
  font-size: var(--font-size-lg);
  font-weight: bold;
  color: var(--primary-color);
  transition: transform var(--animation-duration-fast) var(--animation-easing);
}

.answer-content {
  padding: var(--space-md);
  display: none;
  animation: slideDown var(--animation-duration-normal) var(--animation-easing);
}

.answer-content.expanded,
.short-answer-section .answer-content {
  display: block;
}

/* Short Answer - Always visible */
.short-answer-section {
  border-color: var(--primary-color);
  background: linear-gradient(135deg, var(--primary-color-alpha) 0%, transparent 100%);
}

.short-answer-section .answer-heading {
  padding: var(--space-md);
  margin: 0;
  background: transparent;
}

.short-answer {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--text-color);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* Long Answer and Context */
.long-answer,
.historical-context {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--text-color);
  margin: 0;
}

/* Card Footer Elements */
.appearance-order {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.card-actions {
  display: flex;
  gap: var(--space-sm);
}

.action-button {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--animation-duration-fast) var(--animation-easing);
  min-height: 32px;
}

.action-button:hover,
.action-button:focus {
  background-color: var(--primary-color-alpha);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.action-icon {
  font-size: var(--font-size-base);
}

/* Card Navigation */
.card-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
  gap: var(--space-md);
}

.nav-button {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  color: var(--text-color);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: all var(--animation-duration-fast) var(--animation-easing);
  min-height: var(--touch-target-min);
  min-width: 100px;
}

.nav-button:hover,
.nav-button:focus {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-inverse);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.nav-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.nav-icon {
  font-size: var(--font-size-lg);
  font-weight: bold;
}

.nav-prev {
  text-align: left;
}

.nav-next {
  text-align: right;
  flex-direction: row-reverse;
}

/* Mobile Swipe Hints */
.swipe-hints {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 var(--space-md);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--animation-duration-normal) var(--animation-easing);
}

.playing-card-container:hover .swipe-hints {
  opacity: 0.6;
}

.swipe-hint {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--background-overlay);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  backdrop-filter: blur(4px);
}

.hint-icon {
  font-size: var(--font-size-sm);
}

/* Card Stack Effect for Deck Representation */
.card-back {
  position: relative;
  width: 100%;
  aspect-ratio: var(--card-aspect-ratio);
  background: var(--card-background);
  border: 1px solid var(--border-color);
  border-radius: var(--card-border-radius);
  overflow: hidden;
  transition: all var(--animation-duration-normal) var(--animation-easing);
  cursor: pointer;
}

.card-back:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
}

.card-stack-indicator {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 100%;
  pointer-events: none;
}

.stack-card {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: var(--card-background);
  border: 1px solid var(--border-color);
  border-radius: var(--card-border-radius);
}

.stack-1 {
  transform: translateX(3px) translateY(3px);
  z-index: -1;
  opacity: 0.8;
}

.stack-2 {
  transform: translateX(6px) translateY(6px);
  z-index: -2;
  opacity: 0.6;
}

.stack-3 {
  transform: translateX(9px) translateY(9px);
  z-index: -3;
  opacity: 0.4;
}

/* Deck Info Overlay */
.deck-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-md);
  background: linear-gradient(transparent 0%, rgba(0,0,0,0.7) 100%), rgba(255,255,255,0.7);
  color: white;
  /* backdrop-filter: blur(4px); */ /* Removed blur, added 50% white opacity */
}

.deck-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-xs);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.deck-year,
.deck-count {
  font-size: var(--font-size-sm);
  margin: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.deck-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.deck-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--primary-color-alpha) 0%, var(--secondary-color) 100%);
}

.deck-icon {
  font-size: var(--font-size-5xl);
  opacity: 0.7;
}

/* Animations */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cardFlip {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(90deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

.card-flip {
  animation: cardFlip var(--max-animation-duration) var(--animation-easing);
}

/* Responsive Design */
@media (min-width: 768px) {
  .playing-card {
    width: var(--card-max-width);
  }
  
  .card-reference {
    font-size: var(--font-size-2xl);
  }
  
  .short-answer {
    font-size: var(--font-size-xl);
  }
  
  .card-navigation {
    margin-bottom: var(--space-xl);
  }
  
  .nav-button {
    min-width: 120px;
    padding: var(--space-md) var(--space-lg);
  }
  
  /* Desktop: Show swipe hints as hover hints */
  .swipe-hints {
    display: none;
  }
}

@media (max-width: 767px) {
  .playing-card-container {
    padding: var(--space-md);
    min-height: 50vh; /* Fallback for older browsers */
    min-height: var(--card-calculated-height, 300px); /* DOM measured height - fixes mobile browser chrome issue */
  }
  
  .card-reference {
    font-size: var(--font-size-lg);
  }
  
  .card-content {
    padding: var(--space-md);
  }
  
  .answer-section {
    margin-bottom: var(--space-md);
  }
  
  .nav-button {
    min-width: 80px;
    padding: var(--space-sm);
    font-size: var(--font-size-xs);
  }
  
  .nav-label {
    display: none;
  }
}

/* Accessibility and Performance */
@media (prefers-reduced-motion: reduce) {
  .playing-card,
  .card-back,
  .nav-button,
  .action-button,
  .answer-toggle {
    transition: none;
  }
  
  .playing-card:hover {
    transform: none;
  }
  
  .card-back:hover {
    transform: translateY(-2px); /* Minimal transform for feedback */
  }
  
  .swipe-hints {
    display: none;
  }
  
  .card-flip {
    animation: none;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .playing-card,
  .card-back {
    border-width: 2px;
  }
  
  .answer-section {
    border-width: 2px;
  }
  
  .nav-button,
  .action-button {
    border-width: 2px;
  }
}

/* Mobile Landscape Card Layout Adaptations */
@media screen and (min-width: 480px) and (max-width: 1024px) 
       and (orientation: landscape) and (max-height: 500px) {
  
  /* Override default card structure for landscape layout */
  .playing-card {
    display: flex;
    flex-direction: row;
    padding: 0;
  }
  
  /* Hide default card sections when landscape layout is active */
  .playing-card .card-header,
  .playing-card .card-content,
  .playing-card .card-footer {
    display: none;
  }
  
  /* Show landscape layout when present */
  .playing-card .landscape-card-layout {
    display: flex;
    width: 100%;
    height: 100%;
  }
  
  /* Ensure landscape layout takes full card space */
  .landscape-card-layout .card-meta-column,
  .landscape-card-layout .card-content-column {
    height: 100%;
  }
  
  /* Override card navigation positioning for landscape */
  .landscape-card-layout .card-navigation {
    position: static;
    margin-bottom: 0;
  }
  
  /* Ensure proper scrolling behavior */
  .landscape-card-layout .card-content-scrollable {
    height: 100%;
    max-height: none;
  }
  
  /* Enhanced short answer visibility in landscape */
  .landscape-card-layout .short-answer-section .answer-content {
    display: block;
    padding: var(--space-md) 0;
  }
  
  /* Optimized answer sections for landscape reading */
  .landscape-card-layout .answer-section {
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
  }
  
  /* Improved answer toggle sizing for landscape */
  .landscape-card-layout .answer-toggle {
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  /* Action buttons adaptation for meta column */
  .landscape-card-layout .card-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    width: 100%;
  }
  
  .landscape-card-layout .action-button {
    width: 100%;
    text-align: center;
  }
  
  /* Meta information styling in left column */
  .landscape-card-layout .appearance-order {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-xs);
  }
  
  /* Preserve hover effects and transitions */
  .landscape-card-layout .nav-button:hover,
  .landscape-card-layout .nav-button:focus {
    transform: none;
    background-color: var(--primary-color);
    color: var(--text-inverse);
  }
  
  .landscape-card-layout .action-button:hover,
  .landscape-card-layout .action-button:focus {
    background-color: var(--primary-color-alpha);
    border-color: var(--primary-color);
    color: var(--primary-color);
  }
  
  /* Ensure content readability with proper line heights */
  .landscape-card-layout .long-answer,
  .landscape-card-layout .historical-context {
    line-height: var(--line-height-relaxed);
    font-size: var(--font-size-base);
  }
}