/* ============================================================
   Components — buttons, entries, cards, tags
   ============================================================ */

/* ---- buttons -----------------------------------------------
   Mono uppercase is reserved for metadata. Interface controls
   speak in the body face, sentence case, on a pill — the shape
   language of the surrounding light surfaces.
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 12px 26px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn:active { transform: translateY(0); }
.btn .arrow { transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--selection-ink);
}
.btn--primary:hover {
  background: var(--btn-primary-hover);
  border-color: var(--btn-primary-hover);
}

/* ---- entry: the workhorse record row -----------------------
   Mono date rail on the left, content on the right, hairline
   between rows. Used for education, roles, publications.
   ----------------------------------------------------------- */
.entry {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: var(--s-5);
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.entry:first-of-type { padding-top: 0; }
.entry__date { color: var(--muted); padding-top: 5px; }
.entry__title {
  font-size: var(--t-h3);
  font-weight: 550;
  margin-bottom: var(--s-2);
}
.entry__title .loc { color: var(--muted); font-weight: 400; }
.entry__meta {
  color: var(--ink-soft);
  font-size: var(--t-small);
  margin-bottom: var(--s-4);
}
.entry__meta strong { color: var(--accent-text); font-weight: 600; }
/* Accent is reserved for a result, not for every venue line. */
.entry__meta--accent { color: var(--accent-text); }
.entry__body { color: var(--ink-soft); max-width: var(--w-text); }
.entry__body p + p { margin-top: var(--s-3); }

.entry__list {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  color: var(--ink-soft);
  max-width: var(--w-text);
}
.entry__list li {
  position: relative;
  padding-left: var(--s-5);
  margin-bottom: var(--s-3);
}
.entry__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.68em;
  width: 5px; height: 5px;
  background: var(--accent);
  transform: rotate(45deg);
}

/* tablet: narrower date rail so the record still reads as two columns */
@media (min-width: 768px) and (max-width: 1023px) {
  .entry { grid-template-columns: 7rem 1fr; gap: var(--s-4); }
}
@media (max-width: 767px) {
  .entry { grid-template-columns: 1fr; gap: var(--s-2); padding: var(--s-5) 0; }
  .entry__date { padding-top: 0; }
  .entry__title { margin-top: var(--s-2); }
}

/* ---- key/value row ---------------------------------------- */
.kv {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: var(--s-4);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule-soft);
}
.kv__v { color: var(--ink-soft); font-size: var(--t-small); }
@media (max-width: 767px) { .kv { grid-template-columns: 1fr; gap: var(--s-2); } }

/* ---- cards -------------------------------------------------
   Surfaces, not a uniform grid: sizes vary by content weight.
   ----------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  padding: clamp(var(--s-5), 2.4vw, var(--s-7));
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.card::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent 55%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.card:hover::before { transform: scaleX(1); }

.card__num { color: var(--accent-text); margin-bottom: var(--s-4); }
.card__title { font-size: var(--t-h3); font-weight: 550; margin-bottom: var(--s-3); }
.card__body { color: var(--ink-soft); font-size: var(--t-small); line-height: 1.7; }
.card .tags { margin-top: auto; padding-top: var(--s-6); }

/* grids that break the "three equal boxes" default */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
}
/* editorial bento: first card spans wide, rest fill beneath */
.grid-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-5);
}
.grid-bento > *              { grid-column: span 2; }
.grid-bento > .is-wide       { grid-column: span 4; }
.grid-bento > .is-full       { grid-column: 1 / -1; }

@media (max-width: 1023px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-bento { grid-template-columns: repeat(2, 1fr); }
  .grid-bento > *, .grid-bento > .is-wide { grid-column: span 1; }
  .grid-bento > .is-full { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .grid-3, .grid-2, .grid-bento { grid-template-columns: 1fr; gap: var(--s-4); }
  .grid-bento > *, .grid-bento > .is-wide { grid-column: 1 / -1; }
}

/* ---- tags -------------------------------------------------- */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-5);
  padding: 0;
  list-style: none;
}
.tag {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.tag:hover { border-color: var(--rule-strong); color: var(--ink); }
.tag--accent { border-color: var(--accent-deep); color: var(--accent-text); }

/* ---- medal row: coached results ---------------------------- */
.medals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--rule-soft);
}
.medal__value {
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.1rem);
  font-weight: 550;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: var(--s-3);
}
.medal--gold   .medal__value { color: #E3C06B; }
.medal--silver .medal__value { color: #C3C9D1; }
.medal__body { color: var(--muted); }
@media (max-width: 1023px) { .medals { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-5); } }
@media (max-width: 479px) { .medals { gap: var(--s-5) var(--s-4); } }

/* ---- banner image ------------------------------------------ */
.banner {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-card);
  position: relative;
}
.banner img { width: 100%; }
@media (max-width: 639px) {
  .banner figcaption { position: static; padding: var(--s-3) 0 0; background: none; }
  .cta__title { max-width: none; }
}
.banner figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--s-6) var(--s-5) var(--s-4);
  background: linear-gradient(transparent, var(--scrim));
  color: rgba(255, 255, 255, 0.82);
}

/* ---- contact rail ------------------------------------------ */
.contact {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-6);
}
.contact__row {
  padding: var(--s-5) 0;
  border-top: 1px solid var(--rule);
}
.contact__value { font-size: var(--t-h3); font-weight: 550; margin-top: var(--s-3); }
@media (max-width: 639px) { .contact { grid-template-columns: 1fr; gap: 0; } }

/* ---- closing call ------------------------------------------ */
.cta {
  margin-top: var(--s-section);
  padding: clamp(var(--s-8), 6vw, var(--s-9)) clamp(var(--s-5), 4vw, var(--s-8));
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  text-align: center;
}
.cta .hero__actions { justify-content: center; }
.cta__title {
  font-size: var(--t-h1);
  font-weight: 600;
  letter-spacing: var(--track-display);
  margin: var(--s-4) auto var(--s-6);
  max-width: 22ch;
}
:root[data-lang="cn"] .cta__title { letter-spacing: 0.04em; }

/* ---- small note under a stat ------------------------------
   Exists so the markup needs no style attribute, which the
   site's style-src CSP forbids.
   ----------------------------------------------------------- */
.stat__note {
  margin-top: var(--s-2);
  color: var(--ink-soft);
  font-size: var(--t-small);
  line-height: 1.55;
  max-width: 26ch;
}