/* ── About page ── */

.about-main {
  display: flex;
  flex-direction: column;
  gap: 48px;
  justify-content: flex-start;
}

/* Intro: photo + text */
.about-intro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 260px;
}

.about-photo {
  width: 86px;
  height: 86px;
  border-radius: 4px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.about-intro-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}


/* About headings */
.about-heading {
  font-weight: 600;
  font-size: var(--size-h1);
  color: var(--text-primary);
  letter-spacing: var(--ls-h1);
  line-height: var(--lh-heading);
}

/* Sections container */
.about-sections {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.about-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.about-block .btn-contact {
  align-self: flex-start;
  margin-top: 16px;
}

.about-h2 {
  font-weight: 600;
  font-size: var(--size-h2);
  color: var(--text-primary);
  letter-spacing: var(--ls-h2);
  line-height: var(--lh-heading);
}

.about-body {
  font-weight: 400;
  font-size: var(--size-body);
  color: var(--text-secondary);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
}

.text-primary {
  color: var(--text-primary);
}

/* ── Timeline (desktop) ── */
.timeline {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
}

/* flex column, circle absolute left, text flush */
.timeline-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 24px;
}

.timeline-item--last {
  padding-bottom: 0;
}

/* vertical line between circles */
.timeline-item:not(.timeline-item--last)::after {
  content: '';
  position: absolute;
  left: -40px;
  top: calc(var(--size-label) * var(--lh-body) + 8px + 40px);
  bottom: calc(-1 * (var(--size-label) * var(--lh-body) + 8px));
  width: 1px;
  background-color: var(--text-secondary);
}

/* circle: absolute, to the left */
.tl-circle {
  position: absolute;
  left: -60px;
  top: calc(var(--size-label) * var(--lh-body) + 8px);
  width: 40px;
  height: 40px;
  border-radius: 1000px;
  border: 1px solid var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: var(--size-label);
  color: var(--text-primary);
  letter-spacing: var(--ls-label);
  line-height: var(--lh-body);
  background-color: var(--bg-primary);
  flex-shrink: 0;
}

/* text block inside each item */
.tl-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.timeline-date {
  font-weight: 500;
  font-size: var(--size-h3);
  color: var(--text-primary);
  letter-spacing: var(--ls-h3);
  line-height: var(--lh-heading);
}

/* ── Games ── */
.games-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.game-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.game-icon {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ── Mobile / Tablet ── */
@media (max-width: 1024px) {
  /* Intro: auto height, photo + text stacked with 20px gap */
  .about-intro {
    height: auto;
    gap: 20px;
    justify-content: flex-start;
  }

  /* Sections: tighter gap on mobile */
  .about-sections {
    gap: 20px;
  }

  /* Timeline: flex-row layout — circle left, text right */
  .timeline-item {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 24px;
  }

  .timeline-item--last {
    padding-bottom: 0;
  }

  /* circle: static in flow, not absolute */
  .tl-circle {
    position: static;
    width: 40px;
    height: 40px;
    font-size: var(--size-label);
    flex-shrink: 0;
  }

  /* text fills remaining width */
  .tl-text {
    flex: 1;
    min-width: 0;
  }

  /* vertical line: centered on 40px circle (left: 20px) */
  .timeline-item:not(.timeline-item--last)::after {
    left: 20px;
    top: 40px;    /* right at circle bottom */
    bottom: 0;    /* extends to end of padding-bottom area */
  }
}