/* Phone-only refinements (training). Every rule must sit inside @media (max-width:760px): desktop and tablet never load these rules. */

/* ===== Courses, learnerships, more, and the inside of the booking pop-up (phones) ===== */
@media (max-width:760px){

  /* ---------- filter chips: one swipeable row per set instead of a wall of wrapped chips ---------- */
  #courses .co-tools,#learnerships .ls-tools{gap:10px;margin-bottom:18px}
  #courses .co-tools,#learnerships .ls-tools{align-items:stretch;flex-wrap:nowrap}
  #courses .chip-sets{gap:8px;min-width:0;width:100%}
  #courses .chip-sets>*,#field-chips{min-width:0;max-width:none}
  #courses .chip-row,#month-chips,#field-chips,#track-chips{
    flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:0 calc(-1 * var(--gut));padding:3px var(--gut);scroll-padding-inline:var(--gut);scroll-snap-type:x proximity;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 24px),transparent);
    mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 24px),transparent)}
  #courses .chip-row::-webkit-scrollbar,#month-chips::-webkit-scrollbar,#field-chips::-webkit-scrollbar,#track-chips::-webkit-scrollbar{display:none}
  #courses .chip-row{gap:8px}
  #fmt-chips{flex-wrap:nowrap}
  #free-chips{padding-left:8px;border-left:1px solid var(--hair)}
  #courses .chip,#field-chips .chip{flex:none;scroll-snap-align:start;white-space:nowrap}
  #courses .count-note,#ls-count{text-align:left;font-size:13.5px}
  .sample-note{margin:-4px 0 18px;align-items:flex-start}
  .sample-note span{margin-top:6px}

  /* ---------- course cards ---------- */
  .courses{gap:18px}
  .free-strip{margin-bottom:24px}
  .c-foot{gap:16px}
  .c-foot .price{flex:1 1 100%}
  .c-foot .btn{flex:1 1 100%;width:100%;min-height:50px;justify-content:center}
  .c-other{align-self:center;margin-top:16px;padding:12px 4px 2px}
  #courses .pager{margin-top:28px;gap:14px}
  .co-inhouse{margin-top:24px}

  /* ---------- learnership model band: a compact numbered timeline, no blur ---------- */
  .lm-band{padding:72px 0 60px}
  .lm-head{margin-bottom:34px}
  .lm-lede{font-size:16px;line-height:1.6}
  .lm-steps{gap:10px}
  .lm-steps::before{display:block;left:35px;right:auto;top:36px;bottom:36px;width:2px;height:auto;
    background:linear-gradient(180deg,#00578A,#9CC0DA);transform:scaleY(0);transform-origin:top;transition:transform 1.2s cubic-bezier(.45,0,.2,1) .1s}
  .lm-band.in .lm-steps::before{transform:scaleY(1)}
  .lm-steps li{padding:18px 18px 18px 68px;border-radius:16px;-webkit-backdrop-filter:none;backdrop-filter:none;
    background:rgba(255,255,255,.07);transform:translateY(12px);
    transition:opacity .55s ease,transform .6s cubic-bezier(.22,1,.36,1),border-color .6s;transition-delay:calc(var(--i) * .12s + .1s)}
  .lm-steps li.pair{background:linear-gradient(160deg,rgba(0,87,138,.85),rgba(10,35,66,.75))}
  .lm-n{left:16px;top:16px;transform:none;width:38px;height:38px;font-size:14px}
  .lm-who,.lm-steps h3{text-align:left}
  .lm-who{font-size:11px;letter-spacing:.14em}
  .lm-steps h3{margin-top:4px;font-size:19px}
  .lm-steps li>p:last-child{margin-top:6px;font-size:14.5px}
  .lm-proved{margin-top:18px;padding:20px 18px;border-radius:16px;gap:16px}
  .lm-pk{letter-spacing:.24em}
  .lm-proved ul{grid-template-columns:1fr 1fr;gap:16px 18px}
  .lm-proved li{transition-delay:calc(var(--i) * .1s + .5s)}
  .lm-proved b{font-size:14.5px}
  .lm-after{padding-top:48px}

  /* who does what: narrow role columns so the task names keep room */
  .ls-grid{margin-top:0;gap:16px}
  .wdw{padding:24px 20px}
  .matrix thead th:not(:first-child){width:46px;font-size:11.5px;line-height:1.25;padding:0 2px 8px;vertical-align:bottom}
  .matrix thead th:first-child{vertical-align:bottom}
  .matrix tbody th{padding:11px 6px 11px 0}
  .m-key em{flex-basis:100%;line-height:1.45}
  .enrol-card{padding:24px 20px 22px}
  .enrol .tile{min-height:220px}

  /* ---------- the learnership menu: each field becomes one tidy list card ---------- */
  .menu-head{margin:52px 0 22px;gap:14px}
  #ls-count{margin-bottom:6px}
  .ls-tools .search{min-width:0;width:100%}
  .fgroup+.fgroup{margin-top:0}
  .fg-cover{height:84px;margin-top:24px}
  .fg-cover+.fg-head{margin-top:-84px;height:84px;padding:0 18px;flex-wrap:nowrap;gap:12px}
  .fg-cover+.fg-head h4{min-width:0;font-size:18px;line-height:1.2}
  .fg-cover+.fg-head h4 span{display:block;margin:3px 0 0;font-size:12.5px}
  .fg-cover+.fg-head .fg-all{flex:none;padding:12px 0 2px}
  .fgroup .progs{margin-top:0;gap:0;background:#fff;border-radius:0 0 16px 16px;overflow:hidden;
    box-shadow:0 0 0 1px rgba(14,30,48,.06),0 20px 40px -32px rgba(14,30,48,.45)}
  .prog{grid-template-columns:22px minmax(0,1fr) auto;gap:4px 12px;align-items:center;min-height:54px;padding:13px 16px;
    border:0;border-top:1px solid var(--hair);box-shadow:none}
  .prog:first-child{border-top:0}
  .prog:hover{border-color:var(--hair)}
  .prog input{grid-row:1;align-self:center;margin:0}
  .prog .nm{grid-column:2;grid-row:1;font-size:15px}
  .prog .sm{grid-column:2/4;grid-row:2}
  .prog .nq{grid-column:3;grid-row:1;align-self:center;margin-top:0;white-space:nowrap;font-size:11.5px}
  .prog.on{background:var(--sky);box-shadow:inset 3px 0 0 var(--blue)}
  .prog:focus-within{outline-offset:-2px}
  .nqf-note{margin-top:18px}

  /* selection bar: two slim rows (summary + learners, then the button) instead of a quarter of the screen */
  .pick-bar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px 8px;
    bottom:calc(10px + env(safe-area-inset-bottom));margin-top:22px;padding:12px 12px 12px 16px}
  .pb-sum{grid-column:1;grid-row:1;font-size:13.5px;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .pb-learners{grid-column:3;grid-row:1;gap:0}
  .pb-learners label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .stepper input{width:44px}
  .pb-go{grid-column:1/-1;grid-row:2;width:100%;padding:13px 16px;justify-content:center}
  .pb-clear{grid-column:2;grid-row:1;height:44px;display:grid;place-items:center;padding:0 6px;border-bottom:0;text-decoration:underline;text-underline-offset:3px}

  /* ---------- more: three image cards ---------- */
  .mcards{gap:16px}
  .mc{border-radius:18px}
  .mc-img{height:190px}
  .mc-body{padding:22px 20px 24px}
  .mc h3{font-size:23px;line-height:1.2}
  .mc:hover{transform:none}

  /* ---------- booking / enquiry pop-up, inside the box ---------- */
  .bk-out{gap:6px}
  .sess{min-height:52px}
  .bk-row{margin:20px 0}
  .bk-actions{gap:12px;margin-top:20px}
  .bk-actions .btn{flex:1 1 100%;width:100%;min-height:50px;justify-content:center}
  .bk-actions .fine{flex-basis:100%;text-align:center}
  .bk-state .row .btn{flex:1 1 100%;justify-content:center}
}

@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .lm-steps::before{transform:none;transition:none}
  .lm-steps li,.lm-proved li{transition:none;opacity:1;transform:none}
}