/* ═══════════════════════════════════════════════════════════════════════════
   Попап акции «Поддержка сайта: 2 400 ₽/час вместо 3 200» (docs/PROMO-2400.md)
   Стили на дизайн-системе webit.ru: Bitum и акцент #ee5e3e приходят из app.css,
   кнопка — штатная .btn.btn--filled. Всё под неймспейсом .promo24.

   Модалка — штатный jquery.modal (.modal.custom-modal), но вместо полноэкранной
   серой панели сайта — белая карточка по центру экрана.

   ЕДИНИЦЫ (как в geo-audit.css):
   • Крупное (ширина карточки, размеры шрифтов) — vw от сетки 1440 (fluid, как на
     сайте) до 1280; ниже — фиксированные px (карточка 560px), чтобы текст в
     диапазоне 1024–1279 не мельчал; ≤620 (штатный мобильный брейкпоинт app.css) —
     мобильная карточка на всю ширину; ≤479 — узкий мобайл; отдельно — низкие
     экраны (ландшафт телефона, max-height 480).
   • Внутренние отступы, хайрлайны, крестик — rem/px, чтобы не схлопывались.
   • Без :has(). Разметка — include/promo-2400-popup.php.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── оверлей: выше cookie-плашки сайта (.cookie-modal z-index:300), поэтому не
   укорачиваем его под плашку, как app.js делает для штатных модалок на мобильном
   (#fix-modal-height: .jquery-modal.current{height:calc(100% - …)}) — карточка
   центрируется на весь экран, плашка остаётся под затемнением ── */
.jquery-modal.blocker.promo24-blocker{ z-index:310; height:100%; padding:1rem; }

/* ── карточка (сброс полноэкранных правил .custom-modal и дефолтов jquery.modal) ── */
.modal.custom-modal.promo24{
  position:relative; top:auto; right:auto; bottom:auto; left:auto;
  display:none; vertical-align:middle; text-align:left;
  width:100%; max-width:43.05556vw;               /* 620px @1440 */
  padding:2.75rem 2.75rem 2.25rem;
  background:#fff; color:#000;
  border-radius:0.69444vw;                        /* 10px — как карточки сайта */
  box-shadow:none; overflow:hidden;
}
/* фирменный жест: оранжевая полоса сверху карточки (как оранжевое меню сайта) */
.modal.custom-modal.promo24:before{
  content:""; position:absolute; top:0; left:0; right:0; height:6px; background:#ee5e3e;
}
/* крестик — штатная иконка сайта из app.css (background-image); иконка 20px,
   но хит-зона 40×40, чтобы по нему было легко попасть */
.modal.custom-modal.promo24 a.close-modal{
  top:.75rem; right:.75rem; width:2.5rem; height:2.5rem;
  background-size:1.25rem 1.25rem; background-position:center; background-repeat:no-repeat;
}

