/**
 * Card Styles for Hunter Fashion Commission
 * Card components and card-related styling
 */

/* ============================================
   ACCESSIBILITY: Motion Sensitivity Support
   ============================================ */

/* Card enhancements with hover effects */
.card {
  transition: transform 0.2s, box-shadow 0.2s;
}

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

/* Respect user's motion preferences - disable animations when reduced motion is preferred */
@media (prefers-reduced-motion: reduce) {
  .card,
  .card:hover,
  .game-selection-card,
  .game-selection-card:hover,
  .current-event-card,
  .current-event-card:hover,
  .event-card-wrapper,
  .event-card-wrapper .content-card,
  .event-card-wrapper .content-card:hover,
  .hall-of-fame-card .content-card,
  .hall-of-fame-card .content-card:hover,
  .photo-selection-card,
  .photo-selection-card:hover,
  .fashion-selection-card,
  .fashion-selection-card:hover,
  .game-option:hover,
  .set-type-option:hover,
  #set-type-options,
  #set-type-options .list-group-item {
    transition: none;
    transform: none;
    animation: none;
  }
  
  .photo-selection-card.loading::after,
  .fashion-selection-card.loading::after,
  .card.loading::after {
    animation: none;
  }
  
  .fashion-card-img-container a:hover img,
  .photo-selection-card:hover .photo-selection-image img,
  .fashion-selection-card:hover .fashion-selection-image img {
    transform: none;
  }
}

/* Set Type Selection */
#set-type-options {
  transition: all 0.3s ease-in-out;
}

#set-type-options.active {
  display: block !important;
  animation: fadeSlideDown 0.3s forwards;
}

#set-type-options .list-group-item {
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}

#set-type-options .list-group-item:hover {
  border-left: 3px solid var(--metallic-gold);
  background-color: var(--bg-elevated);
}

#set-type-options .card {
  transform: none;
}

#set-type-options .card:hover {
  transform: none;
  box-shadow: var(--shadow-md);
}

/* Game selection cards - Multi-step flow */
.game-selection-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.game-selection-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   SPACING CONSISTENCY
   ============================================ */

/* Spacing scale: Using multiples of 8px (0.5rem) for consistency
 * - 0.5rem (8px) - Small spacing
 * - 1rem (16px) - Standard spacing
 * - 1.5rem (24px) - Medium spacing
 * - 2rem (32px) - Large spacing
 */

/* Set type selection cards */
.set-type-card {
    margin-top: 1.5rem; /* 24px - standardized from 20px */
    border-left: 4px solid var(--metallic-gold);
}

/* Game and set type options styling */
.game-option, .set-type-option {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.game-option:hover, .set-type-option:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

/* Current Event Card styling */
.current-event-card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: transform 0.3s ease;
    margin-bottom: 2rem;
    width: 100%;
}

.current-event-card:hover {
    transform: translateY(-5px);
}

/* Update event card headers to be more visually appealing */
.card-header {
    padding: 1rem;
}

.event-card-wrapper .card-header {
    background: var(--metallic-gold);
    border-bottom: none;
    color: var(--deep-charcoal);
}

.event-card-wrapper .card-header h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0;
    color: var(--deep-charcoal);
}

/* Ensure badges in event headers are properly visible */
.event-card-wrapper .card-header .badge {
    font-size: 0.9rem;
    padding: 0.5rem 0.8rem;
    color: var(--deep-charcoal);
}

/* Event cards container and responsive behavior */
.event-cards-container {
  display: flex;
  flex-wrap: wrap;
}

.event-card-wrapper {
  transition: all 0.3s ease;
}

/* Single event card will be centered on medium+ screens */
.event-card-wrapper.col-12 {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Adjust event card images for different layouts - 2:1 ratio */
.event-card-wrapper.col-12 .event-card-img-container {
  aspect-ratio: 2 / 1;
  min-height: 300px;
}

.event-card-wrapper.col-md-6 .event-card-img-container {
  aspect-ratio: 2 / 1;
  min-height: 200px;
}

/* For larger screens, allow 3 events in a row for larger collections */
@media (min-width: 1200px) {
  .event-cards-container.many-events .event-card-wrapper {
    flex: 0 0 auto;
    width: 33.333333%;
  }
  
  .event-cards-container.many-events .event-card-img-container {
    aspect-ratio: 2 / 1;
    min-height: 160px;
  }
}

/* Recent submissions in event cards - match fashion section sizing */
.event-card-wrapper .card-img-container {
  height: 220px;
}

/* THA fashion submission cards - match standard card image height */
.content-card .card-img-container {
  height: 220px;
}

.event-card-wrapper .content-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-bottom: 0;
}

