/* Build Digital Adoption pathway tab.
 *
 * The steps render the SAME Materials card partial the shelf renders. The
 * card stacks scope a handful of presentation tokens to the shelf's own body
 * class, so this file supplies them under the pathway's body class, as the
 * persona detail page does. It changes no card internals.
 */

.bdk-client-demo--pathway {
  /* Mirrors .bdk-client-demo--materials in material-card-2d.css. */
  --bdk-radius-card-2d: 0.375rem;
  --bdk-radius-control-2d: 0.25rem;
  /* Mirrors .bdk-client-demo--materials in material-card-2e.css. */
  --bdk-material-2e-edge: 0.55rem;
  --bdk-material-2e-soft: #f3f6f5;
  --bdk-pathway-accent: var(--bdk-color-magenta);
  --bdk-pathway-accent-ink: #8a3463;
  --bdk-pathway-teal-soft: #f2f7f6;
  --bdk-pathway-teal-line: #b8d2cf;
  --bdk-pathway-body: #4a4542;
}

/* --- Step strip under the hero ---------------------------------------- */

.bdk-pathway__stepper {
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid var(--bdk-color-border-warm);
  background: var(--bdk-color-white);
}

.bdk-pathway__stepper ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bdk-pathway__stepper a {
  display: flex;
  gap: 0.875rem;
  align-items: center;
  box-sizing: border-box;
  min-height: 4.5rem;
  height: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--bdk-color-border-warm);
  border-top: 3px solid var(--bdk-pathway-accent);
  background: var(--bdk-color-white);
  color: var(--bdk-color-ink);
  text-decoration: none;
}

.bdk-pathway__stepper a:hover,
.bdk-pathway__stepper a:focus-visible {
  border-color: var(--bdk-pathway-accent);
}

.bdk-pathway__stepper-copy {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.bdk-pathway__stepper-copy small,
.bdk-pathway__eyebrow,
.bdk-pathway__position,
.bdk-pathway__webinar-copy small,
.bdk-pathway__before-copy small {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bdk-pathway__stepper-copy small {
  color: var(--bdk-pathway-accent-ink);
}

.bdk-pathway__stepper-copy strong {
  font-family: var(--bdk-font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.25;
}

.bdk-pathway__stepper-copy span {
  color: var(--bdk-color-muted);
  font-size: 0.8125rem;
}

.bdk-pathway__number {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--bdk-pathway-accent);
  color: var(--bdk-color-white);
  font-family: var(--bdk-font-heading);
  font-size: 1.125rem;
  font-weight: 700;
}

.bdk-pathway__number--large {
  width: 3.5rem;
  height: 3.5rem;
  font-size: 1.625rem;
}

/* --- Layout ------------------------------------------------------------
 * Wide screens: the how-to row, then "Before you start" and the context
 * panels on the left with the role picker beside them, then each step
 * across the full width so its three cards sit at the Materials shelf's card
 * width. Narrow screens stack in the how-to's order.
 */

.bdk-pathway__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
  grid-template-areas:
    "howto howto"
    "before roles"
    "context roles"
    "steps steps"
    "next next";
  gap: 1.5rem 2rem;
  align-items: start;
  margin-top: 1.75rem;
}

.bdk-pathway__panel--roles {
  grid-area: roles;
}

/* --- How to use this page ------------------------------------------------ */

.bdk-pathway__howto {
  grid-area: howto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--bdk-color-border-warm);
  border-left: 4px solid var(--bdk-color-deep-teal);
  background: var(--bdk-color-white);
}

.bdk-pathway__howto h2 {
  margin: 0;
  font-family: var(--bdk-font-heading);
  font-size: 1.25rem;
  font-weight: 600;
}

.bdk-pathway__howto ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.75rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bdk-pathway__howto a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.625rem;
  align-items: start;
  color: var(--bdk-pathway-body);
  font-size: 0.875rem;
  line-height: 1.5;
  text-decoration: none;
}

.bdk-pathway__howto a strong {
  display: block;
  color: var(--bdk-color-ink);
  font-size: 0.9375rem;
}

.bdk-pathway__howto a:hover strong,
.bdk-pathway__howto a:focus-visible strong {
  color: var(--bdk-color-deep-teal);
  text-decoration: underline;
}

