/**
 * Youth Bible Studies - StudyCard Component Styles
 * Journey stage colors: Explore (blue/green), Engage (orange), Immerse (purple)
 * 
 * Requirements: 1.2, 1.3, 1.4, 3.8, 5.2, 5.3, 5.4
 */

/* ===================================
   StudyCard Base Styles
   =================================== */

.study-card {
  background: var(--color-background, #ffffff);
  border: 2px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-lg, 0.75rem);
  overflow: hidden;
  transition: all var(--duration-base, 300ms) var(--ease-out, ease-out);
  position: relative;
  display: flex;
  flex-direction: column;
}

.study-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
  border-color: var(--path-color-primary, var(--color-primary-500));
}

.study-card:focus-within {
  outline: 2px solid var(--color-focus-ring, rgba(99, 102, 241, 0.3));
  outline-offset: 2px;
}

/* ===================================
   Journey Stage Color Variants
   =================================== */

/* Explore Path - Blue/Green (Welcoming) */
.study-card--explore {
  --path-color-primary: #4ecdc4;
  --path-color-secondary: #44a08d;
  --path-color-light: #e8f8f5;
  --path-color-dark: #2c7a7b;
}

.study-card--explore:hover {
  border-color: var(--path-color-primary);
  background: linear-gradient(
    to bottom,
    var(--path-color-light) 0%,
    var(--color-background) 100%
  );
}

/* Engage Path - Orange (Energetic) */
.study-card--engage {
  --path-color-primary: #ff6b6b;
  --path-color-secondary: #ffa07a;
  --path-color-light: #fff5f5;
  --path-color-dark: #c53030;
}

.study-card--engage:hover {
  border-color: var(--path-color-primary);
  background: linear-gradient(
    to bottom,
    var(--path-color-light) 0%,
    var(--color-background) 100%
  );
}

/* Immerse Path - Purple (Contemplative) */
.study-card--immerse {
  --path-color-primary: #6c5ce7;
  --path-color-secondary: #a29bfe;
  --path-color-light: #f5f3ff;
  --path-color-dark: #5f3dc4;
}

.study-card--immerse:hover {
  border-color: var(--path-color-primary);
  background: linear-gradient(
    to bottom,
    var(--path-color-light) 0%,
    var(--color-background) 100%
  );
}

/* ===================================
   Progress Status Variants
   =================================== */

.study-card--in-progress {
  border-color: var(--color-warning-500, #f59e0b);
  background: linear-gradient(
    to bottom,
    rgba(245, 158, 11, 0.05) 0%,
    var(--color-background) 100%
  );
}

.study-card--completed {
  border-color: var(--color-success-500, #10b981);
  background: linear-gradient(
    to bottom,
    rgba(16, 185, 129, 0.05) 0%,
    var(--color-background) 100%
  );
}

.study-card--revisited {
  border-color: var(--color-primary-500, #6366f1);
  background: linear-gradient(
    to bottom,
    rgba(99, 102, 241, 0.05) 0%,
    var(--color-background) 100%
  );
}

/* ===================================
   Card Link
   =================================== */

.study-card__link {
  display: block;
  padding: var(--space-3, 1.5rem);
  text-decoration: none;
  color: inherit;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.study-card__link:focus {
  outline: none;
}

/* ===================================
   Card Header
   =================================== */

.study-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-2, 1rem);
  gap: var(--space-2, 1rem);
}

.study-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 0.5rem);
  flex: 1;
}

/* ===================================
   Path Badge
   =================================== */

.study-card__path-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-md, 0.5rem);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-bold, 700);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide, 0.025em);
  line-height: 1.5;
}

/* ===================================
   Testament Badge
   =================================== */

.study-card__testament-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-md, 0.5rem);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-semibold, 600);
  background-color: var(--color-surface, #f9fafb);
  color: var(--color-text-secondary, #6b7280);
  border: 1px solid var(--color-border, #e5e7eb);
}

/* ===================================
   Status Badge
   =================================== */

.study-card__status-badge {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-md, 0.5rem);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-semibold, 600);
  white-space: nowrap;
}

