/* Learning pathways.
 *
 * Loaded only by the pathway pages, so nothing here can affect the 395 guides
 * or the 2,376 calculators. Deliberately close to the existing learning centre
 * look rather than a new visual language: a pathway is the same material in a
 * different order, and it should feel that way.
 */

.pw-intro { margin: 0 0 26px; }
.pw-intro p { font-size: 17px; line-height: 1.75; color: #444; margin: 0 0 15px; }
.pw-intro p:last-child { margin-bottom: 0; }
.pw-intro p { font-size: 17px; line-height: 1.65; color: #444; }

/* ---- index: stage groups ---- */
.pw-stage { margin: 34px 0 8px; }
.pw-stage h2 {
    font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 22px;
    color: #111827; margin: 0 0 4px;
}
.pw-stage p { font-size: 15px; color: #6c757d; margin: 0 0 16px; }

.pw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 18px; }

.pw-card {
    display: block; border: 1px solid #dee2e6; border-radius: 6px; padding: 18px 18px 16px;
    background: #fff; text-decoration: none; color: inherit; transition: box-shadow .15s, border-color .15s;
}
a.pw-card:hover { border-color: #28a745; box-shadow: 0 3px 10px rgba(0,0,0,.08); text-decoration: none; }
.pw-card h3 {
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 17px;
    color: #155724; margin: 0 0 6px;
}
.pw-card p { font-size: 14px; line-height: 1.55; color: #555; margin: 0 0 10px; }
.pw-meta { font-size: 12px; color: #6c757d; text-transform: uppercase; letter-spacing: .04em; }

/* A planned pathway is announced, not linked. A card that looks clickable and
   is not is worse than one that plainly says it is coming. */
.pw-card.pw-planned { background: #f8f9fa; border-style: dashed; }
.pw-card.pw-planned h3 { color: #495057; }
.pw-badge {
    display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; padding: 2px 7px; border-radius: 3px; margin-left: 6px; vertical-align: 2px;
}
.pw-badge-soon { background: #e9ecef; color: #495057; }

/* ---- a single pathway ---- */
.pw-head { border-left: 4px solid #28a745; padding-left: 16px; margin-bottom: 22px; }
.pw-head .pw-promise { font-size: 18px; line-height: 1.6; color: #333; margin: 0 0 8px; }
.pw-head .pw-ends { font-size: 15px; color: #155724; font-weight: 600; margin: 0; }

.pw-boundary {
    background: #fff8e6; border: 1px solid #e0a800; border-radius: 5px;
    padding: 12px 14px; margin: 0 0 22px; font-size: 15px; color: #6b4d00;
}

.pw-steps { list-style: none; margin: 0; padding: 0; counter-reset: pwstep; }
.pw-step {
    position: relative; padding: 0 0 22px 52px; counter-increment: pwstep;
}
/* The connecting line makes the sequence visible at a glance, which is the
   whole difference between a pathway and a list of links. */
.pw-step::before {
    content: counter(pwstep);
    position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%;
    background: #155724; color: #fff; font-weight: 700; font-size: 15px;
    display: flex; align-items: center; justify-content: center;
}
.pw-step::after {
    content: ''; position: absolute; left: 16px; top: 38px; bottom: 4px; width: 2px; background: #dee2e6;
}
.pw-step:last-child { padding-bottom: 0; }
.pw-step:last-child::after { display: none; }

.pw-step h3 { font-size: 17px; font-weight: 700; margin: 4px 0 4px; }
.pw-step h3 a { color: #155724; }
.pw-step .pw-why { font-size: 15px; line-height: 1.6; color: #555; margin: 0 0 8px; }

.pw-tool {
    display: inline-block; font-size: 14px; background: #f1f8f3; border: 1px solid #b7ddc3;
    border-radius: 4px; padding: 6px 11px; color: #155724; text-decoration: none;
}
.pw-tool:hover { background: #e4f2e9; text-decoration: none; color: #0d3d18; }
.pw-tool strong { font-weight: 700; }

/* Progress is a later phase. The markup carries the hook now so the page does
   not need restructuring when it arrives. */
.pw-step.pw-done h3 a { color: #6c757d; }

.pw-foot { margin-top: 30px; padding-top: 18px; border-top: 1px solid #dee2e6; font-size: 15px; color: #555; }

@media (max-width: 600px) {
    .pw-step { padding-left: 44px; }
    .pw-step::before { width: 30px; height: 30px; font-size: 14px; }
    .pw-step::after { left: 14px; }
}

/* ---- stats strip and progress ---- */
.pw-stats {
    display: flex; flex-wrap: wrap; gap: 22px; align-items: center;
    background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 6px;
    padding: 14px 18px; margin: 0 0 20px; font-size: 14px; color: #555;
}
.pw-stats strong { font-family: 'Montserrat', sans-serif; font-size: 20px; color: #155724; display: block; }
.pw-progress-wrap { margin-left: auto; min-width: 190px; font-size: 13px; color: #6c757d; }
.pw-bar { height: 7px; background: #e9ecef; border-radius: 4px; margin-top: 5px; overflow: hidden; }
.pw-bar-fill { height: 100%; width: 0; background: #28a745; border-radius: 4px; transition: width .2s; }

.pw-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pw-mins { font-size: 13px; color: #6c757d; }
.pw-tick { font-size: 13px; color: #6c757d; margin: 0; cursor: pointer; user-select: none; }
.pw-tick input { margin-right: 5px; vertical-align: -1px; cursor: pointer; }

/* A finished step stays readable rather than being struck out: people re-read
   these, and greying a step you might return to reads as "no longer relevant". */
.pw-step.pw-done::before { background: #28a745; }
.pw-step.pw-done h3 a { color: #6c757d; }

@media (max-width: 600px) {
    .pw-stats { gap: 14px; }
    .pw-progress-wrap { margin-left: 0; width: 100%; }
}

/* ---- width ----
 *
 * The shared .container caps at 1400px, and the pathway pages then capped their
 * own prose at 760px inside that, so on a wide screen most of the page was
 * empty and the index cards sat in a narrow column. Pathway pages opt into a
 * wider container through a body class, which leaves every other page on the
 * site untouched.
 *
 * The step prose is deliberately not full bleed. A line of text much beyond
 * about 110 characters is measurably harder to read, and these are pages people
 * work through rather than glance at, so the steps keep a generous but bounded
 * measure while the cards and the layout use the room.
 */
body.pw-page .container { max-width: 1400px; }

@media (min-width: 1500px) {
    body.pw-page .container { max-width: 1680px; }
}
@media (min-width: 1800px) {
    body.pw-page .container { max-width: 1780px; }
}

/* Full width. An earlier version capped the prose at 1180px inside a 1780px
   container on readability grounds, which was the wrong call for these pages:
   it left a third of the screen empty and the caps were the very thing that
   looked broken. Everything now uses the container it is given. */
.pw-lead { font-size: 17px; line-height: 1.75; color: #444; }
.pw-lead p { margin: 0 0 15px; }
.pw-lead p:last-child { margin-bottom: 0; }