/* ============================
   SOLUTION DETAIL PAGE
   ============================ */

/* Container extends to 1440px (1440 − 2×120 = 1200px content) */
.sp-main .container,
.sp-content .container {
  max-width: 1440px;
}

/* Override large starlline to uppercase (common.css default is text-transform: none) */
.sp-section__label .starlline--large .starlline__label {
  font-size: var(--fs-h5);
  font-weight: var(--fw-regular);
  text-transform: uppercase;
}


/* ── MAINSCREEN ── */

.sp-main {
  padding: 40px 0 0;
}

.sp-main__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.sp-main__left {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Flip forward arrow icon to point backward */
.sp-main__back-icon {
  transform: scaleX(-1);
}

.sp-main__back {
  margin-top: auto;
}

.sp-main__title {
  font-family: var(--font-montserrat);
  font-weight: var(--fw-medium);
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: var(--lh-heading);
  color: var(--color-black);
}

.sp-main__image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 4px;
}

@media (min-width: 1024px) {
  .sp-main {
    padding: 80px 0 0;
  }

  .sp-main__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 65px;
  }

  .sp-main__left {
    flex: 1;
    min-width: 0;
  }

  .sp-main__right {
    flex-shrink: 0;
    width: 520px;
  }

  .sp-main__image {
    width: 520px;
    height: 346px;
    object-fit: cover;
  }
}


/* ── CONTENT BODY ── */

.sp-content {
  padding: 60px 0 80px;
}

.sp-sections {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

@media (min-width: 1440px) {
  .sp-content {
    padding: 100px 0 100px;
  }
}


/* ── SECTION ROW ── */

.sp-section {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.sp-section--divided {
  border-bottom: 1px solid #B4B4B4;
  padding-bottom: 80px;
}

@media (min-width: 1024px) {
  .sp-section {
    flex-direction: row;
    align-items: flex-start;
    gap: 30px;
  }

  .sp-section__label {
    width: 300px;
    flex-shrink: 0;
  }

  .sp-section__body {
    flex: 1;
    min-width: 0;
  }
}


/* ── INDUSTRY ── */

.sp-industries {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.sp-industry {
  display: inline-block;
  padding: 10px 25px;
  border-radius: 30px;
  background-color: var(--color-black);
  font-family: var(--font-pt-sans);
  font-size: var(--fs-text);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-white);
  margin: 0;
}


/* ── TAGS ── */

.sp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.sp-tag {
  display: inline-block;
  padding: 10px 25px;
  border-radius: 30px;
  background-color: var(--color-black);
  font-family: var(--font-pt-sans);
  font-size: var(--fs-text);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-white);
}


/* ── POSSIBILITIES ── */

.sp-possibilities {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.sp-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  margin: 0;
}

.sp-list__item {
  font-family: var(--font-pt-sans);
  font-size: var(--fs-text);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-black);
  padding-left: 24px;
  position: relative;
}

.sp-list__item::before {
  content: "—";
  position: absolute;
  left: 0;
}


/* ── COMPONENTS ── */

