/* Keep the shelf heading readable when librarian actions need their own row. */
.study-materials-page .study-material-heading {
  flex-wrap: wrap;
}

.study-materials-page .study-material-heading > div:first-child {
  flex: 1 1 24rem;
  min-width: 0;
  max-width: 100%;
}

.study-materials-page .study-material-heading-actions {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
}

.study-materials-page .study-material-heading-actions > button {
  flex: 0 0 auto;
  max-width: 100%;
  white-space: nowrap;
}

.study-materials-page .study-material-heading :is(h2, p) {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* The shelf already switches to its tablet layout at 930px. Use the same
   breakpoint for copy/actions, including the old 621–760px conflict. */
@media (max-width: 930px) {
  .study-materials-page .study-material-heading {
    flex-direction: column;
    gap: 14px;
  }

  .study-materials-page .study-material-heading > div:first-child {
    flex: 0 1 auto;
    width: 100%;
  }

  .study-materials-page .study-material-heading-actions {
    width: 100%;
  }
}