/*
 * Our Journey page - timeline section, plus one hero override.
 * Hero, contact-cta and faq reuse existing classes from service.css
 * (a3-hero, a3-contact-cta, a3-faq) - typography/copy checked out exactly
 * against Figma so nothing else is declared for those here.
 */

/* ---------- Hero background-position fix ---------- */

/* The hero photo (corporate-office.jpg, attachment 915 - shared with
   Careers and CSR) is a corridor/kitchen shot with a floor across its
   bottom third. desktop-refinements.css forces a two-layer background-size
   of `cover, 104% 98.47%` (tuned for a DIFFERENT hero's crop, node
   78:5773) at (min-width:992px) with !important - same specificity
   class-count as a single `.a3-hero` override, so a plain one-class
   override would lose to it too. Re-stated with an extra selector segment
   for unambiguously higher specificity (same fix as the Awards page).
   Without this, the crop lands on the image's plain floor area and reads
   as a flat grey band right at the bottom edge of the hero. */
.a3-our-journey-page .a3-hero.a3-hero {
  background-size: cover !important;
  background-position: center 25% !important;
}

/* ---------- Hero heading weight ---------- */

/* service.css ships .a3-hero__heading at 700 for the pages whose Figma hero
   is Inter Bold. This page's hero (802:335) is Inter Regular 400 - same as
   the CSR hero, which csr.css overrides the same way. Unscoped by breakpoint
   on purpose: the (max-width:991px) and (max-width:767px) blocks in
   service.css only restate font-size/letter-spacing, never font-weight, so
   one declaration holds all the way down.
   NOTE: Figma also specifies 72px/91px here against the shared 60px/1.08;
   left alone deliberately - only the weight was reported as wrong. */
.a3-our-journey-page .a3-hero__heading {
  font-weight: 400;
}

/* Full type spec for the hero, from Figma 802:335: Inter Regular 72/91,
   -1.2 tracking, white. The shared rule in service.css is 60/1.08 at -1.8.
   Size/line-height/tracking are gated to desktop on purpose - service.css
   steps the heading down to 46px under 992 and 32px under 768, and this
   selector is more specific than those, so leaving it ungated would force
   72px onto phones. Weight above stays ungated: nothing restates it. */
@media (min-width: 992px) {
  .a3-our-journey-page .a3-hero__heading {
    font-size: 72px;
    line-height: 91px;
    letter-spacing: -1.2px;
  }
}

/* Figma 802:335 puts the hero standfirst at #C9CCD1, not the shared white. */
.a3-our-journey-page .a3-hero__description {
  color: #c9ccd1;
}

/* ---------- Timeline layout ----------
 * Two columns: a narrow "YEAR INDEX" rail that sticks while the article
 * column scrolls past it, and the article stack itself. The rail is pure
 * CSS position:sticky; our-journey.js only toggles the .is-active class.
 */

.a3-jrny-timeline {
  padding: 96px 0 112px;
  background: #fff;
}

/* Figma's timeline track (802:680) is 1184 wide: a 260 rail + 48 gap + an
   876 article column. The shared .container is 1320/1290, which made the
   article column 982 - 106px too wide - and since the media is sized by
   aspect-ratio off that width, the image card came out 442 tall against a
   designed 384. Everything below (padding, insets, badge positions) already
   matched Figma; this width was the whole discrepancy.
   1184 + 30 because .container carries `padding: 0 15px` (global.css). */
.a3-jrny-timeline .container {
  max-width: 1214px;
}

.a3-jrny-timeline__intro {
  max-width: 720px;
  margin-bottom: 64px;
}

.a3-jrny-timeline__heading {
  font-size: 48px;
  font-weight: 400;
  letter-spacing: -1.5px;
  color: #030303;
  margin-bottom: 16px;
}

.a3-jrny-timeline__description {
  font-size: 16px;
  line-height: 1.625;
  color: #404040;
  margin: 0;
}

.a3-jrny-timeline__layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 48px;
  /* No `align-items: start` here: the rail column must stretch to the full row
   * height, otherwise its sticky child has no travel room and never sticks. */
}

/* ---------- Sticky year index rail ---------- */

.a3-jrny-index__inner {
  position: sticky;
  top: 120px;
  border-left: 1px solid #e7eaf0;
  padding-left: 24px;
}

.a3-jrny-index__label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 28px;
}

.a3-jrny-index__nav {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.a3-jrny-index__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-decoration: none;
  color: #939393;
  transition: color 0.25s ease;
}

.a3-jrny-index__item:hover,
.a3-jrny-index__item:focus-visible {
  color: #030303;
}

.a3-jrny-index__item.is-active {
  color: #030303;
}

.a3-jrny-index__year {
  font-size: 48px;
  line-height: 1;
  letter-spacing: -1px;
  color: inherit;
}

.a3-jrny-index__num {
  font-family: Menlo, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1;
  color: inherit;
  transition: color 0.25s ease;
}

