/* Shared Math-style teacher cards (2026-10-08) — rendered by shared/_teacher_cards.html.erb on
   /special/stem and /tutoring/english so every teacher section looks like /tutoring/math.
   Rules copied from math.scss L183–368 and scoped under .soar-teacher-cards; math still has its
   own copy — migrating /tutoring/math onto the shared partial is a follow-up. Custom properties
   live on the wrapper (never :root). application.css `stub`s this file like the other page-only
   sheets, so it is served only through the pages' own stylesheet_link_tag. The font is inherited
   from the page. Text rules carry the .teacher-card-body ancestor so they outrank the landing pages'
   own `p { margin: 1em 0 }` resets (ESL's is .esl-body .esl-landing p). */
.soar-teacher-cards {
  --tc-ink: #0F172A;
  --tc-body: #475569;
  --tc-hairline: rgba(15, 23, 42, 0.06);
  --tc-edge: rgba(15, 23, 42, 0.12);
  --tc-canvas: #FFFFFF;
  --tc-surface-1: #F8FAFC;
  --tc-surface-2: #F1F5F9;
  --tc-surface-3: #EEF2FF;
  --tc-accent: #6366F1;
  --tc-accent-ink: #312E81;
  font-family: inherit;
}
.soar-teacher-cards .teachers-carousel-wrap { position: relative; max-width: 960px; margin: 38px auto 0; }
.soar-teacher-cards .teachers-carousel { display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 8px 4px 24px; }
.soar-teacher-cards .teachers-carousel::-webkit-scrollbar { display: none; }
.soar-teacher-cards .teacher-card { flex: 0 0 300px; scroll-snap-align: start; background: var(--tc-canvas); border: 1px solid var(--tc-hairline); border-radius: 18px; overflow: hidden; box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06); display: flex; flex-direction: column; transition: box-shadow 0.2s, transform 0.2s; }
.soar-teacher-cards .teacher-card:hover { box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10); transform: translateY(-2px); }
.soar-teacher-cards .teacher-card-banner { height: 110px; background: linear-gradient(135deg, #C7D2FE 0%, #E0E7FF 100%); position: relative; }
.soar-teacher-cards .teacher-card-photo { position: absolute; bottom: -36px; left: 24px; width: 88px; height: 88px; border-radius: 50%; border: 4px solid var(--tc-canvas); background: var(--tc-surface-2); overflow: hidden; }
.soar-teacher-cards .teacher-card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; border-radius: 50%; display: block; }
/* The 600×450 landscape portraits: the faces sit left of centre (same offsets the ESL card used). */
.soar-teacher-cards .teacher-card-photo--melissa img { object-position: 35% 30%; }
.soar-teacher-cards .teacher-card-photo--daniel img { object-position: 37% 30%; }
.soar-teacher-cards .teacher-card-photo--greg img { object-position: 35% 30%; }
.soar-teacher-cards .teacher-card-photo--rana img { object-position: 34% 30%; }
.soar-teacher-cards .teacher-card-crest { position: absolute; top: 16px; right: 16px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.12)); }
.soar-teacher-cards .teacher-card-crest img { width: 100%; height: 100%; object-fit: contain; display: block; }
.soar-teacher-cards .teacher-card-body { padding: 48px 22px 22px; flex: 1 1 0; display: flex; flex-direction: column; }
/* !important: the site-wide stylesheet forces `h3 { font-size: 18px !important }` under 768px (see the note in
   english_tutoring_pages.scss) and the landing pages inherit a 1.65 line-height into headings. */
.soar-teacher-cards .teacher-card-body .teacher-card-name { font-size: 20px !important; line-height: 1.15 !important; color: var(--tc-ink); margin: 0 0 10px; font-weight: 700; letter-spacing: -0.01em; }
.soar-teacher-cards .teacher-card-divider { border: none; border-top: 1px dashed var(--tc-edge); margin: 10px 0 14px; }
.soar-teacher-cards .teacher-card-body .teacher-card-cert, .soar-teacher-cards .teacher-card-body .teacher-card-univ { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--tc-ink); margin: 0 0 4px; }
.soar-teacher-cards .teacher-card-cert-icon, .soar-teacher-cards .teacher-card-univ-icon { width: 16px; height: 16px; flex: 0 0 auto; opacity: 0.7; margin-top: 2px; }
.soar-teacher-cards .teacher-card-body .teacher-card-major { font-size: 14px; color: var(--tc-body); line-height: 1.5; margin: 0 0 14px; word-break: keep-all; overflow-wrap: break-word; }
/* Badge text #9A3412 (math uses #C2410C, 4.3:1 on this tint — under AA for 14px/600); 6:1 here. Align math on the follow-up. */
.soar-teacher-cards .teacher-card-badge { display: inline-block; background: #FFE5DE; color: #9A3412; font-size: 14px; font-weight: 600; padding: 4px 10px; border-radius: 8px; margin-bottom: 16px; align-self: flex-start; }
.soar-teacher-cards .teacher-card-tags { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 6px; margin-top: auto; }
.soar-teacher-cards .teacher-card-tag { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px; background: var(--tc-surface-3); color: var(--tc-accent-ink); font-size: 13px; font-weight: 500; padding: 5px 10px; border-radius: 6px; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
/* Two long highlights (STEM/ESL teachers) stack full-width and read left-aligned. */
.soar-teacher-cards .teacher-card-tags--stack { grid-template-columns: 1fr; grid-auto-rows: auto; }
.soar-teacher-cards .teacher-card-tags--stack .teacher-card-tag { justify-content: flex-start; text-align: left; padding: 8px 12px; word-break: keep-all; overflow-wrap: break-word; }
.soar-teacher-cards .teachers-carousel-controls { display: flex; justify-content: center; gap: 16px; margin-top: 16px; }
.soar-teacher-cards .teachers-carousel-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--tc-edge); background: var(--tc-canvas); color: var(--tc-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; font-family: inherit; padding: 0; }
.soar-teacher-cards .teachers-carousel-btn:hover { background: var(--tc-surface-1); }
.soar-teacher-cards .teachers-carousel-btn:focus-visible { outline: 2px solid var(--tc-accent); outline-offset: 2px; }
.soar-teacher-cards .teachers-carousel-btn[disabled] { opacity: 0.35; cursor: not-allowed; }
.soar-teacher-cards .teachers-carousel-btn svg { width: 20px; height: 20px; }
/* Every card fits without scrolling → no controls. */
.soar-teacher-cards.is-static .teachers-carousel-controls { display: none; }
@media (max-width: 640px) {
  .soar-teacher-cards .teacher-card { flex: 0 0 270px; }
  .soar-teacher-cards .teachers-carousel-btn { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .soar-teacher-cards .teachers-carousel { scroll-behavior: auto; }
  .soar-teacher-cards .teacher-card, .soar-teacher-cards .teacher-card:hover { transition: none; transform: none; }
}