.event-card-wrapper .content-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.event-card-wrapper h4 {
  font-size: 1.25rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

/* Make the event description and recent submissions work well together */
.event-description + .mt-4 {
  margin-top: 2rem !important;
}

/* ============================================
   ACCESSIBILITY: Keyboard Navigation Focus States
   ============================================ */

/* Focus states for all clickable card elements */
.card a:focus-visible,
.card-img-container a:focus-visible,
.fashion-card-clickable:focus-visible,
.fashion-card-img-container a:focus-visible,
.event-card-img-container a:focus-visible,
.photo-selection-card:focus-visible,
.fashion-selection-card:focus-visible,
.game-selection-card:focus-visible,
.current-event-card a:focus-visible,
.event-card-wrapper a:focus-visible,
.hall-of-fame-card a:focus-visible,
.content-card a:focus-visible {
    outline: 2px solid var(--metallic-gold);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* Focus states for card containers that are clickable */
.photo-selection-card:focus-visible,
.fashion-selection-card:focus-visible {
    border-color: var(--metallic-gold);
    box-shadow: 0 0 0 2px rgba(var(--metallic-gold-rgb), 0.3);
}

/* Fashion card clickable area styles */
.fashion-card-clickable {
    position: relative;
    z-index: 1;
}

.fashion-card-clickable:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Fashion card image container links */
.fashion-card-img-container a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    position: relative;
    z-index: 2;
}

.fashion-card-img-container a:hover img {
    transform: scale(1.05);
}

/* Hall of Fame Section */
.hall-of-fame-card {
    margin-bottom: 2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    overflow: hidden;
    border: none;
    border-radius: 0.5rem;
}

.hall-of-fame-card .card-header {
    padding: 1rem;
    background: var(--metallic-gold);
    border-bottom: none;
    color: var(--deep-charcoal);
}

.hall-of-fame-card .card-header h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0;
    color: var(--deep-charcoal);
}

.hall-of-fame-card .card-body {
    padding: 1.5rem;
    background-color: transparent;
}

.hall-of-fame-card .content-card {
    transform: translateY(0);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: none;
    overflow: hidden;
}

.hall-of-fame-card .content-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.15);
}

.hall-of-fame-card .btn-outline-primary {
    color: var(--wyvern-crimson);
    border-color: var(--wyvern-crimson);
}

.hall-of-fame-card .btn-outline-primary:hover {
    background-color: var(--wyvern-crimson);
    color: white;
    border-color: var(--wyvern-crimson);
}

/* ============================================
   ACCESSIBILITY: Touch Target Sizes
   ============================================ */

/* Ensure minimum touch target size (44x44px) for interactive elements */
.fashion-card-clickable {
    min-height: 44px;
    min-width: 44px;
}

/* Photo/Fashion Selection Cards */
.photo-selection-card,
.fashion-selection-card {
    background-color: var(--bg-primary);
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid var(--border-medium);
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    cursor: pointer;
    /* Ensure minimum touch target size (44x44px) for accessibility */
    min-height: 44px;
    min-width: 44px;
}

.photo-selection-card:hover,
.fashion-selection-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--metallic-gold);
}

.photo-selection-image,
.fashion-selection-image {
    position: relative;
    height: 200px;
    overflow: hidden;
    background-color: var(--bg-tertiary);
}

.photo-selection-image img,
.fashion-selection-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.photo-selection-card:hover .photo-selection-image img,
.fashion-selection-card:hover .fashion-selection-image img {
    transform: scale(1.05);
}

/* Hidden checkboxes for selection cards */
.photo-selection-card input[type="checkbox"],
.fashion-selection-card input[type="checkbox"] {
    display: none;
}

.photo-selection-body,
.fashion-selection-body {
    padding: 1rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.photo-selection-title,
.fashion-selection-title {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Selection indicator for selected items */
.photo-selection-card.selected,
.fashion-selection-card.selected {
    border-color: var(--metallic-gold);
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
    transform: translateY(-2px);
}

.photo-selection-card.selected::before,
.fashion-selection-card.selected::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--metallic-gold), var(--metallic-gold-dark));
    z-index: 1;
}

/* Enhanced visual feedback for selected items */
.photo-selection-card.selected .photo-selection-image,
.fashion-selection-card.selected .fashion-selection-image {
    border: 2px solid var(--metallic-gold);
}

