/*
 * "42 years running" section
 * Figma: Desktop 70:91 + 70:96 (section y 3620–4621) · Mobile 86:68 + 86:74 (y 2860–3928)
 * The merch T-shirt/cap rises into the bottom of this section, so bottom padding is generous.
 */

.about {
  position: relative;
  container-type: inline-size;
  color: var(--text-secondary);
}

.about__inner {
  display: flex;
  flex-direction: column;
  gap: 64px;
  max-width: 1440px;
  margin-inline: auto;
  padding: 49px 23px 168px;
}

.about__story {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.about__title {
  display: flex;
  flex-direction: column;
  margin: 0;
  color: var(--text-primary);
  text-shadow: 0 3.266px 3.266px var(--shadow-text);
  text-transform: uppercase;
}

.about__text p { margin: 0; }
.about__text p + p { margin-top: 36px; }

.about__details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.about__stats {
  display: flex;
  flex-direction: column; /* phones: one stat per row */
  gap: 24px;
  margin: 0;
  text-transform: uppercase;
  text-shadow: 0 3.266px 3.266px var(--shadow-text);
}

.about__stat {
  display: flex;
  flex-direction: column-reverse; /* dt (label) first in source, shown below the value */
  align-items: flex-start;
  gap: 3px;
}

.about__stat dd,
.about__stat dt { margin: 0; }


/* js/stats.js counts up in .about__count while the hidden final value
   (.about__final) holds the width, so nothing shifts as the digits change */
.about__count-wrap { display: inline-grid; }
.about__count-wrap > * { grid-area: 1 / 1; }
.about__final { visibility: hidden; }

.about__theme { margin: 0; }
.about__theme strong { font-weight: 900; }

.about__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 100%;
  padding: 12px 24px;
  border: 2px solid var(--border-strong);
  color: var(--text-primary);
  text-align: center;
  text-decoration: none;
}

.about__button-icon {
  flex: none;
  width: 32px;
  height: 32px;
}


/* ---------- Desktop ---------- */
@media (min-width: 768px) {
  .about__inner {
    display: grid;
    grid-template-columns: minmax(0, 507px) minmax(0, 445px);
    column-gap: clamp(24px, 3vw, 44px);
    align-items: start;
    min-height: 1001px;
    /* left edge 24px at 768 → 266px at 1440 */
    padding: 46px 24px 207px calc(24px + (min(100cqi, 1440px) - 768px) * 0.36);
  }
  .about__details {
    gap: 93px;
    padding-top: 29px;
  }
  .about__stats { flex-direction: row; flex-wrap: wrap; gap: 16px 40px; }
}