/* ======================================================================
   #clients — «Прозрачность»: резиновая секция с текстом слева и фото справа
   ТЗ (сохранено без изменений):
   1) Фото-столбец НИКОГДА не выше текстовой колонки.
   2) Высота секции — авто (никаких принудительных min-height).
   3) На планшетах (768–1199.98) — 2 колонки 60/40 (фикс).
   4) На десктопах ≥1200px — 2 колонки 7/5.
   5) Изображения НЕ обрезаются (object-fit: contain).
   6) На мобилках (≤767.98px) фото скрыты.
   7) Каждое фото: высота = min(половина высоты колонки, 1.5 × высота текстовой карточки).
      Для 1.5× используется переменная --clients-text-card-h.
   СКОУП: только внутри #clients
   ====================================================================== */


/* **********************************************************************
   A) БАЗА СЕКЦИИ: фон, «стекло», общие отступы, слой-подложка
   ********************************************************************** */

/* Фоновый «бумажный» слой + верхняя граница */
#clients.clients{
  background: var(--paper-200);
  border-top: 1px solid rgba(31,30,22,.08);
}

/* Фон-картинка секции */
#clients.clients-bg{
  position: relative;
  background-image: url("../img/background/bg-clients.jpeg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Тонирующая вуаль + лёгкий blur/saturate/brightness */
#clients.clients-bg::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(rgba(0,0,0,.40), rgba(0,0,0,.66)),
    rgba(0,0,0,.10);
  -webkit-backdrop-filter: blur(2px) saturate(.92) brightness(.90);
  backdrop-filter: blur(2px) saturate(.92) brightness(.90);
  pointer-events:none;
}

/* Поднимаем контент над подложкой */
#clients.clients-bg > *{ position: relative; z-index: 1; }

/* Вертикальные внутренние отступы секции (высота — авто) */
#clients.screen{
  padding-block: clamp(16px, 3.5vh, 44px) !important;
}


/* **********************************************************************
   B) ТИПОГРАФИКА: заголовок и подзаголовок
   ********************************************************************** */

/* Заголовок секции */
#clients .clients-title{
  font-weight: 800;
  font-size: clamp(1.6rem, 2.6vw, 3rem);
  line-height: 1.15;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 6px rgba(0,0,0,.45), 0 0 1px rgba(0,0,0,.35);
  margin: 0 0 1.5rem 0 !important;
}

/* Акцент в заголовке */
#clients .clients-title .accent{ color: var(--terracotta); }

/* Подзаголовок/лид */
#clients .clients-lead{
  color: rgba(255,255,255,.95);
  text-shadow: 0 2px 6px rgba(0,0,0,.45);
  background: rgba(0,0,0,.22);
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
  border-radius: var(--radius);
  padding: clamp(8px, 1.2vw, 12px) clamp(12px, 1.8vw, 16px);
  display: block;
  text-align: center;
  max-width: 1100px;
  width: 100%;
  margin: .35rem auto 0 !important;
}

/* Отступ от лида до контента */
#clients .clients-lead + .row{
  margin-top: clamp(18px, 3vh, 32px) !important;
}


/* **********************************************************************
   C) ЛЕВАЯ КОЛОНКА: стек карточек-преимуществ
   ********************************************************************** */

/* Контейнер колонки с карточками (в разметке: .col-12.col-xl-7.d-flex.flex-column) */
#clients .col-12.col-xl-7.d-flex.flex-column{
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 22px);   /* расстояние между карточками */
}

/* Карточка преимущества */
#clients .clients-point{
  display:flex;
  align-items:flex-start;
  gap: clamp(10px, 1.2vw, 16px);
  padding: clamp(14px, 1.6vw, 20px) clamp(12px, 1.4vw, 18px);
  background: var(--paper-100);
  border: 1.5px solid var(--paper-300);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 0;                       /* управляем интервалом через gap */
  margin-bottom: 1.3rem;
  transition: transform .2s ease, box-shadow .2s ease;
}

#clients .clients-point:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(31,30,22,.22);
}

/* Кружок-иконка (галочка) */
#clients .tick-ico{
  flex:0 0 clamp(36px, 4vw, 44px);
  width: clamp(36px, 4vw, 44px);
  height: clamp(36px, 4vw, 44px);
  border-radius:50%;
  background: var(--terracotta); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow: var(--btnshadow);
}
#clients .tick-ico i{ font-size: clamp(18px, 2.2vw, 22px); line-height:1; }

/* Текстовые элементы внутри карточек */
#clients .clients-subtitle{
  font-weight:900; text-transform:uppercase;
  margin:0 0 .15rem; color:var(--ink);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
}
#clients .clients-text{
  color: var(--ink-60);
  line-height: 1.55;
  font-size: clamp(.95rem, 1.4vw, 1.05rem);
}

