/* ═══════════════════════════════════════════════════════════════════
   About — Our Journey (Figma node 658:1936)
   ═══════════════════════════════════════════════════════════════════ */

.about-journey {
  background-color: var(--color-bg);
  padding-block: 80px;
}

.about-journey__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}

.about-journey__title {
  font-size: var(--font-size-h2);
  font-weight: 600;
  color: var(--color-dark);
  margin: 0;
  line-height: normal;
}

.about-journey__desc {
  font-size: var(--font-size-h4);
  font-weight: 400;
  color: var(--color-dark);
  margin: 0;
  line-height: normal;
}

/* ═══════════════════════════════════════════════════════════════════
   Interactive timeline (Figma 1477:2482 desktop / 1535:2429 mobile)
   Era cards + progress line scroll together as one unit, since 6 cards
   at their designed width overflow the 1200px container even on desktop
   (Figma's own connecting-line asset is wider than the content column).
   Below that: one detail panel per era, JS toggles which is visible.
   ═══════════════════════════════════════════════════════════════════ */

.about-journey__timeline-wrap {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.about-journey__timeline-scroll {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
  scrollbar-color: var(--color-primary) var(--color-beige);
}

/* ── Era cards ───────────────────────────────────────────────────── */

.about-journey__era-cards {
  display: flex;
  gap: 24px;
  width: max-content;
}

.about-journey__era-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 257px;
  height: 150px;
  flex-shrink: 0;
  padding: 16px 12px;
  background: var(--color-white);
  border: 1px solid var(--color-beige);
  border-radius: var(--radius-xl);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: box-shadow 0.2s ease;
}

.about-journey__era-card.is-active {
  box-shadow: var(--shadow-card);
}

.about-journey__era-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
}

.about-journey__era-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.about-journey__era-range {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: 16px;
  white-space: nowrap;
}

.about-journey__era-title {
  font-size: var(--font-size-body-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-dark);
  line-height: normal;
}

/* ── Progress line + dots ────────────────────────────────────────── */

.about-journey__timeline-track {
  position: relative;
  display: flex;
  width: max-content;
}

.about-journey__timeline-track::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 11px;
  height: 1px;
  background: var(--color-beige);
}

.about-journey__timeline-node {
  position: relative;
  width: 257px;
  flex-shrink: 0;
  height: 23px;
  display: flex;
  align-items: center;
}

.about-journey__timeline-node::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 11px;
  height: 1px;
  background: var(--color-primary);
  opacity: 0;
}

.about-journey__timeline-node.is-passed::before {
  opacity: 1;
}

.about-journey__timeline-dot {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-dark);
}

.about-journey__timeline-node.is-passed .about-journey__timeline-dot {
  background: var(--color-primary);
}

/* ── Detail panels ───────────────────────────────────────────────── */

.about-journey__panels {
  position: relative;
}

.about-journey__panel {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 40px;
  min-height: 470px;
  padding: 40px 50px;
  background: var(--color-white);
  border: 1px solid var(--color-beige);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-image);
  overflow: hidden;
}

/* Header-to-content gap differs by layout (Figma: single-column milestone
   lists sit further from the header than two-column ones do). */
.about-journey__panel--single {
  gap: 245px;
}

.about-journey__panel--twocol {
  gap: 90px;
}

.about-journey__panel[hidden] {
  display: none;
}

.about-journey__panel-photo {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 463px;
  height: 308px;
  z-index: 0;
}

/* Fades the photo into the card on every exposed edge. Built as gradient
   layers on the photo's own box (not an outward box-shadow) — the photo
   bleeds flush past the panel's clipped left/bottom edges, so an outward
   shadow there would have no room to render; a layer contained within the
   photo's box always stays visible regardless of that clipping. Right/bottom
   are just a thin ~5px edge softening (Figma), not a big reveal like the top. */
.about-journey__panel-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, var(--color-white) 0%, var(--color-white) 15%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(to left, var(--color-white) 0px, rgba(255, 255, 255, 0) 15px),
    linear-gradient(to top, var(--color-white) 0px, rgba(255, 255, 255, 0) 15px);
}

.about-journey__panel-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* "Illustration" variant (era 1) — a transparent-background isometric
   render, not a photo. It already blends into the card via its own alpha
   channel, so no fade overlay or crop is needed: larger box, no gradient,
   object-fit: contain so the building isn't cropped. Position/size match
   Figma's frame (left:-134/top:80/737×414.664, measured from the panel's
   border-box) converted into this element's padding-box-relative origin —
   i.e. minus the panel's own 50px/40px padding. */
.about-journey__panel-photo--illustration {
  top: 76px;
  left: -130px;
  bottom: auto;
  width: 737px;
  height: 415px;
}

.about-journey__panel-photo--illustration::after {
  display: none;
}

.about-journey__panel-photo--illustration img {
  object-fit: contain;
  object-position: left top;
}

.about-journey__panel-header {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 366px;
  flex-shrink: 0;
}

.about-journey__panel-badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: 8px 24px;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: 16px;
  white-space: nowrap;
}

.about-journey__panel-title {
  font-size: 28px;
  font-weight: var(--font-weight-bold);
  color: var(--color-dark);
  margin: 0;
  line-height: normal;
}

.about-journey__panel-desc {
  font-size: var(--font-size-body-md);
  font-weight: var(--font-weight-regular);
  color: var(--color-black);
  margin: 0;
  line-height: normal;
}

