/* Behind The Pages — the compact list on the homepage and the overview table.
   The markup is generated by script, so it is styled with classes here rather
   than with inline styles (which would also block the :hover states). */

/* — homepage list — */
.btp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.btp-link {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
  gap: 6px 26px; padding: 16px 26px; color: inherit; text-decoration: none;
}
.btp-item + .btp-item .btp-link { border-top: 1px solid var(--color-divider); }
.btp-item--newest + .btp-item { margin-top: 14px; }
.btp-item--newest + .btp-item .btp-link { border-top: 0; }
.btp-item--newest { background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
.btp-item--newest .btp-link { padding: 22px 26px; }

.btp-badge { grid-column: 1 / -1; justify-self: start; margin-bottom: 4px; letter-spacing: 0.16em; text-transform: uppercase; }
.btp-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 19px; line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase;
  transition: color 160ms ease;
}
.btp-item--newest .btp-title { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.05; }
.btp-link:hover .btp-title, .btp-link:focus-visible .btp-title { color: var(--color-accent-700); }
.btp-meta {
  display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: flex-end;
  font-size: 13px; color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.btp-date { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--color-accent-700); }

.btp-empty { padding: 22px 26px; }
.btp-empty h3 { margin: 12px 0 6px; font-size: 22px; line-height: 1.05; text-transform: uppercase; }
.btp-empty p { margin: 0; font-size: 15px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }

/* — overview table — */
.btp-table { width: 100%; border-collapse: collapse; }
.btp-table th {
  text-align: left; padding: 0 14px 12px; border-bottom: 1px solid var(--color-divider);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.btp-table td { padding: 20px 14px; border-bottom: 1px solid var(--color-divider); vertical-align: baseline; }
.btp-table tbody tr:hover { background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
.btp-table .btp-col-date, .btp-table .btp-col-time { white-space: nowrap; width: 1%; }
.btp-table td.btp-col-time { font-size: 14px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.btp-table-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(19px, 2vw, 24px); line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--color-text); text-decoration: none;
}
.btp-table-title:hover, .btp-table-title:focus-visible { color: var(--color-accent-700); }
.btp-table-empty { font-size: 16px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }

@media (max-width: 720px) {
  .btp-link { grid-template-columns: minmax(0, 1fr); padding: 14px 18px; }
  .btp-item--newest .btp-link { padding: 20px 18px; }
  .btp-meta { justify-content: flex-start; }

  /* The table turns into stacked rows: title on top, date and reading time below. */
  .btp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .btp-table tr { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 16px 4px; border-bottom: 1px solid var(--color-divider); }
  .btp-table td { padding: 0; border: 0; }
  .btp-table td:first-child { flex: 1 1 100%; }
  .btp-table .btp-col-date, .btp-table .btp-col-time { width: auto; }
}

/* .btn sets display, which would otherwise override the hidden attribute. */
[data-btp][hidden] { display: none !important; }

.btp-mobile-label { display: none; }
@media (max-width: 720px) { .btp-mobile-label { display: inline; } }