/* Переменные секции (используются для ограничений высоты фото) */
#clients{
  --clients-text-card-h: 180px;   /* референс: высота одной текстовой карточки */
  --clients-photos-gap: 5px;      /* вертикальный зазор между двумя фото */
}


/* **********************************************************************
   D) ПРАВАЯ КОЛОНКА: фотостолбец
   ********************************************************************** */

/* Рамка фото-карточки */
#clients .clients-photo{
  background: var(--paper-100);
  padding: clamp(4px, .6vw, 6px);
  border: 1.5px solid var(--paper-300);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display:flex; align-items:center; justify-content:center;
  transition: transform .18s ease, box-shadow .18s ease;
}

/* Ховер-эффект фото */
#clients .clients-photo:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(31,30,22,.20);
}

/* Само изображение — всегда без кропа */
#clients .clients-photo img{
  width:100%;
  height:100%;
  object-fit: contain;
  object-position:center;
  border-radius: calc(var(--radius) - 4px);
}

/* Колонка под две фото (внутри правой колонки) */
#clients .clients-photos > .col-6{
  display:flex;
  flex-direction: column;
  gap: var(--clients-photos-gap);
  width: 100%;
}


/* **********************************************************************
   E) ДЕСКТОП ≥1200px: сетка 7/5, фотостолбец тянется по высоте строки
   ********************************************************************** */
@media (min-width: 1200px){
  /* Растяжение по высоте строки для обеих колонок */
  #clients .row.align-items-stretch{ align-items: stretch !important; }

  /* Левая колонка: 7/12 */
  #clients .row.align-items-stretch > .col-12.col-xl-7{
    flex: 0 0 calc(100% * 7 / 12) !important;
    max-width: calc(100% * 7 / 12) !important;
    display:flex;
    flex-direction: column;
    min-height: 0;
  }

  /* Правая колонка: 5/12 */
  #clients .row.align-items-stretch > .col-12.col-xl-5{
    flex: 0 0 calc(100% * 5 / 12) !important;
    max-width: calc(100% * 5 / 12) !important;
    display:flex;
    min-height: 0;
  }

  /* Внутренний контейнер фото занимает всю высоту колонки */
  #clients .row.align-items-stretch > .col-12.col-xl-5 .clients-photos{
    flex: 1 1 auto;
    height: 100%;
    max-height: 100%;
    display: flex;
  }

  /* Две карточки делят высоту пополам с ограничителем 1.5× */
  #clients .clients-photos > .col-6{
    height: 100%;
    min-height: 0;
  }
  #clients .clients-photos > .col-6 > .clients-photo{
    height: calc((100% - var(--clients-photos-gap)) / 2);
    min-height: 0;
    overflow: hidden;
    max-height: calc(1.5 * var(--clients-text-card-h));
  }
}


/* **********************************************************************
   F) МОБАЙЛ ≤767.98px: скрыть фотостолбец (экономия места)
   ********************************************************************** */
@media (max-width: 767.98px){
  #clients .clients-photos{ display: none !important; }
}


/* **********************************************************************
   G) iPad Pro (портрет) 992–1199.98px: слегка увеличить референс-карту
   ********************************************************************** */
@media (orientation: portrait) and (min-width: 992px) and (max-width: 1199.98px){
  #clients{ --clients-text-card-h: 200px; }
}


/* **********************************************************************
   H) ПЛАНШЕТЫ 768–1199.98px: 2 колонки 60/40, фотостолбец не выше текста
   ********************************************************************** */
@media (min-width: 768px) and (max-width: 1199.98px){
  /* Левая колонка ~60% */
  #clients .row.align-items-stretch > .col-12.col-xl-7{
    flex: 0 0 60% !important;
    max-width: 60% !important;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* Правая колонка ~40% */
  #clients .row.align-items-stretch > .col-12.col-xl-5{
    flex: 0 0 40% !important;
    max-width: 40% !important;
    display: flex;
    min-height: 0;
  }

  /* Фотостолбец растягивается по высоте строки */
  #clients .row.align-items-stretch > .col-12.col-xl-5 .clients-photos{
    flex: 1 1 auto !important;
    height: 100% !important;
    max-height: 100% !important;
    display: flex !important;
  }

  /* Две фото-карточки делят высоту пополам */
  #clients .clients-photos > .col-6{
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--clients-photos-gap) !important;
  }
  #clients .clients-photos > .col-6 > .clients-photo{
    height: calc((100% - var(--clients-photos-gap)) / 2) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  #clients .clients-photos > .col-6 > .clients-photo img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;   /* без кропа */
    object-position: center !important;
  }
}


/* **********************************************************************
   I) ГЛОБАЛЬНЫЙ ФИКС: высота контейнеров всегда «auto» (без принудиловки)
   ********************************************************************** */
#clients,
#clients .container,
#clients .row.align-items-stretch {
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
}