/* Public catalog layout using the documentation palette. */
.ph-gallery {
  --gallery-surface: var(--surface, var(--lf-surface, #fff));
  --gallery-soft: var(--surface-2, var(--lf-surface-2, #eff2f6));
  --gallery-border: var(--hairline, var(--lf-hairline, #dce2e9));
  --gallery-input-border: var(--lf-input-border, #c9cfd8);
  --gallery-text: var(--text, var(--lf-text, #0d1117));
  --gallery-muted: var(--text-2, var(--lf-text-2, #586371));
  --gallery-link: var(--link, var(--lf-link, #00658a));
  color: var(--gallery-text); margin-top: 32px; font-size: 14px; line-height: 1.6;
  scroll-margin-top: 5rem;
}
.ph-gallery [hidden] { display: none !important; }
.ph-gallery button, .ph-gallery input { font: inherit; }
.ph-gallery button { cursor: pointer; }
.ph-gallery button:focus-visible, .ph-gallery input:focus-visible, .ph-gallery a:focus-visible {
  outline: 2px solid var(--gallery-link); outline-offset: 4px;
}
.ph-gallery .gallery-search-row { display: flex; gap: 20px; align-items: flex-end; }
.ph-gallery .gallery-preview-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.ph-gallery .gallery-preview-row p { margin: 0; max-width: 58ch; font-size: 13px; color: var(--gallery-muted); }
.ph-gallery .gallery-search-field { flex: 1; min-width: 0; }
.ph-gallery label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; }
.ph-gallery input[type="search"] {
  display: block; width: 100%; padding: 12px 15px; color: var(--gallery-text); background: var(--gallery-surface);
  border: 1px solid var(--gallery-input-border); border-radius: 7px; appearance: auto; font-size: 15px; line-height: 1.5;
}
.ph-gallery input::placeholder { color: var(--gallery-muted); opacity: 1; }
.ph-gallery .gallery-reset, .ph-gallery .gallery-motion {
  flex-shrink: 0; border: 1px solid var(--gallery-border); border-radius: 7px; padding: 12px 16px;
  background: transparent; color: var(--gallery-text); font-size: 13px; line-height: 1.7; white-space: nowrap;
  min-height: 44px;
}
.ph-gallery .gallery-reset:hover, .ph-gallery .gallery-motion:hover { background: var(--gallery-soft); }
.ph-gallery .gallery-motion { border-color: var(--gallery-input-border); }
.ph-gallery .gallery-reset:disabled { color: var(--gallery-muted); opacity: .65; cursor: default; }
.ph-gallery .gallery-filters { border: 0; padding: 0; margin: 22px 0 0; min-width: 0; }
.ph-gallery legend { margin-bottom: 10px; padding: 0; color: var(--gallery-muted); font-size: 12px; font-weight: 550; }
.ph-gallery .gallery-tags, .ph-gallery .gallery-card-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ph-gallery .gallery-tag, .ph-gallery .gallery-tag-label {
  display: inline-flex; align-items: center; padding: 6px 11px; border: 1px solid var(--gallery-border); border-radius: 5px;
  color: var(--gallery-muted); background: transparent; font-size: 12px; line-height: 1.4; font-weight: 500;
}
.ph-gallery .gallery-tag:hover { color: var(--gallery-text); background: var(--gallery-soft); }
.ph-gallery button.gallery-tag { min-height: 44px; }
.ph-gallery .gallery-tag[aria-pressed="true"] { border-color: var(--gallery-link); color: var(--gallery-link); background: var(--gallery-soft); }
.ph-gallery .gallery-tag[aria-pressed="true"]::before { content: "✓"; margin-right: 6px; }
.ph-gallery .gallery-filter-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 0 22px; border-bottom: 1px solid var(--gallery-border); }
.ph-gallery .gallery-filter-meta p { margin: 0; color: var(--gallery-muted); font-size: 12px; }
.ph-gallery .gallery-filter-meta .gallery-count { flex-shrink: 0; font-weight: 550; color: var(--gallery-text); }
.ph-gallery .gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 22px; margin-top: 28px; }
.ph-gallery .gallery-card { min-width: 0; }
.ph-gallery .gallery-card-link { display: block; color: var(--gallery-text); text-decoration: none; }
.ph-gallery .gallery-card-link:hover { text-decoration: none; }
.ph-gallery .gallery-card-link:hover .gallery-card-title,
.ph-gallery .gallery-card-link:focus-visible .gallery-card-title { color: var(--gallery-link); }
.ph-gallery picture { display: block; overflow: hidden; border: 1px solid var(--gallery-border); border-radius: 8px; }
.ph-gallery picture img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: 0; background: var(--gallery-surface); }
.ph-gallery .gallery-card-title { margin: 18px 0 10px; max-width: none; color: var(--gallery-text); font-size: 18px; line-height: 1.35; font-weight: 600; letter-spacing: -.015em; }
.ph-gallery .gallery-summary { margin: 0; color: var(--gallery-muted); font-size: 14px; line-height: 1.6; }
.ph-gallery .gallery-card-tags { margin-top: 16px; gap: 6px; }
.ph-gallery .gallery-card-tags .gallery-tag, .ph-gallery .gallery-card-tags .gallery-tag-label { font-size: 12px; padding: 4px 8px; }
.ph-gallery .gallery-empty { padding: 45px 24px; border: 1px solid var(--gallery-border); border-radius: 8px; margin-top: 28px; text-align: center; }
.ph-gallery .gallery-empty p { margin: 0 0 6px; font-size: 18px; font-weight: 550; }
.ph-gallery .gallery-empty span { display: block; color: var(--gallery-muted); }
.ph-gallery .gallery-empty button { margin-top: 22px; }
@media (max-width: 820px) {
  .ph-gallery .gallery-grid { gap: 30px 20px; }
}
@media (max-width: 600px) {
  .ph-gallery .gallery-grid { grid-template-columns: 1fr; gap: 32px; }
  .ph-gallery .gallery-search-row { gap: 10px; }
  .ph-gallery input[type="search"] { font-size: 16px; }
  .ph-gallery .gallery-reset { padding: 12px 10px; font-size: 12px; }
  .ph-gallery .gallery-filter-meta { align-items: flex-start; }
  .ph-gallery .gallery-filter-meta p:first-child { max-width: 23ch; }
  .ph-gallery .gallery-tag { padding: 7px 10px; }
  .ph-gallery .gallery-card-tags .gallery-tag { padding: 6px 9px; }
}

/* Match the gallery type scale despite the documentation heading defaults. */
.md-typeset .ph-gallery h2.gallery-card-title { margin: 16px 0 10px; font-size: 18px; line-height: 1.35; }
@media (max-width: 600px) {
  .ph-gallery .gallery-preview-row { align-items: flex-start; flex-direction: column; gap: 12px; }
}
@media (max-width: 420px) {
  .ph-gallery .gallery-search-row { align-items: stretch; flex-direction: column; }
  .ph-gallery .gallery-reset { align-self: flex-start; font-size: 13px; }
  .ph-gallery .gallery-filter-meta { flex-direction: column; gap: 8px; }
  .ph-gallery .gallery-filter-meta p:first-child { max-width: none; }
}