/* Home devices (builder A3, boxes by FX-S 11 Nov): row 2 the career line, row 3 the scenario cards, row 5 "What can you expect?".
   Linked in the head by sec_devices.py. Every selector carries its section class so base.css's resets (ol[class], ul[class]) never win.
   No section here is text on a hairline: the career stops and the four expectations are BOXES (DeFazio's device); the only line left is the
   short progress bar that rides the foot of the pinned career band. */

/* ---------------------------------------------------------------- row 2: the career line (navy band, a box per stop) */
/* W2-A, planner C3: no pin. The four legal roles are ONE row of four equal boxes (1100 px and up), a 2 x 2 grid from 768, and on phones a swipe row
   (native scroll-snap, 80 vw boxes, the next one peeking). The school line sits under the lead. Boxes in a grid share one height; the years are sized
   so "2014 to present" holds one line in a box at every width, so the four role lines start level. */
.career { --box: #224a63; background: var(--navy); color: #fff; padding: 50px 0 56px; }   /* white on --box 9.4:1; mist note 7.6:1 */
.career .career__lead { margin-top: 20px; max-width: 640px; }
.career .career__figures { margin: 22px 0 0; max-width: 780px; font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: 0.025em; font-weight: 600; color: #fff; }
.career .career__figures + .career__earlier { margin-top: 10px; }
.career .career__earlier { margin: 22px 0 0; max-width: 780px; font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: 0.025em; color: var(--mist); }
.career .career__view { margin-top: 32px; }
.career .career__track { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.career .stop { display: flex; flex-direction: column; gap: 14px; padding: 28px 24px; background: var(--box); color: #fff; }
.career .stop__year { margin: 0; font-weight: 200; font-size: clamp(30px, 8vw, 34px); line-height: 1.1; letter-spacing: -0.04em; color: #fff; overflow-wrap: anywhere; }
.career .stop__what { margin: 0; color: #fff; }
.career .stop__note { margin-top: 10px; font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: 0.025em; color: var(--mist); }

/* phones: the swipe row */
@media (max-width: 767px) {
  .career .career__view { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .career .career__track { display: flex; width: max-content; gap: 12px; padding-inline: var(--gutter); }
  .career .stop { flex: 0 0 min(80vw, 330px); scroll-snap-align: start; }
  .career .stop[data-anim] { opacity: 1; transform: none; animation: none; }   /* boxes off screen to the right are never left hidden waiting to scroll in */
}
@media (min-width: 768px) {
  .career { padding: 80px 0 90px; }
  .career .career__view { margin-top: 48px; padding-inline: var(--gutter); }
  .career .career__track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
  .career .stop { padding: 32px 28px 36px; }
  .career .stop__year { font-size: clamp(30px, 3.6vw, 38px); }
}
@media (min-width: 1100px) {
  .career { padding: 100px 0 110px; }
  .career .career__track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .career .stop { padding: 36px 24px 40px; }
  .career .stop__year { font-size: clamp(22px, 2.1vw, 34px); }
}

/* ---------------------------------------------------------------- row 3: "Why You Might Be Here" */
.flow { padding: 50px 0 60px; background: #fff; overflow-x: clip; }
.flow .flow__lead { margin-top: 18px; max-width: 640px; }
.flow .flow__stage { margin-top: 34px; overflow: hidden; }
.flow .flow__row { display: grid; gap: var(--gap); margin: 0; padding: 0 var(--gutter); list-style: none; }
.flow .flow__card { display: flex; background: var(--mist); color: var(--navy); }
.flow .flow__body { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; width: 100%; padding: 28px 24px 24px; }
.flow .flow__more { margin: 0; }
/* the side cards are scaled to 88%, 76% and 64% (the sixth card sits three places out): the link is 40 px high so even the smallest still measures 24 px or more (40 x .64 = 25.6) */
.flow .flow__more .link-small { display: inline-flex; align-items: center; min-height: 40px; padding-bottom: 0; }
.flow .flow__card.is-active { background: var(--navy); color: #fff; }
.flow .flow__card.is-active .link-small { color: #fff; }
.flow .flow__card.is-active :focus-visible { outline-color: var(--gold); }
@media (min-width: 768px) { .flow .flow__row { grid-template-columns: 1fr 1fr; } }

/* live (JS): one stacked cell, every card placed by transform */
.flow.is-live .flow__row { --flow-w: min(520px, 76vw); grid-template-columns: var(--flow-w); justify-content: center; padding: 6px 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.flow.is-live .flow__card { grid-area: 1 / 1; min-height: 330px; cursor: pointer; will-change: transform; transition: transform 0.6s var(--ease-out); }
.flow.is-live .flow__card.is-active { cursor: auto; }
.flow.is-live .flow__card.is-jump { transition: none; }
@media (min-width: 850px) {
  .flow.is-live .flow__card { min-height: 400px; }
  .flow .flow__body { padding: 36px 36px 32px; }
}
@media (prefers-reduced-motion: reduce) { .flow.is-live .flow__card { transition: none; } }

.flow .flow__ctrl { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 26px; }
.flow .flow__ctrl[hidden] { display: none; }
.flow .flow__btn { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--navy); background: transparent; color: var(--navy); cursor: pointer; transition: background-color 0.2s; }
.flow .flow__btn:hover { background: var(--mist); }
.flow .flow__count { min-width: 56px; margin: 0; text-align: center; color: var(--slate-ink); }
.flow .flow__close { display: grid; justify-items: start; gap: 14px; margin-top: 52px; }
.flow .flow__close-line { max-width: 640px; }
.flow .flow__close p { margin: 0; }
.flow .flow__close .flow__close-line2 { max-width: 640px; }
.flow .flow__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }      /* the profile page keeps both of his buttons under the cards */
@media (min-width: 850px) {
  .flow { padding: 100px 0 110px; }
  .flow .flow__stage { margin-top: 56px; }
  .flow .flow__close { margin-top: 80px; }
}

/* ---------------------------------------------------------------- row 5: "What can you expect?" (four mist boxes) */
.expect { padding: 50px 0 56px; background: #fff; }
.expect .expect__lead { margin-top: 18px; max-width: 640px; }
.expect .expect__grid { margin: 36px 0 0; padding: 0; list-style: none; display: grid; gap: var(--gap); grid-auto-rows: 1fr; }
/* resting state: navy on mist (10.6:1); devices.js turns each box navy with white text as it crosses the viewport centre (white on navy 13.2:1) */
.expect .expect__box { display: flex; flex-direction: column; gap: 18px; padding: 32px 28px; background: var(--mist); color: var(--navy); will-change: transform; }
.expect .expect__title, .expect .expect__line { margin: 0; color: inherit; }
@media (min-width: 480px) { .expect .expect__box { padding: 40px; } }
@media (min-width: 850px) {
  .expect { padding: 100px 0 110px; }
  .expect .expect__grid { margin-top: 64px; }
}
@media (min-width: 1024px) { .expect .expect__grid { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .expect .expect__box { will-change: auto; } }