/* ── Milestone lists (shared by "single" and "twocol" layouts) ─────── */

.about-journey__milestones {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 38px;
}

/* One continuous line behind every dot in the list, overshooting slightly
   above the first dot and below the last (Figma's own per-dot line-cap
   stubs achieve the same visual result — this is the simpler equivalent).
   Colour matches Figma's Line assets (#D9D9D9) — same grey as the ring,
   not the brand red. */
.about-journey__milestones::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 24px;
  top: -12px;
  bottom: -12px;
  width: 1px;
  background: #d9d9d9;
}

.about-journey__milestone {
  position: relative;
  display: flex;
  gap: 32px;
  min-width: 0;
}

.about-journey__milestone-dot {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Grey halo ring — 58px, sits behind the 48px dot, centred so it peeks out
   5px on every side (Figma "Ellipse 12"). */
.about-journey__milestone-dot svg:first-child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.about-journey__milestone-dot svg:last-child {
  position: relative;
  z-index: 1;
}

.about-journey__milestone-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  flex: 1 1 0;
}

.about-journey__milestone-year {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: normal;
}

.about-journey__milestone-list {
  list-style: disc;
  margin: 0;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--font-size-body-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-black);
  overflow-wrap: break-word;
}

.about-journey__milestones-cols {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  gap: 28px;
}

.about-journey__milestones-cols .about-journey__milestones {
  flex: 1 1 0;
}

/* ── Capabilities list ("ALF Today" era — no dated milestones) ─────── */

.about-journey__capabilities {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
}

.about-journey__capabilities-heading {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin: 0 0 12px;
  line-height: normal;
}

.about-journey__capabilities-list {
  list-style: disc;
  margin: 0;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--font-size-body-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-black);
  line-height: 32px;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

/* .alf-container reaches its full 1200px cap exactly at 1440px (see
   main.css's gutter breakpoints); below that it keeps shrinking all the way
   down to the mobile tier, so this covers that whole range — otherwise the
   panel's desktop-only fixed offsets (single/twocol gap, illustration
   bleed) no longer fit the actual (narrower) container and start colliding
   with the milestone content. */
@media (max-width: 1439px) {
  .about-journey__panel {
    padding: 32px 40px;
    gap: 24px;
  }

  .about-journey__panel-header {
    width: 300px;
  }

  .about-journey__panel-photo {
    width: 380px;
    height: 260px;
  }

  /* Reset the illustration back to a bottom-left anchor at a scaled-down
     size — its desktop bleed (737px wide, -184px left) assumes the full
     1200px container and would overflow into the milestone list here. */
  .about-journey__panel-photo--illustration {
    top: auto;
    left: 0;
    bottom: 0;
    width: 420px;
    height: 236px;
  }

  /* Two columns splitting the header's leftover width in half leaves each
     column too narrow for its longer bullet phrases (breaking mid-word) —
     collapse to one flowing column here already, well before the panel
     itself stacks at 900px. */
  .about-journey__panel--twocol .about-journey__milestones-cols {
    flex-direction: column;
    gap: 24px;
  }
}

/* Below this, a 300px fixed header + gap alongside the milestone content
   leaves too little room for that content to stay legible (it was
   overflowing past the panel, or forced into a one-letter-per-line wrap
   once `min-width: 0` stopped the overflow) — so the panel switches to a
   stacked column layout here instead of only at the phone breakpoint. */
@media (max-width: 900px) {
  .about-journey__timeline-wrap {
    margin-top: 32px;
    gap: 32px;
  }

  /* Detail panel: photo moves below the text content, no absolute bleed */
  .about-journey__panel {
    flex-direction: column;
    align-items: stretch;
    padding: 29px 15px;
    gap: 24px;
    min-height: 0;
  }

  .about-journey__panel-header {
    order: 1;
    width: 100%;
  }

  .about-journey__milestones,
  .about-journey__milestones-cols,
  .about-journey__capabilities {
    order: 2;
  }

  /* Two-column milestones collapse to one flowing list once stacked
     (Figma mobile frames render every era's milestones in one column) */
  .about-journey__milestones-cols {
    flex-direction: column;
    gap: 24px;
  }

  .about-journey__panel-photo {
    order: 3;
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    height: 260px;
  }

  /* Illustration keeps its own fixed height (Figma: centred, 297px tall,
     wider than the card and bled/clipped left+right) instead of being
     stretched full-width and squashed to the standard photo's 260px. */
  .about-journey__panel-photo--illustration {
    left: 50%;
    transform: translateX(-50%);
    width: 528px;
    height: 297px;
  }

  .about-journey__milestone-dot {
    width: 32px;
    height: 32px;
  }

  .about-journey__milestone-dot svg:first-child {
    width: 38.667px;
    height: 38.667px;
  }

  .about-journey__milestone-dot svg:last-child {
    width: 10px;
    height: 14px;
  }

  .about-journey__milestones::before {
    left: 16px;
  }
}

@media (max-width: 600px) {
  .about-journey__title {
    font-size: 32px;
  }

  .about-journey__desc {
    font-size: 20px;
  }

  .about-journey {
    padding-block: 80px;
  }

  /* Era cards: icon-top, centered, fixed 150px (Figma 1535:2429) */
  .about-journey__era-card {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 150px;
    height: auto;
    gap: 12px;
  }

  .about-journey__era-copy {
    align-items: center;
    text-align: center;
  }

  .about-journey__timeline-node {
    width: 150px;
  }
}