.photo-selection-card.selected .photo-selection-body,
.fashion-selection-card.selected .fashion-selection-body {
    background-color: rgba(212, 175, 55, 0.05);
}

/* Selection Grid Improvements */
.photo-selection-grid,
.fashion-selection-grid {
    margin-top: 1rem;
}

.photo-selection-grid .row,
.fashion-selection-grid .row {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

.photo-selection-grid .col-md-4,
.photo-selection-grid .col-lg-3,
.fashion-selection-grid .col-md-4,
.fashion-selection-grid .col-lg-3 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* ============================================
   EMPTY STATES EXPANSION
   ============================================ */

/* Generic empty state for card containers */
/* Note: These work for containers that can be truly empty (no children) */
.card-container:empty::after,
.fashion-cards-container:empty::after,
.photo-selection-grid:empty::after,
.fashion-selection-grid:empty::after {
    content: "No items available";
    display: block;
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
    padding: 2rem;
    background-color: var(--bg-secondary);
    border-radius: 0.5rem;
    border: 2px dashed var(--border-medium);
    margin: 1rem 0;
}

/* Specific empty state messages for different contexts */
.photo-selection-grid:empty::after,
.fashion-selection-grid:empty::after {
    content: "No items available to select";
}

.fashion-cards-container:empty::after {
    content: "No fashion sets available";
}

/* Note: event-cards-container uses conditional rendering in templates,
 * so empty states are handled via {% if %} blocks showing alert messages.
 * Empty state CSS won't apply to .event-cards-container as it's a .row element
 * that only exists when events are present.
 */

/* ============================================
   LOADING STATES EXPANSION
   ============================================ */

/* Generic loading state for all card types */
.card.loading,
.content-card.loading,
.event-card-wrapper.loading,
.hall-of-fame-card.loading,
.current-event-card.loading,
.photo-selection-card.loading,
.fashion-selection-card.loading {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.card.loading::after,
.content-card.loading::after,
.event-card-wrapper.loading::after,
.hall-of-fame-card.loading::after,
.current-event-card.loading::after,
.photo-selection-card.loading::after,
.fashion-selection-card.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2rem;
    height: 2rem;
    margin: -1rem 0 0 -1rem;
    border: 2px solid var(--border-medium);
    border-top: 2px solid var(--metallic-gold);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 10;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Disable spin animation when reduced motion is preferred */
@media (prefers-reduced-motion: reduce) {
    .card.loading::after,
    .content-card.loading::after,
    .event-card-wrapper.loading::after,
    .hall-of-fame-card.loading::after,
    .current-event-card.loading::after,
    .photo-selection-card.loading::after,
    .fashion-selection-card.loading::after {
        animation: none;
        border-top-color: var(--metallic-gold);
    }
}

/* My Submissions Cards - Match regular fashion card spacing */
.my-submissions .card-img-container {
    margin-bottom: 0;
}

.my-submissions .card-img-container img.card-img-top {
    margin-bottom: 0;
    display: block;
}

.my-submissions .card-img-container + .card-body {
    padding-top: 1rem;
}

/* ============================================
   FOCUS MANAGEMENT DOCUMENTATION
   ============================================ */

/* Focus Management Best Practices:
 * 
 * 1. Focus Trap for Modal-like Card Interactions:
 *    - When cards open in modal/overlay contexts, JavaScript should implement
 *      focus trapping to keep keyboard navigation within the modal
 *    - Use libraries like focus-trap or implement custom focus management
 *    - Return focus to trigger element when modal closes
 * 
 * 2. Focus Indicators:
 *    - All interactive card elements have :focus-visible styles using metallic-gold
 *    - Focus indicators use 2px outline with 2px offset for visibility
 *    - Focus styles respect WCAG 2.1 non-text contrast requirements (3:1)
 * 
 * 3. Focus Order:
 *    - Ensure logical tab order through card content
 *    - Card links should be focusable in reading order
 *    - Skip links may be needed for card grids with many items
 * 
 * 4. JavaScript Focus Management:
 *    - When dynamically loading cards, ensure focus management
 *    - Announce new content to screen readers (aria-live regions)
 *    - Maintain focus position when filtering/sorting card collections
 * 
 * 5. Keyboard Navigation:
 *    - Enter/Space should activate clickable cards
 *    - Arrow keys may be used for card grid navigation (requires JS)
 *    - Escape should close any card-based modals/overlays
 */