.study-card__status-badge--in-progress {
  background-color: var(--color-warning-100, #fef3c7);
  color: var(--color-warning-800, #92400e);
  border: 1px solid var(--color-warning-300, #fcd34d);
}

.study-card__status-badge--completed {
  background-color: var(--color-success-100, #d1fae5);
  color: var(--color-success-800, #065f46);
  border: 1px solid var(--color-success-300, #6ee7b7);
}

.study-card__status-badge--revisited {
  background-color: var(--color-primary-100, #e0e7ff);
  color: var(--color-primary-800, #3730a3);
  border: 1px solid var(--color-primary-300, #a5b4fc);
}

.study-card__status-icon {
  font-size: 1rem;
  line-height: 1;
}

.study-card__status-text {
  line-height: 1;
}

/* ===================================
   Title
   =================================== */

.study-card__title {
  font-size: var(--font-size-xl, 1.25rem);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-text-primary, #111827);
  margin: 0 0 var(--space-2, 1rem) 0;
  line-height: var(--line-height-tight, 1.25);
}

/* ===================================
   Book Reference
   =================================== */

.study-card__book-ref {
  display: flex;
  align-items: center;
  gap: var(--space-1, 0.5rem);
  padding: var(--space-1, 0.5rem) var(--space-2, 1rem);
  background-color: var(--path-color-light, var(--color-surface));
  border-radius: var(--radius-sm, 0.375rem);
  margin-bottom: var(--space-2, 1rem);
  border: 1px solid var(--path-color-primary, var(--color-border));
}

.study-card__book-icon {
  font-size: 1rem;
  line-height: 1;
}

.study-card__book-text {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--path-color-dark, var(--color-primary-700));
}

/* ===================================
   Metadata Row
   =================================== */

.study-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3, 1.5rem);
  margin-bottom: var(--space-2, 1rem);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-secondary, #6b7280);
}

.study-card__time-estimate,
.study-card__note-count {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.study-card__time-icon,
.study-card__note-icon {
  font-size: 1rem;
  line-height: 1;
}

.study-card__note-count {
  color: var(--path-color-dark, var(--color-primary-700));
  font-weight: var(--font-weight-semibold, 600);
}

/* ===================================
   Introduction Excerpt
   =================================== */

.study-card__intro {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-secondary, #6b7280);
  line-height: var(--line-height-relaxed, 1.625);
  margin: 0 0 var(--space-2, 1rem) 0;
  flex: 1;
}

/* ===================================
   Topic Tags
   =================================== */

.study-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 0.5rem);
  padding-top: var(--space-2, 1rem);
  border-top: 1px solid var(--color-border, #e5e7eb);
  margin-top: auto;
}

.study-card__tag {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-sm, 0.375rem);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-medium, 500);
  background-color: var(--color-surface, #f9fafb);
  color: var(--color-text-secondary, #6b7280);
  border: 1px solid var(--color-border, #e5e7eb);
}

.study-card__tag--more {
  background-color: var(--path-color-light, var(--color-surface));
  color: var(--path-color-dark, var(--color-primary-700));
  border-color: var(--path-color-primary, var(--color-border));
  font-weight: var(--font-weight-semibold, 600);
}

/* ===================================
   View Mode: List
   =================================== */

.study-card--list {
  flex-direction: row;
}

.study-card--list .study-card__link {
  flex-direction: row;
  gap: var(--space-3, 1.5rem);
}

.study-card--list .study-card__header {
  flex-direction: column;
  align-items: flex-start;
}

.study-card--list .study-card__title {
  font-size: var(--font-size-lg, 1.125rem);
}

.study-card--list .study-card__intro {
  max-width: 60ch;
}

/* ===================================
   Responsive Design
   =================================== */

@media (max-width: 768px) {
  .study-card {
    border-width: 2px;
  }

  .study-card:hover {
    transform: translateY(-2px);
  }

  .study-card__link {
    padding: var(--space-2, 1rem);
  }

  .study-card__title {
    font-size: var(--font-size-lg, 1.125rem);
  }

  .study-card__status-text {
    display: none;
  }

  .study-card__status-badge {
    padding: 0.375rem;
  }

  .study-card--list {
    flex-direction: column;
  }

  .study-card--list .study-card__link {
    flex-direction: column;
  }
}

/* ===================================
   Dark Theme Support (.dark-mode = youth section toggle)
   =================================== */

[data-theme="dark"] .study-card,
.dark-mode .study-card {
  background: var(--color-surface, #1e293b);
  border-color: var(--color-border, #334155);
}

[data-theme="dark"] .study-card:hover,
.dark-mode .study-card:hover {
  background: linear-gradient(
    to bottom,
    rgba(99, 102, 241, 0.12) 0%,
    var(--color-surface, #1e293b) 100%
  );
}

[data-theme="dark"] .study-card__testament-badge,
[data-theme="dark"] .study-card__tag,
.dark-mode .study-card__testament-badge,
.dark-mode .study-card__tag {
  background-color: var(--color-surface-elevated, #334155);
  color: var(--color-text-secondary, #cbd5e1);
  border-color: var(--color-border, #475569);
}

/* ===================================
   Accessibility
   =================================== */

@media (prefers-reduced-motion: reduce) {
  .study-card {
    transition: none;
  }

  .study-card:hover {
    transform: none;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .study-card {
    border-width: 3px;
  }

  .study-card__path-badge,
  .study-card__testament-badge,
  .study-card__status-badge {
    border-width: 2px;
  }
}

/* Focus visible for keyboard navigation */
.study-card__link:focus-visible {
  outline: 3px solid var(--color-focus-ring, rgba(99, 102, 241, 0.5));
  outline-offset: 2px;
}