/* ==========================================================================
   S9 GAME — about.css
   ========================================================================== */

.story {
  display: grid;
  gap: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
.story__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-hair);
  box-shadow: var(--shadow-card-lg);
}
.story__media img { width: 100%; height: auto; display: block; }
.story__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(11, 5, 7, 0.6));
  pointer-events: none;
}

/* Milestone timeline */
.timeline {
  position: relative;
  padding-inline-start: 2.4rem;
}
.timeline::before {
  content: '';
  position: absolute;
  inset-inline-start: 9px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--color-gold), rgba(201, 162, 75, 0.06));
}
.milestone {
  position: relative;
  padding-bottom: var(--sp-7);
}
.milestone:last-child { padding-bottom: 0; }
.milestone::before {
  content: '';
  position: absolute;
  inset-inline-start: -2.4rem;
  top: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(145deg, #33161D, #150A0D);
  border: 2px solid var(--color-gold);
  box-shadow: 0 0 0 5px rgba(11, 5, 7, 1), var(--shadow-glow-maroon);
}
.milestone__year {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: 0.2em;
  color: var(--color-gold);
  margin-bottom: 0.4rem;
}
.milestone__title { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.milestone__text { font-size: var(--fs-sm); }

/* Trust badge grid */
.trust-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.trust {
  text-align: center;
  padding: clamp(1.2rem, 1rem + 1vw, 1.75rem) 1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--color-border);
  background: var(--grad-surface);
  transition: border-color var(--dur-base), transform var(--dur-base) var(--ease-out-soft);
}
.trust:hover { border-color: var(--color-border-hair-2); transform: translateY(-4px); }
.trust__icon {
  width: 46px;
  height: 46px;
  margin: 0 auto var(--sp-3);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(122, 17, 40, 0.5), rgba(36, 16, 21, 0.9));
  border: 1px solid var(--color-border-hair);
  color: var(--color-gold);
}
.trust__icon svg { width: 22px; height: 22px; }
.trust__title {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 0.3rem;
}
.trust__text { font-size: var(--fs-xs); color: var(--color-text-muted); }

/* Values list */
.values { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
.value {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--color-border-soft);
}
.value:last-child { border-bottom: 0; padding-bottom: 0; }
.value__num {
  flex: none;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  min-width: 2.6rem;
}
.value__title { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.value__text { font-size: var(--fs-sm); }

@media (min-width: 768px) {
  .trust-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-7); }
  .value { border-bottom: 0; padding-bottom: 0; }
}
@media (min-width: 1024px) {
  .story { grid-template-columns: 1.05fr 0.95fr; }
  .story--flip .story__media { order: 2; }
  .story--flip .story__body { order: 1; }
}