/* ═══ 03.11 «О нас» — фото и анимация (onas.js: появление при прокрутке листа, параллакс, Ken Burns фото Елены).
   Подключается после mob.css/partnery.css. Тексты не тронуты — только обёртки. Копии до — *.bak_baraban0311. ═══ */
.onas-card { width: min(880px, 100%); }
.onas-card > p, .onas-card > h3 { max-width: 66ch; }

/* фото Елены — крупно, альбомно, имя поверх тёмной стороны кадра */
.onas .persona.persona--shir { position: relative; display: block; margin: 22px 0 0; padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; }
.persona--shir .persona-ramka { position: relative; overflow: hidden; border-radius: 16px; aspect-ratio: 16 / 9; background: #2a2622;
  box-shadow: 0 0 0 1px rgba(176, 141, 87, .32); }
.onas .persona--shir .persona-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 38% 22%;
  border-radius: 0; transform-origin: 40% 30%; }
.persona--shir .persona-ramka::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(21, 17, 14, 0) 40%, rgba(21, 17, 14, .55) 68%, rgba(21, 17, 14, .9) 100%),
              linear-gradient(0deg, rgba(21, 17, 14, .45), rgba(21, 17, 14, 0) 40%); }
.onas .persona--shir .persona-text { position: absolute; right: clamp(18px, 4%, 40px); bottom: clamp(18px, 7%, 44px); width: 38%;
  display: flex; flex-direction: column; gap: 10px; text-align: left; }
.onas .persona--shir .persona-text b { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1; letter-spacing: .01em; }
.onas .persona--shir .persona-text > span { font-size: .72rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #c9b28a; }
.onas .persona--shir .persona-text::before { content: ""; display: block; width: 46px; height: 1px; background: #c9b28a; order: 1; }
.onas .persona--shir .persona-text > span { order: 2; }
.persona--shir .persona-text b .w { font: inherit; letter-spacing: inherit; color: inherit; text-transform: none; display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.persona--shir .persona-text b .w > span { display: inline-block; font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; }

/* интерьеры между блоками */
.onas-diptih { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; margin: 26px 0 4px; }
.onas-foto { position: relative; margin: 0; overflow: hidden; border-radius: 12px; aspect-ratio: 4 / 3; background: #241c15;
  box-shadow: 0 0 0 1px rgba(176, 141, 87, .22); }
.onas-diptih .onas-foto:nth-child(2) { margin-top: 34px; }
.onas-foto img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; display: block; will-change: transform; }
.onas-foto--shir { aspect-ratio: 21 / 9; margin: 28px 0 0; }

/* «Чем мы отличаемся» — номера латунью, линия прорисовывается при появлении */
.onas .onas-trust.onas-trust--n { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; margin-top: 16px; }
.onas .onas-trust--n li { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; row-gap: 4px;
  border-top: 0; padding-top: 14px; }
.onas .onas-trust--n li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(176, 141, 87, .7), rgba(176, 141, 87, .12));
  transform-origin: 0 50%; }
.onas .onas-trust--n li:last-child { grid-column: 1 / -1; }
.onas-trust--n i { grid-row: 1 / 3; font: 500 2.1rem/1 var(--serif); font-style: normal; color: #c9b28a; font-variant-numeric: lining-nums; }
.onas-trust--n b, .onas-trust--n span { grid-column: 2; }
.onas-trust--n b { font-size: .98rem; }

@media (max-width: 640px) {
  .persona--shir .persona-ramka { aspect-ratio: 4 / 3; border-radius: 14px; }
  .onas .persona--shir .persona-photo { object-position: 30% 18%; }
  .persona--shir .persona-ramka::after { background: linear-gradient(0deg, rgba(21, 17, 14, .92) 0, rgba(21, 17, 14, .5) 32%, rgba(21, 17, 14, 0) 58%); }
  .onas .persona--shir .persona-text { left: 16px; right: 16px; bottom: 14px; width: auto; gap: 8px; }
  .onas .persona--shir .persona-text b { font-size: 1.9rem; }
  .onas .persona--shir .persona-text > span { font-size: .68rem; }
  .onas-diptih { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 22px; }
  .onas-diptih .onas-foto:nth-child(2) { margin-top: 22px; }
  .onas-foto { border-radius: 10px; }
  .onas-foto--shir { aspect-ratio: 16 / 9; }
  .onas .onas-trust.onas-trust--n { grid-template-columns: 1fr; gap: 16px; }
  .onas .onas-trust--n li { grid-template-columns: 42px minmax(0, 1fr); column-gap: 12px; }
  .onas-trust--n i { font-size: 1.8rem; }
}