/**
 * AI Services Blog - Department Section Header Styles
 * Path: /ai-services/css/department-section.css
 * 
 * Description: Comprehensive styling for department group section headers
 * including containers, icons, titles, descriptions, and service counts.
 * Creates visual distinction between different department sections with
 * proper spacing and visual hierarchy.
 * 
 * Features:
 * - Department section containers with spacing and visual distinction
 * - Department header with icon, title, description, and service count
 * - Visual distinction between sections (spacing, borders, backgrounds)
 * - Proper hierarchy: title > description > count
 * - Responsive design for mobile, tablet, and desktop
 * - Bootstrap/Tailwind CSS integration
 * - Accessibility enhancements
 * 
 * Requirements: 18.1-18.5, 10.1-10.6, 1.2, 13.5-13.7
 */

/* ===================================================================
   1. DEPARTMENT SECTION CONTAINER
   =================================================================== */

.department-section {
  margin-bottom: var(--spacing-16);
  padding: 0;
  position: relative;
  
  /* Add visual distinction with subtle background on alternating sections */
  &:nth-child(odd) {
    background-color: transparent;
  }
  
  &:nth-child(even) {
    background-color: var(--color-light-gray);
    padding: var(--spacing-8);
    margin-left: calc(var(--spacing-8) * -1);
    margin-right: calc(var(--spacing-8) * -1);
    padding-left: var(--spacing-8);
    padding-right: var(--spacing-8);
  }
  
  /* Last section has less margin */
  &:last-child {
    margin-bottom: var(--spacing-12);
  }
  
  /* Before pseudo-element for visual divider line */
  &:not(:first-child)::before {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(
      to right,
      transparent,
      var(--color-border-gray),
      transparent
    );
    margin-bottom: var(--spacing-8);
  }
}

/* ===================================================================
   2. DEPARTMENT HEADER CONTAINER
   =================================================================== */

.department-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  gap: var(--spacing-4);
  align-items: start;
  margin-bottom: var(--spacing-8);
  padding-bottom: var(--spacing-6);
  border-bottom: 2px solid var(--color-primary);
  transition: all var(--transition-base);
}

.department-header:hover {
  padding-bottom: var(--spacing-8);
  border-bottom-color: var(--color-primary-dark);
}

/* ===================================================================
   3. DEPARTMENT ICON
   =================================================================== */

.department-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  min-width: 64px;
  min-height: 64px;
  background: linear-gradient(135deg, rgba(255, 31, 142, 0.1) 0%, rgba(79, 77, 175, 0.1) 100%);
  border-radius: var(--radius-lg);
  color: var(--color-primary);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  transition: all var(--transition-base);
  box-shadow: 0 4px 12px rgba(255, 31, 142, 0.1);
  grid-row: 1 / 3;
  position: relative;
  overflow: hidden;
  
  /* Icon rotation animation on hover */
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    opacity: 0;
    transition: opacity var(--transition-base);
  }
  
  /* Ensure icon is above background */
  i, svg {
    position: relative;
    z-index: 1;
    transition: all var(--transition-base);
  }
}

.department-section:hover .department-icon {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 8px 24px rgba(255, 31, 142, 0.25);
  color: var(--color-white);
  
  &::before {
    opacity: 1;
  }
  
  i, svg {
    color: var(--color-white);
  }
}

/* Icon variants based on department */
.department-icon.icon-ai-dev {
  background: linear-gradient(135deg, rgba(255, 31, 142, 0.15) 0%, rgba(255, 31, 142, 0.05) 100%);
  color: #ff1f8e;
}

.department-icon.icon-solutions {
  background: linear-gradient(135deg, rgba(0, 186, 255, 0.15) 0%, rgba(0, 186, 255, 0.05) 100%);
  color: #00baff;
}

.department-icon.icon-automation {
  background: linear-gradient(135deg, rgba(79, 77, 175, 0.15) 0%, rgba(79, 77, 175, 0.05) 100%);
  color: #4f4daf;
}

.department-icon.icon-data {
  background: linear-gradient(135deg, rgba(139, 195, 74, 0.15) 0%, rgba(139, 195, 74, 0.05) 100%);
  color: #8bc34a;
}

.department-icon.icon-marketing {
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.15) 0%, rgba(255, 152, 0, 0.05) 100%);
  color: #ff9800;
}

/* ===================================================================
   4. DEPARTMENT INFO CONTAINER
   =================================================================== */

.department-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  grid-column: 2;
  grid-row: 1 / 3;
  justify-self: start;
}

/* ===================================================================
   5. DEPARTMENT TITLE (H2)
   =================================================================== */

.department-title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-secondary);
  color: var(--text-primary);
  line-height: var(--line-height-tight);
  margin: 0;
  padding: 0;
  letter-spacing: -0.5px;
  transition: color var(--transition-base);
  
  /* Title color change on section hover */
  .department-section:hover & {
    color: var(--color-primary);
  }
}

/* ===================================================================
   6. DEPARTMENT DESCRIPTION
   =================================================================== */