.a3-jrny-index__item.is-active .a3-jrny-index__num {
  color: #ff6900;
}

/* ---------- Article cards ---------- */

.a3-jrny-articles {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.a3-jrny-article {
  scroll-margin-top: 120px;
  background: #fff;
  border: 1px solid #e7eaf0;
  border-radius: 8px;
  /* Uniform 48. Figma insets the article's content 49px on every side
     (802:682: an 876 frame around 778 of content, header starting at y=49
     and the last block ending 49 short of the bottom) - 48px padding plus
     the 1px border above gets there exactly. This used to be 24px on top,
     which started the header 25px high and carried that offset down through
     every block in the card. */
  padding: 48px;
  transition: box-shadow 0.3s ease;
}

.a3-jrny-article.is-active {
  box-shadow: 0 4px 7.6px rgba(0, 0, 0, 0.25);
}

.a3-jrny-article__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid #e7eaf0;
}

.a3-jrny-article__eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  color: #676f7b;
  margin-bottom: 16px;
}

.a3-jrny-article__heading {
  font-size: 48px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.9px;
  color: #030303;
  margin: 0 0 12px;
}

.a3-jrny-article__subheading {
  font-size: 16px;
  line-height: 1.5;
  color: #404040;
  margin: 0;
}

.a3-jrny-article__years {
  flex-shrink: 0;
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -1px;
  margin: 0;
  white-space: nowrap;
}

.a3-jrny-article__year-start {
  color: #030303;
}

.a3-jrny-article__year-end {
  color: #939393;
}

/* ---------- Article media + floating badges ---------- */

.a3-jrny-article__media {
  position: relative;
  margin: 32px 0 0;
  border-radius: 6px;
  overflow: hidden;
  /* Figma's image card is 778x384 (802:699), i.e. 2.026:1 - not the clean
     2:1 this used to carry. At the corrected 778 content width that is the
     difference between a 389 and a 384 tall card. */
  aspect-ratio: 778 / 384;
  background: #f3f4f6;
}

.a3-jrny-article__media.is-empty {
  aspect-ratio: 5 / 1;
}

.a3-jrny-article__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.a3-jrny-article__location {
  position: absolute;
  top: 16px;
  left: 16px;
  max-width: calc(100% - 32px);
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(26, 26, 26, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: #fff;
}

.a3-jrny-article__badges {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.a3-jrny-article__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

.a3-jrny-article__badge-label {
  color: #676f7b;
}

.a3-jrny-article__badge-value {
  font-weight: 500;
  color: #030303;
}

/* ---------- Article body + accomplishments ---------- */

.a3-jrny-article__body {
  font-size: 16px;
  line-height: 1.42;
  color: #404040;
  /* 43, not 40: Figma's image card ends at y=621 and this paragraph starts
     at 664. The gap above the card (32) was already right. */
  margin: 43px 0 0;
}

.a3-jrny-article__accomplishments {
  /* Figma: body ends 709.5, this block starts 737. */
  margin-top: 28px;
  padding-top: 32px;
  border-top: 1px solid #e7eaf0;
}

.a3-jrny-article__accomplishments-heading {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  color: #676f7b;
  margin-bottom: 20px;
}

.a3-jrny-article__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.a3-jrny-article__list li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.625;
  color: #1a1a1a;
}

.a3-jrny-article__list li + li {
  margin-top: 12px;
}

.a3-jrny-article__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #1a1a1a;
}

/* ---------- Responsive ---------- */

@media (max-width: 1199.98px) {
  .a3-jrny-timeline__layout {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 32px;
  }

  .a3-jrny-index__year {
    font-size: 36px;
  }

  .a3-jrny-article__heading {
    font-size: 36px;
  }
}

@media (max-width: 991.98px) {
  .a3-jrny-timeline {
    padding: 64px 0 72px;
  }

  .a3-jrny-timeline__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  /* Rail collapses to a horizontal scroller above the stack on tablet/mobile. */
  .a3-jrny-index__inner {
    position: static;
    border-left: 0;
    border-bottom: 1px solid #e7eaf0;
    padding: 0 0 20px;
  }

  .a3-jrny-index__nav {
    flex-direction: row;
    gap: 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .a3-jrny-index__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .a3-jrny-index__year {
    font-size: 28px;
  }

  .a3-jrny-articles {
    gap: 40px;
  }

  .a3-jrny-article {
    padding: 24px 24px 32px;
  }

  .a3-jrny-article__header {
    flex-direction: column;
    gap: 12px;
  }

  .a3-jrny-article__heading {
    font-size: 30px;
  }

  .a3-jrny-article__years {
    font-size: 28px;
  }

  .a3-jrny-timeline__heading {
    font-size: 32px;
    letter-spacing: -1px;
  }
}

@media (max-width: 575.98px) {
  .a3-jrny-article__media {
    aspect-ratio: 3 / 2;
  }

  .a3-jrny-article__badge {
    padding: 5px 10px;
    font-size: 11px;
  }
}