/*
 * capabilities/wordpress — extras on top of components/kosh-page.css (Oct 2026 redesign).
 * Only page-specific pieces, prefixed .kp-x-: the admin-bar caption over the numbers strip,
 * uppercase item titles, selected-work card labels, and spacing tweaks.
 */

/* Hero: room for "WordPress, built around" on one line */
.kp-hero__copy--wide { max-width: 940px; }

/* Numbers: caption bar over the strip — WordPress logo and name left, note right (was a fake wp-admin URL) */
.kp-x-wp-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(24px, 3vw, 36px);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.kp-x-platform-logo { display: inline-flex; flex: none; }
.kp-x-platform-logo svg { width: 22px; height: 22px; }
.kp-x-wp-bar__name { margin-left: -4px; font-size: 13px; font-weight: var(--fw-medium); letter-spacing: .02em; text-transform: none; color: var(--text-primary); }
.kp-x-wp-bar__note { margin-left: auto; text-align: right; }
.kp-x-wp-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kp-stat__n em { font-style: normal; font-size: .55em; color: var(--color-secondary); }

/* Uppercase titles (STRUCTURE, DESIGN…) get a little tracking */
.kp-x-caps { letter-spacing: .08em; }

/* Selected work cards */
.kp-x-label {
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: var(--fw-medium);
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-secondary);
}
.kp-x-work-title {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  line-height: 1.25;
  color: var(--text-primary);
}
.kp-x-work .kp-head .kp-link { margin-top: 0; }

/* Dark band: heading with the intro paragraph aside, then the pinned photo-card row.
   The cards keep their light panels, so their copy keeps the dark text colour. */
.kp-x-dark-copy { max-width: 420px; }
.kp-x-next .kp-feature__body { color: var(--text-primary); }

/* FAQ follows the dark band here, so it keeps its top padding; the final CTA has no paragraph */
.kp-x-faq { padding-top: var(--section-y); }

@media (max-width: 860px) {
  .kp-x-wp-bar { flex-wrap: wrap; }
  .kp-x-wp-bar__note { flex-basis: 100%; margin-left: 0; text-align: left; }
  .kp-x-wp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
}