/* Tabs Component - Scroll-Driven Variant */
/* Табы с переключением при прокрутке */

/* ============================================
   SCROLL-DRIVEN TABS - REFACTORED VERSION
   ============================================
   
   Интерактивные табы, которые переключаются при прокрутке страницы.
   
   Когда использовать:
   - Презентация процессов и этапов
   - Showcase функций продукта
   - Интерактивные истории
   - Пошаговые руководства
   
   Особенности:
   - Работает в любом месте страницы (портативный)
   - Настраивается через data-атрибуты
   - Поддержка множественных экземпляров
   - Автоматическая адаптация под количество табов (2-10+)
   
   Конфигурация через data-атрибуты:
   - data-section-height: высота секции (например, "500vh")
   - data-sticky-offset: отступ сверху для sticky (например, "80")
   - data-sidebar-width: ширина сайдбара с табами (например, "220px")
   - data-transition-speed: скорость переходов (например, "0.6s")
   - data-auto-height: автоматический расчет высоты (true/false)
   ============================================ */

/* ============================================
   Wrapper Section
   ============================================ */

.tabs-scroll-section {
  position: relative;
  /* Высота устанавливается через inline style из data-section-height */
  /* Пример: style="min-height: 500vh;" */
}

/* ============================================
   Scroll-Driven Container
   ============================================ */

.tabs--scroll-driven {
  position: sticky;
  /* top устанавливается через inline style из data-sticky-offset */
  /* Пример: style="top: 80px;" */
  /* По умолчанию: top: 0; */
  left: 0;
  right: 0;
  height: 100vh;
  display: grid;
  /* grid-template-columns устанавливается через inline style из data-sidebar-width */
  /* Пример: style="grid-template-columns: 220px 1fr;" */
  /* По умолчанию: grid-template-columns: 220px 1fr; */
  gap: var(--spacing-2xl);
  max-width: var(--content-full);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
  overflow: hidden;
}

/* ============================================
   Tab List (Sidebar)
   ============================================ */

