/* =========================================================
   BLOCK: Мы в социальных сетях (include/socials.php)
   - QR справа максимальный (по высоте карточки)
   - Иконка слева
   - Телефон: обычное положение ровно, на hover отклоняется
   - Фон: градиент + плавные “фиксации” (красный/тёмный)
   - Hover карточки: увеличивается, ТЕКСТ НЕ белеет
   ========================================================= */

.sez-socials{
  /* --- РАЗМЕРЫ --- */
  --panel-pad: 18px;
  --card-pad: 18px;
  --card-h: 190px;
  --gap: 14px;

  /* --- ЦВЕТА --- */
  --brand-color: var(--brand, #005499);
  --panel-bg-dark: #1A1A1A;

  /* --- ФОН: СКОРОСТЬ/МЯГКОСТЬ --- */
  --cycle: 14s;              /* скорость цикла */
  --grad-angle: 120deg;      /* угол градиента */
  --grad-size: 240%;         /* чем больше — тем мягче */
  --grad-ease: ease-in-out;  /* мягкость: linear/ease/ease-in-out */

  /* --- ТЕЛЕФОН --- */
  --phone-left: 60px;      /* сдвиг телефона влево (+10px = левее) */
  --phone-up: 5px;       /* поднимаем телефон выше (более минус = выше) */
  --phone-w: 460px;        /* ширина телефона */

  /* --- HOVER КАРТОЧКИ --- */
  --card-scale: 1.03;      /* увеличение при наведении */
}

/* ===== ФОН-ПЛАШКА: 2 слоя (градиент + фиксации) ===== */
.sez-socials__panel{
  position: relative;
  overflow: visible;
}

/* градиент (ездит) */
.sez-socials__panel::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 0;
  z-index:0;

  background: linear-gradient(
    var(--grad-angle),
    var(--panel-bg-dark),
    var(--brand-color),
    var(--panel-bg-dark)
  );
  background-size: var(--grad-size) var(--grad-size);
  animation: sezSocialsGradientMove var(--cycle) var(--grad-ease) infinite;
}

/* фиксации (плавные паузы на цельном цвете) */
.sez-socials__panel::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 0;
  z-index:1;

  opacity: 0;
  background: var(--brand-color);
  animation: sezSocialsHolds var(--cycle) var(--grad-ease) infinite;
}

.sez-socials__panel-inner{
  position: relative;
  z-index: 2;
  padding: var(--panel-pad);
}

/* движение градиента: красный -> тёмный -> красный */
@keyframes sezSocialsGradientMove{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Паузы (плавные):
   0–10%   фикс КРАСНЫЙ
   10–20%  плавно уходим в градиент
   20–45%  градиент
   45–55%  плавно фикс ТЁМНЫЙ
   55–65%  фикс ТЁМНЫЙ
   65–75%  плавно уходим в градиент
   75–90%  градиент
   90–100% плавно фикс КРАСНЫЙ
*/
@keyframes sezSocialsHolds{
  0%   { opacity: 1; background: var(--brand-color); }
  10%  { opacity: 1; background: var(--brand-color); }
  20%  { opacity: 0; background: var(--panel-bg-dark); }

  45%  { opacity: 0; background: var(--panel-bg-dark); }

  55%  { opacity: 1; background: var(--panel-bg-dark); }
  65%  { opacity: 1; background: var(--panel-bg-dark); }

  75%  { opacity: 0; background: var(--brand-color); }

  90%  { opacity: 0; background: var(--brand-color); }
  100% { opacity: 1; background: var(--brand-color); }
}

/* ===== СЕТКА / СПИСОК ===== */
.sez-socials__grid{
  display: grid;
  grid-template-columns: minmax(360px, 560px) 1fr;
  gap: 26px;
  align-items: start;
}

.sez-socials__list{
  display: grid;
  gap: var(--gap);
  max-width: 560px;
}

/* ===== КАРТОЧКА ===== */
.sez-socials__card{
  position: relative;
  display: block;
  background: #fff;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 0;
  height: var(--card-h);
  padding: var(--card-pad);
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  transform-origin: left center;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

/* Hover: увеличиваем, но текст НЕ делаем белым и фон НЕ меняем */
.sez-socials__card:hover{
  transform: translateY(-2px) scale(var(--card-scale));
  box-shadow: 0 14px 28px rgba(0,0,0,.14);
}

/* Заголовок (без изменения цвета) */
.sez-socials__title{
  font-family: 'kelson', sans-serif;
  font-weight: 800;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #1A1A1A;
  margin: 0;
}

/* ===== QR справа: максимум по высоте карточки ===== */
.sez-socials__qr{
  position: absolute;
  top: var(--card-pad);
  right: var(--card-pad);
  bottom: var(--card-pad);

  height: calc(var(--card-h) - (2 * var(--card-pad)));
  width:  calc(var(--card-h) - (2 * var(--card-pad)));

  object-fit: contain;
  display: block;
}

/* резерв справа, чтобы заголовок/иконка не заходили под QR */
.sez-socials__title,
.sez-socials__icon{
  padding-right: calc((var(--card-h) - (2 * var(--card-pad))) + 16px);
}

/* ===== 3D-иконка слева ===== */
.sez-socials__icon{
  position: absolute;
  left: var(--card-pad);
  bottom: -8px;
  width: 320px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ===== ТЕЛЕФОН ===== */
@media (min-width: 993px){
  .sez-socials__panel-inner{
    padding-right: 560px; /* место под телефон */
  }

  .sez-socials__phone{
    position: absolute;
    right: calc(var(--panel-pad) + var(--phone-left)); /* левее */
    bottom: var(--panel-pad);                          /* низ по краю карточек */
    top: auto;
    z-index: 3;
  }

  /* обычное положение: ровно */
  .sez-socials__phone img{
    width: var(--phone-w);
    max-width: var(--phone-w);
    height: auto;
    display: block;
    transform: translateY(var(--phone-up)) rotate(-2deg);
    transition: transform 350ms ease;
    will-change: transform;
  }

  /* hover: отклоняем */
  .sez-socials__phone:hover img{
    transform: translateY(var(--phone-up)) rotate(7deg);
  }

  /* гарантированно отключаем любые пульсации */
  .sez-socials__phone::before,
  .sez-socials__phone::after{
    content: none !important;
    display: none !important;
  }
}

/* ===== АДАПТИВ ===== */
@media (max-width: 992px){
  .sez-socials__grid{ grid-template-columns: 1fr; }
  .sez-socials__phone{ display: none; }
  .sez-socials__panel-inner{ padding-right: var(--panel-pad); }
  .sez-socials{ --card-h: 180px; }
  .sez-socials__icon{ width: 300px; }
}