/* =============================================================================
   LESSON HERO CARD - Dashboard Next Lesson Widget
   Source: Figma AMFM Portal design
   Shortcode: [lesson_hero_card course_id="2626"]
   Date: 2026-01-20
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Card Container
   ----------------------------------------------------------------------------- */
.lesson-hero-card {
  position: relative;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 
    0px 12px 16px -4px rgba(10, 13, 18, 0.08),
    0px 4px 6px -2px rgba(10, 13, 18, 0.03),
    0px 2px 2px -1px rgba(10, 13, 18, 0.04);
}

.lesson-hero-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* -----------------------------------------------------------------------------
   Background Image with Overlay
   ----------------------------------------------------------------------------- */
.lesson-hero-image {
  position: relative;
  width: 100%;
  min-height: 320px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Dark gradient overlay for text legibility */
.lesson-hero-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.1) 40%,
    rgba(0, 0, 0, 0.7) 100%
  );
  pointer-events: none;
}

/* -----------------------------------------------------------------------------
   Duration Badge (Above title, not at top of card)
   ----------------------------------------------------------------------------- */
.lesson-duration-badge {
  display: inline-block;
  padding: 4px 12px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 999px; /* Fully rounded pill */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  color: #FFFFFF;
  margin-bottom: 12px;
}

/* -----------------------------------------------------------------------------
   Content Area (Bottom-aligned)
   ----------------------------------------------------------------------------- */
.lesson-hero-content {
  position: relative;
  z-index: 1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* Lesson title (includes "Next:" inline) */
.lesson-hero-title {
  margin: 0;
  font-family: 'Financier Display', Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 34px;
  letter-spacing: -0.5px;
  color: #FFFFFF;
}

/* Description text */
.lesson-hero-description {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.85);
  max-width: 400px;
}

/* -----------------------------------------------------------------------------
   CTA Button
   ----------------------------------------------------------------------------- */
.lesson-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 18px;
  background: #C07858; /* Brand color */
  border-radius: 8px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #FFFFFF;
  transition: background-color 0.2s ease, transform 0.2s ease;
  width: fit-content;
}

.lesson-hero-cta:hover {
  background: #A8624A;
}

/* Play icon (CSS triangle) */
.lesson-hero-cta .play-icon {
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #FFFFFF;
}

/* -----------------------------------------------------------------------------
   Hover State
   ----------------------------------------------------------------------------- */
.lesson-hero-link:hover .lesson-hero-image::before {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.05) 0%,
    rgba(0, 0, 0, 0.15) 40%,
    rgba(0, 0, 0, 0.75) 100%
  );
}

.lesson-hero-link:hover .lesson-hero-cta {
  background: #A8624A;
  transform: translateY(-1px);
}

/* -----------------------------------------------------------------------------
   Complete State (All lessons done)
   ----------------------------------------------------------------------------- */
.lesson-hero-card.lesson-hero-complete .lesson-hero-cta {
  background: #067647; /* Green for "continue" state */
}

.lesson-hero-card.lesson-hero-complete .lesson-hero-link:hover .lesson-hero-cta {
  background: #05603A;
}

/* -----------------------------------------------------------------------------
   Responsive Adjustments
   ----------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .lesson-hero-image {
    min-height: 280px;
  }
  
  .lesson-hero-title {
    font-size: 24px;
    line-height: 30px;
  }
  
  .lesson-hero-description {
    font-size: 13px;
    line-height: 18px;
  }
  
  .lesson-hero-content {
    padding: 20px;
  }
}

@media screen and (max-width: 480px) {
  .lesson-hero-image {
    min-height: 240px;
  }
  
  .lesson-hero-title {
    font-size: 20px;
    line-height: 26px;
  }
  
  .lesson-hero-content {
    padding: 16px;
    gap: 6px;
  }
  
  .lesson-duration-badge {
    top: 12px;
    left: 12px;
    font-size: 11px;
    padding: 3px 8px;
  }
  
  .lesson-hero-cta {
    padding: 8px 14px;
    font-size: 13px;
  }
}

/* =============================================================================
   END: Lesson Hero Card
   ============================================================================= */


/* =============================================================================
   DASHBOARD TRAINING CARD - Unified Hero + Checklist Component
   Source: Figma AMFM Portal design (node 75:2366)
   Shortcode: [dashboard_training_card course_id="2626" lessons_per_page="4"]
   Date: 2026-01-21
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Design Tokens
   ----------------------------------------------------------------------------- */
