/* ==========================================================================
   Documents — the media column on a document's show page.

   Everything else that page needs already exists: the identity band and
   .list-panel from line-items.css, .chip and .card-thumbnail-label from
   list-blocks.css, .status-banner from course-dashboard.css, .action-panel.
   What is here is only the slot that holds the rendered first page.

   LOAD ORDER — Propshaft sorts logical paths alphabetically, so this file
   loads BEFORE line-items.css, list-blocks.css, main.css and utilities.css.
   Every selector is scoped under its own component class so it wins on
   specificity rather than on order — see the note at the top of people.css.
   ========================================================================== */

/* The column: the page image, and under it the way to get the file. 306px is
   half of the 612px a letter page renders at (pdftoppm runs at 72 DPI), so
   the picture is pixel-exact on a 2x screen. max-width keeps it inside the
   panel at 375px, where the inner width is about 273px. */
.document-media {
  flex: none;
  width: 19.125rem;
  max-width: 100%;
}

.document-preview {
  display: block;
  overflow: hidden;
  border: 3px solid var(--nieve);
  border-radius: var(--radius-md);
  background: var(--nieve);
  box-shadow: var(--shadow-thumbnail), var(--shadow-thumbnail-edge);
}

/* WIDTH is the constant here; the height is whatever was rendered.
   Deliberately no aspect-ratio, no object-fit and no crop: we do not know the
   shape of a document. A letter page comes back portrait, a slide deck comes
   back landscape, and both are correct — the band sits beside whichever it
   gets. (The Library card crops to the top instead, because a fixed 8rem by
   5.25rem slot has to choose. This one doesn't.) */
.document-preview img {
  display: block;
  width: 100%;
  height: auto;
}

/* The one place a shape IS chosen, because there is no render to take one
   from: landscape, at the same 128x84 proportion as the card's thumbnail. */
.document-preview-empty {
  display: grid;
  place-items: center;
  aspect-ratio: 128 / 84;
}

/* The card's own label, a size up for a slot nearly two and a half times as
   wide. Scoped under .document-preview so it outranks list-blocks.css, which
   loads after this file. */
.document-preview .card-thumbnail-label {
  gap: 0.75rem;
  font-size: 1.25rem;
}

.document-preview .card-thumbnail-label::after {
  width: 5rem;
  height: 3px;
}

/* Full width of the column rather than shrink-wrapped: it is the one thing
   most people came to this page to do, and a button the width of the picture
   above it reads as belonging to that picture. Two classes deep to clear
   utilities.css's A.button, which loads later. */
.document-media .button {
  display: block;
  width: 100%;
  margin-top: var(--space-3);
  text-align: center;
}

/* The description, directly under the title. Body size rather than the band's
   small print — with the title it is the thing the page is actually about. */
.document-lede {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-body);
  line-height: 1.6;
  text-wrap: pretty;
}

.document-labels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: 0.25rem;
}