/* Playbooks index, on Trail. Playbooks grouped by cluster, each entry its
   title and the founder question it answers, so a reader scans by problem.
   Topic pills jump to a cluster; the page closes on the juniper band. */

.pi-head { padding: clamp(var(--space-7), 6vw, var(--space-9)) 0 clamp(var(--space-6), 5vw, var(--space-7)); }
.pi-head h1 { font-size: clamp(46px, 6vw, 84px); line-height: 1; letter-spacing: -0.025em; }
.pi-head .lead { margin-top: var(--space-5); max-width: 40ch; }

.pi-jump { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.pi-jump-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill);
  font-size: var(--text-small); font-weight: 600; color: var(--ink); text-decoration: none;
}
.pi-jump-link:hover { border-color: var(--juniper); color: var(--juniper); text-decoration: none; }
.pi-jump-n { font-size: var(--text-label); font-weight: 700; color: var(--muted); }

.pi-body { padding-bottom: var(--space-9); }
.pi-cluster {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--space-4) clamp(var(--space-6), 5vw, var(--space-8));
  padding-top: var(--space-5); border-top: 2px solid var(--ink);
  /* A playbook's breadcrumb lands here by id; clear the sticky nav. */
  scroll-margin-top: 5rem;
}
.pi-cluster + .pi-cluster { margin-top: var(--space-8); }
.pi-cluster h2 { font-size: var(--text-step); line-height: 1.15; padding-top: var(--space-3); }

.pi-list { list-style: none; }
.pi-list li + li { border-top: 1px solid var(--line); }
.pi-list a { display: block; padding: var(--space-4) 0; text-decoration: none; color: inherit; }
.pi-title { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--ink); line-height: 1.25; }
.pi-q { display: block; margin-top: var(--space-1); color: var(--muted); font-size: var(--text-small); max-width: var(--measure); }
.pi-list a:hover .pi-title { color: var(--juniper); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

@media (max-width: 767px) {
  .pi-body { padding-bottom: var(--space-8); }
  .pi-cluster { grid-template-columns: 1fr; gap: var(--space-2); }
  .pi-cluster + .pi-cluster { margin-top: var(--space-7); }
}