/* Press page: Selected Press (videos and a table with years) and
   Additional Press (tables grouped by year). Tables use the same
   look as the original press table (content.css). */

.press-table { width: 100%; }
.press-table .press-outlet { width: 15vw; }
.press-year { width: 4rem; text-align: right; color: var(--muted); white-space: nowrap; padding-left: 1rem !important; }

/* Small tag after a title: Podcast, Radio, Video, a language, or "No longer online". */
.press-note {
  margin-left: 0.4em; color: var(--muted); font-size: 0.8em;
  font-family: var(--font-header); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap;
}

/* Year / exhibition headings above each table (Press and Exhibitions pages). */
.page-content h5.press-group {
  margin: 4rem 0 0.8rem;
  font-size: 1.6rem; line-height: 1.9rem; letter-spacing: 0.06em;
}
@media (max-width: 767px) {
  .page-content h5.press-group { margin-top: 3rem; font-size: 1.25rem; line-height: 1.5rem; }
}

.press-video { margin: 0 0 3rem; }
.press-caption {
  margin: 1rem 0 0 !important; font-family: var(--font-header); text-transform: uppercase;
  font-size: 1rem; letter-spacing: 0.05em;
}

@media (max-width: 767px) {
  .press-table { font-size: 1rem; }
  .press-table .press-outlet { width: 28vw; padding-right: 0.8rem !important; }
  .press-year { width: 2.5rem; padding-left: 0.6rem !important; }
}

/* Awards section: award logos, each linked to its announcement.
   Six across on large screens, three across (two rows) on tablets,
   two across (three rows) on phones. --h sets each logo's height so
   they look about the same size. */
.page-content .award-logos {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr); align-items: center; gap: 2.5rem 2rem;
}
.page-content .award-logos li { padding: 0; display: flex; justify-content: center; }
.page-content .award-logos a { border: 0; display: block; }
.page-content .award-logos img { display: block; height: var(--h); width: auto; max-width: 100%; opacity: 0.9; transition: opacity 0.2s; }
.page-content .award-logos a:hover img { opacity: 1; }
@media (max-width: 1023px) {
  .page-content .award-logos { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .page-content .award-logos { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
  .page-content .award-logos img { height: calc(var(--h) * 0.8); }
}