/* ============================================================
   ABOUT PAGE — обо мне
   Desktop 1440 / Tablet 768 / Mobile 390

   Шапка, футер, меню и след курсора берутся из styles.css.
   ============================================================ */

.about-page{
  --muted:#7B7B7B;
  --on-grey:#7B7B7B;
}

.about-page,
.page--about,
.about-page .menu{ background:#FFFFFF; }

.page--about{ gap:0; }

/* ---------- Видео-кружок ----------
   Ведёт себя как кружок в телеграме: старт по клику, со звуком,
   по контуру идёт линия прогресса, круг слегка увеличивается
   на время проигрывания. */
.about__avatar-row{
  display:flex;
  padding:120px 80px 0 80px;
  justify-content:center;
  align-self:stretch;
}

.avatar{
  --size:268px;
  width:var(--size);
  height:var(--size);
}

.avatar__btn{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  border-radius:50%;
  /* Пружинка: круг подрастает на старте и мягко возвращается. */
  transition:transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.avatar__btn:focus-visible{
  outline:2px solid #111111;
  outline-offset:6px;
}

/* Во время проигрывания круг больше на 8%. */
.avatar.is-playing .avatar__btn{ transform:scale(1.08); }

/* Кольцо прогресса поверх видео. */
.avatar__ring{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  /* Старт линии сверху, а не справа. */
  transform:rotate(-90deg);
  overflow:visible;
  pointer-events:none;
  z-index:2;
}
.avatar__ring circle{
  fill:none;
  stroke-width:3;
  stroke-linecap:round;
}
.avatar__ring-track{ stroke:transparent; }
.avatar__ring-bar{
  stroke:#FFFFFF;
  /* 2πr при r=98 ≈ 615.75. Значения ставит about.js. */
  stroke-dasharray:603.19;
  stroke-dashoffset:603.19;
  opacity:0;
  transition:opacity .25s ease;
}
/* Линия видна только при проигрывании. */
.avatar.is-playing .avatar__ring-bar{ opacity:1; }
/* Дорожка кольца подсвечивается на время проигрывания. */
.avatar.is-playing .avatar__ring-track{ stroke:rgba(255,255,255,.28); }

.avatar__media{
  position:absolute;
  /* Отступ от кольца, чтобы линия не наезжала на кадр. */
  inset:5px;
  display:block;
  border-radius:50%;
  overflow:hidden;
  background:#D9DDDD;
  z-index:1;
}
.avatar__video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Иконка «играть» по центру, гаснет во время проигрывания. */
.avatar__play{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(17,17,17,.55);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
  z-index:3;
}
.avatar__play svg{ width:28px; height:28px; }
.avatar.is-playing .avatar__play{
  opacity:0;
  transform:translate(-50%, -50%) scale(.8);
}
.avatar__btn:hover .avatar__play{ background:rgba(17,17,17,.7); }

/* ---------- Блоки «опыт / образование / могу в» ----------
   Десктопная 12-колоночная сетка:
   опыт — 1–4, образование — 5–8, могу в — 10–12. */
.about__details{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  column-gap:20px;
  width:100%;
  padding:160px 80px 0;
  align-items:start;
}
.about__block{
  display:grid;
  grid-template-columns:max-content minmax(0, 1fr);
  column-gap:32px;
  align-items:start;
}
.about__block--exp{ grid-column:1 / 5; }
.about__block--edu{ grid-column:5 / 9; margin-top:186px; }
.about__block--skills{ grid-column:9 / 13; margin-top:360px; }
.about__block--edu .about__value{ max-width:255px; }

.about__label{
  margin:0;
  color:var(--muted);
  font-size:16px;
  font-weight:400;
  line-height:24px;
}
.about__value{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.about__item{
  margin:0;
  color:var(--text);
  font-size:16px;
  font-weight:400;
  line-height:24px;
}
.about__nowrap{ white-space:nowrap; }
.about__desktop-break{ display:block; }
.about__job-title{ display:inline; }

/* От последней базовой линии блока навыков до начала футера — 160px. */
.page--about .footer{ margin-top:154px; }

/* ============================================================
   TABLET — 768
   ============================================================ */
@media (min-width:768px) and (max-width:1023px){
  .about__avatar-row{ padding:64px 40px 0 40px; }
  .avatar{ --size:224px; }
  .avatar__play{ width:48px; height:48px; }
  .avatar__play svg{ width:24px; height:24px; }

  /* Пять колонок: заголовки начинаются с первой,
     текстовые блоки — с третьей. */
  .about__details{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    column-gap:16px;
    padding:120px 40px 0;
    row-gap:64px;
  }
  .about__block{
    display:grid;
    grid-template-columns:subgrid;
    grid-column:1 / 6;
    column-gap:16px;
    margin-top:0;
  }
  .about__label{ grid-column:1 / 3; }
  .about__value{ grid-column:3 / 6; }
  .about__block--edu .about__value{ max-width:none; }

  .about__label{ font-size:16px; line-height:24px; }
  .about__item{ font-size:16px; line-height:24px; }
  .about__value{ gap:24px; }
  .about__block--skills .about__value{ gap:12px; }

  .page--about .footer{ margin-top:160px; }
}

/* ============================================================
   MOBILE — 390
   ============================================================ */
@media (max-width:767px){
  .about__avatar-row{ padding:32px 20px 0 20px; }
  .avatar{ --size:172px; }
  .avatar__play{ width:40px; height:40px; }
  .avatar__play svg{ width:20px; height:20px; }
  .avatar__ring circle{ stroke-width:4; }

  /* Подпись над значением, всё прижато к левому краю сетки. */
  .about__details{
    display:flex;
    flex-direction:column;
    width:100%;
    padding:56px 20px 0;
    gap:40px;
  }
  .about__block{
    display:flex;
    flex-direction:column;
    width:100%;
    margin-top:0;
    align-items:flex-start;
  }
  .about__block--edu .about__value{ max-width:none; }
  .about__desktop-break{ display:none; }
  .about__nowrap{ white-space:normal; }
  .about__job-title{ display:block; }
  /* На мобильном span уже переносит должность на отдельную строку,
     поэтому дополнительный <br> не должен создавать пустую строку. */
  .about__job-title + br{ display:none; }

  .about__label{ font-size:16px; line-height:20px; }
  .about__value{ margin-top:9px; gap:12px; width:100%; }
  .about__item{ font-size:16px; line-height:20px; }

  .page--about .footer{ margin-top:96px; }
}