/* Manchester Printed "Print by job": /jobs/ hub + one page per job (jobs/hub.php, jobs/job.php). Loads after fp-shop + fp-bundles.
   Job page = who it's for (head band) -> what to buy (8 cards, 4 / 2 columns = full rows) -> optional bundle band. */
.fp-job-page :where(*,*::before,*::after){box-sizing:border-box}
.fp-job-page :is(h2,h3){font-family:var(--mp-f-display);font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--mp-ink);margin:0;text-transform:none}

/* head band: bigger mascot, feet on the band's bottom edge */
.fp-cathead--job .fp-cathead-in{grid-template-columns:minmax(0,1fr) 340px}
.fp-cathead--job .fp-cathead-txt{padding:32px 0 40px}
.fp-cathead--job .fp-eyebrow{margin:12px 0 10px}
.fp-cathead--job .fp-cathead-sub{font:800 1.2rem/1.35 var(--mp-f-display);color:#fff;margin:12px 0 0}
.fp-cathead--job .fp-cathead-art{min-height:300px}
.fp-cathead--job .fp-cathead-blob{width:300px;height:270px;margin-left:-150px;bottom:-60px}
.fp-cathead-m--job{height:310px;margin-bottom:0}

/* "Who it's for": the first question a job page answers */
.fp-jwho{margin:18px 0 0;max-width:62ch;padding:12px 16px;border-left:4px solid var(--mp-yellow);background:rgba(255,255,255,.08);border-radius:0 3px 3px 0;color:#fff;font-size:1.02rem;line-height:1.45}
.fp-jwho b{display:block;font:800 .74rem/1 var(--mp-f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--mp-yellow);margin-bottom:6px}

/* what to buy: 8 product cards */
.fp-jbuy{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.fp-jp{display:flex;flex-direction:column;height:100%;background:#fff;border-radius:var(--mp-r);overflow:hidden;text-decoration:none;color:var(--mp-ink);box-shadow:0 0 0 1px var(--mp-line),var(--mp-shadow);transition:transform var(--mp-dur) var(--mp-ease),box-shadow var(--mp-dur)}
.fp-jp:hover{transform:translateY(-3px);box-shadow:0 0 0 2px var(--mp-ink),var(--mp-shadow)}
.fp-jp:focus-visible{outline:3px solid var(--mp-yellow);outline-offset:2px}
.fp-jp-img{display:block;aspect-ratio:4/3;background:var(--mp-stone);overflow:hidden}
.fp-jp-img img{width:100%;height:100%;object-fit:cover;display:block}
.fp-jp-body{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px;flex:1}
.fp-jp-t{font:800 1.12rem/1.2 var(--mp-f-display);color:var(--mp-ink)}
.fp-jp-use{font-size:.92rem;line-height:1.4;color:var(--mp-muted);flex:1}
.fp-jp-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;padding-top:10px;border-top:1px solid var(--mp-line)}
.fp-jp-p{font:900 1.35rem/1 var(--mp-f-display);color:var(--mp-hot-text);white-space:nowrap}
.fp-jp-p small{font:600 .78rem var(--mp-f-body);color:var(--mp-muted)}
.fp-jp-go{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--mp-ink);color:#fff;flex:none}
.fp-jp-go .fp-ui{width:18px;height:18px}
.fp-jp:hover .fp-jp-go{background:var(--mp-yellow)}

/* optional bundle: one wide band */
.fp-sec--jb{margin-top:32px}
.mp-jb{display:grid;grid-template-columns:240px minmax(0,1fr) 290px;background:#fff;border-radius:var(--mp-r);overflow:hidden;box-shadow:0 0 0 1px var(--mp-line),var(--mp-shadow)}
.mp-jb-art{position:relative;display:flex;align-items:flex-end;justify-content:center;background:var(--mp-yellow);overflow:hidden;min-height:260px}
.mp-jb-blob{position:absolute;left:50%;bottom:-40px;width:210px;height:180px;margin-left:-105px;border-radius:var(--mp-r);background:rgba(255,255,255,.35)}
.mp-jb-m{position:relative;height:240px;width:auto;max-width:92%;object-fit:contain;filter:none}
.mp-jb-txt{padding:24px 28px}
.mp-jb-kick{margin:0 0 8px;font:800 .78rem/1 var(--mp-f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--mp-hot-text)}
.mp-jb h2{font-size:clamp(1.4rem,1.1rem + .9vw,1.9rem)}
.mp-jb h2 a{color:var(--mp-ink);text-decoration:none}
.mp-jb h2 a:hover{color:var(--mp-hot-text)}
.mp-jb-for{margin:6px 0 14px;color:var(--mp-muted)}
.mp-jb-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px}
.mp-jb-list li{position:relative;padding-left:24px;font-weight:700;font-size:.93rem;line-height:1.35}
.mp-jb-list li::before{content:"";position:absolute;left:2px;top:3px;width:12px;height:7px;border-left:3px solid var(--mp-yellow);border-bottom:3px solid var(--mp-yellow);transform:rotate(-45deg)}
.mp-jb-price{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:24px;background:var(--mp-ink);color:#fff}
.mp-jb-sep{font-size:.92rem;color:var(--mp-on-dark-muted)}
.mp-jb-now{font:900 2.2rem/1 var(--mp-f-display);color:#fff}
.mp-jb-save{align-self:flex-start;background:var(--mp-yellow);color:#1a1a1a;font-weight:800;font-size:.9rem;padding:4px 10px;border-radius:3px}
.mp-jb-note{font-size:.84rem;color:var(--mp-on-dark-muted)}
.mp-jb-price .fp-btn{margin-top:6px}

/* red quote band: mascot anchored to its bottom edge, as tall as the band */
.fp-jcta{background:var(--mp-yellow);color:var(--mp-ink);margin-top:64px;position:relative;overflow:hidden}
.fp-jcta::before{content:"";position:absolute;inset:0;background:none;pointer-events:none}
.fp-jcta-in{position:relative;display:grid;grid-template-columns:200px minmax(0,1fr) auto;align-items:center;gap:32px;min-height:220px}
.fp-jcta-m{align-self:end;height:210px;width:auto;max-width:none;justify-self:center;filter:none;margin-top:10px}
.fp-jcta h2{color:var(--mp-ink);font-size:clamp(1.6rem,1.1rem + 1.4vw,2.3rem);font-weight:900}
.fp-jcta p{margin:8px 0 0;color:var(--mp-ink);font-size:1.05rem;max-width:56ch}
.fp-jcta-btns{display:flex;gap:12px;flex-wrap:wrap}

/* other jobs: 4 across (the current job is left out) */
.mp-jothers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.fp-jother{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:end;gap:12px;height:100%;padding:14px 16px 0;background:#fff;border:1px solid var(--mp-line);border-radius:var(--mp-r);box-shadow:var(--mp-shadow);text-decoration:none;overflow:hidden;transition:transform var(--mp-dur),border-color var(--mp-dur)}
.fp-jother:hover{transform:translateY(-2px);border-color:var(--mp-ink)}
.fp-jother-m{height:130px;width:auto;max-width:110px;object-fit:contain;justify-self:center;filter:none}
.fp-jother span{align-self:center;padding-bottom:14px}
.fp-jother b{display:block;font:800 1.1rem/1.2 var(--mp-f-display);color:var(--mp-ink)}
.fp-jother small{display:block;margin-top:4px;font-size:.86rem;line-height:1.4;color:var(--mp-muted)}

/* hub: 5 jobs + a quote tile = 3 x 2 / 2 x 3 / 1 column, every row full */
.mp-jhub{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.mp-jhub>li{display:flex}
.mp-jcard{display:flex;flex-direction:column;width:100%;background:#fff;border-radius:var(--mp-r);box-shadow:0 0 0 1px var(--mp-line),var(--mp-shadow);overflow:hidden;text-decoration:none;color:var(--mp-ink);transition:transform var(--mp-dur) var(--mp-ease),box-shadow var(--mp-dur)}
a.mp-jcard:hover{transform:translateY(-3px);box-shadow:0 0 0 2px var(--mp-ink),var(--mp-shadow)}
a.mp-jcard:focus-visible{outline:3px solid var(--mp-yellow);outline-offset:2px}
.mp-jcard-art{position:relative;display:flex;align-items:flex-end;justify-content:center;height:220px;background:var(--mp-ink);overflow:hidden}
.fp-tone-red .mp-jcard-art{background:var(--mp-yellow)}
.fp-tone-sky .mp-jcard-art{background:var(--mp-ink)}
.mp-jcard-blob{position:absolute;left:50%;bottom:-50px;width:230px;height:200px;margin-left:-115px;border-radius:var(--mp-r);background:rgba(255,255,255,.14)}
.mp-jcard-m{position:relative;height:205px;width:auto;max-width:90%;object-fit:contain;filter:none}
.mp-jcard-body{display:flex;flex-direction:column;gap:8px;padding:20px 22px 22px;flex:1}
.mp-jcard-h{font:800 1.45rem/1.15 var(--mp-f-display);letter-spacing:-.02em;color:var(--mp-ink)}
.mp-jcard-line{color:var(--mp-muted);font-size:.98rem;line-height:1.45;flex:1}
.mp-jcard-go{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font:800 1rem/1 var(--mp-f-display);color:var(--mp-hot-text)}
.mp-jcard-go .fp-ui{width:18px;height:18px}
a.mp-jcard:hover .mp-jcard-go{text-decoration:underline}
.mp-jcard--quote{background:var(--mp-ink);color:#fff}
.mp-jcard--quote .mp-jcard-art{background:var(--mp-ink-2)}
.mp-jcard--quote .mp-jcard-h{color:#fff}
.mp-jcard--quote .mp-jcard-line{color:var(--mp-on-dark-muted)}
.mp-jcard-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}

@media (max-width:1199px){
  .mp-jothers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mp-jb{grid-template-columns:200px minmax(0,1fr) 260px}
  .mp-jb-list{grid-template-columns:1fr}
  .fp-jcta-in{grid-template-columns:160px minmax(0,1fr);row-gap:0}
  .fp-jcta-btns{grid-column:2;padding-bottom:28px}
  .fp-jcta-txt{padding-top:28px}
}
@media (max-width:999px){
  .fp-jbuy{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mp-jhub{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mp-jb{grid-template-columns:180px minmax(0,1fr)}
  .mp-jb-art{grid-row:1/3;min-height:0}
  .mp-jb-m{height:220px}
  .mp-jb-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:759px){
  .fp-cathead--job .fp-cathead-in{grid-template-columns:1fr;gap:0}
  .fp-cathead--job .fp-cathead-txt{padding-bottom:8px}
  .fp-cathead--job .fp-cathead-art{min-height:220px}
  .fp-cathead-m--job{height:220px}
  .fp-jbuy{gap:12px}
  .fp-jp-body{padding:10px 12px 12px;gap:4px}
  .fp-jp-t{font-size:1rem}
  .fp-jp-use{font-size:.84rem}
  .fp-jp-p{font-size:1.12rem}
  .fp-jp-go{width:28px;height:28px}
  .mp-jb{grid-template-columns:1fr}
  .mp-jb-art{grid-row:auto;height:190px}
  .mp-jb-m{height:180px}
  .mp-jb-txt{padding:20px}
  .mp-jb-list{grid-template-columns:1fr}
  .mp-jhub{grid-template-columns:1fr}
  .mp-jcard{flex-direction:row}
  .mp-jcard-art{width:120px;height:auto;min-height:150px;flex:none}
  .mp-jcard-blob{width:130px;height:110px;margin-left:-65px;bottom:-30px}
  .mp-jcard-m{height:140px}
  .mp-jcard-body{padding:14px 16px;gap:6px}
  .mp-jcard-h{font-size:1.2rem}
  .mp-jcard-line{font-size:.9rem}
  .mp-jothers{grid-template-columns:1fr}
  .fp-jcta-in{grid-template-columns:110px minmax(0,1fr);gap:16px}
  .fp-jcta-m{height:150px}
  .fp-jcta-btns{grid-column:1/-1;padding-bottom:24px}
}

/* job CTA band is yellow: ghost button in ink so it reads (white-on-yellow failed contrast) */
.fp-jcta .fp-btn--ghost{color:var(--mp-ink);border-color:var(--mp-ink);background:transparent}
.fp-jcta .fp-btn--ghost:hover{background:var(--mp-ink);color:var(--mp-yellow)}