.dashboard-training-card {
  /* Colors */
  --dtc-bg-primary: #ffffff;
  --dtc-bg-hero-overlay: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.75) 100%);
  --dtc-border-secondary: #e9eaeb;
  --dtc-border-card: rgba(0, 0, 0, 0.08);
  
  /* Text */
  --dtc-text-primary: #181d27;
  --dtc-text-secondary: #414651;
  --dtc-text-tertiary: #535862;
  --dtc-text-disabled: #a4a7ae;
  --dtc-text-white: #ffffff;
  
  /* Brand */
  --dtc-brand-solid: #aa6140;
  --dtc-brand-hover: #8f5236;
  
  /* Success (Complete badge) */
  --dtc-success-50: #ecfdf3;
  --dtc-success-200: #abefc6;
  --dtc-success-700: #067647;
  
  /* Neutral (Watch badge) */
  --dtc-neutral-border: #d5d7da;
  --dtc-neutral-icon: #717680;
  
  /* Spacing */
  --dtc-spacing-xxs: 2px;
  --dtc-spacing-xs: 4px;
  --dtc-spacing-sm: 6px;
  --dtc-spacing-md: 8px;
  --dtc-spacing-lg: 12px;
  --dtc-spacing-xl: 16px;
  --dtc-spacing-2xl: 20px;
  --dtc-spacing-3xl: 24px;
  --dtc-spacing-4xl: 32px;
  
  /* Radius */
  --dtc-radius-sm: 6px;
  --dtc-radius-md: 8px;
  --dtc-radius-2xl: 16px;
  
  /* Typography */
  --dtc-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --dtc-font-display: 'Financier Display', Georgia, serif;
}

/* -----------------------------------------------------------------------------
   Card Container - CSS Grid Layout
   ----------------------------------------------------------------------------- */
.dashboard-training-card {
  display: grid;
  /* Hero gets minimum 400px, checklist is fixed at 340px max */
  grid-template-columns: minmax(400px, 1fr) minmax(280px, 340px);
  background: var(--dtc-bg-primary);
  border-radius: var(--dtc-radius-2xl);
  overflow: hidden;
  padding: var(--dtc-spacing-md);
  box-shadow: 
    0px 12px 16px -4px rgba(10, 13, 18, 0.08),
    0px 4px 6px -2px rgba(10, 13, 18, 0.03),
    0px 2px 2px -1px rgba(10, 13, 18, 0.04);
}

/* -----------------------------------------------------------------------------
   Hero Section (Left Panel)
   ----------------------------------------------------------------------------- */
.dtc-hero {
  display: flex;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  /* Side-by-side: rounded on left, flat on right to join with checklist */
  border-radius: var(--dtc-radius-md) 0 0 var(--dtc-radius-md);
  /* Inset box-shadow on all sides except right where it joins checklist */
  box-shadow: 
    inset 1px 0 0 0 var(--dtc-border-card),  /* left */
    inset 0 1px 0 0 var(--dtc-border-card),  /* top */
    inset 0 -1px 0 0 var(--dtc-border-card); /* bottom */
}

.dtc-hero-bg {
  display: flex;
  align-items: flex-end;
  width: 100%;
  min-height: 360px;
  padding: var(--dtc-spacing-4xl);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

/* Dark gradient overlay */
.dtc-hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--dtc-bg-hero-overlay);
  pointer-events: none;
}

.dtc-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--dtc-spacing-xl);
  max-width: 520px;
}

/* Duration badge */
.dtc-duration-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--dtc-spacing-xxs) var(--dtc-spacing-md);
  border: 1px solid rgba(213, 215, 218, 0.8);
  border-radius: 9999px;
  font-family: var(--dtc-font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  color: var(--dtc-text-white);
  background: transparent;
}

/* Hero title */
.dtc-hero-title {
  margin: 0;
  font-family: var(--dtc-font-display);
  font-size: 48px;
  font-weight: 300;
  line-height: 56px;
  letter-spacing: -0.96px;
  color: var(--dtc-text-white);
}

/* Hero description */
.dtc-hero-description {
  margin: 0;
  font-family: var(--dtc-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--dtc-text-white);
}

/* CTA button */
.dtc-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--dtc-spacing-xs);
  padding: 10px 14px;
  background: var(--dtc-brand-solid);
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--dtc-radius-md);
  font-family: var(--dtc-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--dtc-text-white);
  box-shadow: 
    0px 1px 2px 0px rgba(10, 13, 18, 0.05),
    inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18),
    inset 0px -2px 0px 0px rgba(10, 13, 18, 0.05);
  transition: background-color 0.2s ease;
}

.dtc-hero:hover .dtc-hero-cta {
  background: var(--dtc-brand-hover);
}

.dtc-play-icon {
  width: 20px;
  height: 20px;
  color: rgba(216, 159, 136, 1);
}

