/* =============================================================================
   partner.css — /partner/ only (scoped via body.partner-landing).

   The shared .stat-row / .grid--3 / .feature-grid classes use CSS Grid with
   auto-fit columns. That's great when the item count divides evenly into
   the column count, but when it doesn't (e.g. 4 stats in a row that wraps
   to 3+1, or 5 program cards wrapping to 3+2), Grid left-aligns the leftover
   row instead of centering it. Flexbox-with-wrap centers naturally, so this
   page overrides those three containers to flex, matching each one's
   original minmax basis. Scoped to this page only — the shared classes are
   untouched everywhere else on the site.
   ========================================================================= */
body.partner-landing .stat-row,
body.partner-landing .grid--3,
body.partner-landing .feature-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
body.partner-landing .stat-row > * { flex: 0 1 160px; }
body.partner-landing .grid--3 > * { flex: 0 1 300px; }
body.partner-landing .feature-grid > * { flex: 0 1 250px; }

/* Discovery-call aside: contact headshot + tightened icon/email row so a
   long "@lauruscollege.edu" address sits cleanly next to its icon instead
   of wrapping awkwardly. */
.partner-contact-card { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.partner-contact-card__photo { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.partner-contact-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.partner-contact-card__name { display: block; font-size: var(--text-base); color: var(--color-primary); }
.partner-contact-card__title { display: block; font-size: var(--text-sm); color: var(--color-text-muted); }

.partner-contact-row { display: flex; align-items: flex-start; gap: .4rem; font-size: var(--text-sm); }
.partner-contact-row .icon { flex-shrink: 0; margin-top: .15rem; }
.partner-contact-row a { word-break: break-word; }

/* =============================================================================
   Color treatment inspired by Mary's TalentBridge mockup (talentbridge_mockup
   (2).pdf) — reuses this site's OWN existing tokens (--color-orange / navy /
   .section--navy) rather than inventing new colors. Per Anahi, 2026-08-18:
   keep all copy/layout as-is, just pop the color. Scoped to this page only —
   note this page intentionally uses --color-orange as a text/fill color and
   as the primary button color, which is wider use than design-system.css's
   documented "accent only, never large fills" rule for that token elsewhere
   on the site. Flag this for Rachel/Nat during review if that rule should
   hold here too.
   ========================================================================= */
.partner-hero-accent { color: var(--color-orange); }

body.partner-landing .section--surface { background: #f8f8f0; }

/* Benefits to Employer Partners / Career Advantages for Participants: two
   columns need to read as one unified section, with checkmarks lined up
   across both. Smaller heading size keeps "Career advantages for
   participants" on one line (it's a few characters longer than the other
   heading, so at the default h2 size it wrapped to two lines and pushed
   its checklist down). The second column's eyebrow is kept in the markup
   but visibility:hidden — that reserves the exact same vertical space as
   the first column's real "For employers" eyebrow, so both checklists
   start at the same height, without showing a redundant second label. */
.partner-benefit-head { font-size: var(--text-2xl); }

body.partner-landing .feature-card__icon {
  background: var(--color-primary);
  color: var(--color-orange);
  border-radius: var(--radius-md);
}

body.partner-landing .btn--primary {
  background: var(--color-orange);
  color: var(--color-primary);
}
body.partner-landing .btn--primary:hover { background: #e88f0f; }

.partner-stat-card {
  display: flex; align-items: center; gap: var(--space-3);
  max-width: 40rem; margin: var(--space-4) auto 0;
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4);
}
.partner-stat-card__num {
  font-family: var(--font-headline); font-weight: var(--weight-bold);
  font-size: var(--text-4xl); color: var(--color-orange); line-height: 1;
  flex-shrink: 0;
}
.partner-stat-card strong { display: block; color: var(--color-primary); }