/* Accentri - Change & Adoption: framework board and steps */

/* ==========================================================================
   Board - hard side / connector / soft side
   ========================================================================== */
.board {
  display: grid;
  grid-template-columns: 1fr 0.8fr 1fr;
  gap: 1.75rem;
  align-items: start;
}
.board__col { display: flex; flex-direction: column; gap: 0.625rem; }
.board__head { margin-bottom: 0.375rem; }
.board__side {
  margin-bottom: 0.375rem;
  font-family: var(--font-text);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.board__col--hard .board__side { color: var(--hard); }
.board__col--soft .board__side { color: var(--soft); }
.board__prompt { font-family: var(--font-display); font-size: 1.1875rem; color: var(--faint); }

.board__col--soft .disclose { border-color: var(--soft-line); border-left-color: var(--soft); }

/* ---- Connector --------------------------------------------------------- */
.connector { display: flex; flex-direction: column; align-items: center; gap: 1.375rem; padding-top: var(--sp-2); }
.connector__objectives {
  width: 100%;
  padding: var(--sp-5) 1.375rem;
  border: 1px solid var(--line-mid);
  background: var(--surface);
  text-align: center;
}
.connector__objectives-title { margin-bottom: 0.3125rem; font-family: var(--font-display); font-size: 1.4375rem; color: var(--ink); }
.connector__objectives-sub { font-size: 0.8125rem; color: var(--faint); }

.connector__spine { display: flex; flex-direction: column; align-items: center; width: 100%; }
.connector__line { width: 1px; height: 1.75rem; background: var(--line-strong); }
.connector__hybrid {
  width: 100%;
  padding: 1.375rem 1.25rem;
  background: var(--green);
  color: var(--on-green);
  text-align: center;
}
.connector__hybrid-name { display: block; margin-bottom: 0.4375rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: var(--track-mark); }
.connector__hybrid-role { display: block; margin-bottom: 0.1875rem; font-size: 0.78125rem; color: rgba(247, 244, 238, 0.85); }
.connector__hybrid-verb { display: block; font-family: var(--font-display); font-style: italic; font-size: 1.125rem; }

.connector__equation {
  display: flex;
  flex-direction: column;
  gap: 0.5625rem;
  width: 100%;
  padding: var(--sp-5) 1.375rem;
  border: 1px solid var(--line-mid);
  font-family: var(--font-display);
  text-align: center;
}
.connector__equation span { font-size: 1.25rem; color: var(--ink); }
.connector__equation .op { color: var(--faint); }
.connector__equation .result { font-size: 1.375rem; color: var(--green); }
.connector__equation hr { height: 1px; margin: 0; border: 0; background: var(--line); }

/* ==========================================================================
   Footnote
   ========================================================================== */
.board-note {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2.25rem;
  align-items: center;
  padding-top: 1.625rem;
  border-top: 1px solid var(--line);
}
.board-note p { font-size: 0.90625rem; line-height: 1.62; color: var(--body); max-width: 72ch; }
.board-note strong { color: var(--green); font-weight: 600; }
.board-note__terms { font-size: 0.71875rem; color: var(--faint); }

/* ==========================================================================
   Steps page - list beside a sticky levels rail
   ========================================================================== */
.steps-layout {
  display: grid;
  grid-template-columns: 1.35fr 0.95fr;
  gap: var(--sp-8);
  align-items: start;
}
.steps-layout__aside { position: sticky; top: calc(var(--header-h) + 2.125rem); }
.steps-title { margin-block: var(--sp-2) 1.375rem; font-size: var(--fs-serif-lg); }
.levels-title { margin-block: var(--sp-2) var(--sp-3); font-size: 1.875rem; line-height: 1.1; }
.levels-note { margin-bottom: 1.375rem; font-size: 0.90625rem; line-height: 1.62; color: var(--body); }
.levels { display: flex; flex-direction: column; gap: var(--sp-2); }

/* ==========================================================================
   Responsive - the board cannot compress to three columns on a tablet, so it
   stacks. Hard side, connector, soft side keeps the reading order intact.
   ========================================================================== */
@media (max-width: 62.5rem) {
  .board { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .connector { padding-top: 0; }
  .connector__hybrid { max-width: 22rem; margin-inline: auto; }
  .connector__line { height: 1.25rem; }
  .steps-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .steps-layout__aside { position: static; }
}

@media (max-width: 46rem) {
  .board-note { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
}