/* SEEK2LRN — Classes: "meet some educators" (random). Scoped under the
   section's own classes; reuses the tutor-card + grid rules from
   find-a-tutor.css (loaded earlier on this page) rather than redefining
   them — only this section's own states and its entrance live here. */

/* The list sits outside .s2t-main, so it declares its own inline-size
   container under the SAME name find-a-tutor.css queries against
   (@container s2t-results ...): the card's responsive rules apply here too. */
.s2c-random-list { container: s2t-results / inline-size; }

/* This part of the page is one-on-one only: hide each card's group-classes
   column. Both offer columns already carry flex: 1 1 0 (find-a-tutor.css,
   the 2026-09-23 bordered-card rules), so removing one from the flex row
   hands its width straight to the one-to-one column beside it. */
.s2c-random .s2t-t-groups { display: none; }

/* ---- quiet loading state ---- */
.s2c-random-list.is-loading { min-height: 120px; display: flex; align-items: center; justify-content: center; }
.s2c-r-loading { font-size: 0.92rem; font-weight: 300; color: var(--s2e-muted); animation: s2c-r-pulse 1.6s ease-in-out infinite; }
@keyframes s2c-r-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* ---- error / empty ---- */
.s2c-r-state { padding: 3rem 1rem; text-align: center; }
.s2c-r-state p { font-size: 0.98rem; font-weight: 300; color: var(--s2e-muted); margin: 0 0 1.1rem; }
.s2c-r-retry {
  font-family: inherit; font-size: 0.88rem; font-weight: 400; padding: 0.55rem 1.4rem;
  border: 1px solid var(--s2e-ink); background: transparent; color: var(--s2e-ink);
  cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease;
}
.s2c-r-retry:hover { background: var(--s2e-ink); color: #fff; }
.s2c-r-retry:focus-visible { outline: 2px solid var(--s2e-blue); outline-offset: 2px; }

/* ---- "See all educators", below the cards (or the empty note) ---- */
.s2c-r-allwrap { margin-top: 1.8rem; text-align: center; }
.s2c-r-all {
  display: inline-block; font-size: 0.88rem; font-weight: 400; padding: 0.6rem 1.5rem;
  border: 1px solid var(--s2e-ink); color: var(--s2e-ink);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.s2c-r-all:hover { background: var(--s2e-ink); color: #fff; }
.s2c-r-all:focus-visible { outline: 2px solid var(--s2e-blue); outline-offset: 2px; }

/* ---- entrance: cards settle in one after another, blur + a short drop to
   sharp — "like cloth falling" — same idea as Find an Educator's own
   .s2f-settle (pages-src/find-an-educator.html), renamed to this section's
   own class so the two stay independent. */
@keyframes s2c-cloth {
  from { opacity: 0; transform: translateY(-18px); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}
.s2c-random-list.s2c-settle .s2t-tcard {
  animation: s2c-cloth 1.1s cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: calc(var(--s2c-i, 0) * 0.3s);
}
.s2c-random-list.s2c-settle .s2t-tcard:nth-child(2) { --s2c-i: 1; }
.s2c-random-list.s2c-settle .s2t-tcard:nth-child(3) { --s2c-i: 2; }
.s2c-random-list.s2c-settle .s2t-tcard:nth-child(4) { --s2c-i: 3; }
.s2c-random-list.s2c-settle .s2t-tcard:nth-child(5) { --s2c-i: 4; }

@media (prefers-reduced-motion: reduce) {
  .s2c-random-list.s2c-settle .s2t-tcard { animation: none; }
  .s2c-r-loading { animation: none; }
}