/**
 * SEO Аккордеон 3 - С градиентом (fade-эффект)
 * Версия: 1.2 - FIX: раскрытие без обрезания текста (scrollHeight)
 * Дата: 2026-01-17
 */

/* Переменные из Hero блока */
:root {
  --hero-primary: var(--zv-brand);
  --hero-primary-light: var(--zv-brand);
  --hero-text-primary: #1a365d;
  --hero-text-secondary: #4a5568;
  --hero-text-muted: #718096;
  --hero-bg-surface: #f8fafc;
  --hero-border-light: #e2e8f0;
  --hero-shadow-soft: 0 2px 4px rgba(0,0,0,0.06);
  --hero-shadow-medium: 0 4px 8px rgba(0,0,0,0.1);
}

/* Основной контейнер аккордеона */
.seo-accordion-3 {
  background: #ffffff;
  border-radius: 20px;
  padding: 60px;
  margin: 40px auto;
  max-width: 1240px;
  box-shadow: var(--hero-shadow-soft);
  position: relative;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Заголовок */
.seo-accordion-3 h2 {
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--hero-text-primary);
  margin-bottom: 24px;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

/* Wrapper для контента */
.seo-accordion-3__wrapper {
  position: relative;
}

/* Видимая часть (preview) */
.seo-accordion-3__preview {
  font-size: 1.05rem;
  color: var(--hero-text-muted);
  line-height: 1.6;
  max-height: 150px;
  overflow: hidden;
  position: relative;
}

/* Градиент затухания */
.seo-accordion-3__preview::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(180deg, transparent 0%, white 100%);
  pointer-events: none;
}

/* Когда аккордеон открыт */
.seo-accordion-3__preview.active {
  max-height: none;
}

.seo-accordion-3__preview.active::after {
  display: none;
}

/* Кнопка переключения */
.seo-accordion-3__toggle {
  background: var(--hero-primary);
  color: white;
  padding: 18px 36px;
  border: none;
  border-radius: 20px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  transition: opacity 0.2s ease, box-shadow 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.seo-accordion-3__toggle:hover {
  opacity: 0.9;
  box-shadow: var(--hero-shadow-medium);
}

.seo-accordion-3__toggle:focus {
  outline: 2px solid var(--hero-primary);
  outline-offset: 2px;
}

/* Стрелка в кнопке */
.seo-accordion-3__arrow {
  font-size: 1rem;
  transition: transform 0.3s ease;
}

.seo-accordion-3__toggle.active .seo-accordion-3__arrow {
  transform: rotate(180deg);
}

/* Скрытый контент (FIX: max-height управляется JS) */
.seo-accordion-3__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

/* Активное состояние: отступ, но без фиксированной max-height */
.seo-accordion-3__content.active {
  margin-top: 24px;
}

/* Параграфы */
.seo-accordion-3__content p,
.seo-accordion-3__preview p {
  font-size: 1.05rem;
  color: var(--hero-text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
}

.seo-accordion-3__content p:last-child,
.seo-accordion-3__preview p:last-child {
  margin-bottom: 0;
}

/* Выделение текста (strong, b) */
.seo-accordion-3__content strong,
.seo-accordion-3__preview strong,
.seo-accordion-3__content b,
.seo-accordion-3__preview b {
  color: var(--hero-text-primary);
  font-weight: 600;
}

/* Адаптивность для планшетов */
@media (max-width: 768px) {
  .seo-accordion-3 {
    padding: 40px 30px;
    margin: 30px 20px;
    max-width: calc(100% - 40px);
  }

  .seo-accordion-3 h2 {
    font-size: 1.8rem;
  }

  .seo-accordion-3__preview,
  .seo-accordion-3__content p,
  .seo-accordion-3__preview p {
    font-size: 1rem;
  }

  .seo-accordion-3__toggle {
    padding: 16px 32px;
    font-size: 15px;
  }
}

/* Адаптивность для мобильных */
@media (max-width: 480px) {
  .seo-accordion-3 {
    padding: 30px 20px;
    margin: 20px 10px;
    max-width: calc(100% - 20px);
  }

  .seo-accordion-3 h2 {
    font-size: 1.5rem;
  }

  .seo-accordion-3__preview,
  .seo-accordion-3__content p,
  .seo-accordion-3__preview p {
    font-size: 0.95rem;
  }

  .seo-accordion-3__toggle {
    padding: 14px 24px;
    font-size: 14px;
    width: 100%;
    justify-content: center;
  }

  .seo-accordion-3__preview::after {
    height: 60px;
  }
}

/* Оптимизация */
.seo-accordion-3 * {
  box-sizing: border-box;
}

/* Состояние загрузки (если нужно) */
.seo-accordion-3.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* === FIX: таблицы в SEO-аккордеоне на мобильных (горизонтальный скролл) === */
.seo-accordion-3 .seo-table-scroll{
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid var(--hero-border-light);
  background: #fff;
  margin: 16px 0 24px;
}

/* Чтобы таблица реально могла быть шире экрана */
.seo-accordion-3 .seo-table-scroll table{
  width: 100%;
  min-width: 680px; /* можно 720px, если всё равно тесно */
  margin: 0 !important; /* перебиваем inline margin: 20px 0; */
}

/* Нормальный “tap & scroll” на iOS + приятная полоска */
.seo-accordion-3 .seo-table-scroll::-webkit-scrollbar{
  height: 6px;
}
.seo-accordion-3 .seo-table-scroll::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,0.18);
  border-radius: 999px;
}