/* ==========================================================================
   University Press  —  /page/university-press/
   Loaded alongside two shared files: page-head.css for the photo banner and
   the heading with its rule, and tabs.css for the five pills, their mobile
   dropdown and the show/hide of the panels.

   This file is what sits INSIDE a panel. The five panels are three shapes:

     Mission / Vision / Objectives   a numbered blue chip over its paragraph
     Committee                       a grid of name cards
     Published Bookes                a stack of title rows
   ========================================================================== */

.press-section { background: var(--paper); }

/* The name of the open panel, sitting under the pills. */
.press-pane__title {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: clamp(1.15rem, 1rem + .8vw, 1.4rem);
  font-weight: 700;
  line-height: 1.3;
}
/* The Published Bookes panel splits its title in two, the second half red —
   the same two-tone rule page-head.css uses for the page heading. */
.press-pane__title span { color: var(--red); }

/* A paragraph that opens a panel, above the numbered blocks. */
.press-lead {
  margin: 0 0 20px;
  color: var(--ink-soft);
  font-size: .92rem;
  line-height: 1.8;
  /* Justified, the way the rest of the site sets body copy. Dropped on a
     phone in the responsive block — it opens rivers in a narrow measure. */
  text-align: justify;
}

/* ============================================ NUMBERED CHIP + COPY ======= */
/* Square and shrink-to-fit, so the tint ends where the words do. An <h4>,
   because the paragraph under it belongs to it.

   The number is typed rather than generated by a list: these are separate
   blocks with a paragraph between them rather than one list, and an <ol>
   cannot carry that without the numbering breaking when a block is moved. */
.press-tag {
  display: table;
  margin: 0;
  padding: 7px 15px;
  background: #cfe4f7;
  color: var(--ink);
  font-size: .97rem;
  font-weight: 700;
  line-height: 1.4;
}
/* A chip sits closer to its own paragraph than to the block before it, which
   is what makes each numbered point read as one unit. */
.press-tag + .press-text { margin-top: 12px; }
.press-text + .press-tag { margin-top: 26px; }

.press-text {
  margin: 0;
  color: var(--ink-soft);
  font-size: .92rem;
  line-height: 1.75;
}

/* ======================================================= COMMITTEE ======= */
.press-committee {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.press-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Equal height across the row whether a card carries a role or not. */
  min-height: 96px;
  padding: 22px 20px;
  background: #dde7fa;
  text-align: center;
  /* The clipped bottom-right corner. clip-path rather than a rotated
     pseudo-element, so the notch shows the page behind it instead of a
     coloured patch that would break on any other backdrop. */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}

.press-member__name {
  color: var(--ink);
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.4;
}
.press-member__role {
  color: var(--ink-soft);
  font-size: .87rem;
  line-height: 1.4;
}

/* =================================================== PUBLISHED BOOKS ===== */
.press-books {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.press-book {
  padding: 14px 20px 12px;
  background: var(--paper);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition);
}
.press-book:hover { box-shadow: var(--shadow-sm); }

.press-book__title {
  display: block;
  color: var(--ink);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.45;
}

/* Under the title rather than beside it, and indented — the way the row reads
   on the printed catalogue this page replaces. */
.press-book__link {
  display: inline-block;
  margin: 6px 0 0 10px;
  color: var(--red);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.4;
  transition: color var(--transition);
}
.press-book__link:hover { color: #a80217; text-decoration: underline; }
.press-book__link:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* Shown in place of the link while the book's file is not uploaded. Quiet,
   and not a link: something that looks clickable and is not is worse than
   nothing in its place. */
.press-book__pending {
  display: inline-block;
  margin: 6px 0 0 10px;
  color: var(--muted);
  font-size: .76rem;
  font-style: italic;
}

/* A panel with nothing in it yet. */
.press-empty {
  margin: 0;
  padding: 24px 22px;
  background: var(--page-alt);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: .89rem;
  font-style: italic;
  line-height: 1.7;
}

/* ==========================================================================
   Responsive
   Only the committee grid reflows; every other panel is a single column read
   top to bottom, so the rest is type and padding.
   ========================================================================== */
@media (max-width: 991.98px) {
  .press-committee { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}

@media (max-width: 767.98px) {
  .press-tag { font-size: .92rem; padding: 6px 13px; }
  .press-text + .press-tag { margin-top: 22px; }
  .press-lead { text-align: left; }
}

@media (max-width: 575.98px) {
  /* One card to a row. Two 145px cards cannot hold a name like
     "Prof. (Dr.) Subrata Kumar Dey" on fewer than four lines. */
  .press-committee { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .press-member { min-height: 0; padding: 18px 16px; }
  .press-tag { font-size: .87rem; padding: 6px 11px; }
  .press-text,
  .press-lead { font-size: .88rem; line-height: 1.7; }
  .press-book { padding: 12px 15px 11px; }
  .press-book__title { font-size: .89rem; }
  .press-book__link,
  .press-book__pending { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .press-book,
  .press-book__link { transition: none; }
}