/* Strategic Labs — V002-M2 Capabilities + Clients.
   Capabilities: progressive practice-by-practice exploration, never a database dump.
   Clients: a premium logo-led trust chapter. */

/* ================= CAPABILITIES ================= */
.pm-cap-intro { max-width: 62ch; color: var(--ink-soft); }

.pm-cap-filter { border: 0; margin: 0 0 var(--s7); padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.pm-cap-filter legend { inline-size: 100%; margin-bottom: var(--s4); color: var(--muted); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .05em; }
.pm-cap-filter__chip {
  display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; min-height: 44px;
  padding: .55rem 1rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-pill);
  color: var(--ink-soft); font-size: var(--fs-sm); font-weight: 500; box-shadow: var(--e1);
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.pm-cap-filter__chip:hover { border-color: var(--mint); transform: translateY(-2px); box-shadow: var(--e2); }
.pm-cap-filter__chip input { inline-size: 16px; block-size: 16px; accent-color: var(--brand-mid); }
.pm-cap-filter__chip b { padding: .1rem .5rem; background: var(--paper-2); color: var(--ink-soft); border-radius: var(--r-pill); font-size: .76rem; font-weight: 700; }
.pm-cap-filter__chip:has(input:checked) { background: var(--brand-deep); border-color: var(--brand-deep); color: var(--on-dark); box-shadow: var(--e2); }
.pm-cap-filter__chip:has(input:checked) b { background: var(--brand); color: var(--ink-900); }

.pm-cap-territories { display: grid; gap: var(--s7); }
.pm-cap-family { display: grid; gap: var(--s5); }
.pm-cap-family > header { display: flex; align-items: baseline; gap: var(--s4); padding-bottom: var(--s4); border-block-end: 1px solid var(--line); }
.pm-cap-family > header span { color: var(--brand-mid); font-size: .8rem; font-weight: 700; }
.pm-cap-family > header h3 { margin: 0; font-size: var(--fs-h3); }
/* explicit 4-up so tail items can be spanned — auto-fit left a lone 5th/9th
   card stranded beside an empty gap */
.pm-cap-family__items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
.pm-cap-family__items > article:last-child:nth-child(4n+1) { grid-column: 1 / -1; }
.pm-cap-family__items > article:last-child:nth-child(4n+2) { grid-column: span 3; }
.pm-cap-family__items > article:last-child:nth-child(4n+3) { grid-column: span 2; }
@media (max-width: 1199px) {
  .pm-cap-family__items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pm-cap-family__items > article:last-child:nth-child(4n+1), .pm-cap-family__items > article:last-child:nth-child(4n+2), .pm-cap-family__items > article:last-child:nth-child(4n+3) { grid-column: auto; }
  .pm-cap-family__items > article:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  .pm-cap-family__items > article:last-child:nth-child(3n+2) { grid-column: span 2; }
}
@media (max-width: 833px) {
  .pm-cap-family__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-cap-family__items > article:last-child:nth-child(3n+1), .pm-cap-family__items > article:last-child:nth-child(3n+2) { grid-column: auto; }
  .pm-cap-family__items > article:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .pm-cap-family__items { grid-template-columns: 1fr; }
  .pm-cap-family__items > article:last-child { grid-column: auto; }
}
.pm-cap-family__items article, .pm-cap-preview article { display: grid; gap: var(--s3); align-content: start; }
.pm-cap-family__items b, .pm-cap-preview b { font-size: 1rem; line-height: 1.5; color: var(--ink); }
.pm-cap-family__items p, .pm-cap-preview p { margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); }
.pm-cap-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: var(--s5); }

/* CSS-only filter: chip position N (1 = "all") controls family position N−1.
   Generic by position, so it works for any family names/count. */
.pm-cap-filter:has(.pm-cap-filter__chip:nth-of-type(2) input:checked) ~ .pm-cap-territories .pm-cap-family:not(:nth-of-type(1)),
.pm-cap-filter:has(.pm-cap-filter__chip:nth-of-type(3) input:checked) ~ .pm-cap-territories .pm-cap-family:not(:nth-of-type(2)),
.pm-cap-filter:has(.pm-cap-filter__chip:nth-of-type(4) input:checked) ~ .pm-cap-territories .pm-cap-family:not(:nth-of-type(3)),
.pm-cap-filter:has(.pm-cap-filter__chip:nth-of-type(5) input:checked) ~ .pm-cap-territories .pm-cap-family:not(:nth-of-type(4)),
.pm-cap-filter:has(.pm-cap-filter__chip:nth-of-type(6) input:checked) ~ .pm-cap-territories .pm-cap-family:not(:nth-of-type(5)),
.pm-cap-filter:has(.pm-cap-filter__chip:nth-of-type(7) input:checked) ~ .pm-cap-territories .pm-cap-family:not(:nth-of-type(6)),
.pm-cap-filter:has(.pm-cap-filter__chip:nth-of-type(8) input:checked) ~ .pm-cap-territories .pm-cap-family:not(:nth-of-type(7)),
.pm-cap-filter:has(.pm-cap-filter__chip:nth-of-type(9) input:checked) ~ .pm-cap-territories .pm-cap-family:not(:nth-of-type(8)) { display: none; }

/* ================= CLIENTS ================= */
.clients-wall .sec-head { max-width: 58ch; }
/* eight verified clients read as a balanced 4×2 block rather than 5+3 */
.pm-client-field { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
@media (max-width: 1023px) { .pm-client-field { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 833px)  { .pm-client-field { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.trustwall__cell {
  margin: 0; display: grid; place-items: center; align-content: center; gap: var(--s4);
  min-block-size: 190px; padding: var(--s6);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--e1);
  text-align: center;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.trustwall__cell:hover { transform: translateY(-4px); box-shadow: var(--e3); border-color: var(--mint); }
/* optical sizing: constrain the box, let each logo find its own scale inside it */
.trustwall__cell img { inline-size: auto; max-inline-size: min(150px, 80%); max-block-size: 64px; object-fit: contain; }
.trustwall__cell figcaption { color: var(--muted); font-size: .84rem; line-height: 1.5; }
main[data-page="clients"] .pm-client-field { gap: var(--s5); }
main[data-page="clients"] .trustwall__cell { min-block-size: 210px; }

@media (max-width: 833px) {
  .pm-cap-family > header { flex-direction: column; gap: var(--s2); }
}
@media (max-width: 599px) {
  /* mobile length reduction: the ten-item capability preview on Home becomes a
     swipeable snap rail rather than a ten-card vertical stack. Nothing is
     hidden — every card stays present and keyboard-reachable. */
  .pm-cap-preview {
    display: flex; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--s4);
    gap: var(--s4); padding-block-end: var(--s4);
    margin-inline: calc(var(--gutter-side) * -1); padding-inline: var(--gutter-side); scrollbar-width: thin;
  }
  .pm-cap-preview > article { flex: 0 0 78%; min-inline-size: 78%; scroll-snap-align: start; }

  .pm-cap-territories { gap: var(--s6); }
  .trustwall__cell { min-block-size: 150px; padding: var(--s5); }
  .trustwall__cell img { max-block-size: 52px; }
  .pm-cap-filter { gap: var(--s2); }
  .pm-cap-filter__chip { font-size: .86rem; padding: .5rem .8rem; }
}