.bdk-pathway__howto-number {
  display: inline-flex;
  width: 1.75rem;
  height: 1.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bdk-color-deep-teal);
  color: var(--bdk-color-white);
  font-family: var(--bdk-font-heading);
  font-size: 0.875rem;
  font-weight: 700;
}

.bdk-pathway__before {
  grid-area: before;
}

.bdk-pathway__context {
  grid-area: context;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
  min-width: 0;
}

.bdk-pathway__steps {
  grid-area: steps;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  min-width: 0;
  margin-top: 1rem;
}

.bdk-pathway__next {
  grid-area: next;
}

.bdk-pathway__panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem;
  border: 1px solid var(--bdk-color-border-warm);
  background: var(--bdk-color-white);
  color: var(--bdk-color-ink);
  font-size: 0.875rem;
  line-height: 1.5;
}

.bdk-pathway__panel h2 {
  margin: 0;
  font-family: var(--bdk-font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}

.bdk-pathway__panel p,
.bdk-pathway__panel ul,
.bdk-pathway__panel ol {
  margin: 0;
}

.bdk-pathway__panel > ul:not(.bdk-pathway__roles),
.bdk-pathway__panel > ol {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding-left: 1.25rem;
}

.bdk-pathway__note {
  color: var(--bdk-color-muted);
  font-size: 0.8125rem;
}

/* --- Role picker ------------------------------------------------------- */

.bdk-pathway__panel--roles {
  border-top: 3px solid var(--bdk-color-deep-teal);
}

.bdk-pathway__panel--roles h2 {
  font-size: 1.25rem;
}

.bdk-pathway__panel--roles > p {
  color: var(--bdk-pathway-body);
}

.bdk-pathway__roles {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0;
  list-style: none;
}

.bdk-pathway__roles a {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  box-sizing: border-box;
  min-height: 3.5rem;
  padding: 0.375rem 0.625rem 0.375rem 0.375rem;
  border: 1px solid var(--bdk-color-border-warm);
  background: var(--bdk-color-white);
  color: var(--bdk-color-ink);
  font-size: 0.8125rem;
  line-height: 1.3;
  text-decoration: none;
}

/* Each persona keeps the illustration its Overview uses. */
.bdk-pathway__role-mark {
  display: flex;
  width: 3rem;
  height: 3rem;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bdk-color-surface-soft);
  color: var(--bdk-color-deep-teal);
  font-family: var(--bdk-font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  object-fit: contain;
}

.bdk-pathway__role-mark svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.bdk-pathway__role-copy {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.bdk-pathway__role-copy strong {
  font-weight: 700;
}

.bdk-pathway__role-copy small {
  color: var(--bdk-color-muted);
  font-size: 0.75rem;
}

.bdk-pathway__roles a:hover,
.bdk-pathway__roles a:focus-visible {
  border-color: var(--bdk-color-deep-teal);
  color: var(--bdk-color-deep-teal);
}

.bdk-pathway__roles a[aria-current="true"] {
  border-color: var(--bdk-color-deep-teal);
  background: var(--bdk-color-deep-teal);
  color: var(--bdk-color-white);
}

.bdk-pathway__roles a[aria-current="true"] small {
  color: rgba(255, 255, 255, 0.85);
}

.bdk-pathway__roles a[aria-current="true"] .bdk-pathway__role-mark {
  background: var(--bdk-color-white);
}

.bdk-pathway__role-advice {
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--bdk-color-border-warm);
  background: var(--bdk-color-surface-soft);
}

.bdk-pathway__role-advice strong {
  display: block;
  margin-bottom: 0.25rem;
}

.bdk-pathway__text-link {
  align-self: flex-start;
  color: var(--bdk-color-deep-teal);
  font-size: 0.8125rem;
  font-weight: 700;
}

.bdk-pathway__text-link:hover,
.bdk-pathway__text-link:focus-visible {
  color: var(--bdk-color-magenta);
}

/* --- Before you start -------------------------------------------------- */

.bdk-pathway__before {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--bdk-color-border-warm);
  background: var(--bdk-color-white);
}

