/* Playbook pages (/resources/<playbook>/): step sequence + dated facts. Builds on pages-g5 article prose. */

/* Two dated facts: a quiet two-column definition list, hairline above each. */
.pb-dates { display: grid; gap: var(--s5, 1.25rem) var(--s6, 1.5rem); margin: var(--s4, 1rem) 0 var(--s6, 1.5rem); }
@media (min-width: 40rem) { .pb-dates { grid-template-columns: 1fr 1fr; } .pb-dates__item:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.pb-dates__item { border-top: 2px solid var(--ink); padding-top: var(--s3, .75rem); }
.pb-dates dt { font-size: .875rem; font-weight: 700; letter-spacing: 0; color: var(--green-text); margin-bottom: var(--s2, .5rem); } /* 10-07 finish review: no all-caps label (DESIGN.md: the lime chip is the only uppercase element); Small type, words unchanged */
.pb-dates dd { margin: 0; color: var(--text-2); }
.pb-dates__when { display: block; font-size: 1.1875rem; line-height: 1.35; font-weight: 600; color: var(--ink); margin-bottom: var(--s2, .5rem); text-wrap: balance; }

/* The five steps: big numerals on a rail, so the sequence reads at a glance. */
.pb-steps { list-style: none; margin: var(--s6, 1.5rem) 0 0; padding: 0; counter-reset: none; }
.pb-step { position: relative; display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: var(--s5, 1.25rem); padding-bottom: var(--s8, 2.5rem); }
.pb-step:last-child { padding-bottom: 0; }
.pb-step::before { content: ""; position: absolute; left: calc(1.625rem - 1px); top: 3.5rem; bottom: var(--s3, .75rem); width: 2px; background: var(--floor-2); }
.pb-step:last-child::before { display: none; }
.pb-step__n { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--ink); color: var(--lime); font-size: 1.5rem; font-weight: 700; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.pb-step__body > h3 { margin: .625rem 0 var(--s3, .75rem); font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; scroll-margin-top: calc(var(--header-h, 80px) + var(--s6, 1.5rem)); }
.pb-step__body > p + p, .pb-step__body > ul + p { margin-top: var(--s3, .75rem); }

/* A one-line aside inside a step: tinted, never a heading lookalike. */
.pb-note { margin-top: var(--s4, 1rem); padding: var(--s3, .75rem) var(--s4, 1rem); background: var(--floor); border-radius: 10px; color: var(--ink); font-weight: 600; }

/* A subhead directly inside a prose section (not a step title): space above, tight below. */
.g5-prose > section > h3 { margin: var(--s8, 2rem) 0 var(--s2, .5rem); font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }

@media (max-width: 30rem) {
  .pb-step { grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: var(--s4, 1rem); }
  .pb-step__n { width: 2.5rem; height: 2.5rem; font-size: 1.25rem; }
  .pb-step::before { left: calc(1.25rem - 1px); top: 2.75rem; }
  .pb-step__body > h3 { margin-top: .3rem; }
}

/* 10-07 real cover in the hero photo frame (Tom): same 40px frame as the photo it replaces, the whole cover centred on
   the tint (the Playbooks list cards match), never cropped, since the title is printed on it */
.hero--inner .pb-cover picture { position: relative; aspect-ratio: 4 / 3; background: var(--floor); }
.hero--inner .pb-cover img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: auto; max-width: none;
  height: calc(100% - 2 * var(--s6)); aspect-ratio: 600 / 776; object-fit: contain; border-radius: 8px; }
@media (min-width: 64rem) {
  .hero--inner .pb-cover picture { aspect-ratio: 1 / 1; }
  .hero--inner .pb-cover img { height: calc(100% - 2 * var(--s10)); aspect-ratio: 600 / 776; }
}