/* ==========================================================================
   ComeGame — About page styles
   ========================================================================== */

.about-split {
  display: grid;
  gap: var(--space-10);
  align-items: start;
}

@media (min-width: 992px) {
  .about-split { grid-template-columns: 1.25fr 0.75fr; gap: var(--space-16); }
}

.about-aside {
  position: relative;
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-soft);
  background: var(--color-surface-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

@media (min-width: 992px) {
  .about-aside { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
}

.about-aside__title {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-5);
}

.about-aside__list { display: grid; gap: var(--space-4); }

.about-aside__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px dashed var(--color-border-soft);
  font-size: var(--fs-sm);
}

.about-aside__row:last-child { border-bottom: 0; padding-bottom: 0; }
.about-aside__row dt { color: var(--color-text-muted); }
.about-aside__row dd { color: var(--color-text-primary); font-weight: 600; text-align: right; }

/* ---- Timeline ---- */
.timeline {
  position: relative;
  display: grid;
  gap: var(--space-8);
  padding-left: var(--space-10);
}

.timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, var(--color-electric-blue), var(--color-royal-purple), transparent);
}

.timeline__item { position: relative; }

.timeline__item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-10) + 9px);
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gradient-primary);
  box-shadow: 0 0 0 4px var(--color-bg), var(--shadow-glow-blue);
}

.timeline__year {
  display: inline-block;
  margin-bottom: var(--space-2);
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-bright);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-electric-blue-bright);
}

.timeline__title { font-size: var(--fs-lg); margin-bottom: var(--space-2); }
.timeline__text { font-size: var(--fs-sm); color: var(--color-text-secondary); }

/* ---- Value cards ---- */
.value-card {
  position: relative;
  padding: var(--space-6);
  padding-left: var(--space-16);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-soft);
  background: var(--color-surface-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform var(--transition-normal), border-color var(--transition-normal);
}

.value-card:hover { transform: translateY(-5px); border-color: var(--color-border-bright); }

.value-card__num {
  position: absolute;
  left: var(--space-5);
  top: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1;
  background: var(--gradient-primary-hover);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.85;
}

.value-card__title { font-size: var(--fs-lg); margin-bottom: var(--space-2); }
.value-card__text { font-size: var(--fs-sm); color: var(--color-text-secondary); }