/* LCHSP — Get Involved. Ported from involved.jsx. --c per panel, --ic on form. */

.lchsp .involved-hero { padding: 64px 0 40px; border-bottom: 1px solid var(--rule); }
.lchsp .involved-h1 { margin-top: 24px; max-width: 1040px; }
.lchsp .involved-h1 em { font-style: italic; color: var(--teal); }
.lchsp .involved-lead { font-size: 19px; color: var(--ink-60); max-width: 680px; margin-top: 24px; }

/* Audience picker */
.lchsp .involved-picker-section { padding: 56px 0 16px; }
.lchsp .involved-picker { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.lchsp .involved-tab { padding: 28px 24px; border: none; border-right: 1px solid var(--rule); background: var(--paper); color: var(--ink); cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 16px; min-height: 140px; font-family: inherit; transition: background .2s ease, color .2s ease; }
.lchsp .involved-tab:last-child { border-right: none; }
.lchsp .involved-tab.active { background: var(--tc); color: var(--paper); }
.lchsp .involved-tab-num { color: var(--ink-60); } /* AA: ink-40 was 4.31:1 on paper */
.lchsp .involved-tab.active .involved-tab-num { color: color-mix(in srgb, var(--paper) 78%, transparent); }
.lchsp .involved-tab-label { font-family: var(--serif); font-size: 22px; letter-spacing: -0.01em; line-height: 1.15; }

/* Detail split */
.lchsp .involved-detail-section { padding: 40px 0 80px; }
.lchsp .involved-split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; margin-top: 32px; align-items: start; }
.lchsp .involved-chip { background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); margin-bottom: 20px; }
.lchsp .involved-headline { font-style: italic; margin-bottom: 24px; }
.lchsp .involved-desc { font-size: 18px; color: var(--ink-60); max-width: 540px; margin-bottom: 40px; }
.lchsp .involved-ways-label { margin-bottom: 16px; }
.lchsp .involved-way { display: grid; grid-template-columns: 44px 1fr; gap: 20px; padding: 20px 0; border-top: 1px solid var(--rule); }
.lchsp .involved-way:last-child { border-bottom: 1px solid var(--rule); }
.lchsp .involved-way-num { width: 36px; height: 36px; border-radius: 8px; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); display: grid; place-items: center; font-family: var(--mono); font-size: 11px; }
.lchsp .involved-way-title { font-size: 18px; font-weight: 500; font-family: var(--serif); letter-spacing: -0.01em; }
.lchsp .involved-way-desc { font-size: 14px; color: var(--ink-60); margin-top: 4px; }

/* Form card — paper surface with a colored accent (keeps Fluent readable / AA) */
.lchsp .involved-form-col { background: var(--paper); border: 1px solid var(--rule); border-top: 4px solid var(--ic); border-radius: 14px; padding: 32px; position: sticky; top: 92px; }
.lchsp .involved-form-label { color: var(--ic); margin-bottom: 10px; }
.lchsp .involved-form-h3 { font-size: 28px; margin-bottom: 18px; }

/* Direct contact strip */
.lchsp .involved-contact { padding: 72px 0; background: var(--cream); border-top: 1px solid var(--rule); }
.lchsp .involved-contact-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; align-items: center; }
.lchsp .involved-contact-label { margin-bottom: 10px; }
.lchsp .involved-contact-value { font-family: var(--serif); font-size: 22px; border-bottom: none; }
.lchsp a.involved-contact-value { color: var(--teal); }

@media (max-width: 960px) {
  .lchsp .involved-picker { grid-template-columns: 1fr 1fr; }
  .lchsp .involved-tab:nth-child(2) { border-right: none; }
  .lchsp .involved-tab:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .lchsp .involved-split { grid-template-columns: 1fr; gap: 40px; }
  .lchsp .involved-form-col { position: static; }
  .lchsp .involved-contact-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 560px) {
  .lchsp .involved-picker { grid-template-columns: 1fr; }
  .lchsp .involved-tab { border-right: none; border-bottom: 1px solid var(--rule); }
  .lchsp .involved-tab:last-child { border-bottom: none; }
}