/* /platforms/drupal. Page-only rules, prefix pd-. No accent bars, side lines or icon tiles. */
.pf-job .steps{--n:5}

/* Jobs: art beside a ruled list. */
.pd-jobs{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:center}
.pd-jobs-img{display:block;width:100%;aspect-ratio:4/5;max-height:620px;object-fit:cover;object-position:45% center;border-radius:20px;background:#0A0D14}
.pd-list{display:flex;flex-direction:column}
.pd-list > div{padding:16px 0;border-top:1px solid var(--line)}
.pd-list > div:last-child{border-bottom:1px solid var(--line)}
.pd-list dt{font:600 1.05rem/1.3 var(--font-head);letter-spacing:-.01em;color:var(--ink)}
.pd-list dd{margin:4px 0 0;color:var(--muted);line-height:1.55}

/* Job example: a wide art strip above the steps. */
.pd-strip{display:block;width:100%;height:clamp(160px,20vw,280px);object-fit:cover;object-position:center 45%;border-radius:20px;margin-bottom:28px;background:#0A0D14}

/* Playbook: the topic list in one column beside art. */
.pd-topics{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:center}
.pd-topics .pf-topics{columns:1}
.pd-topics-img{display:block;width:100%;aspect-ratio:4/5;max-height:620px;object-fit:cover;object-position:55% center;border-radius:20px;background:#0A0D14}

/* Demos: a screenshot, then the two links. */
.pd-demos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.pd-demo{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.pd-demo img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top center;background:#E9E8E4}
.pd-demo-body{display:flex;flex:1;flex-direction:column;gap:4px;padding:20px 22px 10px}
.pd-demo h3{font-size:1.1rem}
.pd-demo-body p{color:var(--muted);font-size:.93rem;line-height:1.5}
.pd-demo-body .pd-demo-links{margin-top:auto;padding-top:6px;display:flex;flex-wrap:wrap;gap:0 22px}
.pd-demo-links a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:600;color:var(--blue-ink)}
.pd-demos + .btn-row{margin-top:28px;align-items:center}
.pd-demos + .btn-row .link{display:inline-flex;align-items:center;min-height:44px}

@media (max-width:900px){
  .pd-jobs,.pd-topics{grid-template-columns:minmax(0,1fr)}
  .pd-jobs-img{aspect-ratio:16/9;max-height:300px}
  .pd-topics-img{aspect-ratio:16/9;max-height:300px;order:-1}
}
@media (max-width:640px){
  .pd-demos{grid-template-columns:minmax(0,1fr)}
}