/*
 * Content Marketing (/capabilities/content-social/) — extras on top of components/kosh-page.css.
 * Only what the shared Kosh page system doesn't already cover; all classes are prefixed .kp-x-cs-.
 */

/* Perspective: the three intersections sit under the intro split */
.kp-x-cs-side { max-width: 480px; justify-self: end; }
.kp-x-cs-inter { margin-top: clamp(48px, 6vw, 80px); }

/* What we do: photo cards; the lead line sits above the description */
.kp-x-cs-services { padding-top: 0; }
.kp-x-cs-services .kp-feature__body p + p { margin-top: 10px; }
.kp-x-cs-services .kp-feature__body p:not(.kp-x-cs-lead) { font-size: var(--fs-body); line-height: 1.7; }
.kp-x-cs-lead { font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--text-primary); }

/* Connected marketing: head aside holds two short paragraphs; each card ends in a button (the whole card is the link) */
.kp-x-cs-connected { padding-top: 0; }
.kp-x-cs-aside { max-width: 380px; }
.kp-x-cs-aside p { font-size: inherit; color: inherit; }
.kp-x-cs-aside p + p { margin-top: 12px; }
.kp-x-cs-cardlink { align-self: flex-start; margin-top: auto; padding-inline: 18px; text-align: center; }   /* slimmer sides: the longest label stays on one line */
/* The button is a span inside the card link, so it follows the card's hover (site-wide maroon button hover) */
.kp-svc:hover .kp-x-cs-cardlink { background: var(--color-secondary); border-color: var(--color-secondary); }

/* Editorial thinking: the question as a large line, steps below the split */
.kp-x-cs-quote { font-size: clamp(24px, 2.4vw, 34px); }
.kp-x-cs-steps { margin-top: clamp(44px, 5vw, 72px); }

/* Authority & substance (dark band): the opening line set large, copy in the on-dark colours */
.kp-x-cs-dark .kp-copy p { color: var(--text-on-dark-2); }
.kp-dark .kp-x-cs-statement {
  font-family: var(--font-heading);
  font-size: clamp(26px, 2.8vw, 40px);
  line-height: 1.25;
  color: #fff;
}

/* Selected work: photo cards; the old column labels stay as a small line above the row */
.kp-x-cs-work__head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  margin-top: 28px;
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.kp-x-cs-work .kp-hscroll + .container .kp-btn-red { margin-top: clamp(40px, 5vw, 64px); }

/* FAQ answers can end with a link */
.kp-x-cs-faq .kp-faq-a .kp-link { display: flex; width: fit-content; margin-top: 14px; }


@media (max-width: 860px) {
  .kp-x-cs-side { justify-self: start; }
  .kp-x-cs-why .kp-hl br { display: none; }
}