.department-description {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0;
  padding: 0;
  max-width: 600px;
  transition: color var(--transition-base);
  
  /* Description can span 1-2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  
  /* Color change on hover */
  .department-section:hover & {
    color: var(--text-primary);
  }
}

/* ===================================================================
   7. SERVICE COUNT BADGE
   =================================================================== */

.service-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-full);
  white-space: nowrap;
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  transition: all var(--transition-base);
  box-shadow: 0 4px 12px rgba(255, 31, 142, 0.2);
  
  /* Icon or number styling */
  i {
    font-size: var(--font-size-base);
  }
  
  span {
    font-family: var(--font-monospace);
    letter-spacing: 0.5px;
  }
}

.service-count:hover,
.department-section:hover .service-count {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 20px rgba(255, 31, 142, 0.3);
}

/* ===================================================================
   8. DEPARTMENT SERVICES GRID CONTAINER
   =================================================================== */

.department-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-6);
  animation: fadeIn var(--transition-base);
  
  /* Will be populated with service cards by JavaScript */
}

/* ===================================================================
   9. VISUAL DISTINCTION BETWEEN SECTIONS
   =================================================================== */

/* Add subtle animation on section visibility */
.department-section.visible {
  opacity: 1;
  animation: slideInUp var(--transition-base);
}

.department-section.hidden {
  display: none;
}

/* Alternating visual styles for sections */
.department-section:nth-child(1) .department-icon {
  background: linear-gradient(135deg, rgba(255, 31, 142, 0.15) 0%, rgba(255, 92, 246, 0.05) 100%);
}

.department-section:nth-child(2) .department-icon {
  background: linear-gradient(135deg, rgba(0, 186, 255, 0.15) 0%, rgba(149, 229, 255, 0.05) 100%);
  border: 1px solid rgba(0, 186, 255, 0.2);
}

.department-section:nth-child(3) .department-icon {
  background: linear-gradient(135deg, rgba(79, 77, 175, 0.15) 0%, rgba(122, 255, 219, 0.05) 100%);
}

.department-section:nth-child(4) .department-icon {
  background: linear-gradient(135deg, rgba(139, 195, 74, 0.15) 0%, rgba(192, 255, 143, 0.05) 100%);
}

.department-section:nth-child(5) .department-icon {
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.15) 0%, rgba(255, 204, 128, 0.05) 100%);
}

.department-section:nth-child(6) .department-icon {
  background: linear-gradient(135deg, rgba(244, 67, 54, 0.15) 0%, rgba(239, 154, 154, 0.05) 100%);
}

.department-section:nth-child(7) .department-icon {
  background: linear-gradient(135deg, rgba(156, 39, 176, 0.15) 0%, rgba(206, 166, 253, 0.05) 100%);
}

.department-section:nth-child(8) .department-icon {
  background: linear-gradient(135deg, rgba(63, 81, 181, 0.15) 0%, rgba(197, 202, 233, 0.05) 100%);
}

/* ===================================================================
   10. ALIGNMENT & HIERARCHY
   =================================================================== */

/* Ensure proper visual hierarchy */
.department-header {
  /* Title is largest */
  .department-title {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--spacing-1);
  }
  
  /* Description is medium */
  .department-description {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
  }
  
  /* Count is smallest but prominent */
  .service-count {
    font-size: var(--font-size-sm);
  }
}

/* Ensure grid alignment is consistent */
.department-section {
  .department-info {
    align-items: flex-start;
    justify-items: start;
  }
}

/* ===================================================================
   11. SPACING UTILITIES FOR SECTIONS
   =================================================================== */

/* Section spacing classes */
.department-section.spacing-tight {
  margin-bottom: var(--spacing-8);
}

.department-section.spacing-normal {
  margin-bottom: var(--spacing-16);
}

.department-section.spacing-loose {
  margin-bottom: var(--spacing-20);
}

/* ===================================================================
   12. RESPONSIVE DESIGN - MOBILE (< 768px)
   =================================================================== */

@media (max-width: 767.98px) {
  .department-section {
    margin-bottom: var(--spacing-12);
    
    &:nth-child(even) {
      background-color: transparent;
      padding: 0;
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
    }
  }
  
  .department-header {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto auto;
    gap: var(--spacing-3);
    align-items: flex-start;
    margin-bottom: var(--spacing-6);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--color-border-gray);
  }
  
  .department-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    font-size: var(--font-size-2xl);
    grid-row: 1 / 3;
    grid-column: 1;
  }
  
  .department-info {
    grid-column: 2;
    grid-row: 1 / 3;
    gap: var(--spacing-1);
  }
  
  .department-title {
    font-size: var(--font-size-2xl);
    margin: 0;
  }
  
  .department-description {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    -webkit-line-clamp: 2;
  }
  
  .service-count {
    grid-column: 1 / 3;
    grid-row: 3;
    justify-self: stretch;
    padding: var(--spacing-2) var(--spacing-3);
    font-size: 11px;
  }
  
  .department-services-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--spacing-3);
  }
  
  .department-header:hover {
    padding-bottom: var(--spacing-4);
  }
}

/* ===================================================================
   13. RESPONSIVE DESIGN - TABLET (768px - 1024px)
   =================================================================== */

