/* Reusable teacher-card + filter component styles.
   Extracted from the bespoke /teachers/ page (originally #tp-scoped) and
   re-scoped to .tcards so it can be dropped onto any language landing page.
   Pair with /js/teachers-filter.js. Tailwind utility classes used inside the
   cards come from each page's own tw-<slug>.min.css build (rebuild after edits). */

.tcards a,
.tcards a:link,
.tcards a:visited,
.tcards a:hover,
.tcards a:active { text-decoration: none; }

/* Card */
.tcards .teacher-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #E5E5E3;
  border-left: 0px solid #D916B0;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, border-left-width 0.2s ease;
}
.tcards .teacher-card:hover {
  box-shadow: 0 8px 32px rgba(10, 15, 18, 0.08);
  border-left-width: 6px;
}
.tcards .teacher-photo { aspect-ratio: 4 / 5; overflow: hidden; background: #f5f5f5; }
.tcards .teacher-photo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; filter: grayscale(1); transition: filter 0.4s ease;
}
.tcards .teacher-card:hover .teacher-photo img { filter: grayscale(0); }

/* Chips */
.tcards .teacher-chip {
  display: inline-flex; align-items: center;
  padding: 6px 10px; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em; line-height: 1;
}
.tcards .teacher-chip--country { background: #FFE600; color: #0a0f12; }
.tcards .teacher-chip--exp { background: #f5f5f5; color: rgba(10, 15, 18, 0.7); }

/* Filter pills */
.tcards .filter-pill {
  display: inline-flex; align-items: center;
  padding: 10px 20px; font-size: 13px; font-weight: 700;
  border: 1px solid #E5E5E3; background: #fff; color: #555;
  cursor: pointer; transition: all 0.18s ease; white-space: nowrap;
}
.tcards .filter-pill:hover { border-color: #0A0F12; color: #0A0F12; }
.tcards .filter-pill.active { background: #0A0F12; color: #fff; border-color: #0A0F12; }

/* Scroll reveal */
.tcards .reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.tcards .reveal.visible { opacity: 1; transform: translateY(0); }

/* Empty state */
.tcards .no-results { display: none; text-align: center; padding: 4rem 1rem; }
.tcards .no-results.visible { display: block; }