/* ── контент ── */
.promo24__kicker{
  display:block; font-size:0.90278vw; line-height:1.3; letter-spacing:.1em; text-transform:uppercase;
  color:#ee5e3e; margin:0 0 .75rem; padding-right:3rem;   /* не заезжать под крестик */
}
.promo24__kicker span{ color:inherit; }
.promo24__nowrap{ white-space:nowrap; color:inherit; }   /* app.css: * {color:#000} — вложенный span в серой строке должен наследовать */
.promo24__title{
  font-size:2.22222vw; line-height:1.2; font-weight:400; color:#000; margin:0 0 1.5rem;
}
.promo24__price{
  display:flex; flex-wrap:wrap; align-items:baseline; margin:0 0 1.25rem;
}
.promo24__new{
  font-size:5.55556vw; line-height:.95; font-weight:700; letter-spacing:-.02em; word-spacing:-.12em;
  color:#000; white-space:nowrap; margin-right:.5rem;
}
/* word-spacing поджимает разрядный пробел в «2 400»; знак валюты — с нормальным зазором */
.promo24__cur{ margin-left:.08em; }
.promo24__unit{
  font-size:1.66667vw; line-height:1.2; color:#000; white-space:nowrap; margin-right:1.25rem;
}
.promo24__old{
  position:relative; font-size:1.94444vw; line-height:1.2; color:#9c9c9c; white-space:nowrap; padding:0 .1em;
}
.promo24__old s{ text-decoration:none; color:inherit; }   /* штатное line-through не нужно: своя линия ниже */
/* зачёркивание — оранжевая линия чуть под наклоном */
.promo24__old:after{
  content:""; position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px;
  background:#ee5e3e; transform:rotate(-6deg); border-radius:1px;
}
.promo24__text{
  font-size:1.11111vw; line-height:1.52778vw; color:#000; margin:0 0 1.75rem; max-width:34vw;
}
.promo24__actions{
  display:flex; flex-wrap:wrap; align-items:center; margin:0 0 1.5rem;
}
.promo24__actions .btn{ margin:0 1.5rem .5rem 0; text-align:center; }
.promo24__terms{
  display:inline-block; font-size:1.11111vw; line-height:1.4; color:#000; margin:0 0 .5rem;
  border-bottom:1px solid #b9babc; transition:color .3s, border-color .3s;
}
.promo24__terms:hover{ color:#ee5e3e; border-color:#ee5e3e; }
.promo24__terms:active{ color:#cd3412; border-color:#cd3412; }
.promo24__note{
  font-size:0.90278vw; line-height:1.4; color:#9c9c9c; margin:0;
}
.promo24__note span{ color:inherit; }
/* клавиатурный фокус внутри попапа (app.css глобально гасит outline) —
   отдельные правила, чтобы старый браузер без :focus-visible не отбросил соседей */
.promo24__cta:focus-visible{ box-shadow:0 0 0 3px #fff, 0 0 0 5px #ee5e3e; }
.promo24__terms:focus-visible{ outline:2px solid #ee5e3e; outline-offset:3px; }
.modal.custom-modal.promo24 a.close-modal:focus-visible{ outline:2px solid #ee5e3e; outline-offset:-2px; border-radius:4px; }

/* ═══════════════ ≤1279: фиксированные размеры (карточка 560px) ═══════════════
   Ниже 1280 vw-размеры от 1440 мельчают (текст 11 px @1024) — переходим на px;
   при 1280→1279 значения почти совпадают (текст 14.2→15, заголовок 28→26). */
@media (max-width:1279px){
  .modal.custom-modal.promo24{ max-width:560px; border-radius:10px; padding:2.25rem 2.25rem 2rem; }
  .promo24__kicker{ font-size:12px; }
  .promo24__title{ font-size:26px; }
  .promo24__new{ font-size:64px; }
  .promo24__unit{ font-size:20px; }
  .promo24__old{ font-size:22px; }
  .promo24__text{ font-size:15px; line-height:22px; max-width:100%; }
  .promo24__terms{ font-size:15px; }
  .promo24__note{ font-size:12px; }
  /* штатная .btn до 620px остаётся во vw от 1440 и на планшете мельчает — фиксируем */
  .promo24__actions .btn{ font-size:15px; line-height:20px; padding:12px 32px; border-radius:50px; }
}

/* ═══════════════ МОБАЙЛ ≤620 (штатный брейкпоинт app.css): карточка на всю
   ширину (поля 16px даёт padding блокера), кнопка во всю ширину ═══════════════ */
@media (max-width:620px){
  .modal.custom-modal.promo24{ padding:1.75rem 1.25rem 1.5rem; }
  .modal.custom-modal.promo24 a.close-modal{ top:.5rem; right:.5rem; width:2.25rem; height:2.25rem; background-size:1rem 1rem; }
  .promo24__kicker{ font-size:11px; letter-spacing:.08em; margin-bottom:.625rem; padding-right:2.5rem; }
  .promo24__kicker-item{ display:block; }      /* две строки вместо переноса посреди фразы */
  .promo24__kicker-sep{ display:none; }
  .promo24__title{ font-size:24px; margin-bottom:1.125rem; }
  .promo24__price{ margin-bottom:1rem; }
  .promo24__new{ font-size:56px; margin-right:.375rem; }
  .promo24__unit{ font-size:18px; margin-right:.875rem; }
  .promo24__old{ font-size:20px; }
  .promo24__text{ font-size:15px; line-height:22px; margin-bottom:1.375rem; }
  .promo24__actions{ margin-bottom:1.125rem; }
  .promo24__actions .btn{ display:block; width:100%; margin:0 0 .875rem; padding:14px 16px; font-size:16px; line-height:20px; }
  .promo24__terms{ font-size:15px; margin:0; }
  .promo24__note{ font-size:12px; margin-top:.25rem; }
}

/* ═══════════════ УЗКИЙ МОБАЙЛ ≤479 ═══════════════ */
@media (max-width:479px){
  .promo24__new{ font-size:15vw; }        /* 58px @390, 48px @320 */
  .promo24__title{ font-size:22px; }
}

/* ═══════════════ НИЗКИЙ ЭКРАН (ландшафт телефона: 844×390, 667×375) ═══════════
   Ужимаем вертикальные отступы и цифру, чтобы карточка целиком помещалась в окно;
   если всё же не влезла — блокер прокручивается (overflow:auto у .blocker). */
@media (max-height:480px){
  .modal.custom-modal.promo24{ padding:1.25rem 1.5rem 1rem; }
  .promo24__kicker{ margin-bottom:.5rem; }
  .promo24__title{ font-size:20px; margin-bottom:.625rem; }
  .promo24__price{ margin-bottom:.625rem; }
  .promo24__new{ font-size:44px; }
  .promo24__unit{ font-size:16px; }
  .promo24__old{ font-size:18px; }
  .promo24__text{ font-size:14px; line-height:20px; margin-bottom:.875rem; }
  .promo24__actions{ margin-bottom:.625rem; }
  .promo24__actions .btn{ display:inline-block; width:auto; margin:0 1.25rem .375rem 0; padding:10px 24px; font-size:14px; line-height:20px; }
  .promo24__terms{ font-size:14px; }
  .promo24__note{ font-size:11px; margin-top:0; }
}