/* For trainers hub (pages/for-trainers.html, 18 Sep 2026). Linked from that page only; scoped to main.ft.
   Upwork "Find work" rhythm on WisdomHub tokens: hero + one proof band, four equal step tiles, one tools row
   (Programme Builder, Open briefs board), credits, navy closing band. Every value maps to css/styles.css.
   Components are the site's own (.card, .belief, .panel, .band-navy, .icon-tile, .step__num); nothing hand-built. */

/* Full-bleed white panels sit straight after a canvas section; the shared .panel top margin is for pages whose hero has no bottom padding. */
.ft .panel       { margin-top: 0; }
.ft .panel .card { border: 1px solid var(--border); }   /* ring shadow vanishes on white, same edge the panel gives .belief */
.ft .panel .card.link-card:hover { border-color: var(--primary); }

/* "Who it is for": second half of the proof band. Lead on the left, three qualifications as a list on the right (launch home .why-us split). */
.ft-who          { display: grid; gap: 2rem; margin-top: 4rem; padding-top: 3rem; border-top: 1px solid var(--border); }
@media (min-width: 1024px) { .ft-who { grid-template-columns: 4fr 8fr; gap: 3rem; } }
.ft-who__list    { list-style: none; margin: 0; padding: 0; }
.ft-who__list li { padding-block: 1.25rem; border-top: 1px solid var(--border); }
.ft-who__list li:first-child { padding-top: 0; border-top: 0; }
.ft-who__list li:last-child  { padding-bottom: 0; }
.ft-who__list h3 { font-size: var(--text-subheading); line-height: 1.35; }
.ft-who__list p  { margin-top: 0.375rem; color: color-mix(in oklab, var(--foreground) 70%, transparent); line-height: 1.6; max-width: 40rem; }

/* Two ways (CP 21 Sep): plain bullets, not ticks. Ticks say "done"; these are things you do. */
.ft-list         { margin: 1rem 0 0; padding-left: 1.125rem; display: grid; gap: 0.5rem; color: var(--foreground); line-height: 1.55; }
.ft-list li::marker { color: var(--primary); }

/* What carries forward (CP 21 Sep): the site .steps-path, held vertical past 1024px so the line runs 1 -> 2 -> 3 down the
   right column; the payoff line is the section's conclusion and carries the weight the list items do not. */
.ft-carry        { margin-top: 0; }
@media (min-width: 1024px) {
  .ft-carry.steps-path       { grid-template-columns: 1fr; gap: 2rem; }
  .ft-carry.steps-path li    { padding-left: 3rem; }
  .ft-carry .step__num       { position: absolute; }
  .ft-carry.steps-path li > h3 { margin-top: 0.25rem; }
  .ft-carry.steps-path li::after { left: calc(1rem - 1px); right: auto; top: 2.5rem; bottom: -2rem; width: 2px; height: auto; }
}
.ft-carry h3     { font-size: var(--text-subheading); font-weight: 500; line-height: 1.35; }

/* 27 Sep (CP's sketch): heading on one line across the top; photo left, ladder centred beside it from 1024px;
   the payoff and the one link span the full width as the conclusion. One column below 1024px, photo 16:9. */
.ft-carry-grid   { display: grid; gap: 2rem; align-items: start; }
.ft-carry__photo { margin: 0; min-width: 0; overflow: hidden; border-radius: var(--radius-card); box-shadow: var(--shadow-card); aspect-ratio: 16 / 9; }
.ft-carry__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
@media (min-width: 1024px) {
  .ft-carry-grid   { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2rem 3rem; align-items: stretch; }
  .ft-carry__head, .ft-carry__payoff, .ft-carry__link { grid-column: 1 / -1; }
  /* Photo and ladder share one height (CP 27 Sep): 16:9 photo; the three steps spread from its top edge to its bottom edge,
     and one line drawn on the list replaces the per-item segments so it stays continuous whatever the spacing. */
  .ft-carry-grid > .ft-carry { align-self: stretch; align-content: space-between; position: relative; margin: 0; }
  .ft-carry-grid > .ft-carry::before { content: ""; position: absolute; left: calc(1rem - 1px); top: 1rem; bottom: 1rem; width: 2px; border-radius: 2px; background: var(--grey-200); }
  .ft-carry-grid > .ft-carry li::after { display: none; }
}
.ft-carry__payoff { margin-top: 0; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: var(--text-subheading); font-weight: 600; line-height: 1.5; color: var(--foreground); }
.ft-carry__link  { margin-top: -1rem; }

/* "How it works for you": four equal tiles, each a .card. One column, then two, then four. */
.ft-steps        { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .ft-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ft-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Tools row: two equal cards, Programme Builder and the board, same shape. Stacked below 1024px. */
.ft-tools        { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 1024px) { .ft-tools { grid-template-columns: 1fr 1fr; } }
.ft-tool         { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.ft-tool__media  { aspect-ratio: 16 / 9; background: var(--muted); overflow: hidden; }
.ft-tool__media img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ft-tool__body   { display: flex; flex-direction: column; flex: 1; padding: 1.5rem; }
.ft-tool__body .btn { align-self: flex-start; }

/* Closing band: inverted button on navy (sheet component); the second action is a link, so the band carries one button. */
.ft .band-navy .btn-inverted { border-color: #fff; }

/* Who it is for lead photo (27 Sep, CP "layout is odd"): landscape at every width so the lead column stays level with the list beside it. */
@media (min-width: 1024px) { .why-us__img--wide { aspect-ratio: 16 / 9; } }