/* ==========================================================================
   SFP-трансиверы Необайт Optix — дополнения к теме сайта.
   --------------------------------------------------------------------------
   Разметка страницы повторяет /production/servers/, поэтому раскладку,
   отступы, типографику и адаптив полностью задаёт тема (style-neo.css,
   media-neo.css). Здесь — только то, чего в теме нет:
     • пропорции нашего баннера (в теме подложка-svg 1296×408);
     • заголовок в плитке преимуществ (в теме плитка без заголовка);
     • сброс тёмной первой плитки (в теме она рекламная, у нас — обычная);
     • служебные элементы формы (подписи, ошибки, капча).
   ========================================================================== */

/* ---------- 1. Главный баннер ----------
   Фотография светлая, белый заголовок на ней терялся — кладём сверху
   мягкое затемнение слева направо. Текст лежит выше затемнения.          */
.main-ban{position:relative}
.main-ban::after{
  content:"";
  position:absolute;
  inset:0;
  border-bottom-left-radius:8px;
  border-bottom-right-radius:8px;
  background:linear-gradient(90deg,
    rgba(10,12,18,.72) 0%,
    rgba(10,12,18,.55) 30%,
    rgba(10,12,18,.25) 60%,
    rgba(10,12,18,0) 85%);
  pointer-events:none;
  z-index:1;
}
.main-ban__cont{z-index:2}

/* ---------- 1.1 Пропорции баннера ----------
   Тема рассчитана на подложку 1296×408; наша фотография другой пропорции,
   поэтому кадрируем её в тот же формат.                                    */
.main-ban__img{
  width:100%;
  height:auto;
  aspect-ratio:1296 / 408;
  object-fit:cover;
  object-position:center 45%;
}

/* На узких экранах тема прячет десктопную картинку и ждёт .main-ban__mob /
   .main-ban__375. У нас один баннер — показываем его. Высота как у мобильной
   картинки темы (830px): внутрь баннера тема кладёт мини-карточки, и при
   низком баннере они вылезают на следующий блок.                          */
@media screen and (max-width:1100px){
  .main-ban__img{
    display:block !important;
    width:100%;
    height:620px;
    aspect-ratio:auto;
    object-fit:cover;
    object-position:center 28%;
  }
}
@media screen and (max-width:600px){
  /* Другой вариант кадра для телефона: фотография — аккуратной верхней
     полосой (ландшафтный кадр без сильного зума), ниже тёмный фон, на
     котором лежат мини-карточки. Так баннер не выглядит «растянутым».   */
  .main-ban{
    min-height:650px;
    background:linear-gradient(180deg,#12263d 0%,#0a1626 100%);
  }
  .main-ban__img{
    position:absolute;
    top:0;left:0;
    width:100%;
    height:430px;
    aspect-ratio:auto;
    object-fit:cover;
    object-position:center 42%;
  }
}

/* ---------- 1a. Мини-баннеры под шапкой ----------
   Иконки уменьшены примерно в полтора раза: в прежнем размере они
   перетягивали внимание с текста. Пропорции не трогаем — задаём только
   высоту, ширина считается сама, как это сделано на «Серверах».
   Ступени повторяют брейкпоинты темы (110 / 80 / 80px).                  */
.main-block .el-block__img{height:72px}
@media screen and (min-width:1100px) and (max-width:1350px){
  .main-block .el-block__img{height:54px}
}
@media screen and (max-width:550px){
  .main-block_hid .el-block__img{width:54px;height:auto}
}

/* ---------- 2. Каталог ----------
   Как на «Серверах»: карточка компактная, при наведении картинка
   уменьшается и плавно раскрываются характеристики модуля.               */
.sfp-cards{margin-top:64px;align-items:flex-start}
.sfp-cards .el-block_col_serv{
  position:relative;
  flex-direction:column;
  min-height:216px;
  padding:24px;
  gap:0;
  transition:box-shadow .25s ease;
}
.sfp-cards .el-block__int{flex-direction:column;gap:16px;width:100%}
.sfp-cards .el-block__int img{
  position:static;top:auto;left:auto;transform:none;
  width:100%;height:auto;aspect-ratio:1200 / 340;object-fit:contain;
  max-height:130px;
  transition:max-height .3s ease;
}
.sfp-cards .el-block__flex{gap:6px}
/* Под название резервируем ровно две строки (line-height 120% → 2.4em).
   Иначе на широких экранах короткие названия встают в одну строку,
   и белая подложка у 10G/25G оказывается ниже, чем у 100G/400G.         */
.sfp-cards .el-block__flex h3{min-height:2.4em}

/* характеристики: скрыты, раскрываются по наведению */
.sfp-cards .el-block__text{
  display:block;max-height:0;opacity:0;overflow:hidden;margin:0;
  font-weight:300;font-size:15px;line-height:1.45;color:#676767;
  transition:max-height .35s ease,opacity .3s ease,margin-top .3s ease;
}
/* Раскрытие по наведению — только там, где есть настоящий курсор и где
   характеристики действительно спрятаны. На телефонах и планшетах они
   показаны сразу, и подъём картинки был бы движением без смысла:
   картинка прыгает, а текстовый блок остаётся прежним.                  */
@media screen and (min-width:1101px) and (hover:hover) and (pointer:fine){
  .sfp-cards .el-block_col_serv:hover{box-shadow:0 10px 34px rgba(20,24,34,.10)}
  .sfp-cards .el-block_col_serv:hover .el-block__int img{max-height:58px}
  .sfp-cards .el-block_col_serv:hover .el-block__text{max-height:300px;opacity:1;margin-top:14px}
}

@media screen and (max-width:1100px){
  .sfp-cards{margin-top:48px;gap:24px;align-items:stretch}
  .sfp-cards .el-block_col_serv{width:100%;max-width:none}
  /* на сенсорных экранах наведения нет — характеристики показываем сразу */
  .sfp-cards .el-block__int img{max-height:120px}
  .sfp-cards .el-block__text{max-height:none;opacity:1;margin-top:14px}
}

/* ---------- 3. Плитки преимуществ ----------
   ВАЖНО: в теме этот блок называется .grid-ad / .ad-servers, и блокировщики
   рекламы (uBlock и подобные) скрывают его по имени класса — на боевой
   странице «Серверы» блок из-за этого не виден. Поэтому здесь свои имена
   классов, а оформление повторяет плитки темы один в один.                */
.sfp-benefits-wrap h2{margin-top:48px}

.sfp-benefits{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.sfp-benefits__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:24px;
  background:#fff;
  border-radius:8px;
  letter-spacing:.02em;
}
.sfp-benefits__text h3{
  font-weight:500;
  font-size:20px;
  line-height:120%;
  margin-bottom:8px;
}
.sfp-benefits__text p{
  margin:0;
  color:#676767;
  font-weight:300;
  font-size:16px;
  line-height:120%;
}
.sfp-benefits__item img{
  flex:0 0 auto;
  height:76px;
  width:auto;
}

@media screen and (max-width:1100px){
  .sfp-benefits{grid-template-columns:repeat(2,1fr);gap:16px}
}
@media screen and (max-width:600px){
  .sfp-benefits{grid-template-columns:1fr}
  .sfp-benefits__item{padding:20px 16px;gap:16px}
  .sfp-benefits__item img{height:56px}
}