/* ============================================================
   landing/getinvolved.css — R2 Get Involved pages (Careers,
   Partner, Community, Stories, Contact), page-specific styles
   only. Every color/font/spacing value below is a var(--...)
   token already defined in styles.css / site-extend.css. Those
   files are frozen; nothing here overrides them, only adds to
   them, same contract as landing/about.css.

   .gi-card        Shared value-prop card used inside the shared
                    .card-grid on careers/partner/community/stories
                    (why work here, why partner, who partners,
                    channels, why share). Icon or number lead-in,
                    title, body, optional meta tag or cta link.
   .openings /
   .opening         Careers' dynamic openings list, rendered by
                    landing/content-forms.js from GET /api/careers.
                    Class names are load-bearing (hardcoded in that
                    script) — do not rename.
   .form-card--feature / .pool-kicker
                    Accent treatment for a standout form card
                    (careers candidate pool).
   .consent-group   Stories' HIPAA / consent checkbox groupings.
   ============================================================ */

/* ---------------------------------------------------------------
   Shared value-prop card: careers "why work here", partner "why
   partner" + "who partners", community "channels", stories "why
   share". Sits inside the shared, already-responsive .card-grid.
   --------------------------------------------------------------- */
.gi-card {
  display: flex; flex-direction: column; height: 100%;
  padding: 28px 26px 26px; background: var(--surface); border: 1px solid var(--hair); border-radius: 16px;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.gi-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -22px rgba(81,69,168,0.26); border-color: rgba(110,91,209,0.2); }
.gi-card-ico {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(110,91,209,0.13), rgba(59,125,214,0.1));
}
.gi-card-num {
  font-family: var(--f-display); font-size: 26px; font-weight: 500; color: var(--violet);
  letter-spacing: -0.03em; line-height: 1; margin-bottom: 16px;
}
.gi-card h3 { font-family: var(--f-display); font-size: 17.5px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 9px; line-height: 1.3; }
.gi-card p { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0; flex: 1; }
.gi-card-meta {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--faint); margin-top: 16px; line-height: 1.6;
}
.gi-card-cta { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; font-size: 13.5px; font-weight: 500; color: var(--violet); }
.gi-card-cta .arr { transition: transform 250ms var(--ease); }
.gi-card:hover .gi-card-cta .arr { transform: translateX(4px); }
.dark .gi-card { background: rgba(255,255,255,0.04); border-color: rgba(180,166,232,0.2); }
.dark .gi-card h3 { color: var(--on-night-1); }
.dark .gi-card p { color: var(--on-night-2); }

/* ---------------------------------------------------------------
   careers.html: dynamic openings list. #openingsDynamic's inner
   HTML (.opening, .opening-main, .opening-title, .opening-meta,
   .opening-dept, .opening-cta) is generated by
   landing/content-forms.js — those class names are load-bearing,
   keep them in sync with that script if this ever changes.
   --------------------------------------------------------------- */
.openings { display: flex; flex-direction: column; gap: 14px; margin-bottom: 8px; }
.opening {
  display: flex; align-items: center; gap: 20px; padding: 22px 26px;
  background: var(--surface); border: 1px solid var(--hair); border-radius: 14px;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base);
}
.opening:hover { transform: translateY(-3px); box-shadow: 0 18px 44px -20px rgba(81,69,168,0.26); border-color: rgba(110,91,209,0.2); }
.opening-main { flex: 1; min-width: 0; }
.opening-title { font-family: var(--f-display); font-size: 18px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.opening-meta { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); margin-top: 6px; }
.opening-dept { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--violet); background: rgba(110,91,209,0.08); border-radius: 9999px; padding: 6px 13px; flex-shrink: 0; }
.opening-cta { flex-shrink: 0; color: var(--violet); display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; }
.opening-cta .arr { transition: transform 250ms var(--ease); }
.opening:hover .opening-cta .arr { transform: translateX(4px); }

/* careers.html: candidate pool, a standout form card lower on the page */
.form-card--feature { border-top: 3px solid var(--violet); box-shadow: 0 26px 64px -30px rgba(81,69,168,0.34); }
.pool-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--violet); }
.pool-kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px rgba(91,191,188,0.2); }

/* ---------------------------------------------------------------
   stories.html: HIPAA / consent checkbox groupings. Purely
   presentational wrapper — every input keeps its exact name/id/
   required attributes; content-forms.js finds required checkboxes
   via ".checkbox-field input[required]" regardless of this wrap.
   --------------------------------------------------------------- */
.consent-group {
  display: flex; flex-direction: column; gap: 12px; padding: 20px 22px;
  background: var(--bg-soft); border: 1px solid var(--hair); border-left: 3px solid var(--hair); border-radius: 14px;
}
.consent-group .cg-title { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.consent-group--required { border-left-color: var(--coral); }
.consent-group--required .cg-title { color: var(--coral); }
.consent-group--optional { border-left-color: var(--violet-300); }
.consent-group--optional .cg-title { color: var(--violet); }

@media (max-width: 720px) {
  .opening { flex-wrap: wrap; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .gi-card, .opening { transition: none !important; }
}