/* Academy article enhancements — small additions ON TOP of the global Trace
   design system (tokens from traceup.webflow.css: --teal-*, --sand,
   --charcoal-*, --light-stroke, --red; fonts Atak / Inter). */

/* ---- Comparison tables inside academy rich text ---------------------------
   Semantic <table> with <thead>, <th scope="col">, <th scope="row"> and a
   visually-hidden <caption> so answer engines and screen readers can parse the
   structure. The scroll container keeps wide tables usable on mobile. */

.academy-table {
  width: 100%;
  max-width: 100%;
  margin: 34px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--light-stroke);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 30px -22px rgba(31, 97, 109, .35);
}
.academy-table:focus-visible { outline: 2px solid var(--teal-40); outline-offset: 2px; }

.academy-table table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: #fff;
  font-family: Inter, sans-serif;
}

/* Visually-hidden caption (still read by assistive tech / crawlers) */
.academy-table caption {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.academy-table th,
.academy-table td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  font-size: .96em;
  line-height: 1.5;
  border-bottom: 1px solid var(--light-stroke);
}

/* Column headers */
.academy-table thead th {
  font-family: Atak, sans-serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--teal-50);
  background: var(--sand);
  border-bottom: 2px solid var(--light-stroke);
  white-space: nowrap;
}

/* Row-label column */
.academy-table tbody th[scope="row"] {
  font-family: Inter, sans-serif;
  font-weight: 600;
  color: var(--charcoal-50);
  background: #fff;
}

/* Body cells */
.academy-table tbody td {
  color: var(--charcoal-40);
}
.academy-table tbody tr:last-child th,
.academy-table tbody tr:last-child td { border-bottom: 0; }

/* Highlighted Trace column */
.academy-table thead th.tc {
  background: var(--teal-40);
  color: #fff;
}
.academy-table tbody td.tc {
  background: var(--teal-10);
  color: var(--teal-50);
  font-weight: 500;
}

/* Sticky row-label column so wide tables stay readable while scrolling */
.academy-table thead th:first-child,
.academy-table tbody th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 1;
  box-shadow: 1px 0 0 var(--light-stroke);
}
.academy-table thead th:first-child { z-index: 2; }

/* Desktop row hover */
@media (hover: hover) {
  .academy-table tbody tr:hover td,
  .academy-table tbody tr:hover th[scope="row"] { background: var(--sand); }
  .academy-table tbody tr:hover td.tc { background: var(--teal-10); }
}

@media (max-width: 767px) {
  .academy-table { margin: 26px 0; border-radius: 14px; }
  .academy-table th,
  .academy-table td { padding: 12px 14px; font-size: .9em; }
}