/* ==========================================================================
   Academic Patent & IPR  —  /page/academic-patent-ipr/
   Loaded ALONGSIDE two shared files: page-head.css for the photo banner and
   the section heading with its rule, and tabs.css for the two pills and the
   show/hide of the panels. This file is only the invention cards.
   ========================================================================== */
.patent-section { background: var(--page); }

/* Two words in the heading, so the 62px default rule under it is right as it
   stands — no override, unlike the wider one Recognition & Approvals needs. */

/* =========================================================== CARDS ======= */
/* One card per invention. A list rather than a stack of divs, so a screen
   reader announces how many patents are in the batch before reading them.

   TWO COLUMNS FROM 860px. At one column a card is a band of white the width
   of the page with three short lines in it, and forty-one of those is a very
   long page; the titles are short enough to sit happily in half the width.

   The list ran in batches under the date each was published until the
   University asked for those headings off. Publication order survives them -
   data.patents() does the sorting - so this is now one grid of forty-one. */
.patent-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 860px) {
  .patent-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.patent-card {
  display: flex;
  flex-direction: column;
  padding: 16px 20px 14px;
  background: var(--paper);
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
  box-shadow: var(--shadow-xs);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.patent-card:hover {
  transform: translateY(-2px);
  border-left-color: var(--accent-deep);
  box-shadow: var(--shadow-sm, 0 6px 18px rgba(10, 10, 10, .09));
}
@media (prefers-reduced-motion: reduce) {
  .patent-card { transition: none; }
  .patent-card:hover { transform: none; }
}

/* THE APPLICATION NUMBER LEADS. Several of these titles share their opening
   words; the number is what tells one row from another, and what the office
   is asked for when someone writes in about a patent. Tabular figures so the
   twelve digits line up down the column. */
.patent-card__no {
  margin: 0;
  color: var(--accent-deep);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}

.patent-card__title {
  margin: 7px 0 0;
  color: var(--ink);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.5;
}

/* Pushed to the bottom of the card so the links line up across a row of two
   whether the titles run to one line or three. */
.patent-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin: auto 0 0;
  padding-top: 12px;
}
.patent-card__filed {
  color: var(--muted);
  font-size: .78rem;
}

.patent-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-deep);
  font-size: .8rem;
  font-weight: 800;
}
.patent-card__link svg { fill: currentColor; }
.patent-card__link:hover { text-decoration: underline; }
.patent-card__link:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* Shown in place of the link when the document named in data.PATENTS has not
   been uploaded yet — see the doc_url note in the include. Without it the card
   would simply end after the filing date with no hint that a file is coming. */
.patent-card__pending {
  color: var(--muted);
  font-size: .78rem;
  font-style: italic;
}

/* A whole panel with nothing in it yet. */
.patent-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: 575.98px) {
  .patent-card { padding: 14px 16px 12px; }
  .patent-card__title { font-size: .92rem; }
  /* The date and the link stack rather than sitting at opposite ends of a
     narrow card, where "Filed 25 April 2025" would wrap under itself. */
  .patent-card__foot { justify-content: flex-start; gap: 4px 14px; }
}