/* ==========================================================================
   List of Books  —  /page/book/
   Loaded alongside two shared files: page-head.css for the photo banner and
   the heading with its rule, and tabs.css for the two pills and the show/hide
   of the panels. This file is only the rows of departments beneath them.

   The row is a near-twin of .brochure-row and deliberately not the same class.
   That one is a download — it carries a download icon, a "Coming soon" state
   and a left spine that lights up. This one is a way through to a list, so it
   carries an arrow that moves on hover instead. Two rows that look alike today
   but answer to different jobs are better apart than merged and then pulled
   in opposite directions later.
   ========================================================================== */

.book-section { background: var(--page-alt); }

/* Wider than the 62px page-head.css default: under a heading as long as
   "List of University Publications Books" the short rule reads as a stray
   dash rather than an underline. */
.book-section .page-rule { width: 96px; }

/* The panel heading sits directly under the pills, which already carry the
   space above them. */
.book-pane__head { margin-bottom: 22px; }

/* ============================================================ ROWS ======= */
/* Two to a line on a desktop, reading ACROSS then down, and one to a line on
   a phone. The count is FIXED rather than left to auto-fit with a minimum:
   auto-fit divides the 1240px shell by that minimum, so a 320-330px floor
   yields THREE columns above about 1200px — wider than this page is meant to
   be and not what the design asks for.

   minmax(0, 1fr), never plain 1fr: a track's default minimum is auto, the
   width of its longest unbreakable word, so one long name would push its
   column past its share and the page sideways with it. */
.book-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The whole row is the target, not just the arrow: a 20px arrow is well under
   the 44px a finger needs, and the department name is what people aim at. */
.book-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  height: 100%;
  /* Tall enough to clear the 44px touch minimum even when the name is one
     short line, so a row that wraps to two lines and one that does not still
     look like the same row. */
  min-height: 68px;
  padding: 18px 26px;
  background: var(--paper);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition), transform var(--transition);
}

a.book-row:hover,
a.book-row:focus-visible {
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
a.book-row:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

.book-row__title {
  color: var(--ink);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.45;
}

.book-row__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--ink);
  transition: transform var(--transition);
}
.book-row__icon svg { width: 20px; height: 20px; fill: currentColor; }
a.book-row:hover .book-row__icon,
a.book-row:focus-visible .book-row__icon { transform: translateX(4px); }

/* A row whose list has not been uploaded yet. It stays on the page so the
   department list is complete, and it stops looking like something to press:
   the arrow fades and the pointer does not change. See the note in
   includes/book_row.html — the row turns into a link by itself once the file
   is in place. */
.book-row--pending .book-row__icon { opacity: .3; }

/* A whole panel with nothing in it yet. */
.book-empty {
  margin: 0;
  padding: 30px 24px;
  background: var(--paper);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.7;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 767.98px) {
  .book-list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575.98px) {
  .book-list { gap: 12px; }
  .book-row {
    min-height: 60px;
    padding: 15px 18px;
    gap: 14px;
  }
  .book-row__title { font-size: .88rem; }
  .book-section .page-rule { width: 74px; }
}

@media (prefers-reduced-motion: reduce) {
  .book-row,
  .book-row__icon { transition: none; }
  a.book-row:hover { transform: none; }
  a.book-row:hover .book-row__icon,
  a.book-row:focus-visible .book-row__icon { transform: none; }
}


/* ------------------------------------------------ published books list --
   Three pages share this file: the department rows at /page/book/, the covers
   for one department, and the book's own page. */

/* The count sitting on a department row, so somebody can see how much is
   behind it before following it. */
.book-row__count {
  margin-left: auto;
  flex: none;
  min-width: 26px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--line, #eceff4);
  /* NOT --muted. #6b6b6b on the #e2e2e2 pill is 4.11:1, under the 4.5 this
     12px number needs - it has been that way since the page was built, not a
     palette change. #616161 is 4.78:1 and the same grey to look at. */
  color: #616161;
  font-size: .74rem;
  font-weight: 600;
  text-align: center;
}

.book-crumbs {
  margin: 0 0 22px;
  font-size: .82rem;
  color: var(--muted, #6b7280);
}
.book-crumbs a { color: var(--muted, #6b7280); }
.book-crumbs a:hover { color: var(--accent, var(--accent)); }
.book-crumbs span { margin: 0 7px; }

/* ---------------------------------------------------------- the covers -- */
.book-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* auto-fill, not auto-fit: a department with one book should show one card
     at its natural width, not one card stretched across the whole row. */
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 26px 22px;
}

.book-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.book-card__cover {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--paper, #fff);
  border-radius: var(--radius-sm, 6px);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition), transform var(--transition);
}
.book-card__cover img {
  width: 100%;
  height: 100%;
  /* cover, not contain: these are book jackets, all roughly portrait, and a
     letterboxed jacket on a white panel reads as a mistake. */
  object-fit: cover;
}
.book-card__link:hover .book-card__cover,
.book-card__link:focus-visible .book-card__cover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Shown until a jacket is uploaded. Deliberately not a grey rectangle: this
   reads as a book whose cover is still to come, which is what it is. */
.book-card__placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--accent-soft, #d4b551);
  background:
    repeating-linear-gradient(135deg,
      rgba(0,0,0,.02) 0 10px, transparent 10px 20px),
    var(--page, #f6f7f9);
}
.book-card__placeholder--lg { aspect-ratio: 3 / 4; border-radius: var(--radius-sm, 6px); }

.book-card__body { padding: 11px 2px 0; }
.book-card__title {
  display: block;
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink, #1f1f1f);
}
.book-card__link:hover .book-card__title { color: var(--accent, var(--accent)); }
.book-card__isbn {
  display: block;
  margin-top: 4px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .7rem;
  color: var(--muted, #6b7280);
}

/* ------------------------------------------------------- the book page -- */
.book-detail {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 767.98px) {
  /* The cover stops leading and becomes an illustration: at this width a
     320px column leaves the text in a gutter. */
  .book-detail { grid-template-columns: 1fr; gap: 24px; }
  .book-detail__cover { max-width: 220px; }
}

.book-detail__cover img {
  width: 100%;
  border-radius: var(--radius-sm, 6px);
  box-shadow: var(--shadow-md);
}

.book-detail__title {
  margin: 0 0 18px;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--ink, #1f1f1f);
}

.book-detail__meta { margin: 0 0 24px; }
.book-detail__meta > div {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line, #e6e6e6);
}
.book-detail__meta dt {
  margin: 0;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted, #6b7280);
}
.book-detail__meta dd { margin: 0; font-size: .9rem; color: var(--ink, #1f1f1f); }
.book-detail__isbn { font-family: ui-monospace, Menlo, Consolas, monospace; }

.book-detail__about h2 {
  margin: 0 0 8px;
  font-size: .95rem;
  color: var(--ink, #1f1f1f);
}
.book-detail__about p { margin: 0 0 20px; font-size: .9rem; line-height: 1.7; }

.book-detail__more { margin-top: 48px; }

.book-empty { color: var(--muted, #6b7280); padding: 30px 0; }