/* ═══════════════════════════════════════════════════════════════════════════
   ЕДИНЫЙ CSS рекламного баннера — подключается И картой (public/index.html),
   И журналом (routes/journal.cjs). Один файл = стили не разъезжаются.
   Вёрстка 1:1 с макетом Figma 960×360; размеры в cqw/% от ширины контейнера,
   поэтому баннер одинаково корректен и в шторке карты (480px), и в журнале
   (1040px список / 720px статья). Текст рисует браузер — резкость на любом DPI.
   Правки шрифта/цветов — только здесь.
   ═══════════════════════════════════════════════════════════════════════════ */
@font-face{
  font-family:'Euclid Flex';src:url('/fonts/EuclidFlex-Medium.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}
/* ═══ Свёрстанный баннер «Народный займ» (1:1 с макетом Figma 960×360) ═══
   Все размеры — в cqw/% от ширины контейнера, поэтому баннер масштабируется
   без потери резкости: текст рисует браузер, картинкой остаётся только фото. */

.nzb{
  container-type:inline-size;
  position:relative;display:block;width:100%;
  overflow:hidden;background:#010411;text-decoration:none;
  font-family:'Euclid Flex',var(--font,-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',Roboto,sans-serif);
}
/* сцена = кадр макета без строки маркировки: 960×325 */
.nzb-stage{position:relative;display:block;width:100%;aspect-ratio:960/325;overflow:hidden;}
.nzb-photo-wrap{position:absolute;left:19.1667%;top:0;width:80.8333%;height:100%;overflow:hidden;}
.nzb-photo{width:100%;height:100%;object-fit:cover;object-position:left center;display:block;}
/* затемнение слева (Rectangle 1: #010411 → прозрачный) */
.nzb-fade{position:absolute;left:0;top:0;width:66.5625%;height:100%;
  background:linear-gradient(90deg,#010411 0%,rgba(0,10,32,0) 100%);}
.nzb-t1,.nzb-t2{position:absolute;text-transform:uppercase;line-height:1.268;
  white-space:nowrap;font-weight:500;}
.nzb-t1{color:#fff;}
.nzb-t2{color:#1EA4FF;}
.nzb-btn{position:absolute;display:flex;align-items:center;justify-content:center;
  background:#E71906;border-radius:1.6667cqw;color:#fff;font-weight:500;
  font-size:2.6042cqw;line-height:1.268;letter-spacing:0.2344cqw;text-transform:uppercase;}
/* строка маркировки (обязательна: ФЗ-38 + приказы РКН № 191/№ 68) */
.nzb-mark{position:relative;display:block;width:100%;min-height:3.6458cqw;
  background:#fff;color:#000310;font-size:2.3958cqw;line-height:1.268;
  text-transform:uppercase;padding:0.42cqw 0;}
.nzb-mark i{position:absolute;top:0.42cqw;font-style:normal;white-space:nowrap;}
.nzb-mark i:nth-child(1){left:4.5833%;}
.nzb-mark i:nth-child(2){left:21.1458%;}
.nzb-mark i:nth-child(3){left:50.2083%;}
.nzb-mark i:nth-child(4){left:74.5833%;text-transform:none;}
/* вариант 1 — «Нет денег на бензин?» */
.nzb-v1 .nzb-t1{left:4.1667%;top:12.6154%;font-size:5cqw;}
.nzb-v1 .nzb-t2{left:4.5833%;top:39.0769%;font-size:4.0625cqw;}
.nzb-v1 .nzb-btn{left:4.5833%;top:64.6154%;width:57.0833%;height:23.0769%;}
/* вариант 2 — «Бак пуст» */
.nzb-v2 .nzb-t1{left:4.5833%;top:13.5385%;font-size:4.6875cqw;}
.nzb-v2 .nzb-t2{left:4.5833%;top:35.6923%;font-size:4.6875cqw;}
.nzb-v2 .nzb-btn{left:4.5833%;top:63.3846%;width:55.4167%;height:23.0769%;}
/* Фолбэк для браузеров без container queries (Safari < 16): считаем от ширины экрана.
   Шторка на мобиле = 100vw, на desktop ограничена 480px → берём min(). */
@supports not (width:1cqw){
  .nzb-v1 .nzb-t1{font-size:min(5vw,24px);} .nzb-v1 .nzb-t2{font-size:min(4.06vw,19.5px);}
  .nzb-v2 .nzb-t1,.nzb-v2 .nzb-t2{font-size:min(4.69vw,22.5px);}
  .nzb-btn{font-size:min(2.6vw,12.5px);letter-spacing:min(.23vw,1.1px);border-radius:8px;}
  .nzb-mark{font-size:min(2.4vw,11.5px);}
}

/* ── Пульсация кнопки: постоянное «дыхание» + расходящееся кольцо ──
   Привлекает внимание к CTA, но без дёрганья: 2.6s цикл, мягкая кривая.
   ::after — кольцо, которое расходится и гаснет (как круги по воде). */
.nzb-btn{transition:background .18s ease,box-shadow .22s ease,transform .18s ease;
  animation:nzbPulse 2.6s cubic-bezier(.4,0,.6,1) infinite;will-change:transform;}
.nzb-btn::after{content:'';position:absolute;inset:0;border-radius:inherit;
  border:0.21cqw solid rgba(255,90,60,.9);animation:nzbRing 2.6s cubic-bezier(.22,1,.36,1) infinite;
  pointer-events:none;}
@keyframes nzbPulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(231,25,6,0);}
  50%{transform:scale(1.022);box-shadow:0 0.42cqw 1.9cqw rgba(231,25,6,.42);}
}
@keyframes nzbPulseHover{
  0%,100%{transform:translateY(-0.21cqw) scale(1);}
  50%{transform:translateY(-0.21cqw) scale(1.03);}
}
@keyframes nzbRing{
  0%{transform:scale(1);opacity:.85;}
  70%{transform:scale(1.09);opacity:0;}
  100%{transform:scale(1.09);opacity:0;}
}
.nzb-photo{transition:transform .5s cubic-bezier(.22,1,.36,1);}
.nzb-t2{transition:color .18s ease;}
@media (hover:hover) and (pointer:fine){
  .nzb:hover .nzb-btn{background:#FF2A12;
    box-shadow:0 0.83cqw 2.5cqw rgba(231,25,6,.45);
    animation:nzbPulseHover 1.6s cubic-bezier(.4,0,.6,1) infinite;}
  .nzb:hover .nzb-btn::after{animation-duration:1.6s;border-color:rgba(255,140,110,.95);}
  .nzb:hover .nzb-photo{transform:scale(1.035);}
  .nzb:hover .nzb-t2{color:#4FBAFF;}
  .nzb:active .nzb-btn{animation:none;transform:scale(.985);
    box-shadow:0 0.2cqw .8cqw rgba(231,25,6,.35);background:#D01505;}
}
.nzb:focus-visible{outline:0.3cqw solid #1EA4FF;outline-offset:-0.3cqw;}
@media (prefers-reduced-motion:reduce){
  .nzb-btn,.nzb-photo,.nzb-t2{transition:none;}
  .nzb-btn,.nzb-btn::after{animation:none;}
  .nzb-btn::after{display:none;}
  .nzb:hover .nzb-photo{transform:none;}
}

/* ── Маркировка на узких экранах ──────────────────────────────────────────
   В макете строка стоит по фиксированным колонкам и кегль 23px при ширине 960.
   На телефоне это даёт 8–9px — ФАС может счесть «нечитаемым», а нечитаемая
   маркировка приравнивается к отсутствующей. Поэтому ниже 560px контейнера:
   кегль не опускается ниже 11px, а колонки заменяются равномерной раскладкой,
   чтобы подросший текст не вылез за край. Плашка при этом тянется по высоте. */
@container (max-width:560px){
  .nzb-mark{
    display:flex;align-items:center;justify-content:space-between;gap:1.5%;
    min-height:0;padding:2.4% 3.2%;font-size:max(11px,2.3958cqw);line-height:1.2;
  }
  .nzb-mark i{position:static;}
}
/* совсем узкие (≤340px) — чуть плотнее, чтобы строка осталась в одну линию */
@container (max-width:345px){
  .nzb-mark{gap:1%;padding:1.6% 2.4%;letter-spacing:-.2px;}
}
/* ≤380px: в одну строку 11px уже не помещается (текст вылезал за край) —
   раскладываем маркировку в две строки 2×2. Все обязательные данные на месте,
   кегль остаётся читаемым; плашка растёт по высоте. */
@container (max-width:380px){
  .nzb-mark{display:grid;grid-template-columns:auto auto;gap:0.5% 4%;
    align-content:center;padding:2% 3.2%;letter-spacing:0;}
  .nzb-mark i{white-space:nowrap;}
  .nzb-mark i:nth-child(2n){justify-self:end;}
}


/* ═══ КОМПАКТ-ВАРИАНТ (.nzb-c) — журнал ═══════════════════════════════════════
   Вдвое ниже полного: горизонтальная композиция «текст+кнопка слева, фото справа,
   бабл «за 15 мин» по центру с носиком на кнопку». Кнопка зелёная, свечение —
   мягкий радиальный градиент (не контур-кольцо). Полный вариант карты не задет. */
.nzb-c{background:transparent;}                       /* тёмный фон только у сцены — контур под плашкой убран */
.nzb-c .nzb-stage{aspect-ratio:1040/123;background:#010411;}
.nzb-c .nzb-photo-wrap{left:auto;right:0;width:58%;}
.nzb-c .nzb-fade{width:86%;background:linear-gradient(90deg,#010411 0%,#010411 42%,rgba(1,4,17,0) 100%);}
.nzb-c .nzb-t1{left:3.4%;top:2.77cqw;font-size:2.5cqw;}
.nzb-c .nzb-t2{left:3.4%;top:6.58cqw;font-size:1.95cqw;}
.nzb-c .nzb-btn{left:36%;top:2.77cqw;width:24%;height:6.28cqw;font-size:1.35cqw;
  letter-spacing:0.14cqw;border-radius:1.1cqw;
  background:#0ACC55;                                     /* яркий зелёный */
  animation:nzbPulseC 2.6s cubic-bezier(.4,0,.6,1) infinite;}
/* градиентное свечение под кнопкой вместо кольца: размытое пятно, дышит вместе с кнопкой */
.nzb-c .nzb-btn::after{content:'';position:absolute;left:-9%;right:-9%;top:18%;bottom:-34%;
  border:none;border-radius:50%;z-index:-1;
  background:radial-gradient(ellipse at 50% 60%,rgba(10,220,90,.55) 0%,rgba(10,204,85,.25) 45%,rgba(10,204,85,0) 75%);
  filter:blur(6px);animation:nzbGlow 2.6s cubic-bezier(.4,0,.6,1) infinite;}
@keyframes nzbPulseC{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.03);}
}
@keyframes nzbGlow{
  0%,100%{opacity:.45;transform:scale(.96);}
  50%{opacity:1;transform:scale(1.05);}
}
@media (hover:hover) and (pointer:fine){
  .nzb-c:hover .nzb-btn{background:#0FE562;animation-duration:1.5s;box-shadow:none;transform:none;}
  .nzb-c:hover .nzb-btn::after{animation-duration:1.5s;}
  .nzb-c:active .nzb-btn{background:#09B84C;}
}
/* бабл «за 15 мин»: синий, с носиком, указывающим вниз-влево на кнопку */
.nzb-bubble{display:none;position:absolute;left:34.5%;top:40%;z-index:2;
  background:#1EA4FF;color:#fff;font-weight:500;font-size:1.7cqw;line-height:1;
  padding:1.05cqw 1.6cqw;border-radius:999px;white-space:nowrap;
  box-shadow:0 0.6cqw 2.2cqw rgba(30,164,255,.35);
  animation:nzbFloat 3s ease-in-out infinite;}
.nzb-bubble::after{content:'';position:absolute;left:14%;bottom:-0.85cqw;
  width:1.6cqw;height:1.6cqw;background:#1EA4FF;border-radius:0.25cqw;
  transform:rotate(52deg) skew(24deg);}   /* носик к кнопке (кнопка слева-снизу) */
@keyframes nzbFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-0.55cqw);}
}
@media (prefers-reduced-motion:reduce){
  .nzb-c .nzb-btn,.nzb-c .nzb-btn::after,.nzb-bubble{animation:none;}
}
/* компакт: планшет/мобила — баннер выше пропорционально, бабл сжимается, потом прячется */
@container (max-width:700px){
  .nzb-c .nzb-stage{aspect-ratio:1040/240;}
  .nzb-c .nzb-t1{font-size:3.2cqw;top:14%;}
  .nzb-c .nzb-t2{font-size:2.5cqw;top:36%;}
  .nzb-c .nzb-btn{left:3.4%;top:58%;width:34%;height:26%;font-size:1.9cqw;border-radius:1.6cqw;}
  .nzb-bubble{left:42%;top:22%;font-size:2.3cqw;padding:1.5cqw 2.2cqw;}
}
@container (max-width:460px){
  .nzb-c .nzb-stage{aspect-ratio:1040/300;}
  .nzb-c .nzb-photo-wrap{width:58%;}
  .nzb-c .nzb-t1{font-size:4.4cqw;top:13%;}
  .nzb-c .nzb-t2{font-size:3.4cqw;top:34%;}
  .nzb-c .nzb-btn{left:4%;top:58%;width:46%;height:25%;font-size:2.7cqw;border-radius:2.2cqw;}
  .nzb-bubble{display:none;}   /* на узких не помещается между кнопкой и фото */
}