.tabs--scroll-driven .tabs__list {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 10;
  /* width устанавливается через inline style из data-sidebar-width */
  /* Пример: style="width: 220px;" */
  padding-right: var(--spacing-md, 1rem);
  transition: opacity 0.3s ease;
  flex-direction: column;
  border-bottom: none;
  border-right: 2px solid var(--color-border, #e2e8f0);
  margin-bottom: 0;
  display: flex;
  gap: 0.5rem;
}

.tabs--scroll-driven .tabs__tab {
  text-align: left;
  padding: var(--spacing-md, 1rem);
  white-space: normal;
  background: var(--color-bg-secondary, #f8fafc);
  border: 2px solid transparent;
  border-radius: var(--radius-lg, 0.5rem);
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: var(--font-size-base, 1rem);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text, #1e293b);
  position: relative;
}

.tabs--scroll-driven .tabs__tab:hover {
  background: var(--color-bg-tertiary, #f1f5f9);
  border-color: var(--color-primary, #2563eb);
}

.tabs--scroll-driven .tabs__tab[aria-selected="true"] {
  background: var(--color-primary, #2563eb);
  color: white;
  border-color: var(--color-primary, #2563eb);
}

.tabs--scroll-driven .tabs__tab[aria-selected="true"]::after {
  bottom: 0;
  left: auto;
  right: -2px;
  top: 0;
  width: 2px;
  height: 100%;
}

/* ============================================
   Content Area (Panels)
   ============================================ */

.tabs--scroll-driven .tabs__content {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  grid-column: 2;
}

.tabs--scroll-driven .tabs__panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: baseline;
  justify-content: center;
  padding: var(--spacing-2xl);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* transition-duration устанавливается через inline style из data-transition-speed */
  /* Пример: style="transition-duration: 0.6s;" */
  transition-property: opacity, transform, visibility;
  transition-timing-function: ease;
  transition-delay: 0s, 0s, 0.6s;
  transform: translateY(30px);
  will-change: opacity, transform;
  contain: layout style paint;
}

/* Ограничение ширины контента в панелях для больших экранов */
.tabs--scroll-driven .tabs__panel > * {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

.tabs--scroll-driven .tabs__panel--active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  z-index: 1;
  transition-delay: 0s, 0s, 0s;
}

.tabs--scroll-driven .tabs__panel--prev {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-30px);
  transition-delay: 0s, 0s, 0.6s;
}

/* ============================================
   Progress Indicator
   ============================================ */

.tabs__progress {
  position: absolute;
  left: -2px;
  top: 0;
  width: 3px;
  height: 0;
  background: var(--color-primary);
  border-radius: 2px;
  transition: height 0.3s ease, top 0.3s ease;
  will-change: height, top;
  contain: layout style paint;
}

/* ============================================
   Responsive Design - Mobile
   ============================================ */

@media (max-width: 1023px) {
  /* Remove scroll-driven behavior on mobile */
  .tabs-scroll-section {
    min-height: auto !important;
  }
  
  .tabs-scroll-section .tabs--scroll-driven {
    position: static;
    height: auto;
    display: block;
    padding: var(--spacing-lg) var(--spacing-md);
  }
  
  /* Show all panels vertically */
  .tabs-scroll-section .tabs__content {
    position: static;
    width: 100%;
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
  }
  
  .tabs-scroll-section .tabs__panel {
    position: static;
    width: 100%;
    height: auto;
    display: block;
    padding: var(--spacing-lg, 1.5rem);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: none;
    background: var(--color-bg, white);
    border-radius: var(--radius-lg, 0.5rem);
    box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
  }
  
  .tabs-scroll-section .tabs__panel--active {
    border-left: 4px solid var(--color-primary);
  }
  
  /* Fixed tabs navigation at bottom */
  .tabs-scroll-section .tabs__list {
    position: fixed;
    top: auto;
    bottom: var(--spacing-lg, 1.5rem);
    left: 50%;
    transform: translateX(-50%);
    width: auto !important;
    max-width: 90vw;
    flex-direction: row;
    border-right: none;
    border-bottom: 2px solid var(--color-border, #e2e8f0);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    padding: var(--spacing-xs, 0.5rem) var(--spacing-sm, 0.75rem);
    border-radius: 2rem;
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    gap: var(--spacing-xs, 0.5rem);
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 100;
    scroll-behavior: smooth;
    /* Hide scrollbar but keep functionality */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
  }
  
  .tabs-scroll-section .tabs__list::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }
  
  /* Show tabs when section is in viewport */
  .tabs-scroll-section.in-viewport .tabs__list {
    opacity: 1;
    pointer-events: auto;
  }
  
  [data-theme="dark"] .tabs-scroll-section .tabs__list {
    background: rgba(30, 41, 59, 0.95);
  }
  
  .tabs-scroll-section .tabs__tab {
    white-space: nowrap;
    font-size: var(--font-size-sm, 0.875rem);
    padding: var(--spacing-sm, 0.75rem) var(--spacing-md, 1rem);
    flex-shrink: 0;
    text-align: center;
  }
  
  .tabs-scroll-section .tabs__tab[aria-selected="true"]::after {
    bottom: -2px;
    left: 0;
    right: 0;
    top: auto;
    width: 100%;
    height: 2px;
  }
}

/* ============================================
   Tablet Adjustments
   ============================================ */

@media (min-width: 768px) and (max-width: 1023px) {
  .tabs-scroll-section .tabs--scroll-driven {
    padding: 0 var(--spacing-lg);
  }
  
  .tabs-scroll-section .tabs__list {
    bottom: var(--spacing-xl);
  }
}

/* ============================================
   Support for Large Number of Tabs
   ============================================ */

/* 10+ tabs: smaller font and scrollable list */
.tabs-scroll-section[data-tab-count="10"] .tabs__tab,
.tabs-scroll-section[data-tab-count="11"] .tabs__tab,
.tabs-scroll-section[data-tab-count="12"] .tabs__tab {
  font-size: var(--font-size-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
}

.tabs-scroll-section[data-tab-count="10"] .tabs__list,
.tabs-scroll-section[data-tab-count="11"] .tabs__list,
.tabs-scroll-section[data-tab-count="12"] .tabs__list {
  max-height: 70vh;
  overflow-y: auto;
}

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

@media (prefers-reduced-motion: reduce) {
  .tabs--scroll-driven .tabs__panel {
    transition-duration: 0.01s !important;
    transform: none !important;
  }
  
  .tabs__progress {
    transition-duration: 0.01s !important;
  }
}

/* ============================================
   Dark Theme Support
   ============================================ */

[data-theme="dark"] .tabs--scroll-driven .tabs__tab {
  background: var(--color-bg-tertiary, #334155);
  color: var(--color-text, #f1f5f9);
}

[data-theme="dark"] .tabs--scroll-driven .tabs__tab:hover {
  background: var(--color-bg-secondary, #1e293b);
}

[data-theme="dark"] .tabs--scroll-driven .tabs__tab[aria-selected="true"] {
  background: var(--color-primary, #3b82f6);
  color: white;
}

[data-theme="dark"] .tabs--scroll-driven .tabs__list {
  border-right-color: var(--color-border, #334155);
}