/* Page-specific media and icon sizing. Typography, cards, buttons and colors
   use the same shared theme classes as the Writings and About pages. */
.library-index,
.library-home,
.example-page {
  --link-color: var(--text-color);
  --bs-link-color: var(--text-color);
  --bs-link-hover-color: var(--signal);
}

.library-index a:hover,
.library-home a:hover,
.example-page a:hover {
  color: var(--signal);
}

.library-index a:focus-visible,
.library-home a:focus-visible,
.example-page a:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 4px;
}

.example-page .btn-brand:hover {
  background: var(--card-bg);
  border-color: var(--signal);
}

.library-name {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  max-width: 100%;
  vertical-align: middle;
}

.library-name > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.library-icon {
  flex: 0 0 auto;
  width: 1.5em;
  height: 1.5em;
  object-fit: contain;
}

.library-section {
  padding: 1.5rem 0;
  scroll-margin-top: 6rem;
}

.example-card .thumb,
.library-home .thumb {
  display: block;
  height: auto;
  aspect-ratio: 3 / 2;
  margin: 0;
}

.wcard .photo-thumb {
  padding: 0;
}

.wcard .photo-thumb img {
  object-fit: cover;
}

.photo-credit {
  margin: 0;
  padding: 0.5rem 1.2rem;
  font-size: 0.65rem;
  line-height: 1.5;
  color: var(--text-muted-color);
}

.simulation-preview video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
}

.simulation-preview video:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

.example-cover {
  margin: 1.5rem 0 2rem;
}

.example-cover img,
.example-cover video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 640px;
  object-fit: contain;
}

.example-cover figcaption,
.example-material figcaption {
  margin-top: 0.5rem;
  font-size: 0.8rem;
}

.example-material {
  padding: 1rem;
  margin: 1.5rem 0;
  border: 1px solid var(--main-border-color);
  background: var(--card-bg);
}

.example-material > img {
  display: block;
  max-width: 100%;
  max-height: 760px;
  height: auto;
  margin: auto;
}

.example-material > video {
  height: auto;
  max-height: 640px;
}