/* Content Type Tags - Lab vs Lecture Separation */

.content-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  margin: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Lecture Tags - Theory/Concepts */
.content-tag.lecture {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: 1px solid #667eea;
}

.content-tag.lecture::before {
  content: "📚";
  margin-right: 0.25rem;
}

/* Lab Tags - Practical/Hands-on */
.content-tag.lab {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
  border: 1px solid #f093fb;
}

.content-tag.lab::before {
  content: "💻";
  margin-right: 0.25rem;
}

/* Mixed Tags - Theory + Practice */
.content-tag.mixed {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  border: 1px solid #4facfe;
}

.content-tag.mixed::before {
  content: "🔄";
  margin-right: 0.25rem;
}

/* Quick Reference Tags */
.content-tag.reference {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  color: #1a1a1a;
  border: 1px solid #43e97b;
}

.content-tag.reference::before {
  content: "⚡";
  margin-right: 0.25rem;
}

/* Content Section Dividers */
.content-section {
  margin: 2rem 0;
  padding: 1.5rem;
  border-radius: 0.75rem;
  border-left: 4px solid;
}

.content-section.lecture-section {
  background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
  border-left-color: #667eea;
}

.content-section.lab-section {
  background: linear-gradient(135deg, #f093fb15 0%, #f5576c15 100%);
  border-left-color: #f093fb;
}

.content-section.mixed-section {
  background: linear-gradient(135deg, #4facfe15 0%, #00f2fe15 100%);
  border-left-color: #4facfe;
}

/* Section Headers */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

.section-title {
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--md-default-fg-color);
}

.section-title .tag {
  margin-left: 0.5rem;
}

/* Workflow Navigation */
.workflow-nav {
  display: flex;
  gap: 1rem;
  margin: 1.5rem 0;
  padding: 1rem;
  background: var(--md-default-bg-color--light);
  border-radius: 0.5rem;
  border: 1px solid var(--md-default-fg-color--lightest);
}

.workflow-nav-item {
  flex: 1;
  text-align: center;
  padding: 0.75rem;
  border-radius: 0.375rem;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
}

.workflow-nav-item.lecture-link {
  background: linear-gradient(135deg, #667eea20 0%, #764ba220 100%);
  color: #667eea;
}

.workflow-nav-item.lab-link {
  background: linear-gradient(135deg, #f093fb20 0%, #f5576c20 100%);
  color: #f5576c;
}

.workflow-nav-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Mobile Responsive */
@media screen and (max-width: 768px) {
  .content-tag {
    font-size: 0.7rem;
    padding: 0.2rem 0.6rem;
  }
  
  .workflow-nav {
    flex-direction: column;
  }
  
  .content-section {
    margin: 1rem 0;
    padding: 1rem;
  }
}