/*
 * SMITH Empowers — site additions on top of the component library (components.css).
 * Everything here reuses the library tokens (--se-*) and stays scoped under .se.
 * Keep components.css untouched so it can be updated from the library.
 */

/* Utilities */
.se-mb { margin-bottom: 24px; }
.se-mt { margin-top: 16px; }
.se-rounded { border-radius: 18px; }
.se .se-h3 { font-size: 1.5rem; margin-bottom: 16px; }
.se-page-top { padding-top: 40px; }
.se-section--tight { padding-top: 0; }
.se-grid--spaced { margin-top: 20px; }
.se-button--block { width: 100%; }

/* Navigation: current page */
.se-nav-links > a[aria-current="page"] { color: var(--se-ink); font-weight: 650; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }

/* Breadcrumb */
.se-breadcrumb { font-size: .875rem; color: var(--se-body); margin-bottom: 20px; }
.se-breadcrumb a { color: var(--se-blue-deep); }

/* Feature panel used as a page hero */
.se-feature-title { font-size: clamp(2.2rem, 4vw, 3.4rem) !important; }
.se-program-icon { width: 160px !important; max-height: 160px !important; }

/* Forms — extend the library's invalid state to select/textarea, add fieldsets and grid spans */
.se-field select[aria-invalid="true"], .se-field textarea[aria-invalid="true"] { border: 2px solid #b3261e; background: #fff8f7; }
.se-field { align-content: start; }
.se-field > span:first-child { display: flex; gap: 6px; align-items: baseline; }
.se-span-2 { grid-column: 1 / -1; }
.se-fieldset { border: 0; padding: 0; margin: 28px 0 8px; }
.se-fieldset legend { font-size: .9rem; font-weight: 600; margin-bottom: 4px; padding: 0; }
.se-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.se-check-grid .se-check { margin-block: 12px 0; }
.se-check + .se-field-error { display: block; margin: -16px 0 16px 32px; }
.se-form-panel .se-form-grid + .se-fieldset,
.se-form-panel .se-fieldset + .se-form-grid { margin-top: 24px; }
.se-honeypot { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Program page */
.se-program-layout, .se-contact-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 48px; align-items: start; }
.se-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.se-list li { position: relative; padding-left: 32px; color: var(--se-body); }
.se-list li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: #d9f4e8; color: #18543e; font-size: .75rem; font-weight: 700; display: grid; place-items: center; margin-top: 2px; }
.se-list--plain { padding-bottom: 24px; }
.se-list--plain li::before { content: ''; width: 8px; height: 8px; background: var(--se-blue-deep); margin-top: 9px; left: 6px; }
.se-facts-panel { position: sticky; top: 104px; display: grid; gap: 20px; padding: 32px; border-radius: var(--se-radius); background: var(--se-surface); }
.se .se-facts-panel .se-h3 { margin-bottom: 0; }
.se-program-layout > .se-stack { gap: 48px; }
.se-program-benefits { gap: 24px; max-width: 70ch; }
.se-program-benefits strong { color: var(--se-ink); }
.se-facts { margin: 0; display: grid; gap: 14px; }
.se-facts div { display: grid; gap: 2px; padding-bottom: 14px; border-bottom: 1px solid var(--se-border); }
.se-facts div:last-child { border-bottom: 0; padding-bottom: 0; }
.se-facts dt { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--se-body); }
.se-facts dd { margin: 0; color: var(--se-ink); }

/* People (board and team) */
.se-people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.se-person { padding: 28px; border-radius: var(--se-radius); background: var(--se-surface); }
.se-person-photo { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; margin-bottom: 20px; }
.se-person-initials { display: grid; place-items: center; background: #e1edf9; color: var(--se-blue-deep); font-weight: 750; font-size: 1.4rem; }
.se-person:nth-child(3n+2) .se-person-initials { background: #d9f4e8; color: #18543e; }
.se-person:nth-child(3n) .se-person-initials { background: #ffe1db; color: #763022; }
.se-person h3 { font-size: 1.2rem; }
.se-person-role { display: block; margin: 6px 0 12px; font-size: .85rem; font-weight: 650; color: var(--se-blue-deep); }
.se-person p { font-size: .95rem; }

/* Get involved */
.se-benefits--flush { margin-top: 0; }
.se-support-card.se-support-card--neutral { background: var(--se-surface); }

/* Legal / long-form text */
.se-prose { max-width: 70ch; }
.se-prose h2 { font-size: 1.6rem; margin: 40px 0 12px; scroll-margin-top: 100px; }
.se-prose h3 { font-size: 1.2rem; margin: 28px 0 8px; }
.se-prose p, .se-prose ul { margin: 0 0 16px; color: var(--se-body); }
.se-prose ul { padding-left: 1.25rem; }

/* Newsletter band above the footer */
.se-newsletter { background: #edf4fa; padding-block: 56px; }
.se-newsletter-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.se-newsletter-title { font-size: clamp(1.6rem, 3vw, 2.2rem) !important; margin-bottom: 12px !important; }
.se-newsletter-form { display: grid; gap: 14px; }
.se-newsletter-form .se-button { justify-self: start; }

/* Footer extensions */
.se-footer-grid--wide { grid-template-columns: 2fr 1fr 1fr 1fr; }
.se-footer-social { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.se-footer .se-footer-social a { min-height: 32px; display: inline-flex; align-items: center; }
.se-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.se-footer .se-footer-bottom a { display: inline; min-height: 0; font-size: inherit; }

@media (max-width: 1000px) {
  .se-people { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .se-footer-grid--wide { grid-template-columns: 1fr 1fr 1fr; }
  .se-footer-grid--wide > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .se-program-layout, .se-contact-layout, .se-newsletter-inner { grid-template-columns: 1fr; gap: 32px; }
  .se-facts-panel { position: static; padding: 24px; }
  .se-people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .se-person { padding: 20px; border-radius: 20px; }
  .se-check-grid { grid-template-columns: 1fr; }
  .se-footer-grid--wide { grid-template-columns: 1fr 1fr; }
  .se-page-top { padding-top: 24px; }
}
@media (max-width: 480px) {
  .se-people { grid-template-columns: 1fr; }
}
