/* ============================================================
   02 · Проблема — editorial-разворот: гигантские 95% + текст
   ============================================================ */

.section--problem {
  overflow: clip;
  background:
    radial-gradient(90% 60% at 8% 18%, rgba(227, 164, 41, .05), transparent 60%),
    linear-gradient(180deg, var(--bg-0) 0%, #14110C 55%, var(--bg-0) 100%);
  border-top: 1px solid var(--line);
}

/* ---------- Водяной знак «%» — контур целиком в пустом верхне-правом углу ---------- */
.section--problem__watermark {
  position: absolute;
  top: clamp(48px, 8vh, 110px);
  right: clamp(24px, 4vw, 72px);
  z-index: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(14rem, 30vw, 26rem);
  line-height: .8;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(227, 164, 41, .14);
  user-select: none;
  pointer-events: none;
}
.section--problem__watermark::after {
  content: "";
  position: absolute;
  inset: -10% -20%;
  background: radial-gradient(60% 60% at 50% 45%, rgba(227, 164, 41, .05), transparent 70%);
}

.section--problem .container { position: relative; z-index: 1; }

/* ---------- Асимметричная сетка ---------- */
.section--problem__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(48px, 7vw, 110px);
  align-items: stretch;
}

/* ---------- Левая колонна: гигантская цифра ---------- */
.section--problem__stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.section--problem__num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(8.5rem, 23vw, 21rem);
  line-height: .86;
  letter-spacing: -.04em;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-left: -.04em;
  font-variant-numeric: lining-nums;
  text-shadow: none;
}
.section--problem__num span { display: inline-block; min-width: 2.6ch; }

.section--problem__num-cap {
  margin-top: clamp(16px, 2.5vh, 28px);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  max-width: none;
}

/* ---------- Инфографика 95/5 ---------- */
.section--problem__meter {
  margin-top: clamp(48px, 6vh, 72px);
  max-width: 460px;
  width: 100%;
}
.section--problem__ticks {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 42px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}
.section--problem__ticks span {
  flex: 0 0 3px;
  height: 100%;
  background: linear-gradient(180deg, rgba(246, 196, 92, .9), rgba(169, 107, 20, .45));
}
.section--problem__ticks span:nth-child(5n) {
  height: 100%;
  background: linear-gradient(180deg, var(--gold-bright), rgba(227, 164, 41, .6));
}
.section--problem__ticks span:not(:nth-child(5n)) { height: 62%; }
.section--problem__ticks span.is-dim {
  /* 5% «отечественный» — контрастно-ivory на фоне 95 золотых штрихов,
     мягкое свечение помогает прочитать пропорцию без подписи */
  background: var(--ivory);
  height: 100%;
  margin-left: clamp(16px, 6%, 30px); /* видимый разрыв 95 | 5 */
  box-shadow: 0 0 12px rgba(242, 236, 223, .45);
}
.section--problem__meter-scale {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}
.section--problem__meter-scale .is-dim {
  color: var(--ivory-70);
  text-align: right;
  margin-right: -.16em; /* компенсация letter-spacing: край легенды ровно под тусклым штрихом */
}

/* ---------- Факт под цифрой ---------- */
.section--problem__fact {
  margin-top: auto; /* прижат к низу колонны: hairline-блок факта на одной горизонтали с низом фото */
  padding-top: 20px;
  width: 100%; /* flex-колонка ужимает p до контента — линия шла бы не на всю ширину */
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ivory-50);
  line-height: 1.9;
  max-width: 460px;
}

/* ---------- Правая колонна: текст + фото ---------- */
.section--problem__body {
  padding-top: clamp(8px, 2vw, 28px);
}
.section--problem__text {
  font-size: clamp(1.05rem, 1.25vw, 1.25rem);
  font-weight: 300;
  line-height: 1.75;
  color: var(--ivory-70);
  max-width: 52ch;
}
.section--problem__text + .section--problem__text {
  margin-top: 1.6em;
}

.section--problem__photo {
  position: relative;
  margin-top: clamp(36px, 5vh, 52px);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.section--problem__photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: saturate(.7) contrast(1.08) brightness(.72) sepia(.14);
}
.section--problem__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13, 11, 8, .25) 0%, transparent 35%, rgba(13, 11, 8, .82) 100%),
    linear-gradient(105deg, rgba(13, 11, 8, .35), transparent 45%);
  pointer-events: none;
}
.section--problem__photo figcaption {
  position: absolute;
  z-index: 1;
  left: clamp(20px, 3vw, 32px);
  right: clamp(20px, 3vw, 32px);
  bottom: clamp(18px, 2.6vw, 28px);
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.8;
  color: var(--ivory-70);
}
.section--problem__photo-mark {
  flex: none;
  width: 22px;
  height: 1px;
  background: var(--gold);
  transform: translateY(-4px);
}

/* ---------- Десктоп: текст поднят к заголовку, фото дорастает до низа колонны ---------- */
@media (min-width: 1025px) {
  .section--problem__body {
    display: flex;
    flex-direction: column;
    margin-top: clamp(-180px, -12.5vw, -128px); /* первый абзац — рядом с заголовком, мёртвая зона справа закрыта */
    padding-top: 0;
  }
  .section--problem__photo {
    flex: 1 1 auto;
    min-height: clamp(300px, 30vw, 440px);
  }
  .section--problem__photo img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }
}

/* ---------- Адаптив ---------- */
@media (max-width: 1024px) {
  .section--problem__grid {
    grid-template-columns: 1fr;
    gap: clamp(48px, 8vh, 72px);
  }
  .section--problem__num { font-size: clamp(8rem, 26vw, 15rem); }
  .section--problem__body { padding-top: 0; }
  .section--problem__fact { margin-top: clamp(40px, 6vh, 64px); } /* в одной колонне auto-прижим не нужен */
  .section--problem__watermark {
    font-size: clamp(14rem, 45vw, 22rem);
    top: auto;
    bottom: 30%;
  }
}

@media (max-width: 768px) {
  .section--problem__grid { gap: clamp(28px, 4vh, 36px); } /* факт не повисает: пауза до абзацев меньше межсекционной */
  .section--problem__meter { max-width: none; }
  .section--problem__fact {
    max-width: none;
    margin-top: clamp(36px, 5vh, 52px);
    border-top: 0;      /* линию границы уже задаёт шкала 95/5 — три hairline слипались в стек */
    padding-top: 0;
    display: flex;
    align-items: baseline;
    gap: 14px;
  }
  .section--problem__fact::before { /* золотой штрих-якорь — как у подписи фото */
    content: "";
    flex: none;
    width: 22px;
    height: 1px;
    background: var(--gold);
    transform: translateY(-4px);
  }
  .section--problem__meter { margin-top: 0; padding-top: clamp(28px, 4vh, 40px); }
  .section--problem__text { max-width: none; }
  .section--problem__photo img { aspect-ratio: 4 / 3; }
}

@media (max-width: 480px) {
  .section--problem__num { font-size: clamp(7rem, 38vw, 10rem); }
  .section--problem__ticks { height: 34px; }
  .section--problem__watermark { display: none; }
  .section--problem__photo figcaption { letter-spacing: .12em; }
}