@media (min-width: 768px) and (max-width: 1023.98px) {
  .department-section {
    margin-bottom: var(--spacing-14);
    
    &:nth-child(even) {
      background-color: var(--color-light-gray);
      padding: var(--spacing-6);
      margin-left: calc(var(--spacing-6) * -1);
      margin-right: calc(var(--spacing-6) * -1);
      padding-left: var(--spacing-6);
      padding-right: var(--spacing-6);
    }
  }
  
  .department-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-6);
    padding-bottom: var(--spacing-4);
  }
  
  .department-icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    font-size: var(--font-size-3xl);
    grid-row: 1 / 3;
    grid-column: 1;
  }
  
  .department-title {
    font-size: var(--font-size-3xl);
  }
  
  .department-description {
    font-size: var(--font-size-sm);
    -webkit-line-clamp: 1;
  }
  
  .service-count {
    grid-column: 3;
    grid-row: 1;
    font-size: var(--font-size-xs);
    padding: var(--spacing-2) var(--spacing-3);
  }
  
  .department-services-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-5);
  }
}

/* ===================================================================
   14. RESPONSIVE DESIGN - DESKTOP (>= 1024px)
   =================================================================== */

@media (min-width: 1024px) {
  .department-section {
    margin-bottom: var(--spacing-16);
    
    &:nth-child(even) {
      background-color: var(--color-light-gray);
      padding: var(--spacing-8);
      margin-left: calc(var(--spacing-8) * -1);
      margin-right: calc(var(--spacing-8) * -1);
      padding-left: var(--spacing-8);
      padding-right: var(--spacing-8);
    }
  }
  
  .department-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-8);
    padding-bottom: var(--spacing-6);
  }
  
  .department-icon {
    width: 64px;
    height: 64px;
    font-size: var(--font-size-4xl);
    grid-row: 1 / 3;
  }
  
  .department-title {
    font-size: var(--font-size-4xl);
  }
  
  .department-description {
    font-size: var(--font-size-base);
    -webkit-line-clamp: 2;
  }
  
  .service-count {
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-sm);
  }
  
  .department-services-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-6);
  }
}

/* ===================================================================
   15. ACCESSIBILITY - FOCUS & KEYBOARD NAVIGATION
   =================================================================== */

.department-header:focus-within {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}

.department-icon:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.service-count:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

/* Screen reader text */
.department-section .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ===================================================================
   16. ACCESSIBILITY - HIGH CONTRAST MODE
   =================================================================== */

@media (prefers-contrast: more) {
  .department-header {
    border-bottom-width: 3px;
    border-bottom-color: var(--text-primary);
  }
  
  .department-icon {
    border: 2px solid var(--text-primary);
  }
  
  .service-count {
    border: 2px solid var(--text-primary);
  }
  
  .department-title {
    font-weight: var(--font-weight-extrabold);
    letter-spacing: 0;
  }
}

/* ===================================================================
   17. ACCESSIBILITY - REDUCED MOTION
   =================================================================== */

@media (prefers-reduced-motion: reduce) {
  .department-icon,
  .department-title,
  .department-description,
  .service-count,
  .department-section,
  .department-services-grid {
    transition: none;
    animation: none;
  }
  
  .department-section:hover .department-icon {
    transform: none;
  }
  
  .department-section:hover .service-count {
    transform: none;
  }
}

/* ===================================================================
   18. LOADING & EMPTY STATES
   =================================================================== */

/* Loading state for section */
.department-section.loading .department-services-grid {
  opacity: 0.6;
  pointer-events: none;
}

/* Empty section (no services in department) */
.department-section.empty .department-services-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--text-light);
}

.department-section.empty .department-services-grid::after {
  content: 'No services in this department';
  font-size: var(--font-size-lg);
  text-align: center;
}

/* ===================================================================
   19. PRINT STYLES
   =================================================================== */

@media print {
  .department-section {
    page-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: 2rem;
  }
  
  .department-header {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  
  .service-count {
    display: none;
  }
  
  .department-services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

/* ===================================================================
   20. DARK MODE SUPPORT (Optional/Future)
   =================================================================== */

@media (prefers-color-scheme: dark) {
  .department-section {
    &:nth-child(even) {
      background-color: rgba(255, 31, 142, 0.05);
    }
  }
  
  .department-icon {
    background: linear-gradient(135deg, rgba(255, 31, 142, 0.15) 0%, rgba(255, 31, 142, 0.08) 100%);
    color: #ff92f6;
    box-shadow: 0 4px 12px rgba(255, 31, 142, 0.15);
  }
  
  .department-section:hover .department-icon {
    box-shadow: 0 8px 24px rgba(255, 31, 142, 0.2);
  }
  
  .department-title {
    color: #f5f5f5;
  }
  
  .department-section:hover .department-title {
    color: #ff92f6;
  }
  
  .department-description {
    color: #b0b0c0;
  }
  
  .department-section:hover .department-description {
    color: #d0d0e0;
  }
  
  .department-header {
    border-bottom-color: #3e3e52;
  }
}

</content>