/*
 * Social Media — page-specific extras on top of components/kosh-page.css (prefixed .kp-x-soc-).
 */

/* Rhythm: channels follow the services grid directly; the FAQ follows the sand process band */
.kp-x-soc-channels { padding-top: 0; }
.kp-faq.kp-x-soc-faq { padding-top: var(--section-y); }

/* FAQ answers with an optional link: one wrapper so the open/close height animation still works */
.kp-faq-a > .kp-x-soc-answer { overflow: hidden; min-height: 0; padding: 0 18px; }
.kp-faq-item.open .kp-faq-a > .kp-x-soc-answer { padding-bottom: 18px; }
.kp-x-soc-answer p { font-size: 13px; line-height: 1.7; color: var(--text-tertiary); }
.kp-x-soc-answer .kp-link { margin-top: 14px; }

/* Emphasis in the final CTA headline stays readable on the maroon band */

/* Card titles that are real h3s keep the reference's body-font look */
.kp-svc h3.kp-svc__title { font-family: var(--font-body); letter-spacing: 0; }

/* What we do — six disciplines as editorial rows: number, serif title, description
   (was the shared boxed .kp-svc-grid; client asked for a better design, Oct 2026) */
.kp-x-soc-list { margin-top: clamp(32px, 4vw, 52px); border-top: 1px solid var(--line); }
.kp-x-soc-row {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: baseline;
  padding: clamp(24px, 2.6vw, 34px) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .4s var(--ease);
}
.kp-x-soc-row::before {
  content: '';
  position: absolute;
  left: 0; top: -1px; bottom: -1px;
  width: 2px;
  background: var(--color-secondary);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .4s var(--ease);
}
.kp-x-soc-row:hover { padding-left: 16px; }
.kp-x-soc-row:hover::before { transform: scaleY(1); }
.kp-x-soc-row__num { font-family: var(--font-heading); font-size: 18px; font-style: italic; color: var(--color-secondary); }
.kp-x-soc-row__title {
  font-family: var(--font-heading);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 300;
  line-height: 1.15;
  color: var(--text-primary);
  transition: color .3s;
}
.kp-x-soc-row:hover .kp-x-soc-row__title { color: var(--color-secondary); }
.kp-x-soc-row__body { max-width: 440px; font-size: var(--fs-body); line-height: 1.7; color: var(--text-tertiary); }
@media (max-width: 860px) {
  .kp-x-soc-row { grid-template-columns: 44px minmax(0, 1fr); gap: 8px 16px; }
  .kp-x-soc-row__body { grid-column: 2; }
  .kp-x-soc-row:hover { padding-left: 0; }
}