/* Open projects — listing, detail, "What you earn". Tokens from site.css only. */

/* ---- listing */
.pl-intro { max-width: 46rem; display: grid; gap: var(--s3); margin-bottom: var(--s7); }
.pl-filters { display: grid; gap: var(--s4); align-items: end; padding: var(--s5) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: var(--s6); }
@media (min-width: 44rem) { .pl-filters { grid-template-columns: minmax(12rem, 18rem) minmax(12rem, 18rem) auto 1fr; } .pl-filters .link-arrow { justify-self: end; align-self: center; } }

.pl { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pl__item { border-bottom: 1px solid var(--line); }
.pl__link { display: grid; gap: var(--s2); padding: var(--s6) 0; text-decoration: none; color: inherit; position: relative; }
.pl__meta { font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); }
.pl__title { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -.015em; max-width: 28em; }
.pl__facts { font-weight: 500; }
.pl__foot { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); font-size: var(--fs-small); color: var(--fg-muted); }
.pl__cta { font-size: var(--fs-small); font-weight: 500; margin-top: var(--s2); }
.pl__cta span { display: inline-block; transition: transform var(--t) var(--ease); }
.pl__link:hover .pl__title, .pl__link:focus-visible .pl__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.pl__link:hover .pl__cta span { transform: translateX(.3em); }
@media (min-width: 60rem) {
  .pl__link { grid-template-columns: 1fr auto; column-gap: var(--s7); }
  .pl__meta, .pl__title, .pl__facts, .pl__foot { grid-column: 1; }
  .pl__cta { grid-column: 2; grid-row: 1 / span 4; align-self: center; margin: 0; }
}

/* ---- the intentional empty state */
.pl-empty { gap: var(--s6); }
.pl-empty .lead { max-width: 38em; }
.pl-empty__preview { display: grid; width: 100%; max-width: 38rem; border: 1px solid var(--line-soft); }
.pl-empty__preview span { padding: var(--s3) var(--s4); font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); border-bottom: 1px solid var(--line-soft); }
.pl-empty__preview span:first-child { font-size: var(--fs-small); color: var(--fg); }
.pl-empty__preview span:last-child { border-bottom: 0; border-left: 6px solid var(--accent); color: var(--fg); }
.pl-empty__doors { width: 100%; }
.pl-empty__doors .card { display: grid; gap: var(--s3); align-content: start; }
.pl-empty__doors .card p:last-child { margin-top: var(--s2); }

/* ---- detail */
.pd-head h1 { max-width: 18em; font-size: clamp(2.25rem, 5.2vw, 4.5rem); }
.pd-head .eyebrow a { color: inherit; text-decoration: none; }
.pd-head .eyebrow a:hover { text-decoration: underline; }
.pd-head__ref { margin: var(--s5) 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.pd-head__ref .badge { white-space: normal; line-height: 1.3; }
.pd-grid { display: grid; gap: var(--s8); padding-block: var(--s8) var(--section); }
.pd-main { display: grid; gap: var(--s8); min-width: 0; }
.pd-text h2, .pd-apply h2 { font-size: var(--fs-h3); letter-spacing: -.01em; margin-bottom: var(--s5); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.pd-text .prose { max-width: 42rem; }
.pd-text .prose p, .pd-text .prose ul, .pd-text .prose ol { margin: 0 0 var(--s4); }
.pd-text .prose ul, .pd-text .prose ol { padding-left: 1.2em; }
.pd-text .prose li { margin-bottom: .35em; overflow-wrap: anywhere; }
.pd-text .prose p { overflow-wrap: anywhere; }
.pf-certs { list-style: none; margin: 0; padding: 0; display: grid; gap: .2em; }
.pd-side, .pd-after { min-width: 0; }
.pd-side { scroll-margin-top: 5rem; }
@media (min-width: 64rem) {
  .pd-grid { grid-template-columns: minmax(0, 1fr) minmax(22rem, 27rem); column-gap: var(--s9); align-items: start; }
  .pd-main { grid-column: 1; grid-row: 1; }
  .pd-after { grid-column: 1; grid-row: 2; }
  .pd-side { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: var(--s5); max-height: calc(100vh - 2 * var(--s5)); overflow: auto; }
}
.earn { border: 1px solid var(--fg); padding: clamp(1.25rem, 2.5vw, 2rem); display: grid; gap: var(--s4); background: var(--bg); }
.earn .h3 { margin: 0; }
.earn .sb { margin-top: var(--s2); }
.earn__summary { margin: 0; }
.pd-apply { display: grid; gap: var(--s4); max-width: 42rem; }
.pd-apply textarea { width: 100%; }
.pd-next__h { margin-top: var(--s4); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-muted); font-weight: 500; }
.pd-next { margin: 0; padding-left: 1.3em; display: grid; gap: var(--s2); color: var(--fg-muted); font-size: var(--fs-small); }
.pd-preview { background: var(--accent); color: var(--accent-ink); padding: var(--s3) 0; font-size: var(--fs-small); position: sticky; top: 0; z-index: 20; }
.pd-preview a { color: inherit; font-weight: 600; }