.bdk-pathway__section-head {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.bdk-pathway__section-head h2 {
  margin: 0;
  font-family: var(--bdk-font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
}

.bdk-pathway__section-head p:not(.bdk-pathway__eyebrow) {
  max-width: 47.5rem;
  margin: 0;
  color: var(--bdk-pathway-body);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.bdk-pathway__eyebrow {
  margin: 0;
  color: var(--bdk-color-deep-teal);
}

.bdk-pathway__before-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bdk-pathway__before-items a {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  box-sizing: border-box;
  height: 100%;
  padding: 1rem;
  border: 1px solid var(--bdk-color-border-warm);
  border-top: 3px solid var(--bdk-pathway-accent);
  background: var(--bdk-color-surface-soft);
  color: var(--bdk-color-ink);
  text-decoration: none;
}

.bdk-pathway__before-items a:hover,
.bdk-pathway__before-items a:focus-visible {
  border-color: var(--bdk-pathway-accent);
}

.bdk-pathway__before-items img {
  flex: 0 0 auto;
  width: 3.5rem;
  height: 3.5rem;
}

.bdk-pathway__before-copy {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

.bdk-pathway__before-copy small {
  color: var(--bdk-color-muted);
}

.bdk-pathway__before-copy strong {
  font-family: var(--bdk-font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
}

.bdk-pathway__before-copy > span:not(.bdk-pathway__before-action) {
  color: var(--bdk-pathway-body);
}

.bdk-pathway__before-action {
  margin-top: 0.25rem;
  color: var(--bdk-color-deep-teal);
  font-size: 0.8125rem;
  font-weight: 700;
}

/* --- One step ---------------------------------------------------------- */

.bdk-pathway__step {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  scroll-margin-top: 1.5rem;
}

.bdk-pathway__step-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--bdk-pathway-accent);
}

.bdk-pathway__step-head > div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.bdk-pathway__eyebrow--step {
  color: var(--bdk-pathway-accent-ink);
  font-size: 0.75rem;
}

.bdk-pathway__step-head h2 {
  margin: 0;
  font-family: var(--bdk-font-heading);
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.2;
}

.bdk-pathway__step-head p:not(.bdk-pathway__eyebrow) {
  max-width: 51.25rem;
  margin: 0;
  color: var(--bdk-pathway-body);
  font-size: 1rem;
  line-height: 1.55;
}

.bdk-pathway__outcomes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.25rem;
}

.bdk-pathway__outcomes > span {
  font-size: 0.8125rem;
  font-weight: 700;
}

.bdk-pathway__outcomes ul {
  display: contents;
  list-style: none;
}

.bdk-pathway__outcomes li {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  padding: 0.3125rem 0.625rem;
  border: 1px solid var(--bdk-pathway-teal-line);
  background: var(--bdk-pathway-teal-soft);
  color: var(--bdk-color-deep-teal);
  font-size: 0.8125rem;
  font-weight: 600;
}

.bdk-pathway__outcomes svg {
  width: 0.875rem;
  height: 0.875rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bdk-pathway__guide {
  margin: 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--bdk-color-border-warm);
  background: var(--bdk-color-surface-soft);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Supports: three shelf cards per row, each under its position label. */
.bdk-pathway__supports {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 1.25rem;
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bdk-pathway__support {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.bdk-pathway__support .bdk-demo-card--material {
  min-height: 0;
  margin: 0;
}

.bdk-pathway__support.is-recommended .bdk-demo-card--material {
  box-shadow: 0 0 0 2px var(--bdk-pathway-accent);
}

.bdk-pathway__position {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  min-height: 1.5rem;
  margin: 0;
  color: var(--bdk-pathway-accent-ink);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}

.bdk-pathway__badge {
  display: inline-flex;
  padding: 0.1875rem 0.5rem;
  background: var(--bdk-pathway-accent);
  color: var(--bdk-color-white);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}

/* Worked examples sit inside the card's details; the pathway lifts them
   out because its step guides point readers to them. */
.bdk-pathway__examples {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.bdk-pathway__examples p {
  margin: 0;
  color: var(--bdk-color-muted);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bdk-pathway__examples ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bdk-pathway__examples a {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  min-height: 2.25rem;
  box-sizing: border-box;
  padding: 0.3125rem 0.5625rem;
  border: 1px solid var(--bdk-color-border-warm);
  background: var(--bdk-color-white);
  color: var(--bdk-color-deep-teal);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}

.bdk-pathway__examples a:hover,
.bdk-pathway__examples a:focus-visible {
  border-color: var(--bdk-color-deep-teal);
}

.bdk-pathway__examples svg {
  width: 0.875rem;
  height: 0.875rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bdk-pathway__examples small {
  color: var(--bdk-color-muted);
  font-size: 0.6875rem;
  font-weight: 700;
}

/* Labels are filter controls on the shelf and plain terms here. */
.bdk-pathway__support .bdk-demo-card__labels span {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--bdk-color-border-warm);
  border-radius: var(--bdk-radius-control);
  color: var(--bdk-color-muted);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
}

.bdk-pathway__support .bdk-demo-card__pillar {
  border: 0;
  background: transparent;
  cursor: default;
}

.bdk-pathway__pair {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.875rem;
  align-items: center;
  margin: 0;
  padding: 0.875rem 1.125rem;
  border: 1px dashed var(--bdk-pathway-accent);
  background: #fbf4f8;
  font-size: 0.875rem;
  line-height: 1.5;
}

.bdk-pathway__pair svg {
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: var(--bdk-pathway-accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Webinar ----------------------------------------------------------- */

.bdk-pathway__webinar {
  display: grid;
  grid-template-columns: minmax(10rem, 13.75rem) minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: center;
  padding: 0.875rem;
  border: 1px solid var(--bdk-color-border-warm);
  background: var(--bdk-color-white);
  color: var(--bdk-color-ink);
  text-decoration: none;
}

.bdk-pathway__webinar:hover,
.bdk-pathway__webinar:focus-visible {
  border-color: var(--bdk-color-deep-teal);
}

/* The recording's own YouTube still, played in the shared in-page player. */
.bdk-pathway__webinar-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--bdk-color-deep-teal);
}

.bdk-pathway__webinar-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bdk-pathway__webinar-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 89, 81, 0.28);
  transition: background 160ms ease;
}

.bdk-pathway__webinar:hover .bdk-pathway__webinar-play,
.bdk-pathway__webinar:focus-visible .bdk-pathway__webinar-play {
  background: rgba(13, 89, 81, 0.5);
}

.bdk-pathway__webinar-play svg {
  width: 2.75rem;
  height: 2.75rem;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}

.bdk-pathway__webinar-play circle {
  fill: rgba(0, 0, 0, 0.25);
  stroke: var(--bdk-color-white);
  stroke-width: 2;
}

.bdk-pathway__webinar-play path {
  fill: var(--bdk-color-white);
}

.bdk-pathway__webinar-copy {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.bdk-pathway__webinar-copy small {
  color: var(--bdk-color-deep-teal);
}

.bdk-pathway__webinar-copy strong {
  font-family: var(--bdk-font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}

.bdk-pathway__webinar-copy span {
  color: var(--bdk-color-muted);
  font-size: 0.875rem;
}

.bdk-pathway__webinar-action {
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--bdk-color-deep-teal);
  color: var(--bdk-color-deep-teal);
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
}

/* --- Next -------------------------------------------------------------- */

.bdk-pathway__next {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  background: var(--bdk-color-deep-teal);
  color: var(--bdk-color-white);
}

.bdk-pathway__next p {
  max-width: 45rem;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.bdk-pathway__next strong {
  font-family: var(--bdk-font-heading);
  font-size: 1.125rem;
}

.bdk-pathway__next div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.bdk-pathway__next a {
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--bdk-color-white);
  color: var(--bdk-color-white);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}

.bdk-pathway__next a.bdk-pathway__next-primary {
  background: var(--bdk-color-white);
  color: var(--bdk-color-deep-teal);
}

.bdk-pathway__next a:focus-visible {
  outline: 2px solid var(--bdk-color-white);
  outline-offset: 2px;
}

/* --- Narrow screens ---------------------------------------------------- */

@media (max-width: 64rem) {
  .bdk-pathway__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "howto"
      "before"
      "roles"
      "context"
      "steps"
      "next";
  }
}

@media (max-width: 48rem) {
  .bdk-pathway__stepper {
    padding: 0.75rem 1rem 1rem;
  }

  .bdk-pathway__before {
    padding: 1rem;
  }

  .bdk-pathway__step-head {
    gap: 0.875rem;
  }

  .bdk-pathway__number--large {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.25rem;
  }

  .bdk-pathway__step-head h2 {
    font-size: 1.5rem;
  }

  .bdk-pathway__webinar {
    grid-template-columns: minmax(0, 1fr);
  }

  .bdk-pathway__webinar-action {
    justify-self: start;
  }
}