/* Results table on the 26 Oct 2026 SEO study. The four columns share the
   column width and wrap. Rows stack when the column is narrow. */
.study-table {
  container-type: inline-size;
  max-inline-size: 100%;
  overflow: auto;
}

.study-table table {
  border-collapse: separate;
  border-spacing: 0;
  inline-size: 100%;
  table-layout: fixed;
  --label-2: "Items";
  --label-3: "Example";
  --label-4: "Correct, lowest to highest of six models";
}

.study-table thead th:nth-child(1) { inline-size: 28%; }
.study-table thead th:nth-child(2) { inline-size: 18%; }
.study-table thead th:nth-child(3) { inline-size: 32%; }
.study-table thead th:nth-child(4) { inline-size: 22%; }

body.page-study .study-copy h3 {
  font-size: 1.25rem;
  margin-block-start: 2rem;
}

.study-table th,
.study-table td {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  overflow-wrap: anywhere;
  padding: 0.65rem 0.75rem;
  text-align: start;
  vertical-align: top;
}

.study-table thead th {
  background: var(--bg);
  font-size: 0.8125rem;
  inset-block-start: 0;
  position: sticky;
  z-index: 1;
}

.study-table tbody th {
  background: var(--paper);
  inset-inline-start: 0;
  position: sticky;
  z-index: 2;
}

@container (width < 600px) {
  .study-table table,
  .study-table thead,
  .study-table tbody,
  .study-table tr,
  .study-table th,
  .study-table td {
    display: block;
    inline-size: auto;
    min-inline-size: 0;
  }

  .study-table table { inline-size: 100%; }

  .study-table thead { display: none; }

  .study-table tr {
    border: 1px solid var(--line);
    margin-block-end: 1rem;
  }

  .study-table tbody th {
    inset-block-start: 0;
    inset-inline-start: auto;
    position: sticky;
    z-index: 2;
  }

  .study-table td::before {
    color: var(--ink);
    content: var(--label-2) ": " / var(--label-2);
    font-weight: 600;
  }

  .study-table td:nth-child(3)::before { content: var(--label-3) ": " / var(--label-3); }
  .study-table td:nth-child(4)::before { content: var(--label-4) ": " / var(--label-4); }
}