/* -----------------------------------------------------------------------------
   Checklist Section (Right Panel)
   ----------------------------------------------------------------------------- */
.dtc-checklist {
  display: flex;
  flex-direction: column;
  padding: var(--dtc-spacing-4xl) var(--dtc-spacing-4xl) 0;
  background: var(--dtc-bg-primary);
  /* Side-by-side: flat on left to join with hero, rounded on right */
  border-radius: 0 var(--dtc-radius-md) var(--dtc-radius-md) 0;
  /* Inset box-shadow on all sides except left where it joins hero */
  box-shadow: 
    inset -1px 0 0 0 #efebe3, /* right */
    inset 0 1px 0 0 #efebe3,  /* top */
    inset 0 -1px 0 0 #efebe3; /* bottom */
}

.dtc-checklist-header {
  margin-bottom: var(--dtc-spacing-md);
}

.dtc-checklist-title {
  margin: 0;
  font-family: var(--dtc-font-display);
  font-size: 36px;
  font-weight: 300;
  line-height: 44px;
  letter-spacing: -0.72px;
  color: #1d1c1a;
}

/* Lesson list */
.dtc-lesson-list {
  flex: 1;
  /* Fixed height prevents layout jump between pages with different content heights */
  min-height: 288px; /* ~4 rows at 72px each (64px + some wrap buffer) */
}

.dtc-lesson-row {
  display: flex;
  align-items: flex-start; /* Top-align for multi-line titles */
  justify-content: space-between;
  gap: var(--dtc-spacing-lg);
  min-height: 64px; /* Allow growth for wrapped titles */
  padding: var(--dtc-spacing-xl) 0;
  border-bottom: 1px solid var(--dtc-border-secondary);
}

/* Ensure page 1 is always visible by default */
.dtc-lesson-row[data-page="1"] {
  display: flex !important;
}

/* Hide other pages */
.dtc-lesson-row:not([data-page="1"]) {
  display: none;
}

/* JS-controlled visibility (overrides above when pagination is active) */
.dtc-lesson-row.dtc-lesson-visible {
  display: flex !important;
}

.dtc-lesson-row.dtc-lesson-hidden {
  display: none !important;
}

.dtc-lesson-row.dtc-lesson-last-visible {
  border-bottom: none;
}

.dtc-lesson-info {
  display: flex;
  align-items: flex-start; /* Top-align for multi-line titles */
  gap: var(--dtc-spacing-xs);
  flex: 1;
  min-width: 0; /* Allow flex item to shrink below content size */
  text-decoration: none;
  color: inherit;
}

.dtc-lesson-info:hover .dtc-lesson-title {
  color: var(--dtc-brand-solid);
}

.dtc-lesson-number {
  font-family: var(--dtc-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--dtc-text-primary);
  flex-shrink: 0;
}

.dtc-lesson-title {
  font-family: var(--dtc-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--dtc-text-primary);
  transition: color 0.15s ease;
  /* Allow wrapping for long titles */
}

/* -----------------------------------------------------------------------------
   Completion Badges
   ----------------------------------------------------------------------------- */
.dtc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--dtc-spacing-xs);
  padding: var(--dtc-spacing-xxs) var(--dtc-spacing-md) var(--dtc-spacing-xxs) var(--dtc-spacing-sm);
  border-radius: var(--dtc-radius-sm);
  font-family: var(--dtc-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  flex-shrink: 0;
  margin-top: 0; /* Aligns with first line of title text */
}

/* Complete badge (green) */
.dtc-badge-complete {
  background: var(--dtc-success-50);
  border: 1px solid var(--dtc-success-200);
  color: var(--dtc-success-700);
}

.dtc-badge-complete svg {
  color: var(--dtc-success-700);
}

/* Watch badge (gray/neutral) */
.dtc-badge-watch {
  background: var(--dtc-bg-primary);
  border: 1px solid var(--dtc-neutral-border);
  color: var(--dtc-text-secondary);
  box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.dtc-badge-watch svg {
  color: var(--dtc-neutral-icon);
}

.dtc-badge-watch:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

/* -----------------------------------------------------------------------------
   Pagination
   ----------------------------------------------------------------------------- */
.dtc-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dtc-spacing-lg);
  padding: var(--dtc-spacing-lg) 0 var(--dtc-spacing-xl);
  border-top: 1px solid var(--dtc-border-secondary);
  margin-top: auto;
}

.dtc-page-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--dtc-spacing-xs);
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--dtc-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--dtc-text-tertiary);
  cursor: pointer;
  transition: color 0.15s ease;
}

.dtc-page-btn:hover:not(:disabled),
.dtc-page-btn:focus:not(:disabled) {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--dtc-brand-solid); /* Brown highlight on hover */
  box-shadow: none !important;
}

