/* ──────────────────────────────────────────────────────────────────────────────
   About
   The entity page. Two components live here: a split hero that is unique to this
   surface, and the track record list.

   Class names were checked against hello-elementor's theme.css and
   header-footer.css and against Elementor's frontend CSS before being used. The
   footer was rebuilt once already because .site-footer and .footer-inner are
   both owned by the parent theme; do not reintroduce a generic name here.
   ────────────────────────────────────────────────────────────────────────────── */

/* ── Split hero ────────────────────────────────────────────────────────────── */
/*
 * .about-header rides on .page-header, so the gradient, the dot field and the
 * hairline all come for free. Only the second column is new.
 */
.about-header-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(40px, 6vw, 80px) var(--space-2xl);
}

/*
 * Spacing is left to each child's own margin rather than a grid gap, so the
 * eyebrow, title and dek keep the exact rhythm they have on every other header.
 */
.about-header-copy .eyebrow {
  margin-top: var(--space-xl);
}

.about-header-copy .page-header-title {
  margin-top: var(--space-md);
}

.about-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
}

.about-header-copy .split-actions {
  margin-top: var(--space-lg);
}

.about-header-media {
  width: 100%;
  max-width: 360px;
  margin-left: auto;
}

/* ── Track record ──────────────────────────────────────────────────────────── */
/*
 * A connector line with a dot per entry rather than a grid of bordered cards.
 * The line is drawn per row and omitted on the last, so it stops at the final
 * dot instead of trailing into empty space.
 */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.timeline-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-lg);
  padding-bottom: var(--space-xl);
}

.timeline-row.is-last {
  padding-bottom: 0;
}

.timeline-line {
  position: absolute;
  left: 7px;
  top: 22px;
  bottom: 0;
  width: 1px;
  background: var(--border-hairline);
}

.timeline-row.is-last .timeline-line {
  display: none;
}

.timeline-dot {
  position: relative;
  width: 15px;
  height: 15px;
  margin-top: 4px;
  border-radius: 50%;
  border: var(--border-width) solid var(--border-strong);
  background: var(--bg-page-alt);
  flex: none;
}

/* The most recent entry is the live one, so it carries the signal. */
.timeline-row.is-current .timeline-dot {
  border-color: var(--signal);
  background: var(--signal);
  box-shadow: var(--glow-signal);
}

.timeline-copy {
  display: grid;
  gap: var(--space-xs);
}

.timeline-label {
  font-family: var(--font-mono);
  font-size: var(--step-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.5;
}

.timeline-row.is-current .timeline-label {
  color: var(--text-signal);
}

.timeline-text {
  margin: 0;
  max-width: 62ch;
  font-size: var(--step-body);
  line-height: 1.65;
  color: var(--text-body);
}

/* ── At a glance rail ──────────────────────────────────────────────────────── */
.about-rail {
  position: sticky;
  top: 92px;
  align-self: start;
}

/* Elementor wraps every widget in its own divs, and those wrappers are only as
   tall as their content. A sticky element can only travel inside its parent's
   box, so without stretching the wrappers to the full grid row the rail has
   nowhere to go and scrolls away with the prose. */
.about-rail-slot {
  align-self: stretch;
}

.about-rail-slot > .elementor-widget-container,
.about-rail-slot .elementor-shortcode {
  height: 100%;
}

.about-rail dl {
  margin: 0;
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.about-rail dt {
  font-family: var(--font-mono);
  font-size: var(--step-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.about-rail dd {
  margin: 0;
  margin-top: 3px;
  color: var(--text-primary);
  font-size: var(--step-small);
  line-height: 1.4;
}

/* The hairline that sweeps across the top of the header. */
.about-header-sweep {
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--signal) 22%, var(--signal) 78%, transparent);
  opacity: 0.45;
  animation: signal-sweep 9s var(--ease-in-out) infinite;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .about-header-sweep {
    animation: none;
  }
}

/* ── Narrow ────────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .about-header-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-rail {
    position: static;
  }

  .about-rail-slot {
    align-self: start;
  }

  .about-rail-slot > .elementor-widget-container,
  .about-rail-slot .elementor-shortcode {
    height: auto;
  }

  /* The portrait is supporting material, so it follows the copy when stacked. */
  .about-header-media {
    max-width: 280px;
    margin-left: 0;
  }
}

@media (max-width: 600px) {
  .timeline-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xs);
  }
}

/* ── Prose on About ────────────────────────────────────────────────────────── */
/*
 * .article-body is a three column grid that centres the reading measure, and it
 * is applied straight to an Elementor widget here. Inside a container that has a
 * flex gap, that gap ends up spacing the measure grid's own tracks, so the text
 * column is pushed clear of its container and the page scrolls sideways on a
 * phone. The measure grid must always draw its own tracks edge to edge.
 */
.about-prose {
  gap: 0;
  min-width: 0;
  max-width: 100%;
}