.sp-components {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.sp-component {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.sp-component__title {
  font-family: var(--font-golos);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h5);
  line-height: var(--lh-subheading);
  color: #141414;
  margin: 0;
}

.sp-component__row {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.sp-component__image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border: 1px solid #D9D9D9;
  border-radius: 5px;
}

.sp-component__text {
  font-family: var(--font-pt-sans);
  font-size: var(--fs-text);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: #141414;
  margin: 0;
}

/* Component 2: text-only row — heading as label on left, text on right */
@media (min-width: 1024px) {
  .sp-component--text-row {
    flex-direction: row;
    align-items: flex-start;
    gap: 30px;
  }

  .sp-component--text-row .sp-component__title {
    width: 350px;
    flex-shrink: 0;
  }
}

/* Component 3: small portrait image */
.sp-component__image--sm {
  border: none;
}

.sp-component__texts {
  display: flex;
  flex-direction: column;
  gap: 30px;
  flex: 1;
  min-width: 0;
}

.sp-component__subitem {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.sp-component__subtitle {
  font-family: var(--font-golos);
  font-weight: var(--fw-medium);
  font-size: var(--fs-text);
  line-height: var(--lh-body);
  color: #141414;
  margin: 0;
}

@media (min-width: 1024px) {
  .sp-component__row {
    flex-direction: row;
    align-items: flex-start;
  }

  .sp-component__image {
    width: 540px;
    height: 268px;
    flex-shrink: 0;
    object-fit: cover;
  }

  .sp-component__image--sm {
    width: 255px;
    height: 269px;
  }

  .sp-component__row--reversed {
    flex-direction: row-reverse;
  }
}


/* ── TABS (section 4.3) ── */

.sp-tabs {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.sp-tabs__line {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #B4B4B4;
  overflow-x: auto;
  scrollbar-width: none;
}

.sp-tabs__line::-webkit-scrollbar {
  display: none;
}

.sp-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0 10px 15px;
  font-family: var(--font-golos);
  font-size: var(--fs-text);
  font-weight: var(--fw-regular);
  line-height: var(--lh-caption);
  color: var(--color-gray);
  cursor: pointer;
  white-space: nowrap;
  margin-bottom: -1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.sp-tab:hover {
  color: var(--color-black);
}

.sp-tab.is-active {
  color: var(--color-orange);
  border-bottom-color: var(--color-orange);
}

.sp-panel {
  display: none;
}

.sp-panel.is-active {
  display: block;
}


/* ── BULLETS (section 4.4) ── */

.sp-bullets {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.sp-bullet {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.sp-bullet__icon {
  flex-shrink: 0;
  background-color: var(--color-orange);
  margin-top: 3px;
}

.sp-bullet__text {
  font-family: var(--font-pt-sans);
  font-size: var(--fs-text);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-black);
  margin: 0;
}


/* ── DOC-CARDS (section 4.5: Документооборот) ── */
/* 3 grey cards: 01 + 02 half-width, 03 full-width */

.sp-doc-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.sp-doc-card {
  background-color: #EEEEEE;
  border-radius: 5px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  flex: 1 1 100%;
}

.sp-doc-card__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sp-doc-card__title {
  font-family: var(--font-golos);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h5);
  line-height: var(--lh-subheading);
  color: var(--color-black);
  margin: 0;
}

.sp-doc-card__text {
  font-family: var(--font-pt-sans);
  font-size: var(--fs-text);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-black);
  margin: 0;
}

@media (min-width: 640px) {
  .sp-doc-card {
    flex: 1 1 calc(50% - 15px);
    max-width: calc(50% - 15px);
  }

  .sp-doc-card--wide {
    flex: 1 1 100%;
    max-width: 100%;
  }
}


/* ── CALLBACK FORM ── */

.sp-form {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.sp-form__fields {
  display: flex;
  flex-direction: column;
  gap: var(--form-row-gap);
}

.sp-form__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.callback__success {
  display: none;
}

.callback__success--visible {
  display: block;
}


/* ── КОМПОНЕНТЫ РЕШЕНИЯ — новый case_info виджет ── */

.sp-ci-section {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.sp-ci-section--divided {
  padding-bottom: 50px;
}

.sp-ci-section__heading {
  font-family: var(--font-montserrat);
  font-weight: var(--fw-medium);
  font-size: clamp(26px, 3vw, var(--fs-h2));
  line-height: var(--lh-heading);
  color: var(--color-black);
  margin: 0;
}

/* Весь виджет: border-top и border-bottom серо-голубая линия */
.case-info {
  border-top: 1px solid var(--color-gray-blue);
  border-bottom: 1px solid var(--color-gray-blue);
  display: flex;
  flex-direction: column;
}

/* ── Левая навигация ── */
.case-info__nav {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px 0;
}

.case-info__nav-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: none;
  border: none;
  text-align: left;
  padding: 0;
  cursor: pointer;
  width: 100%;
}

.case-info__nav-icon {
  flex-shrink: 0;
  background-color: var(--color-gray);
  margin-top: 2px;
}

.case-info__nav-item.is-active .case-info__nav-icon {
  background-color: var(--color-blue);
}

.case-info__nav-label {
  font-family: var(--font-pt-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-gray);
  transition: color var(--transition-fast);
}

.case-info__nav-item.is-active .case-info__nav-label {
  color: var(--color-blue);
}

.case-info__nav-item:hover:not(.is-active) .case-info__nav-label {
  color: var(--color-black);
}

/* ── Правая панель контента ── */
.case-info__content {
  flex: 1;
  min-width: 0;
}

.case-info__panel {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 30px 0;
}

.case-info__panel-heading {
  font-family: var(--font-golos);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h5);
  line-height: var(--lh-subheading);
  color: var(--color-black);
  margin: 0;
}

.case-info__panel-text {
  font-family: var(--font-pt-sans);
  font-size: var(--fs-text);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: #141414;
  margin: 0;
}
.case-info__panel-text p {
  margin: 0 0 8px;
}
.case-info__panel-text p:last-child { margin-bottom: 0; }
.case-info__panel-text p.ci-br { margin: 0; height: 12px; }
.case-info__panel-text ul,
.case-info__panel-text ol {
  margin: 0 0 8px;
  padding-left: 20px;
}
.case-info__panel-text ul { list-style: disc; }
.case-info__panel-text ol { list-style: decimal; }
.case-info__panel-text ul:last-child,
.case-info__panel-text ol:last-child { margin-bottom: 0; }
.case-info__panel-text li { margin-bottom: 4px; }
.case-info__panel-text strong { font-weight: 700; }
.case-info__panel-text em { font-style: italic; }
.case-info__panel-text h2,
.case-info__panel-text h3 {
  font-family: var(--font-montserrat);
  font-weight: 700;
  margin: 12px 0 6px;
}

.case-info__panel-image {
  width: 100%;
  height: auto;            /* во всю ширину, высота по пропорции — без обрезки [Адм-10] */
  display: block;
  border-radius: var(--radius-card);
  border: 1px solid #D9D9D9;
}

@media (min-width: 1024px) {
  .case-info {
    flex-direction: row;
    gap: 50px;
  }

  .case-info__nav {
    width: 300px;
    flex-shrink: 0;
    border-right: 1px solid var(--color-gray-blue);
    padding: 50px 10px 50px 0;
  }

  .case-info__content {
    padding: 50px 0;
  }
}


/* ============================================================
   МОБ (≤767px): case_info/mob — блоки решения как аккордеон
   (вместо левой навигации + контента). Десктоп не затрагивается.
   ============================================================ */
@media (max-width: 767px) {
  /* Расстояние от заголовка «Компоненты решения» до вкладок уменьшено (50px → 24px) */
  .sp-ci-section {
    gap: 24px;
  }

  .case-info {
    flex-direction: column;
    gap: 0;
  }

  /* левую навигацию прячем */
  .case-info__nav {
    display: none;
  }

  .case-info__content {
    padding: 0;
  }

  /* показываем ВСЕ панели (снимаем скрытие атрибутом hidden) */
  .case-info__panel[hidden] {
    display: block;
  }
  .case-info__panel {
    gap: 0;
    padding: 0;
    border-bottom: 1px solid var(--color-gray-blue);
  }
  .case-info__panel:last-child {
    border-bottom: none;
  }

  /* заголовок-переключатель + шеврон */
  /* стр.231: красная стрелка — уменьшить отступ (18px→10px);
              зелёная стрелка — уменьшить шрифт (h5/24px→caption/16px), line-height сохранить */
  /* Отступ текст↔линия увеличен (10px→16px) — вкладка визуально «шире»
     по высоте, размер текста (fs-caption) не менялся. */
  .case-info__panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 0;
    font-size: var(--fs-caption);
    cursor: pointer;
    color: var(--color-gray);
    transition: color var(--transition-fast);
  }
  .case-info__panel.is-mob-open .case-info__panel-heading {
    color: var(--color-blue);
  }
  .case-info__panel-heading::after {
    content: '';
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--transition-fast);
  }
  .case-info__panel.is-mob-open .case-info__panel-heading::after {
    transform: rotate(-135deg);
  }

  /* тело — плавно раскрывается/сворачивается при is-mob-open.
     max-height по --reveal-h/--reveal-h-img (реальная высота контента,
     измеряется в JS через scrollHeight — см. solution-detail-loader.js) —
     без этого точного значения анимация либо не сворачивается до конца
     (grid-rows не подошёл — застревает на половине), либо со слишком
     большим фиксированным max-height выглядит как мгновенный скачок. */
  .case-info__panel-text {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    min-height: 0;
    transition: max-height 0.35s ease, opacity 0.3s ease;
  }
  .case-info__panel-image {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.3s ease, margin-bottom 0.35s ease;
  }
  .case-info__panel.is-mob-open .case-info__panel-text {
    max-height: var(--reveal-h, 600px);
    opacity: 1;
    padding-bottom: 18px;
  }
  .case-info__panel.is-mob-open .case-info__panel-image {
    max-height: var(--reveal-h-img, 600px);
    opacity: 1;
    margin-bottom: 18px;
  }

  /* кнопка «Оставить заявку» — на всю ширину экрана */
  .sp-form__footer {
    flex-direction: column;
    align-items: stretch;
  }
  .sp-form__footer .btn {
    width: 100%;
    justify-content: space-between;
  }

  /* стр.231: уменьшить отступ между компонентами и размер заголовка */
  .sp-components {
    gap: 30px;
  }
  .sp-component__title {
    font-size: var(--fs-text);
  }
}