/* PE value creation journey (#87): journey bar, handoff cards, scorecard state, journey map, answer and fact boxes.
   Markup from scripts/journey.js and scripts/build-service.js. Colours and type come from intcube.*.min.css. */

/* journey bar: breadcrumb, step badge, seven steps */
.journey-bar{background:var(--colors--white);border-bottom:1px solid var(--colors--border-stroke)}
.journey-bar__inner{display:grid;grid-template-columns:1fr auto;gap:.5rem 1.5rem;padding-top:1rem;padding-bottom:1rem}
.journey-bar__crumb{grid-column:1;margin:0;font-size:.85rem;color:var(--colors--grey)}
.journey-bar__crumb a{color:inherit}
.journey-bar__badge{grid-column:2;margin:0;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--colors--primary-orange);text-align:right}
.journey-bar__steps{grid-column:1/-1;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.375rem;list-style:none;margin:.25rem 0 0;padding:0}
.journey-bar__link{display:flex;flex-direction:column;gap:.375rem;padding-top:.625rem;border-top:4px solid var(--colors--border-stroke);color:var(--colors--black);text-decoration:none;font-size:.85rem;line-height:1.25}
a.journey-bar__link:hover,a.journey-bar__link:focus-visible{border-top-color:var(--colors--primary-orange)}
.is-done>.journey-bar__link{border-top-color:#ffb68b}
.is-current>.journey-bar__link{border-top-color:var(--colors--primary-orange);font-weight:700}
.journey-bar__link.is-soon{color:var(--colors--grey)}
.journey-bar__num{font-size:.75rem;color:var(--colors--grey);font-variant-numeric:tabular-nums}
.is-current .journey-bar__num{color:var(--colors--primary-orange)}

/* scorecard state and handoff cards */
.journey-handoff{padding-top:3rem;padding-bottom:3rem}
.journey-score{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;margin-bottom:1.5rem}
.journey-score__k{margin:0;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--colors--grey)}
.journey-score__v{margin:0;font-weight:700}
.journey-score__dims{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.journey-score__dims li{border:1px solid var(--colors--border-stroke);border-radius:999px;padding:.125rem .625rem;font-size:.8rem}
.journey-handoff__grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.journey-card{display:flex;flex-direction:column;gap:.375rem;padding:1.25rem 1.5rem;border:1px solid var(--colors--border-stroke);border-radius:var(--size--border-radius,.5rem);color:var(--colors--black);text-decoration:none;background:var(--colors--white)}
a.journey-card:hover,a.journey-card:focus-visible{border-color:var(--colors--primary-orange)}
.journey-card.is-next{text-align:right;align-items:flex-end}
.journey-card.is-soon{color:var(--colors--grey)}
.journey-card__k{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--colors--primary-orange)}
.journey-card.is-soon .journey-card__k{color:var(--colors--grey)}
.journey-card__t{font-size:1.25rem;font-weight:700;line-height:1.2}
.journey-card__d{font-size:.9rem;color:var(--colors--grey)}

/* journey map on the hub: dark band, seven stations; scrolls sideways inside itself when narrow */
.journey-map__title{margin:0 0 .75rem}
.journey-map__intro{max-width:44rem;margin:0 0 2rem}
.journey-map{overflow-x:auto;background:var(--colors--black);color:var(--colors--white);border-radius:var(--size--border-radius,.5rem);padding:2rem 1.5rem}
.journey-map__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1rem;position:relative;min-width:60rem}
.journey-map__steps::before{content:"";position:absolute;left:1.25rem;right:1.25rem;top:1.25rem;height:2px;background:#3a3a3a}
.journey-map__steps li>a,.journey-map__steps li>div{position:relative;display:flex;flex-direction:column;gap:.5rem;color:inherit;text-decoration:none}
.journey-map__num{width:2.5rem;height:2.5rem;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--colors--black);border:2px solid #3a3a3a;position:relative;z-index:1}
.is-live .journey-map__num{background:var(--colors--primary-orange);border-color:var(--colors--primary-orange);color:var(--colors--white)}
.journey-map__name{font-weight:700;line-height:1.2}
.journey-map__promise{font-size:.85rem;line-height:1.4;color:#c9c9c9}
.journey-map__meta,.journey-map__score{font-size:.75rem;color:#9a9a9a}
.journey-map__score{border-top:1px dashed #3a3a3a;padding-top:.5rem}
.journey-map a:hover .journey-map__name,.journey-map a:focus-visible .journey-map__name{color:var(--colors--primary-orange)}

/* "not legal advice" note on pages with legal topics */
.journey-disclaimer{margin:1.5rem 0 0;font-size:.85rem;line-height:1.5;color:var(--colors--grey)}
.journey-map+.journey-disclaimer{max-width:44rem}

/* answer-first and fact boxes on step pages */
.journey-answer{border-left:3px solid var(--colors--primary-orange);background:var(--colors--very-light-grey);padding:1rem 1.25rem;font-size:1.05rem;line-height:1.55}
.journey-glance{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1.5rem 0 0;padding:0}
.journey-glance div{border-top:2px solid var(--colors--black);padding-top:.625rem}
.journey-glance dt{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--colors--grey)}
.journey-glance dd{margin:.25rem 0 0}

@media screen and (max-width:767px){
  .journey-bar__inner{grid-template-columns:1fr}
  .journey-bar__badge{grid-column:1;text-align:left}
  .journey-bar__steps{grid-template-columns:1fr;gap:0}
  .journey-bar__link{flex-direction:row;align-items:center;gap:.75rem;padding:.5rem 0 .5rem .75rem;border-top:0;border-left:4px solid var(--colors--border-stroke)}
  .is-done>.journey-bar__link{border-left-color:#ffb68b}
  .is-current>.journey-bar__link{border-left-color:var(--colors--primary-orange)}
  a.journey-bar__link:hover,a.journey-bar__link:focus-visible{border-left-color:var(--colors--primary-orange)}
  .journey-handoff__grid{grid-template-columns:1fr}
  .journey-card.is-next{text-align:left;align-items:flex-start}
  .journey-map__steps{grid-template-columns:1fr;gap:1.25rem;min-width:0}
  .journey-map__steps::before{left:1.2rem;right:auto;top:1.25rem;bottom:1.25rem;width:2px;height:auto}
  .journey-map__steps li>a,.journey-map__steps li>div{display:grid;grid-template-columns:2.5rem minmax(0,1fr);column-gap:1rem;row-gap:.25rem}
  .journey-map__num{grid-row:1/span 4}
  .journey-glance{grid-template-columns:1fr}
}