.dtc-page-btn:disabled {
  color: var(--dtc-text-disabled) !important;
  cursor: not-allowed;
  background: transparent !important;
}

.dtc-page-btn:disabled:hover {
  color: var(--dtc-text-disabled) !important;
  background: transparent !important;
}

.dtc-page-btn svg {
  width: 20px;
  height: 20px;
}

.dtc-page-indicator {
  font-family: var(--dtc-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--dtc-text-secondary);
}

/* -----------------------------------------------------------------------------
   Responsive: Stacked layout (<1024px) - Cards stack vertically
   Sidebar is present, so content area is constrained - stack earlier
   ----------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
  .dashboard-training-card {
    grid-template-columns: 1fr;
    gap: 0; /* No gap - panels join seamlessly */
  }
  
  /* Stacked: hero has rounded top, flat bottom to join with checklist */
  .dtc-hero {
    border-radius: var(--dtc-radius-md) var(--dtc-radius-md) 0 0;
    /* Inset shadow on all sides except bottom where it joins checklist */
    box-shadow: 
      inset 1px 0 0 0 var(--dtc-border-card),  /* left */
      inset -1px 0 0 0 var(--dtc-border-card), /* right */
      inset 0 1px 0 0 var(--dtc-border-card);  /* top */
  }
  
  /* Stacked: checklist has flat top to join with hero, rounded bottom */
  .dtc-checklist {
    border-radius: 0 0 var(--dtc-radius-md) var(--dtc-radius-md);
    /* Inset shadow on all sides except top where it joins hero */
    box-shadow: 
      inset 1px 0 0 0 #efebe3,  /* left */
      inset -1px 0 0 0 #efebe3, /* right */
      inset 0 -1px 0 0 #efebe3; /* bottom */
    padding: var(--dtc-spacing-3xl) var(--dtc-spacing-3xl) 0;
  }
  
  .dtc-hero-bg {
    min-height: 300px;
    padding: var(--dtc-spacing-3xl);
  }
  
  .dtc-hero-title {
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -0.72px;
  }
  
  .dtc-hero-description {
    font-size: 15px;
    line-height: 22px;
  }
  
  .dtc-hero-content {
    gap: var(--dtc-spacing-lg);
    max-width: 100%;
  }
  
  .dtc-checklist-title {
    font-size: 28px;
    line-height: 36px;
  }
  
  /* When stacked, list can size naturally */
  .dtc-lesson-list {
    min-height: auto;
  }
}

/* -----------------------------------------------------------------------------
   Responsive: Mobile (<600px) - Compact styling
   ----------------------------------------------------------------------------- */
@media screen and (max-width: 600px) {
  .dtc-hero-bg {
    min-height: 260px;
    padding: var(--dtc-spacing-2xl);
  }
  
  .dtc-hero-title {
    font-size: 28px;
    line-height: 34px;
    letter-spacing: -0.5px;
  }
  
  .dtc-hero-description {
    font-size: 14px;
    line-height: 20px;
  }
  
  .dtc-checklist {
    padding: var(--dtc-spacing-2xl) var(--dtc-spacing-2xl) 0;
  }
  
  .dtc-checklist-title {
    font-size: 24px;
    line-height: 32px;
  }
}

/* -----------------------------------------------------------------------------
   Responsive: Small Mobile (<480px)
   ----------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {
  .dashboard-training-card {
    padding: var(--dtc-spacing-sm);
  }
  
  .dtc-hero-bg {
    min-height: 240px;
    padding: var(--dtc-spacing-xl);
  }
  
  .dtc-hero-title {
    font-size: 24px;
    line-height: 30px;
  }
  
  .dtc-duration-badge {
    font-size: 11px;
    padding: var(--dtc-spacing-xxs) var(--dtc-spacing-sm);
  }
  
  .dtc-hero-cta {
    padding: 8px 12px;
    font-size: 13px;
  }
  
  .dtc-checklist {
    padding: var(--dtc-spacing-xl) var(--dtc-spacing-xl) 0;
  }
  
  .dtc-checklist-title {
    font-size: 20px;
    line-height: 28px;
  }
  
  .dtc-lesson-row {
    flex-wrap: wrap;
    gap: var(--dtc-spacing-md);
  }
  
  .dtc-lesson-info {
    width: 100%;
  }
  
  .dtc-badge {
    font-size: 12px;
  }
  
  .dtc-pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--dtc-spacing-md);
  }
  
  .dtc-page-btn {
    font-size: 13px;
  }
}

/* =============================================================================
   END: Dashboard Training Card
   ============================================================================= */